Progettazione di un'interfaccia utente per un'applicazione WPF (Visual Basic)

Articolo
09/12/2008

Aggiornamento: novembre 2007

In questa lezione verrà descritto come creare un'applicazione WPF e come aggiungere controlli all'interfaccia utente.

La progettazione di un'applicazione Windows Presentation Foundation (WPF) è simile alla progettazione di un'applicazione Windows Form, in cui si aggiungono controlli a un'area di progettazione. Esistono tuttavia alcune differenze. Oltre alla presenza di una finestra di progettazione, di una finestra Proprietà e della Casella degli strumenti, è disponibile una finestra che contiene XAML. XAML è l'acronimo di Extensible Application Markup Language, che rappresenta un linguaggio di markup utilizzato per creare un'interfaccia utente. Nella figura riportata di seguito viene mostrato il percorso predefinito dell'editor XAML. Per ulteriori informazioni, vedere Procedura dettagliata: modifica di XAML in Progettazione WPF.

Editor XAML

Finestra XAML

Quando si crea un'applicazione Windows Form tradizionale, è possibile trascinare un controllo dalla Casella degli strumenti in un Windows Form o, se si desidera, è possibile scrivere codice per creare il controllo. Quando si trascina il controllo nel form, il codice viene generato automaticamente. Allo stesso modo, quando si crea un'applicazione WPF, è possibile creare un controllo scrivendo markup XAML. In alternativa, è possibile trascinare il controllo in una finestra WPF.

Il markup XAML è organizzato in elementi che vengono visualizzati in un formato gerarchico. Gli elementi sono racchiusi tra parentesi angolari e di norma è presente un elemento di apertura e di chiusura. Ad esempio, l'elemento semplice Button potrebbe essere visualizzato come segue: <Button></Button>. L'aspetto di un elemento viene di solito descritto definendo gli attributi, ad esempio la posizione, l'altezza e la larghezza. Gli attributi di un elemento assomigliano alle proprietà di un oggetto in quanto sono descrizioni dello stato o dell'aspetto fisico. Gli attributi vengono visualizzati tra le parentesi di apertura e di chiusura dell'elemento di apertura. Sono costituiti dal nome, dal simbolo di assegnazione (=) e dal valore dell'attributo racchiuso tra virgolette. È possibile specificare l'altezza, ad esempio di un elemento Button come segue: <Button Height="23"></Button>.

Quando si trascina un controllo WPF dalla Casella degli strumenti nella finestra di progettazione, Visual Basic Express Edition genera automaticamente il markup XAML per il controllo. Ad esempio, viene generato markup XAML simile a quello riportato di seguito quando si fa doppio clic su un controllo System.Windows.Controls.Button per aggiungerlo a una finestra WPF.

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

L'elemento Button ha l'attributo Height impostato su "23" con il relativo elemento HorizontalAlignment impostato su "Left". La descrizione dell'elemento è determinata anche da diversi altri attributi. È possibile modificare tali attributi cambiando i valori direttamente nel markup XAML. (per impostazione predefinita, questi attributi vengono visualizzati in rosso). È anche possibile modificare le proprietà del controllo utilizzando la finestra Proprietà.

Procedura

Per creare un'applicazione WPF

Scegliere Nuovo progetto dal menu File.
Nel riquadro Modelli della finestra di dialogo Nuovo progetto, fare clic su Applicazione WPF.
Nella casella Nome, digitare WPFWindow, quindi scegliere OK.

Verrà creato un nuovo progetto Windows Presentation Foundation. Viene visualizzata una nuova finestra denominata Window1. Il relativo markup XAML è visibile nell'editor XAML dell'ambiente di sviluppo integrato (IDE) di Visual Basic come segue:
```
<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="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Fare clic su Finestra1 per selezionarla.
Nell'editor XAML, modificare l'attributo Title dell'elemento Window da Window1 in WPF Application.

Il markup XAML diventa il seguente:
```
<Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>
```
Il testo nella barra del titolo di Finestra1 viene modificato in Applicazione WPF.

Provare a modificare altri attributi della finestra, ad esempio Width e Height. Quando si ritiene di avere acquisito sufficiente familiarità, proseguire con la procedura successiva.

Aggiunta di controlli alla finestra WPF

In questa procedura verranno aggiunti controlli all'applicazione. Tale operazione verrà eseguita facendo clic sul controllo nella Casella degli strumenti, generalmente situato sul lato sinistro dell'IDE di Visual Basic, e trascinandolo nella finestra WPF. Verranno impostate alcune proprietà per il controllo e il markup XAML verrà regolato in modo da modificare il testo e le dimensioni del controllo.

Per aggiungere un controllo alla finestra WPF

Dalla Casella degli strumenti, trascinare un controllo TextBox nel lato superiore destro della finestra WPF.
Selezionare il controllo TextBox.
Nella finestra Proprietà fare clic sulla prima freccia (a sinistra) per la proprietà HorizontalAlignment, come mostrato nella figura riportata di seguito.

Proprietà HorizontalAlignment

Questa operazione sposta il controllo TextBox dal lato destro della finestra WPF al lato sinistro.
Impostare le seguenti proprietà per il controllo TextBox.

Proprietà

Valore

VerticalAlignment

Top

Width

75

Height

26
Nell'editor XAML modificare l'attributo Width dell'elemento TextBox in 140e modificare l'elemento Margin in 30, 56, 0, 0, come mostrato nell'esempio riportato di seguito.
```
<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />
```
La larghezza e la posizione del controllo TextBox verranno modificate dopo l'immissione dei nuovi valori.
Aggiungere un controllo Button alla finestra WPF, accanto a TextBox.
Modificare il testo racchiuso tra i tag Button di apertura e di chiusura da Button a Submit, come mostrato nell'esempio riportato di seguito.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>
```
Il testo sul pulsante verrà modificato dopo l'immissione del nuovo valore.
Premere F5 per eseguire il programma. Viene visualizzata una finestra contenente la casella di testo e il pulsante appena aggiunti. È possibile fare clic sul pulsante e digitare nella casella di testo. È necessario aggiungere gestori eventi ai controlli e scrivere codice che indichi al computer le operazioni da eseguire quando si fa clic sul pulsante.

Proprietà	Valore
VerticalAlignment	Top
Width	75
Height	26

Passaggi successivi

In questa lezione è stato descritto come creare un'applicazione WPF e aggiungervi controlli. È stato inoltre descritto come impostare le proprietà dei controlli nella finestra Proprietà e come modificare gli attributi della finestra WPF e dei controlli in una visualizzazione XAML. Nella lezione successiva verranno illustrati altri controlli disponibili nella Casella degli strumenti.

Lezione successiva: Utilizzo di controlli comuni WPF