Esercitazione: Creare una nuova app WPF con .NET

In questa breve esercitazione si apprenderà come creare una nuova app Windows Presentation Foundation (WPF) con Visual Studio. Dopo aver generato l'app iniziale, si apprenderà come aggiungere controlli e come gestire gli eventi. Al termine di questa esercitazione, si avrà una semplice app che aggiunge nomi a una casella di riepilogo.

In questa esercitazione apprenderai a:

Ecco un'anteprima dell'app che verrà compilata seguendo questa esercitazione:

Prerequisiti

Creare un'app WPF

Il primo passaggio per creare una nuova app consiste nell'aprire Visual Studio e generare l'app da un modello.

Dopo aver generato l'app, Visual Studio dovrebbe aprire il riquadro della finestra di progettazione XAML per la finestra predefinita MainWindow. Se la finestra di progettazione non è visibile, fare doppio clic sul file MainWindow.xaml nel riquadro Esplora soluzioni per aprire la finestra di progettazione.

Parti importanti di Visual Studio

Il supporto per WPF in Visual Studio include cinque componenti importanti con cui si interagirà durante la creazione di un'app:

1. Esplora soluzioni

   Tutti i file di progetto, il codice, le finestre, le risorse, verranno visualizzati in questo riquadro.

2. Proprietà

   Questo riquadro mostra le impostazioni delle proprietà che è possibile configurare in base all'elemento selezionato. Ad esempio, se si seleziona un elemento da Esplora soluzioni, verranno visualizzate le impostazioni delle proprietà correlate al file. Se si seleziona un oggetto in Progettazione, verranno visualizzate le impostazioni per tale elemento.

3. Casella degli strumenti

   La casella degli strumenti contiene tutti i controlli che è possibile aggiungere a un modulo. Per aggiungere un controllo al form corrente, fare doppio clic su un controllo o trascinare il controllo.

4. Finestra di progettazione XAML

   Questa è la finestra di progettazione per un documento XAML. È interattivo ed è possibile trascinare oggetti dalla casella degli strumenti. Selezionando e spostando gli elementi nella finestra di progettazione, è possibile comporre visivamente l'interfaccia utente per l'app.

   Quando sia la finestra di progettazione che l'editor sono visibili, le modifiche apportate a una vengono riflesse nell'altro. Quando si selezionano elementi nella finestra di progettazione, nel riquadro Proprietà vengono visualizzate le proprietà e gli attributi relativi a tale oggetto.

5. Editor di codice XAML

   Questo è l'editor di codice XAML per un documento XAML. L'editor di codice XAML è un modo per creare l'interfaccia utente senza una finestra di progettazione. La finestra di progettazione può dedurre i valori delle proprietà in un controllo quando il controllo viene aggiunto nella finestra di progettazione. L'editor di codice XAML offre molto più controllo.

   Quando sia la finestra di progettazione che l'editor sono visibili, le modifiche apportate a una vengono riflesse nell'altro. Quando si sposta il cursore di testo nell'editor di codice, nel riquadro Proprietà vengono visualizzate le proprietà e gli attributi relativi a tale oggetto.

Esaminare il codice XAML

Dopo aver creato il progetto, l'editor di codice XAML è visibile con una quantità minima di codice XAML per visualizzare la finestra. Se l'editor non è aperto, fare doppio clic sull'elemento MainWindow.xaml nella Esplora soluzioni. Il codice XAML dovrebbe essere simile all'esempio seguente:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Suddividere questo codice XAML per comprenderlo meglio. XAML è semplicemente XML che può essere elaborato dai compilatori usati da WPF. Descrive l'interfaccia utente WPF e interagisce con il codice .NET. Per comprendere XAML, è necessario avere almeno familiarità con le nozioni di base di XML.

La radice <Window> del documento rappresenta il tipo di oggetto descritto dal file XAML. Esistono otto attributi dichiarati e in genere appartengono a tre categorie:

• Namespaces (Spazi dei nomi)

  Uno spazio dei nomi XML fornisce una struttura al codice XML, determinando il contenuto XML che può essere dichiarato nel file.

  L'attributo principale xmlns importa lo spazio dei nomi XML per l'intero file e, in questo caso, esegue il mapping ai tipi dichiarati da WPF. Gli altri spazi dei nomi XML dichiarano un prefisso e importano altri tipi e oggetti per il file XAML. Ad esempio, lo xmlns:local spazio dei nomi dichiara il prefisso e esegue il local mapping agli oggetti dichiarati dal progetto, quelli dichiarati nello spazio dei nomi del Names codice.

