Esercitazione: Creare una nuova app WPF con .NET

Questa esercitazione illustra come usare Visual Studio per creare una nuova app Windows Presentation Foundation (WPF). Con Visual Studio si aggiungono controlli alle finestre per progettare l'interfaccia utente dell'app e gestire gli eventi di input da tali controlli per interagire con l'utente. Al termine di questa esercitazione è disponibile una semplice app che aggiunge nomi a una casella di riepilogo.

In questa esercitazione:

Ecco un'anteprima dell'app creata durante l'esercitazione seguente:

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 la finestra della finestra di progettazione XAML per la finestra predefinita MainWindow. Se la finestra di progettazione non è visibile, fare doppio clic sul file MainWindow.xaml nella finestra 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 interagisce durante la creazione di un'app:

1. Esplora soluzioni

   Tutti i file di progetto, il codice, le finestre, le risorse, vengono visualizzati in questa finestra.

2. Proprietà

   Questa finestra 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 l'elemento . Per quanto riguarda l'immagine precedente, la barra del titolo della finestra è stata selezionata nella finestra di progettazione.

3. Casella degli strumenti

   La casella degli strumenti contiene tutti i controlli che è possibile aggiungere a un'area di progettazione. Per aggiungere un controllo alla superficie corrente, fare doppio clic sul controllo o trascinare il controllo sulla superficie. È invece comune usare la finestra dell'editor di codice XAML per progettare un'interfaccia utente (UI) usando la finestra di progettazione XAML per visualizzare in anteprima i risultati.

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, nella finestra 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 potrebbe impostare automaticamente le 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, nella finestra 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 finestra 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>

Per comprendere meglio il codice XAML, è possibile suddividerlo. XAML è semplicemente XML elaborato da WPF per creare un'interfaccia utente. 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:

• Spazi dei nomi XML

  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 di <Window> al tipo definito dal codice: il file MainWindow.xaml.cs o MainWindow.xaml.vb , ovvero la Names.MainWindow classe in C# e MainWindow in Visual Basic.

• 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

Per l'app di esempio, questa finestra è troppo grande e la barra del titolo non è descrittiva. Ora si procederà a risolverlo.

1. Per prima cosa, eseguire l'app premendo F5 o selezionando Debug>Avvia debug dal menu.

   Verrà visualizzata la finestra predefinita generata dal modello, senza controlli e un titolo di MainWindow:

   

2. Modificare il titolo della finestra impostando su TitleNames.

3. Modificare le dimensioni della finestra impostando su Width180 e Height su 260.

   <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 controllo griglia consente di definire righe e colonne, in modo analogo a una tabella, e di posizionare 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 alla griglia. Ad esempio, è possibile inserire un altro <Grid> controllo in una combinazione di righe e colonne specifica e tale nuova griglia può quindi definire più righe e colonne e avere elementi figlio specifici.

Il controllo griglia inserisce i controlli figlio in righe e colonne. 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.

Regolare il layout della griglia per i controlli necessari per questa app.

1. Aggiungere un nuovo attributo all'elemento <Grid> : Margin="10".

   Questa impostazione porta la griglia in dai bordi della finestra e lo rende un po 'più bello.

2. Definire 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>
   

3. 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 configurata, è possibile iniziare ad aggiungere controlli. Per prima cosa, iniziare con il controllo etichetta.

1. Creare un nuovo <Label> elemento all'interno dell'elemento <Grid> , dopo le definizioni di riga e colonna. Impostare il contenuto dell'elemento sul 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.

   Si noti che l'etichetta occupa metà della finestra, perché è stata posizionata automaticamente nella prima riga e colonna della griglia. Per la prima riga, non è necessario che lo spazio sia sufficiente perché si userà solo quella riga per l'etichetta.

2. 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.

   

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. Il controllo non conosce nulla sulla griglia e il controllo non definisce proprietà per controllarne la posizione all'interno della griglia.

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.

Il controllo griglia definisce nuove proprietà che i controlli figlio possono collegarsi a se stessi. Le proprietà non esistono effettivamente nel controllo stesso, sono disponibili per il controllo dopo l'aggiunta 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 è stata 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.

1. Dichiarare il <ListBox /> controllo sotto il <Label> controllo .

2. Impostare la proprietà Grid.Row su 1.

3. Impostare la proprietà x:Name su lstNames.

   Dopo aver denominato un controllo, è possibile farvi riferimento nel code-behind. Il nome viene assegnato al controllo con l'attributo x:Name .

Ecco l'aspetto del codice XAML:

<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 usa per immettere un nome da aggiungere alla casella di riepilogo. Tuttavia, invece di tentare di creare più righe e colonne nella griglia per disporre questi controlli, 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 la disposizione di ognuno dei relativi controlli figlio in sequenza. "impilate" ogni controllo dopo l'altro.

1. Dichiarare il <StackPanel> controllo sotto il <ListBox> controllo .

2. Impostare la proprietà Grid.Row su 1.

3. Impostare la proprietà Grid.Column su 1.

4. Imposta Margin su 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. Questo margine ha un valore di 5,0,0,0, che è molto diverso da 10. La proprietà margin è 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.

5. All'interno del <StackPanel> controllo creare un <TextBox /> controllo .

   1. Impostare la proprietà x:Name su txtName.

6. Infine, dopo , <TextBox>ancora all'interno di <StackPanel>, creare un <Button> controllo .

   1. Impostare la proprietà x:Name su btnAdd.
   2. Imposta Margin su 0,5,0,0.
   3. Impostare il contenuto su Add Name.

Ecco l'aspetto del codice XAML:

<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. Gli attributi XAML vengono usati per sottoscrivere gli eventi esattamente come vengono usati per impostare le proprietà.

1. Individuare il <Button> controllo .

2. 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>
   

3. Generare il codice del gestore eventi. Fare clic con il pulsante destro del mouse su ButtonAddName_Click e selezionare Vai a definizione.

   Questa azione genera un metodo nel code-behind che corrisponde al nome del gestore specificato.

   private void ButtonAddName_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

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

4. 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 viene gestito, eseguire l'app. La finestra viene visualizzata e è possibile immettere un nome nella casella di testo e quindi aggiungerla facendo clic sul pulsante.

Contenuto correlato

• Altre informazioni su Windows Presentation Foundation
• Panoramica di XAML