GridSplitter kontrollen

Som du så i den forrige artikel, gør Grid panelet det meget nemt at dele den tilgængelige plads op i individuelle celler. Ved brug af kolonne- og rækkedefinitioner, kan du nemt beslutte hvor meget plads, hver række eller kolonne skal bruge, men hvad hvis du ønsker at give brugeren lov til at ændre dette? Det er hvor GridSplitter kontrollen kommer i spil.

GridSplitter bruges ved simpelthen at tilføje den til en kolonne eller en række i et Grid med den nødvendige plads, hvilket er 5 pixels. Det vil derefter tillade brugeren at trække den fra side til side eller op og ned, mens størrelsen af kolonner eller rækker på hver side af den ændres. Her er et eksempel:

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

Som du kan se, har jeg oprettet et Grid med to lige brede kolonner med en 5 pixel kolonne i midten. Hver af siderne er blot TextBlock kontroller til illustration. Som du kan se på skærmbillederne, gengives GridSplitter kontrollen som en adskillende linje mellem de to kolonner, og så snart musen er over den, ændres markøren til at vise, at der kan ændres størrelse.

Horisontal GridSplitter

GridSplitter er meget nem at bruge, og den understøtter selvfølgelig også horisontal opsplitning. Faktisk skal du stort set ikke ændre noget for at få den til at virke horisontalt i stedet for vertikalt, som det næste eksempel viser:

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

Som du kan se, ændrede jeg blot kolonner til rækker, og på GridSplitter kontrollen angav jeg en Height i stedet for en Width. GridSplitter kontrollen finder selv ud f resten, men i tilfælde af, at den ikke gør, kan du bruge ResizeDirection egenskaben til at tvinge den til enten Rows eller Columns tilstand.