Procedura: creare un'applicazione WPF in C#

Articolo
09/12/2008

Aggiornamento: novembre 2007

Scopo di questo argomento è illustrare come creare una semplice applicazione di Windows Presentation Foundation (WPF) e acquisire familiarità con l'ambiente di sviluppo integrato (IDE) di Visual C# Express Edition. Come le applicazioni Windows Form, le applicazioni WPF possono essere progettate trascinando i controlli dalla Casella degli strumenti a un'area di progettazione. Oltre a una finestra di progettazione, a una finestra Proprietà e a una Casella degli strumenti, nell'IDE dei progetti WPF è disponibile una finestra in cui è visualizzato il codice XAM. XAML è l'acronimo di Extensible Application Markup Language, un linguaggio utilizzato per creare un'interfaccia utente. Nella figura riportata di seguito è indicato il percorso dell'editor XAML.

Editor XAML

Finestra XAML

In questo esempio viene descritto come creare un'applicazione per l'input penna personalizzata che consente di disegnare immagini.

In questa sezione verranno illustrate le seguenti attività:

Creare un'applicazione WPF.
Passare dalla visualizzazione Codice alla visualizzazione Progettazione e viceversa.
Modificare le proprietà della finestra WPF.
Utilizzare l'editor XAML.
Aggiungere un controllo System.Windows.Controls.InkCanvas.
Aggiungere un controllo System.Windows.Controls.Button.
Creare gestori eventi per i controlli.

Collegamento a video Per una dimostrazione video, vedere la procedura relativa a contenuti video: creare un'applicazione WPF in C# (informazioni in lingua inglese).

Per creare un'applicazione WPF

Scegliere Nuovo progetto dal menu File.

Verrà visualizzata la finestra di dialogo Nuovo progetto. Nella finestra di dialogo vengono elencati i diversi tipi di applicazione predefiniti che possono essere creati da Visual C# Express Edition.
Fare clic su Applicazione WPF.
Modificare il nome dell'applicazione in Riquadro input penna.
Scegliere OK.

In Visual C# Express Edition viene creata una nuova cartella per il progetto, denominata in base al titolo del progetto, quindi viene visualizzata la nuova finestra WPF, denominata Window1, in visualizzazione Progettazione. È possibile passare in qualsiasi momento alla visualizzazione Codice facendo clic con il pulsante destro del mouse sull'area di progettazione o sulla finestra del codice e scegliendo Visualizza codice. Per impostazione predefinita, l'editor XAML viene visualizzato sotto la finestra di progettazione, tuttavia è possibile visualizzare il markup XAML in modalità a schermo intero facendo clic con il pulsante destro del mouse sull'area di progettazione, quindi scegliendo Visualizza XAML.

La finestra WPF in visualizzazione Progettazione è una rappresentazione visiva della finestra che verrà aperta all'avvio dell'applicazione. In visualizzazione Progettazione è possibile trascinare diversi controlli dalla Casella degli strumenti nella finestra WPF. Dopo avere rilasciato un controllo nella finestra WPF, verrà creato automaticamente il codice che consente di posizionare correttamente il controllo al momento dell'esecuzione del programma.
Se non è possibile visualizzare la finestra Proprietà, scegliere FinestraProprietà dal menu Visualizza. In questa finestra vengono elencate le proprietà della finestra o del controllo WPF attualmente selezionato ed è possibile modificare i valori esistenti.
Modificare le dimensioni della finestra WPF impostando la proprietà Height su 550 e la proprietà Width su 370 nella finestra Proprietà.
Modificare il titolo della finestra WPF in Riquadro input penna.
Modificare la proprietà Background della finestra WPF sul colore marrone, facendo clic su Brown 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 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 della 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 nella finestra WPF.
Impostare le proprietà seguenti del controllo InkCanvas nella finestra Proprietà:

Proprietà

Valore

Width

Auto

Height

Auto

HorizontalAlignment

Stretch

VerticalAlignment

Stretch

Margin

9, 9, 9, 68
Modificare il colore del controllo InkCanvas in giallo impostando 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 sotto InkCanvas. Posizionare button1 a sinistra e button2 a destra.
Selezionare button1 e modificare il markup XAML nella visualizzazione XAML, come mostrato nel markup seguente. 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"
    Click="ButtonCloseClicked">Close</Button>
```
L'applicazione WPF deve essere simile all'applicazione Riquadro input penna nella figura riportata di seguito.

Applicazione Riquadro input penna WPF

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

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

Per creare gestori eventi

Fare doppio clic su Cancella, quindi aggiungere il seguente codice al gestore dell'evento Click generato:
```
    this.inkCanvas1.Strokes.Clear(); 
```
Tornare alla visualizzazione Finestra di progettazione facendo clic con il pulsante destro del mouse sull'editor di codice, quindi scegliendo Finestra di progettazione.
Fare doppio clic su Chiudi, quindi aggiungere il seguente codice al gestore dell'evento Click generato:
```
    this.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 chiudere l'applicazione.

Vedere anche

Attività

Procedura: creare un nuovo progetto di applicazione WPF

Procedura: creare un'applicazione console C#

Procedura: creare un'applicazione Windows Form C#

Altre risorse

Creazione di un'applicazione Visual C#

Share via