Procedura dettagliata: costruzione di un layout dinamico

Articolo
08/11/2011

Nel posizionamento dinamico, è necessario specificare la disposizione degli elementi figlio e il wrapping ai relativi elementi padre. È anche possibile impostare l'espansione automatica di finestre e controlli quando il contenuto si espande. Per ulteriori informazioni, vedere Layout con posizionamento assoluto e dinamico.

WPF Designer per Visual Studio fornisce numerosi controlli Panel che supportano il posizionamento dinamico. È possibile combinare i controlli Panel aggiungendo un controllo Panel come figlio di un altro. È possibile utilizzare i seguenti controlli Panel per posizionare dinamicamente gli elementi nelle applicazioni:

Importante
Quando possibile, è preferibile utilizzare un layout dinamico. I layout dinamici sono i più flessibili, si adattano alle modifiche di contenuto, ad esempio la localizzazione, e consentono all'utente finale maggiore controllo sull'ambiente. Per un esempio di layout assoluto, vedere Procedura dettagliata: costruzione di un layout in base al posizionamento assoluto.

Questa procedura dettagliata prevede l'esecuzione delle attività seguenti:

Creazione di un'applicazione WPF.
Configurazione del controllo Panel Grid predefinito.
Aggiunta di controlli al pannello.
Esecuzione del test del layout.

Nella figura seguente è illustrata l'applicazione finale.

Layout dinamico

Nota

È possibile che le finestre di dialogo e i comandi di menu visualizzati siano diversi da quelli descritti nella Guida a seconda delle impostazioni attive o dell'edizione del programma. Per modificare le impostazioni, scegliere Importa/Esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Gestione delle impostazioni.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

Visual Studio 2010

Creazione del progetto

La prima procedura consiste nella creazione del progetto per l'applicazione.

Per creare il progetto

Creare un nuovo progetto Applicazione WPF in Visual Basic o in Visual C# denominato DynamicLayout. Per ulteriori informazioni, vedere Procedura: creare un nuovo progetto di applicazione WPF.

Nota

In questa procedura dettagliata non verrà scritto codice. Il linguaggio scelto per il progetto è quello utilizzato per le pagine code-behind nell'applicazione.

MainWindow.xaml viene aperto in WPF Designer.
Nella visualizzazione Progettazione selezionare la finestra. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.
Nella finestra Proprietà impostare le seguenti proprietà per Window:

Proprietà

Valore

Larghezza

400

Altezza

200

SizeToContent

WidthAndHeight

Suggerimento

Per ridimensionare la finestra in visualizzazione Progettazione, è anche possibile utilizzare i quadratini di ridimensionamento.
Scegliere Salva tutto dal menu File.

Proprietà	Valore
Larghezza	400
Altezza	200
SizeToContent	WidthAndHeight

Suggerimento
Per ridimensionare la finestra in visualizzazione Progettazione, è anche possibile utilizzare i quadratini di ridimensionamento.

Configurazione del controllo Panel predefinito della griglia

Per impostazione predefinita, la nuova applicazione WPF contiene un oggetto Window con un pannello Grid. In questa procedura verranno aggiunte quattro righe e quattro colonne alla griglia. Impostare la larghezza di ogni colonna su *, in modo che la larghezza disponibile sia divisa uniformemente fra le quattro colonne. Impostare l'altezza di tre delle righe su Auto, in modo che vengano ridimensionate in base al contenuto. Impostare l'altezza di una delle righe su *, in modo che venga utilizzata l'altezza disponibile rimanente.

Per aggiungere un controllo Panel

Nella visualizzazione Progettazione selezionare la griglia.
(Facoltativo) Nella finestra Proprietà individuare la proprietà ShowGridLines e selezionare la casella di controllo.

Quando l'applicazione è in esecuzione, nella finestra verranno visualizzate le linee della griglia. Questo è utile per l'esecuzione del debug, ma è necessario deselezionare la casella di controllo della proprietà ShowGridLines per il codice di produzione.
Nella finestra Proprietà, individuare la proprietà ColumnDefinitions e fare clic sul pulsante con i puntini di sospensione nella colonna del valore della proprietà.

Verrà visualizzata la finestra di dialogo Editor dell'insieme.
1. Fare clic su Aggiungi quattro volte per aggiungere quattro colonne.
2. Impostare la proprietà Width della prima riga su Auto.
3. Impostare la proprietà Width della seconda riga su *.
4. Impostare la proprietà Width della terza riga su Auto.
5. Impostare la proprietà Width della quarta riga su Auto.
6. Scegliere OK per chiudere l'Editor dell'insieme e tornare a WPF Designer.
  
  Nella griglia sono ora presenti quattro colonne, ma solo una viene visualizzata. Le colonne le cui proprietà Width sono impostate su Auto vengono temporaneamente nascoste perché sono prive di contenuto. Per questa procedura, tale impostazione risulta appropriata. Per evitare tale comportamento in futuro, è possibile utilizzare il ridimensionamento proporzionale durante la progettazione e impostare il valore su Auto al termine.
Nella finestra Proprietà individuare la proprietà RowDefinitions e fare clic sul pulsante con i puntini di sospensione nella colonna del valore della proprietà.

Verrà visualizzata la finestra di dialogo Editor dell'insieme.
1. Fare clic su Aggiungi quattro volte per aggiungere quattro righe.
2. Impostare la proprietà Height della prima riga su Auto.
3. Impostare la proprietà Height della seconda riga su Auto.
4. Impostare la proprietà Height della terza riga su *.
5. Impostare la proprietà Height della quarta riga su Auto.
6. Scegliere OK per chiudere l'Editor dell'insieme e tornare a WPF Designer.
  
  Nella griglia sono ora presenti quattro righe, ma solo una viene visualizzata. Le righe le cui proprietà Height sono impostate su Auto vengono temporaneamente nascoste perché sono prive di contenuto. Per questa procedura, tale impostazione risulta appropriata. Per evitare tale comportamento in futuro, è possibile utilizzare il ridimensionamento proporzionale durante la progettazione e impostare il valore su Auto al termine.
Scegliere Salva tutto dal menu File.

Aggiunta di controlli al pannello

Quindi, aggiungere i controlli al pannello e utilizzare le proprietà associate Column e Row di Grid per posizionarli in modo dinamico.

Per aggiungere controlli al pannello

Dal gruppo Comune della Casella degli strumenti trascinare un controllo Label in Grid.

Nella finestra Proprietà impostare le seguenti proprietà per Label:

Proprietà	Valore
Contenuto	Nome:
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Larghezza	Auto
Altezza	23
HorizontalAlignment	Stretch
VerticalAlignment	Top
Margin	20,20,10,10

Dal gruppo Comune della Casella degli strumenti trascinare un controllo Label in Grid.

Nella finestra Proprietà impostare le seguenti proprietà per Label:

Proprietà	Valore
Contenuto	Password:
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Larghezza	Auto
Altezza	23
HorizontalAlignment	Stretch
VerticalAlignment	Top
Margin	20,10,10,10

Dal gruppo Comune della Casella degli strumenti trascinare un controllo TextBox in Grid.

Nella finestra Proprietà impostare le seguenti proprietà per TextBox:

Proprietà	Valore
Grid.Column	1
Grid.ColumnSpan	3
Grid.Row	0
Grid.RowSpan	1
Larghezza	Auto
Altezza	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,20,20,10

Dal gruppo Comune della Casella degli strumenti trascinare un controllo TextBox in Grid.

Nella finestra Proprietà impostare le seguenti proprietà per TextBox:

Proprietà	Valore
Grid.Column	1
Grid.ColumnSpan	3
Grid.Row	1
Grid.RowSpan	1
Larghezza	Auto
Altezza	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,10,20,10

Dal gruppo Comune della Casella degli strumenti trascinare un controllo Button in Grid.

Nella finestra Proprietà impostare le seguenti proprietà per Button:

Proprietà	Valore
Contenuto	OK
Grid.Column	2
Grid.ColumnSpan	1
Grid.Row	3
Grid.RowSpan	1
Larghezza	75
Altezza	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,10,6,20

Dal gruppo Comune della Casella degli strumenti trascinare un controllo Button in Grid.

Nella finestra Proprietà impostare le seguenti proprietà per Button:

Proprietà	Valore
Contenuto	Cancel
Grid.Column	3
Grid.ColumnSpan	1
Grid.Row	3
Grid.RowSpan	1
Larghezza	75
Altezza	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	6,10,20,20

Scegliere Salva tutto dal menu File.

Test del layout

Eseguire infine l'applicazione e verificare che il layout venga modificato dinamicamente quando l'utente ridimensiona la finestra e quando il contenuto dei controlli si espande oltre la dimensione dei controlli stessi.

Per eseguire il test del layout

Scegliere Avvia debug dal menu Debug.

L'applicazione viene avviata e viene visualizzata la finestra.
Riempire la casella di testo Nome digitando testo casuale. Raggiunta la fine della casella di testo, questa e la finestra si espandono in modo da adattarsi al testo digitato.
Chiudere la finestra.
Scegliere Avvia debug dal menu Debug.

L'applicazione viene avviata e viene visualizzata la finestra.
Ridimensionare la finestra verticalmente e orizzontalmente.

Le colonne si espandono uniformemente per utilizzare lo spazio disponibile. Le caselle di testo si estendono per riempire le colonne espanse. Tre righe mantengono l'altezza data e la quarta riga si espande per utilizzare lo spazio disponibile.
Chiudere la finestra.
In visualizzazione Progettazione, selezionare l'etichetta Nome.
Nella finestra Proprietà modificare la proprietà Content in Immettere il nome completo:.

In visualizzazione Progettazione l'etichetta si espande adattarsi il testo.
Scegliere Avvia debug dal menu Debug.

L'applicazione viene avviata e viene visualizzata la finestra. Nel controllo etichetta viene visualizzato il testo più lungo.
Chiudere la finestra.

Riepilogo

Di seguito è riportato il file MainWindow.xaml completato:

<Window x:Class="MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:</Label>
        <TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3" Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />
        <TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3" Name="TextBox2" />
        <Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23" HorizontalAlignment="Stretch" Name="Button1">OK</Button>
        <Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23" Name="Button2">Cancel</Button>
    </Grid>
</Window>

Passaggi successivi

È possibile provare a ottenere effetti diversi con i layout dinamici sostituendo il pannello Grid in questa procedura dettagliata con i pannelli seguenti:

Vedere anche

Share via