Appunti di WPF – Terza Puntata

Appunti di WPF – Terza Puntata – Hello World!

In questo tutorial vediamo come creare la nostra prima applicazione WPF.

Apriamo Visual Studio 2010, scegliamo “New Project” dalla schermata iniziale (o dal menù File->New Project) e selezioniamo il progetto di tipo “WPF Application”:

Digitiamo il nome del progetto HelloWorld al posto di WpfApplication1 e premiamo Ok per far si che Visual Studio 2010 crei l’infrastruttura del progetto:

Vediamo in dettaglio quali file vengono creati da Visual Studio e la loro funzione nel nostro progetto. L’elenco dei file del progeto è riportato all’interno della finestra Solution Explorer:

· Application.xaml : è il file xaml dell’applicazione in cui viene definita quale è la finestra principale e vengono definite le risorse dell’applicazione;

· Application.xaml.vb : è il file di codice che definisce la classe dell’applicazione. In questo file può essere inserito del codice per gestire gli aventi dell’applicazione come lo startup o lo shutdown;

· MainWindow.xaml : è il file xaml che definisce la finsetra principale dell’applicazione;

· MainWindow.xaml.vb : è il file di codice della finestra principale (code behind).

Facciamo doppio click sul file MainWindow.xaml per aprire, al centro della finestra di Visual Studio 2010, la finestra di progettazione dell’interfaccia xaml:

La finestra è divisa in due sezioni:

· Design : mostra il layout dell’interfaccia che stiamo creando;

· XAML : mostra il codice XAML della finestra.

Proviamo, ora, ad aggiungere un bottone alla nostra finestra.

Tra le finestre messe a disposizione da Visual Studio troviamo la finestra degli strumenti:

Portiamo il mouse al di sopra dell’oggetto Button e tenendo premuto il tasto sinistro del mouse trasciniamolo al di sopra della finestra che stiamo progettando e rilasciamo il tasto sinistro.

Otteniamo, in questo modo, che il bottone viene inserito all’interno dell’interfaccia:

Innanzitutto osserviamo che trascinare il bottone sull’interfaccia fa si che il designer inserisca un tag Button all’interno del file XAML. In particolare osserviamo che vengono definite anche alcune proprietà del controllo Button, tra cui altezza, larghezza, margini, nome e allineamento del testo. Un ruolo particolare riveste la proprietà Content che rappresenta ciò che verrà visualizzato all’interno del bottone. Vedremo nei tutorial successivi che il Content (così come altre proprietà) può essere un qualsiasi oggetto .NET (anche complesso).

Per migliorare l’interfaccia modifichiamo le proprietà del bottone nel seguente modo:

 <Button Content="Premi" Height="50" 
        HorizontalAlignment="Left" Margin="202,130,0,0"
        Name="btnPremi" VerticalAlignment="Top" 
        Width="100" />
 

A questo punto gestiamo la pressione del tasto btnPremi. Per fare ciò è sufficiente fare doppio click al di sopra del pulsante nella finestra di design. Questa operazione crea, come accadeva anche nella progettazione delle Windows Forms, un gestore di evento per l’evento Click del pulsante nel code behind della finestra. Completiamo il gestore di eventi nel seguente modo:

 Private Sub btnPremi_Click(ByVal sender As System.Object,
                           ByVal e As System.Windows.RoutedEventArgs) Handles btnPremi.Click
    MessageBox.Show("Hello World!!")
End Sub
 