The GridSplitter

Kao što ste videli u prethodnom članku, pomoću Grid panela raspoloživi prostor se veoma jednostavo može podeliti na zasebne ćelije. Korišćenjem definicija koliona i redova, lako možete da odredite koliko prostora red ili kolona treba da zauzmu, ali šta ako želite da omogućiti i korisniku da vrši izmene? Ovde u igru ulazi kontrola GridSplitter.

GridSplitter se koristi tako što se jednostavno doda u kolonu ili red u Grid-u uz određivanje odgovarajućeg prostora koji on sam treba da zauzme, na primer 5px. To će omogućiti korisniku da vuče GridSplitter levo desno ili gore dole, pri čemu će se širina koline odnodno visina reda reda menjati na oba kraja. Evo primera:

<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>

Kao što možete da vidite, ja sam jednostavno kreirao Grid sa dve jednako široke kolone i sa kolonom širine 5px između njih. Na svakoj strani je samo po jedna TextBox kontrola čisto da ilustruje poentu. Kao što možete da vidite sa slika ekrana, GridSplitter je renderovan odnosno prikazan kao linija razdvajanja između te dve kolone i čim se miš nađe iznad njega kursor se menja da bi reflektovao mogućnost menjenja veličine.

Horizontal GridSplitter

GridSplitter se veoma lako koristi i naravno omogućava takođe i horizontalnu podelu. Zapravo, ne treba da menjate gotovo ništa da bi napravili da radi horizontalno umesto vertikalno, kao što se i vidi u sledećem primeru:

<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>

Kao što možete da vidite, samo sam zamenio kolone redovima i na GridSplitter-u sam definisao visinu umesto širine. GridSplitter se dalje snalazi sam, ali u slučaju da se to ne dogodi možete na njemu primeniti ResizeDirection properti, kako biste ga naterali da bude u Rows ili u Columns modu.