Esercitazione: Creare la prima applicazione WPF in Visual Studio 2019

  • Articolo

Questo articolo illustra come sviluppare un'applicazione desktop Windows Presentation Foundation (WPF) che include gli elementi comuni alla maggior parte delle applicazioni WPF: markup XAML (Extensible Application Markup Language), code-behind, definizioni di applicazioni, controlli, layout, data binding e stili. Per sviluppare l'applicazione, si userà Visual Studio.

Importante

Questo articolo è stato scritto per .NET Framework. Per iniziare a usare .NET 7, vedere Esercitazione: Creare una nuova app WPF (WPF .NET).

In questa esercitazione apprenderai a:

  • Creare un progetto WPF.
  • Usa XAML per progettare l'aspetto dell'interfaccia utente dell'applicazione.
  • Scrivere codice per compilare il comportamento dell'applicazione.
  • Creare una definizione dell'applicazione per gestire l'applicazione.
  • Aggiungere controlli e creare il layout per comporre l'interfaccia utente dell'applicazione.
  • Creare stili per un aspetto coerente nell'interfaccia utente dell'applicazione.
  • Associare l'interfaccia utente ai dati, sia per popolare l'interfaccia utente dai dati che per mantenere sincronizzati i dati e l'interfaccia utente.

Al termine dell'esercitazione si creerà un'applicazione Windows autonoma che consente agli utenti di visualizzare i report spese per le persone selezionate. L'applicazione è costituita da diverse pagine WPF ospitate in una finestra in stile browser.

Suggerimento

Il codice di esempio usato in questa esercitazione è disponibile sia per Visual Basic che per C# in Esercitazione codice di esempio di app WPF.

È possibile attivare o disattivare il linguaggio di codice del codice di esempio tra C# e Visual Basic usando il selettore del linguaggio nella parte superiore di questa pagina.

Prerequisiti

  • Visual Studio 2019 con il carico di lavoro Sviluppo di applicazioni desktop .NET installato.

    Per altre informazioni sull'installazione della versione più recente di Visual Studio, vedere Installare Visual Studio.

Creare il progetto dell'applicazione

