在 xaml 中将第一列的宽度设置为等于网格宽度减去第二列的宽度
Set width of first column equal to width of grid minus second column in xaml
如何在 XAML 中设置第一列的宽度等于网格的宽度减去第二列的宽度?我需要这样做,因为我会用铅笔定制 TextBox
。
我的资源字典中的代码 (在我的问题的底部) 在我添加了一些案例的地方给了我这个结果。前四个是 TextBox
目前的情况。最后一个是我希望 TextBox
的样子。请注意,这是通过将文本设置为等于很多空格来临时解决的。
(点击图片全屏查看)
在这里你可以看到上图的代码:
<TextBox Grid.Row="0" Margin="5" Text=""/>
<TextBox Grid.Row="1" Margin="5" Text="Plop"/>
<TextBox Grid.Row="2" Margin="5" Text="Ploperdeplop"/>
<TextBox Grid.Row="3" Margin="5" Text="Ploperdeploperdeploperdeplop"/>
<TextBox Grid.Row="4" Margin="5" Text=" ">
另请注意,下面 ControlTemplate
中的第一列必须延伸到孔 Grid
上。如果 ControlTemplate
的宽度为 150px,第二列 (带有铅笔的列) 为 50px,则第一列 (带有 [=13 的列) =]) 的宽度必须为 100px。如果网格是 300px 并且第二列再次相同 (50px),第一列必须是 250px 宽度。
这是我的资源词典的一部分。
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="#FF333333"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups...>
<Grid x:Name="grdRoot" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/> <!-- this column (index zero) must have a width of the width of the grid minus the second column (index one)-->
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="txbText" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TextBox}}, Path=Text}" Style="{x:Null}" BorderBrush="{x:Null}"
Grid.Column="0" Focusable="{TemplateBinding Focusable}" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"/>
<Button x:Name="btnPencil" Grid.Column="1" Focusable="False" HorizontalAlignment="Left" Margin="3,0,3,0" Grid.Row="0" VerticalAlignment="Top" Width="20">
<Button.Content>
<fa:ImageAwesome Icon="Pencil"/>
</Button.Content>
</Button>
</Grid>
</Border>
<ControlTemplate.Triggers...>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
(代码中的...
表示该部分已折叠)
根据@ASh 的评论,我通过将 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
更改为 HorizontalAlignment="Strech"
for grdRoot
.
解决了我的问题
grdRoot
HorizontalAlignment 绑定到默认为 Left 的 TextBox HorizontalContentAlignment。将 HorizontalAlignment 更改为 Stretch 以获得所需的效果
<Grid x:Name="grdRoot"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
我稍后会为 txbText
元素应用 HorizontalContentAlignment
<TextBox x:Name="txbText"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ...
如何在 XAML 中设置第一列的宽度等于网格的宽度减去第二列的宽度?我需要这样做,因为我会用铅笔定制 TextBox
。
我的资源字典中的代码 (在我的问题的底部) 在我添加了一些案例的地方给了我这个结果。前四个是 TextBox
目前的情况。最后一个是我希望 TextBox
的样子。请注意,这是通过将文本设置为等于很多空格来临时解决的。
在这里你可以看到上图的代码:
<TextBox Grid.Row="0" Margin="5" Text=""/>
<TextBox Grid.Row="1" Margin="5" Text="Plop"/>
<TextBox Grid.Row="2" Margin="5" Text="Ploperdeplop"/>
<TextBox Grid.Row="3" Margin="5" Text="Ploperdeploperdeploperdeplop"/>
<TextBox Grid.Row="4" Margin="5" Text=" ">
另请注意,下面 ControlTemplate
中的第一列必须延伸到孔 Grid
上。如果 ControlTemplate
的宽度为 150px,第二列 (带有铅笔的列) 为 50px,则第一列 (带有 [=13 的列) =]) 的宽度必须为 100px。如果网格是 300px 并且第二列再次相同 (50px),第一列必须是 250px 宽度。
这是我的资源词典的一部分。
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="#FF333333"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups...>
<Grid x:Name="grdRoot" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/> <!-- this column (index zero) must have a width of the width of the grid minus the second column (index one)-->
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="txbText" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TextBox}}, Path=Text}" Style="{x:Null}" BorderBrush="{x:Null}"
Grid.Column="0" Focusable="{TemplateBinding Focusable}" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"/>
<Button x:Name="btnPencil" Grid.Column="1" Focusable="False" HorizontalAlignment="Left" Margin="3,0,3,0" Grid.Row="0" VerticalAlignment="Top" Width="20">
<Button.Content>
<fa:ImageAwesome Icon="Pencil"/>
</Button.Content>
</Button>
</Grid>
</Border>
<ControlTemplate.Triggers...>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
(代码中的...
表示该部分已折叠)
根据@ASh 的评论,我通过将 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
更改为 HorizontalAlignment="Strech"
for grdRoot
.
grdRoot
HorizontalAlignment 绑定到默认为 Left 的 TextBox HorizontalContentAlignment。将 HorizontalAlignment 更改为 Stretch 以获得所需的效果
<Grid x:Name="grdRoot"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
我稍后会为 txbText
元素应用 HorizontalContentAlignment
<TextBox x:Name="txbText"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ...