Procedura: creare applicazioni ridimensionabili dall'utente con GridSplitter

È possibile utilizzare il controllo GridSplitter insieme al controllo contenitore Grid per creare layout di finestre ridimensionabili dall'utente in fase di esecuzione. Ad esempio, in un'applicazione la cui interfaccia utente è divisa in aree, l'utente può trascinare un separatore per ingrandire un'area e visualizzarne una quantità maggiore di contenuto.

Un controllo aggiunto GridSplitter in Grid è un elemento figlio del controllo griglia e deve essere posizionato in una riga e in una colonna analogamente a qualsiasi altro controllo figlio. GridSplitter deve avere una larghezza o un'altezza diversa da zero, in modo che l'utente possa catturarlo e trascinarlo in fase di esecuzione.

Le procedure consigliate per GridSplitter includono:

• Inserire GridSplitter in una riga o colonna dedicata che non contiene altri controlli.

• Impostare l'altezza della riga o la larghezza della colonna che contiene GridSplitter su Auto.

• Dedicare un solo Grid a GridSplitter. Aggiungere riquadri contenitori a Grid per completare il layout.

Per creare un oggetto GridSplitter verticale

1. In visualizzazione Progettazione selezionare Grid. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.

2. Aggiungere una colonna nel punto in cui si desidera visualizzare GridSplitter. Per ulteriori informazioni, vedere Procedura: aggiungere righe e colonne a una griglia.

   Nota

   In alcune situazioni può risultare difficile posizionare righe e colonne nella finestra di progettazione. In questo caso, è possibile configurare Grid utilizzando l'editor XAML. Per un esempio di markup XAML, vedere la sezione alla fine di questo argomento.

3. Dalla Casella degli strumenti trascinare un controllo GridSplitter nella colonna aggiunta.

4. Nella finestra Proprietà impostare le seguenti proprietà per GridSplitter:

   Proprietà	Valore	Valori possibili
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Colonne	Auto Column Rows
   Grid.Column	Colonna in cui si desidera visualizzare GridSplitter. I numeri di colonna sono in base zero.
   Grid.ColumnSpan	1
   Grid.Row	0
   Grid.RowSpan	Numero totale di righe in Grid.
   Larghezza	Numero diverso da zero, ad esempio 10.
   Altezza	Auto
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. In visualizzazione Progettazione selezionare Grid.

6. Impostare la proprietà Width di ColumnDefinition che contiene GridSplitter su Auto.

Per creare un oggetto GridSplitter orizzontale

1. In visualizzazione Progettazione selezionare Grid. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.

2. Aggiungere una riga nel punto in cui si desidera visualizzare GridSplitter. Per ulteriori informazioni, vedere Procedura: aggiungere righe e colonne a una griglia.

   Nota

   In alcune situazioni può risultare difficile posizionare righe e colonne nella finestra di progettazione. In questo caso, è possibile configurare Grid utilizzando l'editor XAML. Per un esempio di markup XAML, vedere la sezione alla fine di questo argomento.

3. Dalla Casella degli strumenti trascinare un controllo GridSplitter nella riga aggiunta.

4. Nella finestra Proprietà impostare le seguenti proprietà per GridSplitter:

   Proprietà	Valore	Valori possibili
   ResizeBehavior	BasedOnAlignment	BasedOnAlignment CurrentAndNext PreviousAndCurrent PreviousAndNext
   ResizeDirection	Rows	Auto Column Rows
   Grid.Column	0
   Grid.ColumnSpan	Numero totale di colonne in Grid.
   Grid.Row	Riga in cui si desidera visualizzare GridSplitter. I numeri di riga sono in base zero.
   Grid.RowSpan	1
   Larghezza	Auto
   Altezza	Numero diverso da zero, ad esempio 10.
   HorizontalAlignment	Stretch	Left Center Right Stretch
   VerticalAlignment	Stretch	Top Center Bottom Stretch
   Margin	0

5. In visualizzazione Progettazione selezionare Grid.

6. Impostare la proprietà Height di RowDefinition che contiene GridSplitter su Auto.

Esempio

Nel codice XAML seguente viene creato un oggetto GridSplitter orizzontale:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto" />
        <RowDefinition MinHeight="70" />
    </Grid.RowDefinitions>
    <DockPanel Grid.Row="0" Grid.RowSpan="1" HorizontalAlignment="Stretch" Margin="0" Background="LightBlue" Name="DockPanel1">
    </DockPanel>
    <GridSplitter Grid.Row="1" Grid.RowSpan="1" ResizeDirection="Rows" Width="Auto" Height="10" HorizontalAlignment="Stretch" Margin="0" Name="GridSplitter1" />
    <Grid Grid.Row="2" HorizontalAlignment="Stretch" Margin="0" Background="PaleGoldenrod" Name="Grid1">
    </Grid>
</Grid>

Vedere anche

Attività

Procedura dettagliata: creazione di un' applicazione ridimensionabile tramite Progettazione WPF

Riferimenti

GridSplitter

Altre risorse

Layout in Progettazione WPF

GridSplitter