使 GridSplitter 跨行工作

Question

我正在尝试让GridSplitter 跨网格中的行工作：

但是，RowSpan 属性在此控件的情况下似乎不起作用。

如何让GridSplitter 在我的网格表中工作并在移动时共享列宽？

这是我的代码：

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

        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".3*" MinWidth="100" />
                <ColumnDefinition Width="2" />
                <ColumnDefinition Width="*" MinWidth="400" />
            </Grid.ColumnDefinitions>

            <Grid.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="Padding" Value="3" />
                    <Setter Property="Foreground" Value="Silver" />
                    <Setter Property="FontWeight" Value="Bold" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                </Style>
                <Style TargetType="Border">
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="BorderBrush" Value="Silver" />
                    <Setter Property="Background" Value="Black" />
                </Style>
            </Grid.Resources>

            <Border Grid.Column="0">
                <TextBlock Text="First Column" />
            </Border>

            <GridSplitter
                Grid.RowSpan="1"
                Grid.Column="1"
                HorizontalAlignment="Stretch"
                ShowsPreview="True" />

            <Border Grid.Column="2">
                <TextBlock Text="Second Column" />
            </Border>
        </Grid>

        <Grid
            Grid.Row="1"
            Height="400"
            Background="Silver">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".3*" MinWidth="100" />
                <ColumnDefinition Width="*" MinWidth="400" />
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0">
                <TextBlock
                    FontSize="30"
                    Foreground="Red"
                    Text="First Column Content" />
            </StackPanel>

            <StackPanel Grid.Column="1">
                <TextBlock
                    FontSize="30"
                    Foreground="red"
                    Text="Second Column Content" />
            </StackPanel>
        </Grid>
    </Grid>
</StackPanel>

Answer 1

第一个Gird 中只有GridSplitter。您可以将您拥有的两个网格合并为一个网格以获得所需的结果。这是合并的 XAML 供您尝试：

<Grid.Resources>
    <Style TargetType="TextBlock">
        <Setter Property="Padding" Value="3" />
        <Setter Property="Foreground" Value="Silver" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>
    <Style TargetType="Border">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="BorderBrush" Value="Silver" />
        <Setter Property="Background" Value="Black" />
    </Style>
</Grid.Resources>

<StackPanel Grid.Column="0">
    <Border>
        <TextBlock Text="First Column" />
    </Border>
    <TextBlock FontSize="30"
                           Foreground="Red"
                           Text="First Column Content" />
</StackPanel>

<GridSplitter Grid.Row="0" 
              Grid.Column="1"
              HorizontalAlignment="Stretch"
              ShowsPreview="True"
              Background="Gray"/>

<StackPanel Grid.Column="2">
    <Border>
        <TextBlock Text="Second Column" />
    </Border>
    <TextBlock FontSize="30"
                           Foreground="red"
                           Text="Second Column Content" />

</StackPanel>

另外，这里是结果输出的截图：

您可能还想参考MSDN 上的此操作指南页面。