Il primo passaggio consiste nel creare l'infrastruttura dell'applicazione, che include una definizione dell'applicazione, due pagine e un'immagine.

  1. Creare un nuovo progetto applicazione WPF in Visual Basic o Visual C# denominato ExpenseIt:

    1. Aprire Visual Studio e selezionare Crea un nuovo progetto nel menu Attività iniziali .

      Verrà visualizzata la finestra di dialogo Crea un nuovo progetto .

    2. Nell'elenco a discesa Linguaggio selezionare C# o Visual Basic.

    3. Selezionare il modello App WPF (.NET Framework) e quindi selezionare Avanti.

      Create a new project dialog

      Verrà visualizzata la finestra di dialogo Configura il nuovo progetto .

    4. Immettere il nome ExpenseIt del progetto e quindi selezionare Crea.

      Configure a new project dialog

      Visual Studio crea il progetto e apre la finestra di progettazione per la finestra dell'applicazione predefinita denominata MainWindow.xaml.

  2. Aprire Application.xaml (Visual Basic) o App.xaml (C#).

    Questo file XAML definisce un'applicazione WPF e tutte le risorse dell'applicazione. Questo file viene usato anche per specificare l'interfaccia utente, in questo caso MainWindow.xaml, che viene visualizzata automaticamente all'avvio dell'applicazione.

    Il codice XAML dovrebbe essere simile al seguente in Visual Basic:

    <Application x:Class="Application"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        
    </Application.Resources>
</Application>

    E come illustrato di seguito in C#:

    <Application x:Class="ExpenseIt.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     StartupUri="MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

  3. Aprire MainWindow.xaml.

    Questo file XAML è la finestra principale dell'applicazione e visualizza il contenuto creato nelle pagine. La Window classe definisce le proprietà di una finestra, ad esempio il titolo, le dimensioni o l'icona e gestisce eventi, ad esempio chiusura o nascondere.

  4. Modificare l'elemento Window in un NavigationWindowoggetto , come illustrato nel codice XAML seguente:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     ...
</NavigationWindow>

    Questa app passa a contenuto diverso a seconda dell'input dell'utente. Questo è il motivo per cui il principale Window deve essere modificato in un oggetto NavigationWindow. NavigationWindow eredita tutte le proprietà di Window. L'elemento NavigationWindow nel file XAML crea un'istanza della NavigationWindow classe . Per altre informazioni, vedere Cenni preliminari sulla navigazione.

  5. Rimuovere gli Grid elementi da tra i NavigationWindow tag.

  6. Modificare le proprietà seguenti nel codice XAML per l'elemento NavigationWindow :

    • Impostare la Title proprietà su "ExpenseIt".

    • Impostare la Height proprietà su 350 pixel.

    • Impostare la Width proprietà su 500 pixel.

    Il codice XAML dovrebbe essere simile al seguente per Visual Basic:

    <NavigationWindow x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500">
 
</NavigationWindow>

    E come segue per C#:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500">
    
</NavigationWindow>

  7. Aprire MainWindow.xaml.vb o MainWindow.xaml.cs.

    Questo file è un file code-behind che contiene codice per gestire gli eventi dichiarati in MainWindow.xaml. Il file contiene una classe parziale per la finestra definita in XAML.

  8. Se si usa C#, modificare la MainWindow classe in modo che derivi da NavigationWindow. In Visual Basic questo avviene automaticamente quando si modifica la finestra in XAML. Il codice C# dovrebbe ora essere simile al seguente:

    
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : NavigationWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

Aggiungere file all'applicazione

In questa sezione si aggiungeranno due pagine e un'immagine all'applicazione.

  1. Aggiungere una nuova pagina al progetto e denominarla ExpenseItHome.xaml:

    1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo del ExpenseIt progetto e scegliere Aggiungi>pagina.

    2. Nella finestra di dialogo Aggiungi nuovo elemento il modello Pagina (WPF) è già selezionato. Immettere il nome ExpenseItHomee quindi selezionare Aggiungi.

    Questa pagina è la prima pagina visualizzata all'avvio dell'applicazione. Verrà visualizzato un elenco di persone da selezionare per visualizzare una nota spese per.

  2. ExpenseItHome.xaml aperti.

  3. Impostare su Title "ExpenseIt - Home".

  4. Impostare su DesignHeight 350 pixel e su DesignWidth 500 pixel.

    Il codice XAML viene ora visualizzato come segue per Visual Basic:

    <Page x:Class="ExpenseItHome"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignHeight="350" d:DesignWidth="500"
  Title="ExpenseIt - Home">
    <Grid>
        
    </Grid>
</Page>

    E come segue per C#:

    <Page x:Class="ExpenseIt.ExpenseItHome"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="350" d:DesignWidth="500"
    Title="ExpenseIt - Home">

    <Grid>
        
    </Grid>
</Page>

  5. Aprire MainWindow.xaml.

  6. Aggiungere una Source proprietà all'elemento NavigationWindow e impostarla su "ExpenseItHome.xaml".

    Viene impostata ExpenseItHome.xaml la prima pagina aperta all'avvio dell'applicazione.

    Xaml di esempio in Visual Basic:

    <NavigationWindow x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">
    
</NavigationWindow>

    E in C#:

    <NavigationWindow x:Class="ExpenseIt.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ExpenseIt" Height="350" Width="500" Source="ExpenseItHome.xaml">
    
</NavigationWindow>

    Suggerimento

    È anche possibile impostare la proprietà Source nella categoria Varie della finestra Proprietà .

    Source property in Properties window

  7. Aggiungere un'altra nuova pagina WPF al progetto e denominarla ExpenseReportPage.xaml::

    1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo del ExpenseIt progetto e scegliere Aggiungi>pagina.

    2. Nella finestra di dialogo Aggiungi nuovo elemento selezionare il modello Pagina (WPF). Immettere il nome ExpenseReportPage e quindi selezionare Aggiungi.

    Questa pagina mostrerà la nota spese per la persona selezionata nella ExpenseItHome pagina.

  8. Aprire ExpenseReportPage.xaml.

  9. Impostare su Title "ExpenseIt - View Expense".

  10. Impostare su DesignHeight 350 pixel e su DesignWidth 500 pixel.

    ExpenseReportPage.xaml ha ora un aspetto simile al seguente in Visual Basic:

    <Page x:Class="ExpenseReportPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="350" d:DesignWidth="500"
      Title="ExpenseIt - View Expense">
    <Grid>
        
    </Grid>
</Page>

    E come illustrato di seguito in C#:

    <Page x:Class="ExpenseIt.ExpenseReportPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="350" d:DesignWidth="500"
    Title="ExpenseIt - View Expense">

    <Grid>
        
    </Grid>
</Page>

  11. Aprire ExpenseItHome.xaml.vb e ExpenseReportPage.xaml.vb oppure ExpenseItHome.xaml.cs e ExpenseReportPage.xaml.cs.

    Quando si crea un nuovo file di pagina, Visual Studio crea automaticamente il file code-behind . Questi file code-behind gestiscono la logica per rispondere all'input dell'utente.

    Il codice dovrebbe essere simile al seguente per ExpenseItHome:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for ExpenseItHome.xaml
    /// </summary>
    public partial class ExpenseItHome : Page
    {
        public ExpenseItHome()
        {
            InitializeComponent();
        }
    }
}

    Class ExpenseItHome

