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

Question

我正在尝试实现这种网格:

所以我需要一个网格，其中如果两列位于不同的行中，则它们可以不同。 (对于行也应该是一样的)。

我的网格目前看起来是这样的

 <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，但在您的问题中，这是最简单的解决方案。