Procedura dettagliata: costruzione di un layout in base al posizionamento assoluto

Nel posizionamento assoluto, gli elementi figlio vengono disposti specificando la posizione esatta relativa all'elemento padre corrispondente. Ad esempio, i controlli vengono disposti su un pannello specificando le coordinate di sinistra e superiori dei controlli del pannello. Per ulteriori informazioni, vedere Layout con posizionamento assoluto e dinamico.

WPF Designer per Visual Studio fornisce un controllo Panel Canvas che supporta il posizionamento assoluto. È possibile utilizzare il controllo Panel Canvas per posizionare gli elementi nelle applicazioni in modo assoluto.

Importante

Quando possibile, è preferibile utilizzare un layout dinamico. I layout dinamici sono i più flessibili, adatti a modifiche di contenuto, ad esempio la localizzazione, e consentono all'utente finale maggiore controllo sull'ambiente. Per esempi di esecuzione di layout dinamici, vedere Procedura dettagliata: creazione di un' applicazione ridimensionabile tramite Progettazione WPF e Procedura dettagliata: costruzione di un layout dinamico.

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

• Creazione di un'applicazione WPF.

• Aggiunta di un controllo Panel Canvas all'applicazione.

• Aggiunta di controlli al pannello.

• Esecuzione del test del layout.

Nella figura seguente è illustrata l'applicazione finale.

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

1. Creare un nuovo progetto Applicazione WPF in Visual Basic o Visual C# denominato AbsoluteLayout. 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.

2. Nella visualizzazione Progettazione selezionare la finestra. Per ulteriori informazioni, vedere Procedura: selezionare e spostare elementi sull'area di progettazione.

3. Nella finestra Proprietà impostare le seguenti proprietà per Window:

   Proprietà	Valore
   Larghezza	400
   Altezza	200

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

4. (Facoltativo) Per bloccare la dimensione della finestra, utilizzare uno dei metodi seguenti:

   1. Nella finestra Proprietà impostare la seguente proprietà per Window:

      Proprietà	Valore
      ResizeMode	NoResize

   2. Nella finestra Proprietà impostare le seguenti proprietà per Window:

      Proprietà	Valore
      MinWidth	400
      MinHeight	200
      MaxWidth	400
      MaxHeight	200

5. Scegliere Salva tutto dal menu File.

Aggiunta di un controllo Panel

Per impostazione predefinita, la nuova applicazione WPF contiene un oggetto Window con un pannello Grid. Per creare un layout in base al posizionamento assoluto è necessario utilizzare un pannello Canvas. In questa procedura viene rimosso l'oggetto Grid predefinito e viene aggiunto un oggetto Canvas.

Per aggiungere un controllo Panel

1. Nella visualizzazione Progettazione selezionare la griglia.

2. Premere il tasto Canc per eliminare Grid.

3. Dal gruppo Controlli della Casella degli strumenti trascinare un controllo Canvas in Window.

4. Nella finestra Proprietà impostare la proprietà Height di Canvas su Auto.

   Canvas si estende fino a coprire l'altezza di Window.

5. Nella finestra Proprietà impostare la proprietà Width di Canvas su Auto.

   Canvas si estende fino a coprire la larghezza di Window.

6. Scegliere Salva tutto dal menu File.

Aggiunta di controlli al pannello

Quindi, aggiungere i controlli al pannello e utilizzare le proprietà associate Left e Top di Canvas per posizionarli in modo assoluto.

Per aggiungere controlli al pannello

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

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

   Proprietà	Valore
   Contenuto	Nome:
   Canvas.Left	20
   Canvas.Top	20
   Larghezza	120
   Altezza	23

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

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

   Proprietà	Valore
   Contenuto	Password:
   Canvas.Left	20
   Canvas.Top	60
   Larghezza	120
   Altezza	23

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

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

   Proprietà	Valore
   Canvas.Left	160
   Canvas.Top	20
   Larghezza	200
   Altezza	23

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

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

   Proprietà	Valore
   Canvas.Left	160
   Canvas.Top	60
   Larghezza	200
   Altezza	23

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

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

    Proprietà	Valore
    Contenuto	OK
    Canvas.Left	196
    Canvas.Top	120
    Larghezza	75
    Altezza	23

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

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

    Proprietà	Valore
    Contenuto	Cancel
    Canvas.Left	283
    Canvas.Top	120
    Larghezza	75
    Altezza	23

13. Scegliere Salva tutto dal menu File.

Test del layout

Infine eseguire l'applicazione e verificare che i controlli rispettino il posizionamento assoluto.

Per eseguire il test del layout

1. (Facoltativo) Se la dimensione della finestra è stata bloccata in un passaggio precedente, per eseguire questa procedura è necessario sbloccarla. Nella finestra Proprietà impostare le seguenti proprietà per Window:

   Proprietà	Valore
   MinWidth	0
   MinHeight	0
   MaxWidth	Infinity
   MaxHeight	Infinity
   ResizeMode	CanResize

2. Scegliere Avvia debug dal menu Debug.

   L'applicazione verrà avviata e verrà visualizzata la finestra.

3. Ridimensionare la finestra.

   I controlli rispettano il posizionamento assoluto e non cambiano dimensione o posizione.

4. 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" ResizeMode="CanResize" Name="MainWindow" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
    <Canvas Height="Auto" Name="Canvas1" Width="Auto">
        <Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
        <Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
        <TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
        <TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
        <Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
        <Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
    </Canvas>
</Window>

Vedere anche

Attività

Procedura: costruire un layout in base al posizionamento assoluto

Concetti

Allineamento in Progettazione WPF

Sistema di layout

Cenni preliminari su WPF e Silverlight Designer

Altre risorse

Procedure dettagliate relative ai layout