End Class

    E come segue per ExpenseReportPage:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ExpenseIt
{
    /// <summary>
    /// Interaction logic for ExpenseReportPage.xaml
    /// </summary>
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    }
}

    Class ExpenseReportPage

End Class

  12. Aggiungere un'immagine denominata watermark.png al progetto. È possibile creare un'immagine personalizzata, copiare il file dal codice di esempio o recuperarlo dal repository GitHub microsoft/WPF-Samples .

    1. Fare clic con il pulsante destro del mouse sul nodo del progetto e scegliere Aggiungi>elemento esistente oppure premere MAIUSC+ALT+A.

    2. Nella finestra di dialogo Aggiungi elemento esistente impostare il filtro file su Tutti i file o File di immagine, selezionare il file di immagine da usare e quindi selezionare Aggiungi.

    3. Selezionare il file di immagine in Esplora soluzioni, quindi nella finestra Proprietà impostare Azione di compilazione su Risorsa.

Compilare ed eseguire l'applicazione

  1. Per compilare ed eseguire l'applicazione, premere F5 o selezionare Avvia debug dal menu Debug .

    La figura seguente mostra l'applicazione con i NavigationWindow pulsanti:

    Application after you build and run it.

  2. Chiudere l'applicazione per tornare a Visual Studio.

Creare il layout

Il layout offre un modo ordinato per posizionare gli elementi dell'interfaccia utente e gestisce anche le dimensioni e la posizione di tali elementi quando un'interfaccia utente viene ridimensionata. In genere si crea un layout tramite uno dei controlli di layout seguenti:

  • Canvas - Definisce un'area all'interno della quale è possibile posizionare in modo esplicito gli elementi figlio usando le coordinate relative all'area Canvas.
  • DockPanel - Definisce un'area in cui è possibile disporre gli elementi figlio orizzontalmente o verticalmente, rispetto l'uno all'altro.
  • Grid - Definisce un'area della griglia flessibile costituita da colonne e righe.
  • StackPanel - Dispone gli elementi figlio in una singola riga che può essere orientata orizzontalmente o verticalmente.
  • VirtualizingStackPanel - Dispone e virtualizza il contenuto su una singola riga orientata orizzontalmente o verticalmente.
  • WrapPanel - Posiziona gli elementi figlio in posizione sequenziale da sinistra a destra, interrompendo il contenuto alla riga successiva al bordo della casella contenitore. L'ordinamento successivo avviene in sequenza dall'alto verso il basso o da destra a sinistra, a seconda del valore della proprietà Orientation.

Ognuno di questi controlli di layout supporta un particolare tipo di layout per i relativi elementi figlio. ExpenseIt le pagine possono essere ridimensionate e ogni pagina ha elementi disposti orizzontalmente e verticalmente insieme ad altri elementi. In questo esempio, viene Grid usato come elemento di layout per l'applicazione.

Suggerimento

Per altre informazioni sugli elementi, vedere Panoramica dei Panel pannelli. Per altre informazioni sul layout, vedere Layout.

In questa sezione viene creata una tabella a colonna singola con tre righe e un margine di 10 pixel aggiungendo definizioni di colonna e di riga a Grid in ExpenseItHome.xaml.

  1. In ExpenseItHome.xamlimpostare la Margin proprietà sull'elemento Grid su "10,0,10,10", che corrisponde ai margini sinistro, superiore, destro e inferiore:

    <Grid Margin="10,0,10,10">

    Suggerimento

    È anche possibile impostare i valori Margin nella finestra Proprietà , sotto la categoria Layout :

    Margin values in Properties window

  2. Aggiungere il codice XAML seguente tra i Grid tag per creare le definizioni di riga e colonna:

    <Grid.ColumnDefinitions>
    <ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition />
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

    L'oggetto Height di due righe è impostato su Auto, il che significa che le righe vengono ridimensionate in base al contenuto nelle righe. Il valore predefinito Height è Star il dimensionamento, il che significa che l'altezza della riga è una proporzione ponderata dello spazio disponibile. Ad esempio, se due righe hanno un Height valore "*", ognuna ha un'altezza pari alla metà dello spazio disponibile.

    Il Grid file dovrebbe ora contenere il codice XAML seguente:

    <Grid Margin="10,0,10,10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
