Procedura dettagliata: costruzione di un layout dinamico

Articolo
09/12/2008

Aggiornamento: novembre 2007

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.

Progettazione Windows Presentation Foundation (WPF) 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:

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

In questa procedura dettagliata vengono eseguite le 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:
A seconda delle impostazioni attive o della versione del programma, è possibile che le finestre di dialogo e i comandi di menu visualizzati siano diversi da quelli descritti nella Guida. Per modificare le impostazioni, scegliere Importa/esporta impostazioni dal menu Strumenti. Per ulteriori informazioni, vedere Impostazioni di Visual Studio.

Prerequisiti

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

Visual Studio 2008

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.

Window1.xaml verrà 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à

Value

Width

400

Height

200

SizeToContent

WidthAndHeight

Suggerimento:

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

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

Proprietà	Value
Width	400
Height	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à	Value
Contenuto	Nome:
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	0
Grid.RowSpan	1
Width	Auto
Height	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à	Value
Contenuto	Password:
Grid.Column	0
Grid.ColumnSpan	1
Grid.Row	1
Grid.RowSpan	1
Width	Auto
Height	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à

Value

Grid.Column

1

Grid.ColumnSpan

3

Grid.Row

0

Grid.RowSpan

1

Width

Auto

Height

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à

Value

Grid.Column

1

Grid.ColumnSpan

3

Grid.Row

1

Grid.RowSpan

1

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margin

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

Proprietà	Value
Grid.Column	1
Grid.ColumnSpan	3
Grid.Row	0
Grid.RowSpan	1
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,20,20,10

Proprietà	Value
Grid.Column	1
Grid.ColumnSpan	3
Grid.Row	1
Grid.RowSpan	1
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	10,10,20,10

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

Proprietà	Value
Contenuto	OK
Grid.Column	2
Grid.ColumnSpan	1
Grid.Row	3
Grid.RowSpan	1
Width	75
Height	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à	Value
Contenuto	Cancel
Grid.Column	3
Grid.ColumnSpan	1
Grid.Row	3
Grid.RowSpan	1
Width	75
Height	23
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margin	6,10,20,20

Scegliere Salva tutto dal menu File.

Esecuzione del 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 Window1.xaml completato:

<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" 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

Condividi tramite