GridSplitter

Jak jste viděli v předchozích článcích, panel Grid velmi usnadňuje rozdělení dostupného prostoru na jednotlivé buňky. Pomocí definic sloupců a řádků můžete snadno rozhodnout, kolik místa by měl každý řádek nebo sloupec zabírat, ale co když chcete umožnit uživateli toto změnit? Zde přichází ke slovu ovládací prvek GridSplitter.

GridSplitter se používá jednoduše přidáním do sloupce nebo řádku v Gridu s vhodným množstvím prostoru pro něj, např. 5 pixelů. Poté toto umožní uživateli táhnout ho ze strany na stranu nebo nahoru a dolů, přičemž se mění velikost sloupce nebo řádku na každé straně. Zde je příklad:

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterSample" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left side</TextBlock>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right side</TextBlock>
    </Grid>
</Window>

Jak vidíte, jednoduše jsem vytvořil Grid se dvěma stejně širokými sloupci s 5 pixelovým sloupcem uprostřed. Každá ze stran je jen ovládací prvek TextBlock, aby ilustrovala bod. Jak vidíte na snímcích obrazovky, GridSplitter je vykreslen jako dělicí čára mezi dvěma sloupci a jakmile je nad ním myš, kurzor se změní tak, aby odrážel, že může být změněna velikost.

Horizontální GridSplitter

GridSplitter je velmi snadno použitelný a samozřejmě podporuje také horizontální rozdělení. Ve skutečnosti nemusíte téměř nic měnit, aby fungoval horizontálně místo vertikálně, jak ukáže další příklad:

<Window x:Class="WpfTutorialSamples.Panels.GridSplitterHorizontalSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridSplitterHorizontalSample" Height="300" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Top</TextBlock>
        <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Row="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Bottom</TextBlock>
    </Grid>
</Window>

Jak vidíte, jednoduše jsem změnil sloupce na řádky a na GridSplitteru jsem definoval výšku místo šířky. GridSplitter zjistí zbytek sám, ale v případě, že ne, můžete na něm použít vlastnost ResizeDirection, abyste ho donutili buď do režimu řádku, nebo sloupce.