</Grid>

Aggiunta di controlli

In questa sezione si aggiornerà l'interfaccia utente della home page per visualizzare un elenco di persone, in cui si seleziona una persona per visualizzare il report spese. I controlli sono oggetti dell'interfaccia utente che consentono agli utenti di interagire con l'applicazione. Per altre informazioni, vedere Controlli.

Per creare questa interfaccia utente, aggiungere gli elementi seguenti a ExpenseItHome.xaml:

  • Oggetto ListBox (per l'elenco di persone).
  • Oggetto Label (per l'intestazione dell'elenco).
  • Oggetto Button (per fare clic per visualizzare la nota spese per la persona selezionata nell'elenco).

Ogni controllo viene posizionato in una riga di impostando Grid la Grid.Row proprietà associata. Per altre informazioni sulle proprietà associate, vedere Cenni preliminari sulle proprietà associate.

  1. In ExpenseItHome.xamlaggiungere il codice XAML seguente da qualche parte tra i Grid tag:

    
<!-- People list -->
<Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
    <Label VerticalAlignment="Center" Foreground="White">Names</Label>
</Border>
<ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1">
    <ListBoxItem>Mike</ListBoxItem>
    <ListBoxItem>Lisa</ListBoxItem>
    <ListBoxItem>John</ListBoxItem>
    <ListBoxItem>Mary</ListBoxItem>
</ListBox>

<!-- View report button -->
<Button Grid.Column="0" Grid.Row="2" Margin="0,10,0,10" Width="125" Height="25" HorizontalAlignment="Right">View</Button>

    Suggerimento

    È anche possibile creare i controlli trascinandoli dalla finestra Casella degli strumenti nella finestra di progettazione e quindi impostandone le proprietà nella finestra Proprietà .

  2. Compilare ed eseguire l'applicazione.

    La figura seguente mostra i controlli creati:

ExpenseIt sample screenshot displaying a list of names

Aggiungere un'immagine e un titolo

In questa sezione si aggiornerà l'interfaccia utente della home page con un'immagine e un titolo di pagina.

  1. In ExpenseItHome.xamlaggiungere un'altra colonna a ColumnDefinitions con un valore fisso Width di 230 pixel:

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

  2. Aggiungere un'altra riga a RowDefinitions, per un totale di quattro righe:

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

  3. Spostare i controlli nella seconda colonna impostando la Grid.Column proprietà su 1 in ognuno dei tre controlli (Border, ListBox e Button).

  4. Spostare ogni controllo verso il basso di una riga incrementando il valore Grid.Row di 1 per ognuno dei tre controlli (Border, ListBox e Button) e per l'elemento Border.

    Il codice XAML per i tre controlli è ora simile al seguente:

      <Border Grid.Column="1" Grid.Row="1" Height="35" Padding="5" Background="#4E87D4">
      <Label VerticalAlignment="Center" Foreground="White">Names</Label>
  </Border>
  <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
      <ListBoxItem>Mike</ListBoxItem>
      <ListBoxItem>Lisa</ListBoxItem>
      <ListBoxItem>John</ListBoxItem>
      <ListBoxItem>Mary</ListBoxItem>
  </ListBox>

  <!-- View report button -->
  <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right">View</Button>

  5. Impostare la proprietà Background sul file di immagine watermark.png aggiungendo il codice XAML seguente in qualsiasi punto tra i <Grid> tag e </Grid> :

    <Grid.Background>
    <ImageBrush ImageSource="watermark.png"/>
</Grid.Background>

  6. Prima dell'elemento Border , aggiungere un Label oggetto con il contenuto "View Expense Report". Questa etichetta è il titolo della pagina.

    <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
    View Expense Report
</Label>

  7. Compilare ed eseguire l'applicazione.

La figura seguente mostra i risultati di ciò che è stato appena aggiunto:

ExpenseIt sample screenshot showing the new image background and page title

Aggiungere codice per gestire gli eventi

  1. In ExpenseItHome.xamlaggiungere un Click gestore eventi all'elemento Button . Per altre informazioni, vedere Procedura: Creare un gestore eventi semplice.

      <!-- View report button -->
  <Button Grid.Column="1" Grid.Row="3" Margin="0,10,0,0" Width="125"
Height="25" HorizontalAlignment="Right" Click="Button_Click">View</Button>

  2. Aprire ExpenseItHome.xaml.vb o ExpenseItHome.xaml.cs.

  3. Aggiungere il codice seguente alla ExpenseItHome classe per aggiungere un gestore eventi click pulsante. Il gestore eventi apre la pagina ExpenseReportPage .

    private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage();
    this.NavigationService.Navigate(expenseReportPage);
}

    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    ' View Expense Report
    Dim expenseReportPage As New ExpenseReportPage()
    Me.NavigationService.Navigate(expenseReportPage)

End Sub

Creare l'interfaccia utente per ExpenseReportPage

ExpenseReportPage.xaml visualizza la nota spese per la persona selezionata nella ExpenseItHome pagina. In questa sezione si creerà l'interfaccia utente per ExpenseReportPage. Si aggiungeranno anche colori di sfondo e riempimento ai vari elementi dell'interfaccia utente.

  1. Aprire ExpenseReportPage.xaml.

  2. Aggiungere il codice XAML seguente tra i Grid tag:

     <Grid.Background>
     <ImageBrush ImageSource="watermark.png" />
 </Grid.Background>
 <Grid.ColumnDefinitions>
     <ColumnDefinition Width="230" />
     <ColumnDefinition />
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition />
 </Grid.RowDefinitions>


 <Label Grid.Column="1" VerticalAlignment="Center" FontFamily="Trebuchet MS" 
 FontWeight="Bold" FontSize="18" Foreground="#0066cc">
     Expense Report For:
 </Label>
 <Grid Margin="10" Grid.Column="1" Grid.Row="1">

     <Grid.ColumnDefinitions>
         <ColumnDefinition />
         <ColumnDefinition />
     </Grid.ColumnDefinitions>
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
         <RowDefinition />
     </Grid.RowDefinitions>

     <!-- Name -->
     <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
         <Label Margin="0,0,0,5" FontWeight="Bold">Name:</Label>
         <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
     </StackPanel>

     <!-- Department -->
     <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
         <Label Margin="0,0,0,5" FontWeight="Bold">Department:</Label>
         <Label Margin="0,0,0,5" FontWeight="Bold"></Label>
     </StackPanel>

     <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" 
           HorizontalAlignment="Left">
         <!-- Expense type and Amount table -->
         <DataGrid  AutoGenerateColumns="False" RowHeaderWidth="0" >
             <DataGrid.ColumnHeaderStyle>
                 <Style TargetType="{x:Type DataGridColumnHeader}">
                     <Setter Property="Height" Value="35" />
                     <Setter Property="Padding" Value="5" />
                     <Setter Property="Background" Value="#4E87D4" />
                     <Setter Property="Foreground" Value="White" />
                 </Style>
             </DataGrid.ColumnHeaderStyle>
             <DataGrid.Columns>
                 <DataGridTextColumn Header="ExpenseType" />
                 <DataGridTextColumn Header="Amount"  />
             </DataGrid.Columns>
         </DataGrid>
     </Grid>
 </Grid>

    Questa interfaccia utente è simile a ExpenseItHome.xaml, ad eccezione dei dati del report visualizzati in un oggetto DataGrid.

  3. Compilare ed eseguire l'applicazione.

  4. Selezionare il pulsante Visualizza .

    Viene visualizzata la pagina della nota spese. Si noti anche che il pulsante di spostamento indietro è abilitato.

La figura seguente mostra gli elementi dell'interfaccia utente aggiunti a ExpenseReportPage.xaml.

ExpenseIt sample screenshot showing the UI just created for the ExpenseReportPage.

Controlli di stile

L'aspetto di vari elementi è spesso lo stesso per tutti gli elementi dello stesso tipo in un'interfaccia utente. L'interfaccia utente usa gli stili per rendere riutilizzabili gli aspetti in più elementi. La riutilizzabilità degli stili consente di semplificare la creazione e la gestione di XAML. In questa sezione vengono sostituiti con gli stili gli attributi per elemento definiti nei passaggi precedenti.

  1. Aprire Application.xaml o App.xaml.

  2. Aggiungere il codice XAML seguente tra i Application.Resources tag:

    
<!-- Header text style -->
<Style x:Key="headerTextStyle">
    <Setter Property="Label.VerticalAlignment" Value="Center"></Setter>
    <Setter Property="Label.FontFamily" Value="Trebuchet MS"></Setter>
    <Setter Property="Label.FontWeight" Value="Bold"></Setter>
    <Setter Property="Label.FontSize" Value="18"></Setter>
    <Setter Property="Label.Foreground" Value="#0066cc"></Setter>
</Style>

<!-- Label style -->
<Style x:Key="labelStyle" TargetType="{x:Type Label}">
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Margin" Value="0,0,0,5" />
</Style>

<!-- DataGrid header style -->
<Style x:Key="columnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="Height" Value="35" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="#4E87D4" />
    <Setter Property="Foreground" Value="White" />
</Style>

<!-- List header style -->
<Style x:Key="listHeaderStyle" TargetType="{x:Type Border}">
    <Setter Property="Height" Value="35" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="#4E87D4" />
</Style>

<!-- List header text style -->
<Style x:Key="listHeaderTextStyle" TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Left" />
</Style>

<!-- Button style -->
<Style x:Key="buttonStyle" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="125" />
    <Setter Property="Height" Value="25" />
    <Setter Property="Margin" Value="0,10,0,0" />
    <Setter Property="HorizontalAlignment" Value="Right" />
</Style>

    Questo codice XAML aggiunge gli stili seguenti:

    • headerTextStyle: per formattare il titolo della pagina Label.

    • labelStyle: per formattare i controlli Label .

    • columnHeaderStyle: per formattare DataGridColumnHeader.

    • listHeaderStyle: per formattare i controlli Border dell'intestazione dell'elenco.

    • listHeaderTextStyle: per formattare l'intestazione Labeldell'elenco .

    • buttonStyle: per formattare in ButtonExpenseItHome.xaml.

    Si noti che gli stili sono risorse e elementi figlio dell'elemento Application.Resources property. In questa posizione, gli stili vengono applicati a tutti gli elementi di un'applicazione. Per un esempio di uso delle risorse in un'app .NET, vedere Usare le risorse dell'applicazione.

  3. In ExpenseItHome.xamlsostituire tutti gli elementi tra gli Grid elementi con il codice XAML seguente:

       <Grid.Background>
       <ImageBrush ImageSource="watermark.png"  />
   </Grid.Background>
  
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="230" />
       <ColumnDefinition />
   </Grid.ColumnDefinitions>
   
   <Grid.RowDefinitions>
       <RowDefinition/>
       <RowDefinition Height="Auto"/>
       <RowDefinition />
       <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>

   <!-- People list -->
  
   <Label Grid.Column="1" Style="{StaticResource headerTextStyle}" >
       View Expense Report
   </Label>
   
   <Border Grid.Column="1" Grid.Row="1" Style="{StaticResource listHeaderStyle}">
       <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
   </Border>
   <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2">
       <ListBoxItem>Mike</ListBoxItem>
       <ListBoxItem>Lisa</ListBoxItem>
       <ListBoxItem>John</ListBoxItem>
       <ListBoxItem>Mary</ListBoxItem>
   </ListBox>

   <!-- View report button -->
   <Button Grid.Column="1" Grid.Row="3" Click="Button_Click" Style="{StaticResource buttonStyle}">View</Button>

    Le proprietà come VerticalAlignment e FontFamily che definiscono l'aspetto di ciascun controllo vengono rimosse e sostituite mediante l'applicazione degli stili. Ad esempio, viene applicato a "View Expense Report" .For example, headerTextStyle is applied to the "View Expense Report" Label.

  4. Aprire ExpenseReportPage.xaml.

  5. Sostituire tutti gli elementi tra gli Grid elementi con il codice XAML seguente:

      <Grid.Background>
      <ImageBrush ImageSource="watermark.png" />
  </Grid.Background>
  <Grid.ColumnDefinitions>
      <ColumnDefinition Width="230" />
      <ColumnDefinition />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
  </Grid.RowDefinitions>


  <Label Grid.Column="1" Style="{StaticResource headerTextStyle}">
      Expense Report For:
  </Label>
  <Grid Margin="10" Grid.Column="1" Grid.Row="1">

      <Grid.ColumnDefinitions>
          <ColumnDefinition />
          <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
          <RowDefinition />
      </Grid.RowDefinitions>

      <!-- Name -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
          <Label Style="{StaticResource labelStyle}">Name:</Label>
          <Label Style="{StaticResource labelStyle}"></Label>
      </StackPanel>

      <!-- Department -->
      <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" 
  Orientation="Horizontal">
          <Label Style="{StaticResource labelStyle}">Department:</Label>
          <Label Style="{StaticResource labelStyle}"></Label>
      </StackPanel>

      <Grid Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Top" 
            HorizontalAlignment="Left">
          <!-- Expense type and Amount table -->
          <DataGrid ColumnHeaderStyle="{StaticResource columnHeaderStyle}" 
                    AutoGenerateColumns="False" RowHeaderWidth="0" >
              <DataGrid.Columns>
                  <DataGridTextColumn Header="ExpenseType" />
                  <DataGridTextColumn Header="Amount"  />
              </DataGrid.Columns>
          </DataGrid>
      </Grid>
  </Grid>

    Questo codice XAML aggiunge stili agli Label elementi e Border .

  6. Compilare ed eseguire l'applicazione. L'aspetto della finestra è identico a quello precedente.

    ExpenseIt sample screenshot with the same appearance as in the last section.

  7. Chiudere l'applicazione per tornare a Visual Studio.

Associare dati a un controllo

In questa sezione verranno creati i dati XML associati a vari controlli.

  1. In ExpenseItHome.xaml, dopo l'elemento di apertura Grid , aggiungere il codice XAML seguente per creare un oggetto XmlDataProvider contenente i dati per ogni persona:

    <Grid.Resources>
    <!-- Expense Report Data -->
    <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
        <x:XData>
            <Expenses xmlns="">
                <Person Name="Mike" Department="Legal">
                    <Expense ExpenseType="Lunch" ExpenseAmount="50" />
                    <Expense ExpenseType="Transportation" ExpenseAmount="50" />
                </Person>
                <Person Name="Lisa" Department="Marketing">
                    <Expense ExpenseType="Document printing"
          ExpenseAmount="50"/>
                    <Expense ExpenseType="Gift" ExpenseAmount="125" />
                </Person>
                <Person Name="John" Department="Engineering">
                    <Expense ExpenseType="Magazine subscription" 
         ExpenseAmount="50"/>
                    <Expense ExpenseType="New machine" ExpenseAmount="600" />
                    <Expense ExpenseType="Software" ExpenseAmount="500" />
                </Person>
                <Person Name="Mary" Department="Finance">
                    <Expense ExpenseType="Dinner" ExpenseAmount="100" />
                </Person>
            </Expenses>
        </x:XData>
    </XmlDataProvider>
</Grid.Resources>

    I dati sono creati come Grid risorsa. In genere questi dati vengono caricati come file, ma per semplicità i dati vengono aggiunti inline.

  2. All'interno dell'elemento aggiungere l'elemento <Grid.Resources> seguente <xref:System.Windows.DataTemplate> , che definisce come visualizzare i dati in ListBox, dopo l'elemento <XmlDataProvider> :

    <Grid.Resources>
    <!-- Name item template -->
    <DataTemplate x:Key="nameItemTemplate">
        <Label Content="{Binding XPath=@Name}"/>
    </DataTemplate>
</Grid.Resources>

    Per altre informazioni sui modelli di dati, vedere Panoramica dei modelli di dati.

  3. Sostituire l'oggetto esistente ListBox con il codice XAML seguente:

    <ListBox Name="peopleListBox" Grid.Column="1" Grid.Row="2" 
         ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}"
         ItemTemplate="{StaticResource nameItemTemplate}">
