WPF网格不同的列大小和位置

Question

我试图实现这种网格：

所以我需要一个Grid，如果它们位于不同的行中，那么两列可以是不同的。 （行也应该是一样的）。

到目前为止，我的网格看起来像这样

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

    <Label Content="Left" Grid.Column="0" />
        <GridSplitter HorizontalAlignment="Right" 
              VerticalAlignment="Stretch" 
              Grid.Column="1" ResizeBehavior="PreviousAndNext"
              Width="5" Background="#FFBCBCBC"/>
    <Label Content="Right" Grid.Column="2" />

    <GridSplitter HorizontalAlignment="Stretch"
                  ResizeDirection="Rows"
              VerticalAlignment="Stretch" 
              Grid.Column="0"  Grid.Row="1" Grid.ColumnSpan="3" ResizeBehavior="PreviousAndNext"
              Height="5" Background="#FFBCBCBC"/>

    <Label Content="Left" Grid.Column="0" Grid.Row="2"/>
    <GridSplitter HorizontalAlignment="Right" 
              VerticalAlignment="Stretch" 
              Grid.Column="1" Grid.Row="2" ResizeBehavior="PreviousAndNext"
              Width="5" Background="#FFBCBCBC"/>
    <Label Content="Right" Grid.Column="2" Grid.Row="2" />
</Grid>

我怎样才能做到这一点？

Answer 1

你可以在里面使用多个Grids ：

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

        <!-- First Row-->
        <Grid>

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


            <Label Content="Left" Grid.Column="0" />

            <GridSplitter HorizontalAlignment="Right" 
                          VerticalAlignment="Stretch" 
                          Grid.Column="1" 
                          ResizeBehavior="PreviousAndNext"
                          Width="5" 
                          Background="#FFBCBCBC"
                          />

            <Label Content="Right" 
                   Grid.Column="2" 
                   />
        </Grid>



        <GridSplitter HorizontalAlignment="Stretch"
                  ResizeDirection="Rows"
              VerticalAlignment="Stretch" 
              Grid.Column="0"  Grid.Row="1" Grid.ColumnSpan="3" ResizeBehavior="PreviousAndNext"
              Height="5" Background="#FFBCBCBC"/>

        <!-- Second Row -->
        <Grid Grid.Row="2">

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


            <Label Content="Left" 
                   Grid.Column="0" 
                   Grid.Row="2"
                   />

            <GridSplitter HorizontalAlignment="Right" 
                          VerticalAlignment="Stretch" 
                          Grid.Column="1" 
                          Grid.Row="2" 
                          ResizeBehavior="PreviousAndNext"
                          Width="5" 
                          Background="#FFBCBCBC"
                          />

            <Label Content="Right" 
                   Grid.Column="2" 
                   Grid.Row="2" 
                   />

        </Grid>

    </Grid>

最后你不想通过GridSplitter影响其他行 - 所以只需每行使用一个Grid 。 这通常不太好，你更喜欢Grid.ColumnSpan和Grid.RowSpan ，但在你的问题中，这是最简单的解决方案。

Answer 2

垂直使用3行，第1行和第3行各有3列。 3行列彼此不对齐。

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

    <GridSplitter HorizontalAlignment="Stretch"
          ResizeDirection="Rows"
          VerticalAlignment="Stretch" 
          Grid.Column="0"  Grid.Row="1" ResizeBehavior="PreviousAndNext"
          Height="5" Background="#FFBCBCBC"/>

    <GridSplitter HorizontalAlignment="Stretch"
          ResizeDirection="Rows"
          VerticalAlignment="Stretch" 
          Grid.Column="0"  Grid.Row="3" ResizeBehavior="PreviousAndNext"
          Height="5" Background="#FFBCBCBC"/>

    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <GridSplitter HorizontalAlignment="Right" 
          VerticalAlignment="Stretch" 
          Grid.Column="1"  ResizeBehavior="PreviousAndNext"
          Width="5" Background="#FFBCBCBC"/>
    </Grid>

    <Grid Grid.Row="4">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <GridSplitter HorizontalAlignment="Right" 
          VerticalAlignment="Stretch" 
          Grid.Column="1"  ResizeBehavior="PreviousAndNext"
          Width="5" Background="#FFBCBCBC"/>
    </Grid>
</Grid>

Answer 3

解决方案取决于您是否希望解决图像中显示的单个问题，或者您是否需要通用解决方案。 对于此特定设置，您可以定义三列，然后为第一行定期使用第一列，第二Grid.ColumnSpan=2添加到子控件。 这将合并第二和第三列。 对于第二行，使用Grid.ColumnSpan=3并且将合并所有列。 对于第二行，使用Grid.ColumnSpan=2作为第一列中的内容。

您可以在不同的配置中使用类似的方法。 但是，如果您需要完全通用的解决方案，则无法使用常规Grid执行此操作，您必须实现自己的网格控件，其中每行的列定义和计算子控件的布局。