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排＆＃39;列不相互对齐。

<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执行此操作，您必须使用每行的列定义和计算子控件的布局来实现自己的网格控件。

WPF网格不同的柱尺寸＆amp;位置

3 个答案: