我如何使所有文本框在wpf中对齐在同一垂直位置？

Posted 2021-04-27

嗨，我在wpf中创建了标签和文本框，但是文本框以不同的位置开始。如何使所有文本框对齐在同一垂直位置？

    <DockPanel LastChildFill="True"
    HorizontalAlignment="Stretch">
    <Label DockPanel.Dock="Left"
   Style="{DynamicResource EditorHLabelNoIdentStyle}" Content="{x:Static r:Resources.LABEL_POSITION}"/> 
   <TextBox ToolTip="{x:Static r:Resources.LABEL_POSITION_TIP}"
  Style="{DynamicResource EditorTextBoxStyle}" Text="{Binding XPath=nameofthedataset, Mode=TwoWay}"/>
   </DockPanel>
<DockPanel LastChildFill="True"
    HorizontalAlignment="Stretch">
    <Label DockPanel.Dock="Left"
   Style="{DynamicResource EditorHLabelNoIdentStyle}" Content="{x:Static r:Resources.LABEL_POSITION}"/> 
   <TextBox ToolTip="{x:Static r:Resources.LABEL_POSITION_TIP}"
  Style="{DynamicResource EditorTextBoxStyle}" Text="{Binding XPath=keywords, Mode=TwoWay}"/>
   </DockPanel>

答案

每行分别使用带有两个Grid和一个ColumnDefinitions的RowDefinition，然后设置Grid.Row和Grid.Column附加属性指定每个元素在Grid中的位置：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <Label DockPanel.Dock="Left" Style="{DynamicResource EditorHLabelNoIdentStyle}" Content="{x:Static r:Resources.LABEL_POSITION}"/>
    <TextBox Grid.Column="1" ToolTip="{x:Static r:Resources.LABEL_POSITION_TIP}" Style="{DynamicResource EditorTextBoxStyle}" 
                     Text="{Binding XPath=nameofthedataset, Mode=TwoWay}"/>

    <Label Grid.Row="1" DockPanel.Dock="Left" Style="{DynamicResource EditorHLabelNoIdentStyle}" Content="{x:Static r:Resources.LABEL_POSITION}"/>
    <TextBox Grid.Row="1" Grid.Column="1" ToolTip="{x:Static r:Resources.LABEL_POSITION_TIP}"
                     Style="{DynamicResource EditorTextBoxStyle}" Text="{Binding XPath=keywords, Mode=TwoWay}"/>

</Grid>

另一答案

对于许多行，将标签或texblocks和文本框设置为行和列很快会有点乏味。您可以改用标准模板将内容排列在堆栈面板中。

headeredcontentcontrol具有一个带有堆栈面板的模板，用于在其内容上方放置标题。该xaml重新模板化以使用具有两列的网格。第一个的大小在包含stackpanel的范围内共享。您也可以通过将其应用到模板中来避免重复所有标准样式。

为了清晰起见，我的标记使用简化的示例控件。

您的文本框（或您要标记的任何控件）以及绑定，工具提示等都应包含在headeredcontentcontrol的内容中。标签从header属性获取其值。

列上的共享大小范围和自动大小表示所有实例最终都具有该堆栈面板请求的标签所需的最大宽度。因此，控件（文本框）的右列对齐。

    <StackPanel Grid.IsSharedSizeScope="True">
        <StackPanel.Resources>
            <Style TargetType="HeaderedContentControl">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="HeaderedContentControl">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition SharedSizeGroup="L" Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Label Content="{TemplateBinding Header}"
                                       Margin="2,2,4,2"
                                           />
                                <ContentControl Content="{TemplateBinding Content}"
                                                Grid.Column="1"
                                                />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>
        <HeaderedContentControl Header="Label 1:">
            <TextBox Text="Some textbox"/>
        </HeaderedContentControl>
        <HeaderedContentControl Header="A much longer label:">
            <TextBox Text="A second textbox"/>
        </HeaderedContentControl>
    </StackPanel>