需要帮助对齐 WPF 中的控件

Question

我需要有关 WPF 应用程序布局的帮助。

我尝试了DockPanel、StackPanel、WrapPanel、Grid 和 UniformGrid 的不同组合。 但我似乎无法对齐所有控件的文本。我知道由于控件大小，复选框不会对齐，但第一个应该仍然对齐。

您会如何安排这些控件？

| GroupBox | GroupBox   |                 |
|  -> cbx     ->tbx+lbl | TextBox+button  |
|  -> cbx     ->tbx+lbl | ComboBox+button |
| TabControl                              |

我一直在尝试将所有控件的大小调整为默认高度 23，但由于我尝试使用的边距，这似乎使事情变得更糟。

<Grid x:Name="MasterGrid" Margin="10">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <DockPanel Grid.Row="0">
            <GroupBox Header="CheckBox" Margin="5 0 0 0">
                <StackPanel Margin="5">
                    <StackPanel.Resources>
                        <Style TargetType="{x:Type CheckBox}">
                            <Setter Property="Margin" Value="0 5 0 0"/>
                        </Style>
                    </StackPanel.Resources>
                    <CheckBox Content="XXXX"/>
                    <CheckBox Content="XXXX"/>
                </StackPanel>
            </GroupBox>

            <GroupBox Header="Label + TextBox" Margin="5 0 0 0">
                <StackPanel Grid.IsSharedSizeScope="True">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" SharedSizeGroup="Label"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Content="XXXX:" Margin="0 5 0 0" Height="23"/>
                        <TextBox Grid.Column="1" Text="XXXX" VerticalContentAlignment="Center" Margin="0 5 5 0" Height="23"/>
                    </Grid>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" SharedSizeGroup="Label"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Content="XXXX:" Margin="0 5 0 0"/>
                        <TextBox Grid.Column="1" Text="XXXX" VerticalContentAlignment="Center" Margin="0 5 5 0" Height="23"/>
                    </Grid>
                </StackPanel>
            </GroupBox>

            <Grid VerticalAlignment="Center" Margin="0 5 0 0">
                <Grid.Resources>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="Height" Value="23"/>
                        <Setter Property="Margin" Value="5 5 0 0"/>
                        <Setter Property="Width" Value="75"/>
                    </Style>
                    <Style TargetType="{x:Type TextBox}">
                        <Setter Property="Height" Value="23"/>
                        <Setter Property="Margin" Value="5 5 0 0"/>
                    </Style>
                    <Style TargetType="{x:Type ComboBox}">
                        <Setter Property="Height" Value="23"/>
                        <Setter Property="Margin" Value="5 5 0 0"/>
                    </Style>
                </Grid.Resources>

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

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <TextBox  Grid.Row="0" Grid.Column="0" Text="XXXXXXXXXX" VerticalContentAlignment="Center"/>
                <Button   Grid.Row="0" Grid.Column="1" Content="Browse"/>
                <Button   Grid.Row="1" Grid.Column="1" Content="Load"/>
                <ComboBox Grid.Row="1" Grid.Column="0" SelectedItem="XXXXXXXXXX"/>
            </Grid>
        </DockPanel>

        <!-- Imported Data Collection -->
        <TabControl Grid.Row="1" Margin="0 5 0 5"/>
    </Grid>

我已经解决了大量现有问题并尝试了每个答案（几个示例）

• Understanding Uniform Grid control
• WPF layout problem with Grid.IsSharedSizeScope and ItemsControl.ItemTemplate
• How do I layout a form in WPF using grid or other controls for maintainability

（未来问题搜索者的背景：工具用于浏览日志文件。选择文件夹路径 -> 组合框填充文件名 -> 选择要加载到 tabcontrol 的文件。两个组框包含有关如何处理不同文件的选项格式）

Answer 1

使用您使用的相同模式，因此带有 Grid Inside 的 GroupBoxes，删除 DockPanel，对 Rows 定义的 Height 属性应用简单的规则，如“23”，所有控件都将对齐。

这是代码：

