Grow-Only GridSplitter - PullRequest
Новая
       4

Grow-Only GridSplitter

0 голосов
/ 27 января 2020

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

1 голос
/ 28 января 2020

Это то, что вы ожидаете? 

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

...