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>

我已经完成了大量现有问题，并对每个答案进行了实验（几个例子）

（未来问题搜索者的背景：工具用于浏览日志文件。选择文件夹路径 - ＆gt;组合框填充文件名 - ＆gt;选择要加载到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"。

Answer 2

使用您使用的相同模式，因此使用Grid Inside的GroupBox，删除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>

这是结果

Final Result

希望它有所帮助。

需要帮助在WPF中对齐控件

2 个答案: