GridSplitter

Ako ste videli v predchádzajúcich článkoch, panel Grid umožňuje veľmi ľahko rozdeliť dostupný priestor do jednotlivých buniek. Pomocou definícií stĺpcov a riadkov môžete ľahko určiť, koľko miesta má každý riadok, alebo stĺpec zaberať, ale čo ak chcete používateľovi povoliť to meniť? Toto je miesto, kde prichádza na rad GridSplitter.

GridSplitter sa používa jednoducho pridaním do stĺpca, alebo riadku v Gride s dostatočným priestorom, napr. 5 pixelov. Umožní to používateľovi posúvať zo strany na stranu, alebo hore a dole, pričom zmení veľkosť stĺpca, alebo riadku na každej strane. Tu je prí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>

Ako môžete vidieť, jednoducho som vytvoril Grid s dvoma rovnako širokými stĺpcami s 5 pixelovým stĺpcom uprostred. Na každej strane je len ovládací prvok TextBlock na ilustráciu. Ako môžete vidieť zo snímku obrazovky, GridSplitter sa vykresľuje ako deliaca čiara medzi dvoma stĺpcami a akonáhle je myš nad ním, kurzor sa zmení tak, aby ukazoval, že sa dá zmeniť veľkosť.

Horizontálny GridSplitter

GridSplitter je veľmi ľahko použiteľný a samozrejme podporuje aj horizontálne rozdelenie. V skutočnosti nemusíte nič meniť, aby ste mohli pracovať v horizontálnom smere namiesto vertikálneho, ako to ukáže nasledujúci prí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>

Ako vidíte, jednoducho som zmenil stĺpce na riadky a na GridSplitter som definoval výšku namiesto šírky. GridSplitter sám o sebe odhaľuje zvyšok, ale ak tomu tak nie je, môžete uneho pužiť vlastnosť ResizeDirection , aby ste ho zmenili do režimu Rows, alebo Columns.