• Attributo x:Class

  Questo attributo esegue il mapping dell'oggetto <Window> al tipo definito dal codice: il file MainWindow.xaml.cs o MainWindow.xaml.vb , ovvero la Names.MainWindow classe .

• Attributo Title

  Qualsiasi attributo normale dichiarato nell'oggetto XAML imposta una proprietà di tale oggetto. In questo caso, l'attributo Title imposta la Window.Title proprietà .

Modificare la finestra

Eseguire prima di tutto il progetto e visualizzare l'output predefinito. Verrà visualizzata una finestra visualizzata, senza controlli, e un titolo di MainWindow:

Per l'app di esempio, questa finestra è troppo grande e la barra del titolo non è descrittiva. Modificare il titolo e le dimensioni della finestra modificando gli attributi appropriati nel codice XAML con i valori seguenti:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Preparare il layout

WPF offre un potente sistema di layout con molti controlli di layout diversi. I controlli di layout consentono di posizionare e ridimensionare i controlli figlio e possono anche farlo automaticamente. Il controllo layout predefinito fornito all'utente in questo codice XAML è il <Grid> controllo .

Il Grid controllo consente di definire righe e colonne, in modo analogo a una tabella e di inserire i controlli all'interno dei limiti di una combinazione di righe e colonne specifica. È possibile avere un numero qualsiasi di controlli figlio o altri controlli di layout aggiunti a Grid. Ad esempio, è possibile inserire un altro Grid controllo in una combinazione di righe e colonne specifica e tale nuovo Grid può quindi definire più righe e colonne e avere elementi figlio specifici.

Il <Grid> controllo definisce righe e colonne in cui saranno presenti i controlli. Una griglia ha sempre una singola riga e colonna dichiarata, ovvero la griglia per impostazione predefinita è una singola cella. Questo non ti dà molta flessibilità nell'inserimento dei controlli.

Prima di aggiungere le nuove righe e colonne, aggiungere un nuovo attributo all'elemento <Grid> : Margin="10". Questo ininseme la griglia dalla finestra e lo rende un po 'più bello.

Definire quindi due righe e due colonne, dividendo la griglia in quattro celle:

<Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

Selezionare la griglia nell'editor di codice XAML o nella finestra di progettazione XAML, si noterà che la finestra di progettazione XAML mostra ogni riga e colonna:

Aggiungere il primo controllo

Ora che la griglia è stata creata, è possibile iniziare ad aggiungere controlli. Per prima cosa, iniziare con il controllo etichetta. Creare un nuovo <Label> elemento all'interno dell'elemento <Grid> , dopo le definizioni di riga e colonna e assegnargli un valore stringa di Names:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>

Definisce <Label>Names</Label> il contenuto Names. Alcuni controlli comprendono come gestire il contenuto, altri no. Il contenuto di un controllo esegue il mapping alla Content proprietà . Impostando il contenuto tramite la sintassi dell'attributo XAML, si userà questo formato: <Label Content="Names" />. Entrambi i modi esegono la stessa operazione, impostando il contenuto dell'etichetta per visualizzare il testo Names.

Tuttavia, l'etichetta occupa metà della finestra perché è stata assegnata automaticamente alla prima riga e alla prima colonna della griglia. Per la prima riga, non è necessario che lo spazio sia sufficiente perché si userà solo quella riga per l'etichetta. Modificare l'attributo Height del primo <RowDefinition> da * a Auto. Il Auto valore ridimensiona automaticamente la riga della griglia in base alle dimensioni del relativo contenuto, in questo caso il controllo etichetta.

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

Si noti che la finestra di progettazione mostra ora l'etichetta che occupa una piccola quantità dell'altezza disponibile. Ora c'è più spazio per la riga successiva da occupare. La maggior parte dei controlli definisce un certo tipo di valore di altezza e larghezza che devono occupare in modo ottimale per loro. Ad esempio, il controllo etichetta ha un valore di altezza che garantisce che sia possibile leggerlo.

Posizionamento dei controlli

Parliamo del posizionamento dei controlli. L'etichetta creata nella sezione precedente è stata inserita automaticamente nella riga 0 e nella colonna 0 della griglia. La numerazione delle righe e delle colonne inizia a 0 e incrementa di 1 per ogni nuova riga o colonna. Il controllo non conosce nulla sulla griglia e il controllo non definisce proprietà per controllarne la posizione all'interno della griglia. Il controllo potrebbe anche essere stato posizionato all'interno di un altro controllo di layout con un proprio set di regole che definisce come posizionare i controlli.

