Creazione di un'applicazione di disegno utilizzando WPF

Articolo
09/12/2008

Aggiornamento: novembre 2007

In questa lezione verrà descritto come creare un'applicazione Windows Presentation Foundation (WPF) che consenta di disegnare immagini. La creazione di un'applicazione WPF è simile alla creazione di un'applicazione Windows Form. Si trascinano i controlli dalla Casella degli strumenti all'area di progettazione e si scrive codice per gestire gli eventi dei controlli.

Collegamento a video Per una dimostrazione video, vedere la procedura video per creare un'applicazione di disegno con WPF (informazioni in lingua inglese).

Procedura

Per creare un'applicazione WPF

Scegliere Nuovo progetto dal menu File.

Verrà visualizzata la finestra di dialogo Nuovo progetto. In questa finestra di dialogo vengono elencati i tipi di applicazione predefiniti che è possibile creare utilizzando Visual Basic Express Edition.
Selezionare Applicazione WPF come tipo di progetto.
Modificare il nome dell'applicazione in Ink Pad, quindi scegliere OK.

In Visual Basic Express Edition viene creata una nuova cartella per il progetto. La cartella presenta lo stesso nome del titolo del progetto. Nella visualizzazione Progettazione di Visual Basic Express Edition viene anche visualizzata la nuova finestra WPF, denominata Finestra1. È possibile passare all'editor del codice in qualsiasi momento facendo clic con il pulsante destro del mouse sull'area di progettazione e scegliendo Visualizza codice. Per impostazione predefinita, l'editor XAML viene visualizzato sotto la finestra di progettazione, ma è possibile attivare la visualizzazione XAML a schermo intero facendo clic con il pulsante destro del mouse sull'area di progettazione e scegliendo Visualizza XAML.

Per progettare l'interfaccia utente

Se non è possibile visualizzare la finestra Proprietà, scegliere Finestra Proprietà dal menu Visualizza. In questa finestra vengono elencate le proprietà del form o del controllo attualmente selezionato ed è possibile modificare i valori di proprietà esistenti.
Modificare la dimensione della finestra WPF impostando la proprietà Height su 550 e la proprietà Width su 370 nella finestra Proprietà.
Modificare la proprietà Title della finestra WPF in Ink Pad.
Modificare la proprietà Background della finestra WPF sul colore marrone, facendo clic su Marrone nella casella a discesa, quindi premendo INVIO.

Nota:

In alternativa, è possibile modificare direttamente il markup XAML aggiungendo un attributo Background e impostandone il valore su Brown: Background="Brown"
Per aprire la Casella degli strumenti, scegliere Casella degli strumenti dal menu Visualizza.
Fare clic con il pulsante destro del mouse sulla Casella degli strumenti e fare clic su Scegli elementi.

Verrà visualizzata la finestra di dialogo Scegli elementi della Casella degli strumenti.
Nella scheda Componenti WPF della finestra di dialogo Scegli elementi dalla Casella degli strumenti, scorrere fino a InkCanvas, quindi selezionarlo in modo che nella casella di controllo venga visualizzato un segno di spunta.
Scegliere OK per aggiungere il controllo InkCanvas alla Casella degli strumenti.
Trascinare un controllo InkCanvas dalla Casella degli strumenti all'area di progettazione.
Impostare le proprietà seguenti del controllo InkCanvas nella finestra Proprietà:

Proprietà

Valore

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margins

9, 9, 9, 68
Modificare il colore del controllo InkCanvas in giallo impostandone la proprietà Background su LightYellow.

In fase di esecuzione, lo sfondo del controllo InkCanvas verrà visualizzato con il colore giallo chiaro.
Trascinare due controlli Button nella finestra WPF, posizionandoli sotto il controllo InkCanvas. Inserire button1 a sinistra e button2 a destra.
Selezionare button1 e modificare il markup XAML nella visualizzazione XAML, come mostrato nel markup riportato di seguito. In questo markup la proprietà Text viene impostata su Clear.
```
<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
    Name="Button1" VerticalAlignment="Bottom" 
    Width="75">Clear</Button>
```
Selezionare button2 e modificare il markup XAML, come mostrato nel markup riportato di seguito. In questo markup la proprietà Text viene impostata su Close.
```
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
    Name="Button2" VerticalAlignment="Bottom" 
    Width="75">Close</Button>
```
L'applicazione WPF deve essere simile all'applicazione Ink Pad nella figura riportata di seguito.

Applicazione Ink Pad WPF

Nota:
In alternativa, è possibile modificare direttamente il markup XAML aggiungendo un attributo Background e impostandone il valore su Brown: Background="Brown"

Proprietà	Valore
Width	Auto
Height	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch
Margins	9, 9, 9, 68

Per aggiungere codice ai gestori eventi per i pulsanti

Fare doppio clic su Cancella, quindi aggiungere il seguente codice al gestore dell'evento Click generato:
```
    Me.InkCanvas1.Strokes.Clear() 
```
Tornare alla visualizzazione Progettazione facendo clic con il pulsante destro del mouse sull'editor del codice e scegliendo Finestra di progettazione.
Fare doppio clic su Chiudi, quindi aggiungere il seguente codice al gestore dell'evento Click generato:
```
    Me.Close()
```
Premere F5 per eseguire il progetto.
Quando viene avviata l'applicazione, disegnare un'immagine nel controllo InkCanvas. Se si commette un errore, è possibile fare clic su Cancella per ricominciare.
Fare clic su Chiudi per uscire dall'applicazione.

Passaggi successivi

In questa lezione è stato descritto come creare un'applicazione di disegno utilizzando WPF.

Nella sezione successiva verrà descritto come utilizzare gli strumenti Visual Basic per trovare e correggere gli errori (in genere denominati bug) in un programma.

Lezione successiva: Ricerca e correzione di errori tramite debug