GridSplitter только для роста

У меня есть довольно простое требование, для которого я не могу найти решения. Взгляните на мой пример кода 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 в каждом ряду.

Проблема в:

Элемент управления GridSplitter перераспределяет пространство между строками или столбцами в сетке без изменения размеров сетки. Например, когда GridSplitter изменяет размер двух столбцов, свойство ActualWidth одного столбца увеличивается, в то время как свойство ActualWidth другого столбца уменьшается на ту же величину.

Приведенный выше XAML не работает, ни одна из строк не меняет размер при перетаскивании, потому что GridSplitterпытается взять высоту из другой строки и добавить ее к той, размер которой изменяется. Поскольку ни одна из строк не может стать меньше (MinHeight="100"), Ничего не произошло.

Но я не хочу брать высоту из других рядов. Я хочу независимо увеличить размер одной строки, что, в свою очередь, изменит общую высотуGrid. Если я перетащу среднюю строку на 50 пикселей выше, я хочу, чтобы эта строка была 150 пикселей, а две другие оставались на 100 пикселей, что делает общую сетку 350 пикселей.

Есть ли настройки на GridSplitterМне не хватает того, что позволит это? Или я могу использовать какой-то другой элемент управления?

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. Сюда также входит, как использовать ResizeBehavior; который я использовал, чтобы заставить его работать в последней строке

Другие вопросы по тегам