<Grid x:Name="MasterGrid" Margin="10">

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

        <GroupBox Grid.Row="0" Grid.Column="0" Header="CheckBox" Margin="5 0 0 0">                
            <StackPanel Margin="5">
                <StackPanel.Resources>
                    <Style TargetType="{x:Type CheckBox}">
                        <Setter Property="Margin" Value="0 5 0 0"/>                       
                    </Style>
                </StackPanel.Resources>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <CheckBox Grid.Row="0" Content="XXXX" Height="23" Margin="0 5 0 0"/>
                    <CheckBox Grid.Row="1" Content="XXXX" Height="23" Margin="0 5 0 0"/>
                </Grid>
            </StackPanel>
        </GroupBox>

        <GroupBox Grid.Row="0" Grid.Column="1" Header="Label + TextBox" Margin="5 0 0 0">
            <StackPanel Grid.IsSharedSizeScope="True">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Label"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" Content="XXXX:" Margin="0 5 0 0" Height="23"/>
                    <TextBox Grid.Column="1" Text="XXXX" VerticalContentAlignment="Center" Margin="0 5 5 0" Height="23"/>
                </Grid>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Label"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" Content="XXXX:" Margin="0 5 0 0"/>
                    <TextBox Grid.Column="1" Text="XXXX" VerticalContentAlignment="Center" Margin="0 5 5 0" Height="23"/>
                </Grid>
            </StackPanel>
        </GroupBox>

        <GroupBox  Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2"  VerticalAlignment="Center" Margin="0 5 0 0">
        <Grid>
            <Grid.Resources>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Height" Value="23"/>
                    <Setter Property="Margin" Value="5 5 0 0"/>
                    <Setter Property="Width" Value="75"/>
                </Style>
                <Style TargetType="{x:Type TextBox}">
                    <Setter Property="Height" Value="23"/>
                    <Setter Property="Margin" Value="5 5 0 0"/>
                </Style>
                <Style TargetType="{x:Type ComboBox}">
                    <Setter Property="Height" Value="23"/>
                    <Setter Property="Margin" Value="5 5 0 0"/>
                </Style>
            </Grid.Resources>

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

            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>

            <TextBox  Grid.Row="0" Grid.Column="0" Text="XXXXXXXXXX" VerticalContentAlignment="Center"  Margin="0 5 5 0"/>
            <Button   Grid.Row="0" Grid.Column="1" Content="Browse"  Margin="0 5 5 0"/>
            <Button   Grid.Row="1" Grid.Column="1" Content="Load"  Margin="0 5 5 0"/>
            <ComboBox Grid.Row="1" Grid.Column="0" SelectedItem="XXXXXXXXXX"  Margin="0 5 5 0"/>
        </Grid>
        </GroupBox>

        <!-- Imported Data Collection -->
        <TabControl Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" Margin="0 5 0 5"/>
    </Grid>

这是结果

希望对你有帮助。

Answer 2

有点 hacky，因为出现在组框中的项目实际上并不位于其中，但对齐似乎是正确的。我调整了一些尺寸和边距以更符合 Windows UI 指南。

<Grid x:Name="MasterGrid" Margin="11">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>

  <Grid>
    <Grid.Resources>
      <Style TargetType="Label">
        <Setter Property="Padding" Value="0,0,5,0"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
      </Style>
      <Style TargetType="CheckBox">
        <Setter Property="Padding" Value="0,0,5,0"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
      </Style>
      <Style TargetType="TextBox">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="MinHeight" Value="23"/>
        <Setter Property="MinWidth" Value="75"/>
      </Style>
      <Style TargetType="ComboBox">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="MinHeight" Value="23"/>
        <Setter Property="MinWidth" Value="75"/>
      </Style>
      <Style TargetType="Button">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="MinHeight" Value="23"/>
        <Setter Property="MinWidth" Value="75"/>
      </Style>
    </Grid.Resources>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="7" />
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="11"/>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="7" />
      <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" MinHeight="23"/>
      <RowDefinition Height="Auto" MinHeight="23"/>
      <RowDefinition Height="7"/>
      <RowDefinition Height="Auto" MinHeight="23"/>
      <RowDefinition Height="Auto" MinHeight="11"/>
    </Grid.RowDefinitions>

    <GroupBox Grid.Column="0" Grid.RowSpan="5" Header="CheckBox"/>

    <CheckBox Grid.Column="0" Grid.Row="1" Margin="11,0" Content="XXXX"/>
    <CheckBox Grid.Column="0" Grid.Row="3" Margin="11,0" Content="XX"/>

    <GroupBox Grid.Column="2" Grid.RowSpan="5" Margin="0,0,0,0" Header="TextBox"/>

    <Grid Grid.Column="2" Grid.Row="1" Grid.RowSpan="3" Margin="11,0,11,0">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="7"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>

      <Label Grid.Column="0" Grid.Row="0" Content="XXXX"/>
      <TextBox Grid.Column="1" Grid.Row="0"/>

      <Label Grid.Column="0" Grid.Row="2" Content="XX"/>
      <TextBox Grid.Column="1" Grid.Row="2"/>
    </Grid>

    <Label Grid.Column="4" Grid.Row="1" Content="XXXX"/>
    <TextBox Grid.Column="5" Grid.Row="1" />
    <Button Grid.Column="7" Grid.Row="1" Content="XXXX"/>

    <Label Grid.Column="4" Grid.Row="3" Content="XXXXXX"/>
    <ComboBox Grid.Column="5" Grid.Row="3" />
    <Button Grid.Column="7" Grid.Row="3" Content="XXXX"/>
  </Grid>

  <!-- Imported Data Collection -->
  <TabControl Grid.Row="1" Margin="0,11,0,0"/>
</Grid>

为了更好地了解上部网格是如何分割的（直接在MasterGrid 中的那个），请设置ShowGridLines="True"。