</ListBox>

    Questo codice XAML associa la ItemsSource proprietà dell'oggetto ListBox all'origine dati e applica il modello di dati come ItemTemplate.

Connessione dati ai controlli

Successivamente, si aggiungerà il codice per recuperare il nome selezionato nella ExpenseItHome pagina e passarlo al costruttore di ExpenseReportPage. ExpenseReportPage imposta il contesto di dati con l'elemento passato, ovvero a ciò a cui vengono associati i controlli definiti in ExpenseReportPage.xaml .

  1. Aprire ExpenseReportPage.xaml.vb o ExpenseReportPage.xaml.cs.

  2. Aggiungere un costruttore che accetti un oggetto, in modo da poter passare i dati della nota spese della persona selezionata.

    public partial class ExpenseReportPage : Page
{
    public ExpenseReportPage()
    {
        InitializeComponent();
    }

    // Custom constructor to pass expense report data
    public ExpenseReportPage(object data):this()
    {
        // Bind to expense report data.
        this.DataContext = data;
    }
}

    Partial Public Class ExpenseReportPage
    Inherits Page
    Public Sub New()
        InitializeComponent()
    End Sub

    ' Custom constructor to pass expense report data
    Public Sub New(ByVal data As Object)
        Me.New()
        ' Bind to expense report data.
        Me.DataContext = data
    End Sub

