Progettazione di un'interfaccia utente per un'applicazione WPF

Articolo
09/12/2008

Aggiornamento: novembre 2007

È possibile progettare un'interfaccia utente per un'applicazione di Windows Presentation Foundation (WPF) analogamente a un'applicazione Windows Form, ossia trascinando i controlli dalla Casella degli strumenti all'area di progettazione. L'ambiente di sviluppo integrato (IDE) è diverso per le applicazioni WPF. Oltre alla finestra Proprietà e alla Casella degli strumenti, nell'IDE di WPF è disponibile un editor XAML. XAML è un linguaggio XML (Extensible Markup Language) che può essere utilizzato per creare un'interfaccia utente. Nella figura riportata di seguito è indicato il percorso dell'editor XAML. Per ulteriori informazioni, vedere Procedura dettagliata: modifica di XAML in Progettazione WPF.

Editor XAML

Finestra XAML

Così come è possibile creare un controllo scrivendo manualmente codice nello sviluppo di Windows Form, è possibile utilizzare markup XAML per creare i controlli. Nella maggior parte dei casi non è necessario utilizzare XAML per creare i controlli; è molto più facile trascinare i controlli dalla Casella degli strumenti e consentire a Visual C# Express Edition di generare XAML automaticamente. È quindi possibile modificare il markup XAML per cambiare gli attributi del controllo, ad esempio Altezza o Testo. Ad esempio, il markup XAML seguente è simile a quello che viene generato quando si fa doppio clic su un controllo 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>

Per impostazione predefinita, gli attributi modificabili, ad esempio la larghezza e l'altezza, vengono visualizzati con il carattere di colore rosso. È possibile modificare i valori direttamente nel markup XAML, come mostrato nell'esempio riportato di seguito.

<Button Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="60">Submit</Button>

Per creare un'applicazione WPF

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

Verrà creato un nuovo progetto WPF. Verrà visualizzata una nuova finestra denominata Finestra1 e il relativo markup XAML sarà visibile nell'editor XAML dell'IDE di Visual C# Express Edition.
Fare clic su Finestra1 per selezionarla.
In visualizzazione XAMLmodificare l'attributo Title dell'elemento Window su WPF Application.

Il testo nella barra del titolo di Finestra1 viene modificato in Applicazione WPF.

Aggiunta di controlli alla finestra WPF

È possibile aggiungere controlli alla finestra WPF trascinandoli dalla Casella degli strumenti. Per ulteriori informazioni, vedere Controlli comuni WPF.

Per aggiungere un controllo alla finestra WPF

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

Proprietà HorizontalAlignment

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

Proprietà

Value

VerticalAlignment

Top

Width

75

Height

26
Nell'editor XAML modificare l'attributo Width dell'elemento TextBox in 140 e modificare l'elemento Margin in 30, 56, 0, 0, come illustrato 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 al controllo TextBox.
Modificare il testo racchiuso tra i tag Button di apertura e di chiusura da Button in Submit, come illustrato 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. Verrà visualizzata una finestra contenente la casella di testo e il pulsante appena aggiunti.

Anche se è possibile fare clic sul pulsante e digitare nella casella di testo, tali operazioni non produrranno alcun effetto. È necessario aggiungere gestori eventi ai controlli e scrivere codice che indichi al computer le operazioni da eseguire quando si fa clic sul pulsante. Per ulteriori informazioni, vedere Procedura: creare gestori eventi per i controlli WPF.