wpf - 需要帮助对齐 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

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

Answer 1

有点 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" .