End Class

  3. Aprire ExpenseItHome.xaml.vb o ExpenseItHome.xaml.cs.

  4. Modificare il Click gestore eventi per chiamare il nuovo costruttore passando i dati della nota spese della persona selezionata.

    private void Button_Click(object sender, RoutedEventArgs e)
{
    // View Expense Report
    ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
    this.NavigationService.Navigate(expenseReportPage);
}

    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    ' View Expense Report
    Dim expenseReportPage As New ExpenseReportPage(Me.peopleListBox.SelectedItem)
    Me.NavigationService.Navigate(expenseReportPage)

End Sub

Stile dei dati con modelli di dati

In questa sezione si aggiornerà l'interfaccia utente per ogni elemento negli elenchi associati a dati usando i modelli di dati.

  1. Aprire ExpenseReportPage.xaml.

  2. Associare il contenuto degli elementi "Name" e "Department" Label alla proprietà dell'origine dati appropriata. Per altre informazioni sul data binding, vedere Panoramica del data binding.

    <!-- Name -->
<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Orientation="Horizontal">
    <Label Style="{StaticResource labelStyle}">Name:</Label>
    <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Name}"></Label>
</StackPanel>

<!-- Department -->
<StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Orientation="Horizontal">
    <Label Style="{StaticResource labelStyle}">Department:</Label>
    <Label Style="{StaticResource labelStyle}" Content="{Binding XPath=@Department}"></Label>
