Il GridSplitter

Come hai visto negli articoli precedenti, il pannello Grid rende molto facile suddividere lo spazio disponibile in singole celle. Utilizzando ColumnDefinitions e RowDefinitions, puoi decidere facilmente quanto spazio occuperanno ogni riga o colonna, ma cosa succede se vuoi consentire all'utente di cambiarlo? Qui è dove il controllo GridSplitter entra in gioco.

Il GridSplitter viene utilizzato semplicemente aggiungendolo a una colonna o una riga in una griglia, con la giusta quantità di spazio per esso, ad es. 5 pixel. Permetterà quindi all'utente di trascinarlo da un lato all'altro o su e giù, mentre si modifica la dimensione della colonna o della riga su ciascuno dei lati di esso. Ecco un esempio:

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

Come puoi vedere, ho semplicemente creato una griglia con due colonne ugualmente ampie, con una colonna di 5 pixel al centro. Ciascuno dei lati è solo un controllo TextBlock per illustrare il punto. Come puoi vedere dagli screenshot, GridSplitter è reso come una linea divisoria tra le due colonne e non appena il mouse è sopra di esso, il cursore viene modificato per riflettere che può essere ridimensionato.

GridSplitter orizzontale

Il GridSplitter è molto facile da usare e, naturalmente, supporta anche le divisioni orizzontali. In effetti, non devi modificare nulla per farlo funzionare in orizzontale invece che in verticale, come il prossimo esempio mostrerà:

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

Come puoi vedere, ho semplicemente cambiato le colonne in righe e su GridSplitter, ho definito un'altezza invece di una larghezza. GridSplitter calcola il resto da solo, ma in caso contrario, puoi utilizzare la proprietà ResizeDirection su di esso per forzarlo in modalità Righe o Colonne.