The GridSplitter

Kot ste videli v prejšnjih člankih, Grid panel omogoča deljenje prostora, ki je na voljo, v posamezne celice. Z uporabo stolpcev in vrstic lahko določite, koliko prostora boste razdelili med njih. Kaj pa če želite omogočiti uporabniku, da spremeni količino prostora v vrsticah in stolpcih? Takrat uporabite GridSplitter.

GridSplitter uporabimo enostavno tako, da ga dodamo v stolpec ali vrstico v Grid-u, s primerno količino prostora zanj, npr. 5 pikslov. Omogočil bo uporabniku, da ga prenaša levo/desno oziroma gor in dol, hkrati pa spreminja velikost stolpcev ali vrstic na obeh straneh. Oglejte si primer:

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

Kot lahko vidite, ustvarili smo Grid z enako širokima stolpcema in s prostorom petih pikslov na sredini. Na vsaki strani sta dva TextBlock-a za boljšo nazornost. Kot lahko vidite, se GridSplitter prikaže kot črta, ki deli stolpca. Ko premaknemo miško nanj, se kazalec spremeni in nam vidno pokaže, da je omogočeno spreminjanje širine.

Ležeči GridSplitter

GridSplitter je enostaven za uporabo in podpira horizontalno orientacijo. Zato ni potrebno skoraj nič truda, kajti spremeniti orientacijo iz vertikalne v horizontalno je otročje lahko:

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

As you can see, I simply changed the columns into rows and on the GridSplitter, I defined a Height instead of a Width. The GridSplitter figures out the rest on its own, but in case it doesn't, you can use the ResizeDirection property on it to force it into either Rows or Columns mode.