Come si indica a un controllo di usare una riga o una colonna diversa quando il controllo non conosce la griglia? Proprietà associate! La griglia sfrutta il potente sistema di proprietà fornito da WPF. La griglia definisce nuove proprietà che i controlli figlio possono dichiarare e usare. Le proprietà non esistono effettivamente nel controllo stesso, sono collegate dalla griglia quando il controllo viene aggiunto alla griglia.

La griglia definisce due proprietà per determinare la posizione di riga e colonna di un controllo figlio: Grid.Row e Grid.Column. Se queste proprietà vengono omesse dal controllo, è implicito che abbiano i valori predefiniti pari a 0, quindi il controllo viene inserito in riga 0 e colonna 0 della griglia. Provare a modificare la posizione del <Label> controllo impostando l'attributo Grid.Column su 1:

<Label Grid.Column="1">Names</Label>

Si noti che l'etichetta viene ora spostata nella seconda colonna. È possibile usare le Grid.Row proprietà associate e Grid.Column per posizionare i controlli successivi che verranno creati. Per il momento, tuttavia, ripristinare l'etichetta nella colonna 0.

Creare la casella di riepilogo nome

Ora che la griglia è ridimensionata correttamente e l'etichetta creata, aggiungere un controllo casella di riepilogo sulla riga sotto l'etichetta. La casella di riepilogo sarà nella riga 1 e nella colonna 0. Verrà inoltre assegnato a questo controllo il nome di lstNames. Dopo aver denominato un controllo, è possibile farvi riferimento nel code-behind. Il nome viene assegnato al controllo con l'attributo x:Name .

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Aggiungere i controlli rimanenti

Gli ultimi due controlli che verranno aggiunti sono una casella di testo e un pulsante, che l'utente userà per immettere un nome da aggiungere alla casella di riepilogo. Tuttavia, invece di tentare di creare più righe e colonne per la griglia, questi controlli verranno inseriti nel <StackPanel> controllo layout.

Il pannello stack differisce dalla griglia in base alla modalità di posizione dei controlli. Mentre si indica alla griglia dove si desidera che i controlli siano con le Grid.Row proprietà associate e Grid.Column associate, il pannello dello stack funziona automaticamente posizionando il primo controllo, quindi posizionando il controllo successivo dopo di esso, continuando fino a quando non sono stati posizionati tutti i controlli. "impilate" ogni controllo sotto l'altro.

Creare il <StackPanel> controllo dopo la casella di riepilogo e inserirlo nella colonna della riga 1 1della griglia . Aggiungere un altro attributo denominato Margin con un valore di 5,0,0,0:

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>

L'attributo Margin è stato usato in precedenza nella griglia, ma è stato inserito solo in un singolo valore, 10. A questo punto è stato usato un valore di 5,0,0,0 nel pannello dello stack. Il margine è un Thickness tipo e può interpretare entrambi i valori. Uno spessore definisce lo spazio intorno a ogni lato di una cornice rettangolare, rispettivamente sinistra, superiore, destra, inferiore. Se il valore per il margine è un singolo valore, usa tale valore per tutti e quattro i lati.

Creare quindi un <TextBox> controllo e <Button> in <StackPanel>.

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Il layout per la finestra è completo. Tuttavia, l'app non ha alcuna logica in esso per essere effettivamente funzionale. Successivamente, è necessario associare gli eventi di controllo al codice e ottenere l'app per eseguire effettivamente un'operazione.

Aggiungere il codice per l'evento Click

L'oggetto <Button> creato ha un Click evento generato quando l'utente preme il pulsante. È possibile sottoscrivere questo evento e aggiungere codice per aggiungere un nome alla casella di riepilogo. Proprio come per impostare una proprietà su un controllo aggiungendo un attributo XAML, puoi usare un attributo XAML per sottoscrivere un evento. Impostare l'attributo Click su ButtonAddName_Click

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

È ora necessario generare il codice del gestore. Fare clic con il pulsante destro del mouse su ButtonAddName_Click e selezionare Vai a definizione. Questa azione genera un metodo nel code-behind corrispondente al nome del gestore immesso.

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub

Aggiungere quindi il codice seguente per eseguire questi tre passaggi:

1. Assicurarsi che la casella di testo contenga un nome.
2. Verificare che il nome immesso nella casella di testo non esista già.
3. Aggiungere il nome alla casella di riepilogo.

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

Eseguire l'app

Ora che l'evento è stato codificato, è possibile eseguire l'app premendo F5 o selezionando Debug>Avvia debug dal menu. La finestra viene visualizzata e è possibile immettere un nome nella casella di testo e quindi aggiungerla facendo clic sul pulsante.

Passaggi successivi