</StackPanel>

  3. Dopo l'elemento di apertura Grid , aggiungere i modelli di dati seguenti, che definiscono come visualizzare i dati del report spese:

    <!--Templates to display expense report data-->
<Grid.Resources>
    <!-- Reason item template -->
    <DataTemplate x:Key="typeItemTemplate">
        <Label Content="{Binding XPath=@ExpenseType}"/>
    </DataTemplate>
    <!-- Amount item template -->
    <DataTemplate x:Key="amountItemTemplate">
        <Label Content="{Binding XPath=@ExpenseAmount}"/>
    </DataTemplate>
</Grid.Resources>

  4. Sostituire gli DataGridTextColumn elementi con sotto DataGridTemplateColumn l'elemento DataGrid e applicarli. Specificare anche l'attributo ItemsSource con il relativo valore nell'elemento DataGrid .

    <!-- Expense type and Amount table -->
<DataGrid ItemsSource="{Binding XPath=Expense}" ColumnHeaderStyle="{StaticResource columnHeaderStyle}" AutoGenerateColumns="False" RowHeaderWidth="0" >
   
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="ExpenseType" CellTemplate="{StaticResource typeItemTemplate}" />
        <DataGridTemplateColumn Header="Amount" CellTemplate="{StaticResource amountItemTemplate}" />
    </DataGrid.Columns>
    
</DataGrid>

  5. Compilare ed eseguire l'applicazione.

  6. Selezionare una persona e quindi selezionare il pulsante Visualizza .

La figura seguente mostra entrambe le pagine dell'applicazione ExpenseIt con controlli, layout, stili, data binding e modelli di dati applicati:

Both pages of the app showing the names list and an expense report.

Nota

Questo esempio illustra una funzionalità specifica di WPF e non segue tutte le procedure consigliate per elementi come sicurezza, localizzazione e accessibilità. Per una copertura completa di WPF e delle procedure consigliate per lo sviluppo di app .NET, vedere gli argomenti seguenti:

Passaggi successivi

In questa procedura dettagliata sono state illustrate alcune tecniche per la creazione di un'interfaccia utente usando Windows Presentation Foundation (WPF). È ora necessario avere una conoscenza di base dei blocchi predefiniti di un'app .NET associata a dati. Per altre informazioni sull'architettura WPF e i modelli di programmazione, vedere gli argomenti seguenti:

Per altre informazioni sulla creazione di applicazioni, vedere gli argomenti seguenti:

Vedi anche