仅增长 GridSplitter

Question

我有一个非常简单的要求，但似乎找不到解决方案。看看我的示例 XAML 代码：

<Grid ShowGridLines="True" VerticalAlignment="Top" Margin="5">
    <Grid.RowDefinitions>
        <RowDefinition MinHeight="100"/>
        <RowDefinition MinHeight="100"/>
        <RowDefinition MinHeight="100"/>
    </Grid.RowDefinitions>

    <Grid.Resources>
        <Style TargetType="GridSplitter">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Height" Value="1"/>
            <Setter Property="Background" Value="Black"/>
        </Style>
    </Grid.Resources>

    <GridSplitter/>
    <GridSplitter Grid.Row="1"/>
    <GridSplitter Grid.Row="2"/>
</Grid>

我有三行，开始高度为 100。我希望用户能够拖动任何行的边缘以使其更高，所以我在每一行中放置了一个 GridSplitter。

问题是：

The GridSplitter control redistributes space between rows or columns in a Grid, without changing the dimensions of the Grid. For example, when a GridSplitter resizes two columns, the ActualWidth property of one column is increased while at the same time the ActualWidth property of the other column is decreased by the same amount.

上面的 XAML 不起作用，none 行在拖动时改变大小，因为 GridSplitter 试图从另一行获取高度并将其添加到一个正在调整大小。由于 none 行可以变得更小 (MinHeight="100")，因此什么也不会发生。

但我不想从其他行获取高度。我想单独增加一行的大小，这又会改变 Grid 的整体高度。如果我将中间的行拖高 50px，我希望该行为 150px，而其他两行保持 100px，从而使整个网格为 350px。

我遗漏的 GridSplitter 上是否有允许此操作的设置？或者我可以使用其他控件吗？

Answer 1

这是你期待的吗？

<StackPanel>
    <TextBlock Text="{Binding ActualHeight, 
                      ElementName=grid, 
                      StringFormat='Grid Actual Height: {0}'}" FontSize="30"/>
    <Grid x:Name="grid" Background="Aqua">
        <Grid.Resources>
            <Style TargetType="GridSplitter">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Height" Value="5"/>
                <Setter Property="ShowsPreview" Value="False"/>
                <Setter Property="Background" Value="Black"/>
            </Style>
            <Style TargetType="TextBlock">
                <Setter Property="Text" 
                        Value="{Binding ActualHeight, 
                                RelativeSource={RelativeSource AncestorType=StackPanel}, 
                                StringFormat='Row Actual Height: {0}'}"/>
                <Setter Property="FontSize" Value="30"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="100" Height="100" />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="100" Height="100" />
            <RowDefinition Height="Auto" />
            <RowDefinition MinHeight="100" Height="100" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Background="Tan">
            <TextBlock />
        </StackPanel>
        <GridSplitter Grid.Row="1"/>
        <StackPanel Grid.Row="2" Background="Brown">
            <TextBlock />
        </StackPanel>
        <GridSplitter Grid.Row="3"/>
        <StackPanel Grid.Row="4" Background="Bisque">
            <TextBlock />
        </StackPanel>
        <GridSplitter Grid.Row="5" ResizeBehavior="PreviousAndCurrent"/>
    </Grid>
</StackPanel>

问题在于您将 GridSplitter 添加到 Grid 控件的方式。您可以在 GridSplitter documentation. This also includes how to use ResizeBehavior 获得有关其工作原理的更多详细信息；我曾经让它在最后一行工作

仅增长 GridSplitter

Grow-Only GridSplitter

wpf

xaml

resize

gridsplitter

wpf-grid