Procedura dettagliata: introduzione a WPF

In questa procedura dettagliata viene fornita un'introduzione allo sviluppo di un'applicazione Windows Presentation Foundation (WPF) che include elementi comuni alla maggior parte delle applicazioni WPF, ovvero markup Extensible Application Markup Language (XAML), code-behind, definizioni di applicazioni, controlli, layout, associazioni dati e stili.

Viene descritto in modo dettagliato lo sviluppo di un'applicazione WPF semplice tramite i passaggi riportati di seguito.

• Definizione di XAML per la progettazione dell'aspetto dell'user interface (UI) dell'applicazione.

• Scrittura di codice per la compilazione del comportamento dell'applicazione.

• Creazione di una definizione dell'applicazione per la gestione dell'applicazione stessa.

• Aggiunta di controlli e creazione del layout per la composizione dell'UI dell'applicazione.

• Creazione di stili per la coerenza dell'aspetto dell'UI di un'applicazione.

• Associazione dell'UI ai dati con lo scopo di popolare l'UI con i dati e di mantenere sincronizzati dati e UI.

Al termine della procedura dettagliata, sarà stata completata la compilazione di un'applicazione Windows autonoma che consente di visualizzare le note spese relative a persone selezionate. L'applicazione sarà costituita da più pagine WPF ospitate in una finestra di tipo browser.

Il codice di esempio utilizzato per compilare questa procedura dettagliata è disponibile sia per Microsoft Visual Basic che per C# in Introduzione alla compilazione di applicazioni WPF (la pagina potrebbe essere in inglese).

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei componenti seguenti:

• Visual Studio 2010

Per ulteriori informazioni sull'installazione di Visual Studio, vedere Installazione di Visual Studio.

Creazione di un progetto di applicazione

In questa sezione viene creata 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. Per ulteriori informazioni, vedere Procedura: creare un nuovo progetto di applicazione WPF.

   Nota
   In questa procedura guidata viene utilizzato il controllo DataGrid disponibile in .NET Framework 4.Assicurarsi che il progetto sia destinato a .NET Framework 4.Per ulteriori informazioni, vedere Procedura: scelta di una versione o profilo di .NET Framework specifico.

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

   Il file XAML definisce un'applicazione WPF ed eventuali risorse dell'applicazione. È inoltre possibile utilizzare questo file per specificare l'UI visualizzata automaticamente all'avvio dell'applicazione; in questo caso MainWindow.xaml.

   XAML dovrebbe avere l'aspetto seguente in Visual Basic:

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

   Oppure l'aspetto seguente in C#:

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

3. Aprire MainWindow.xaml.

   Questo file XAML rappresenta la finestra principale dell'applicazione e visualizza il contenuto creato nelle pagine. La classe Window definisce le proprietà di una finestra quali titolo, dimensione o icona e gestisce eventi quali la chiusura o la disattivazione della visualizzazione.

4. Modificare l'elemento Window in un elemento NavigationWindow.

   Questa applicazione passerà a contenuto diverso a seconda dell'interazione dell'utente. Pertanto, è necessario modificare l'elemento Window principale in un elemento NavigationWindow. NavigationWindow eredita tutte le proprietà di Window. L'elemento NavigationWindow nel file XAML crea un'istanza della classe NavigationWindow. Per ulteriori informazioni, vedere Cenni preliminari sulla navigazione.

5. Modificare le seguenti proprietà dell'elemento NavigationWindow:

   • Impostare la proprietà Title su "ExpenseIt".

   • Impostare la proprietà Width su 500 pixel.

   • Impostare la proprietà Height su 350 pixel.

   • Rimuovere gli elementi Grid inclusi tra i tag NavigationWindow.

   XAML dovrebbe avere l'aspetto seguente in Visual Basic:

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

   Oppure l'aspetto seguente in C#:

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

6. Aprire MainWindow.xaml.vb o MainWindow.xaml.cs.

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

7. Se si utilizza C#, modificare la classe MainWindow in modo che esegua la derivazione da NavigationWindow.

   In Visual Basic questo si verifica automaticamente quando si modifica la finestra in XAML.

   Il codice dovrebbe risultare simile a quello mostrato di seguito.

   Class MainWindow
   
   End Class
   

   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();
           }
       }
   }
   

Aggiunta di file all'applicazione

In questa sezione vengono aggiunte all'applicazione due pagine e un'immagine.

1. Aggiungere una nuova pagina (WPF) al progetto denominato ExpenseItHome.xaml. Per ulteriori informazioni, vedere Procedura: aggiungere nuovi elementi a un progetto WPF.

   Questa è la pagina iniziale visualizzata al primo avvio dell'applicazione. La pagina mostrerà un elenco di persone in cui è possibile selezionare la persona desiderata per la visualizzazione della nota spese.

2. Aprire ExpenseItHome.xaml.

3. Impostare la proprietà Title su "ExpenseIt - Home".

   XAML dovrebbe avere l'aspetto seguente in Visual Basic:

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

   Oppure l'aspetto seguente in C#:

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

4. Aprire MainWindow.xaml.

5. Impostare la proprietà Source in NavigationWindow su "ExpenseItHome.xaml".

   Questo passaggio consente di impostare ExpenseItHome.xaml come prima pagina aperta all'avvio dell'applicazione. XAML dovrebbe avere l'aspetto seguente in Visual Basic:

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

   Oppure l'aspetto seguente in C#:

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

6. Aggiungere una nuova pagina (WPF) al progetto denominato ExpenseReportPage.xaml.

   La pagina visualizzerà la nota spese relativa alla persona selezionata in ExpenseItHome.xaml.

7. Aprire il file ExpenseReportPage.xaml.

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

   XAML dovrebbe avere l'aspetto seguente in Visual Basic:

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

   Oppure l'aspetto seguente in C#:

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

9. Aprire ExpenseItHome.xaml.vb ed ExpenseReportPage.xaml.vb oppure ExpenseItHome.xaml.cs ed ExpenseReportPage.xaml.cs.

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

   Il codice dovrebbe risultare simile a quello mostrato di seguito.

   Class ExpenseItHome
   
   End Class
   

   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 ExpenseReportPage
   
   End Class
   

   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();
           }
       }
   }
   

10. Aggiungere al progetto un'immagine denominata watermark.png. È possibile creare un'immagine personalizzata oppure copiare il file dal codice di esempio. Per ulteriori informazioni, vedere Procedura: aggiungere elementi esistenti a un progetto.

Compilazione ed esecuzione dell'applicazione

In questa sezione l'applicazione viene compilata ed eseguita.

1. Compilare ed eseguire l'applicazione premendo F5 oppure selezionare Avvia debug dal menu Debug.

   Nell'illustrazione che segue viene mostrata l'applicazione con i pulsanti NavigationWindow.

   

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

Creazione del layout

Il layout consente di posizionare gli elementi dell'UI in modo ordinato e gestisce le dimensioni e la posizione di tali elementi quando un'UI viene ridimensionata. In genere, è possibile creare un layout tramite uno dei seguenti controlli di layout:

• Canvas

• DockPanel

• Grid

• StackPanel

• VirtualizingStackPanel

• WrapPanel

Ciascuno di questi controlli di layout supporta un tipo speciale di layout per gli elementi figlio correlati. È possibile ridimensionare le pagine ExpenseIt; ciascuna pagina contiene elementi disposti in orizzontale e in verticale accanto ad altri elementi. Di conseguenza, il controllo Grid costituisce l'elemento di layout ideale per l'applicazione.

Nota
Per ulteriori informazioni sugli elementi Panel, vedere Cenni preliminari sugli elementi Panel.Per ulteriori informazioni sul layout, vedere Sistema di layout.

In questa sezione viene creata una tabella a colonna singola con tre righe e un margine di 10 pixel tramite l'aggiunta di definizioni di colonne e righe all'oggetto Grid di ExpenseItHome.xaml.

1. Aprire ExpenseItHome.xaml.

2. Impostare la proprietà Margin dell'elemento Grid su "10,0,10,10", valori corrispondenti rispettivamente al margine sinistro, superiore, destro e inferiore.

3. Aggiungere il seguente XAML tra i tag Grid per creare le definizioni di righe e di colonne. 

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

   La proprietà Height di due righe è impostata su Auto, ovvero le righe saranno ridimensionate in base al rispettivo contenuto. La proprietà Height predefinita corrisponde al ridimensionamento Star, ovvero la riga presenterà una proporzione ponderata dello spazio disponibile. Ad esempio se due righe hanno ciascuna altezza "*", ognuna di esse disporrà di un'altezza pari alla metà dello spazio disponibile.

   Il controllo Grid dovrebbe ora essere simile al seguente XAML:

   <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 viene aggiornata l'UI della home page in modo da mostrare un elenco in cui è possibile selezionare la persona per la quale si desidera visualizzare la nota spese. I controlli sono oggetti dell'interfaccia utente che consentono agli utenti di interagire con l'applicazione. Per ulteriori informazioni, vedere Controlli.

Per creare questa UI, vengono aggiunti a ExpenseItHome.xaml i seguenti elementi:

• ListBox (per l'elenco di persone).

• Label (per l'intestazione dell'elenco).

• Button (su cui fare clic per visualizzare il report di spesa relativo alla persona selezionata nell'elenco).

Ogni controllo viene posizionato in una riga dell'oggetto Grid mediante l'impostazione della proprietà associata Grid.Row. Per ulteriori informazioni sulle proprietà associate, vedere Cenni preliminari sulle proprietà associate.

1. Aprire ExpenseItHome.xaml.

2. Aggiungere il seguente XAML tra i tag Grid.

   
     <!-- 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,0" Width="125"
   Height="25" HorizontalAlignment="Right">View</Button>
   

3. Compilare ed eseguire l'applicazione.

Nell'illustrazione che segue vengono mostrati i controlli creati da XAML in questa sezione.

Aggiunta di un'immagine e di un titolo

In questa sezione viene aggiornata l'UI della home page con un'immagine e un titolo di pagina.

1. Aprire ExpenseItHome.xaml.

2. Aggiungere un'altra colonna a ColumnDefinitions con una proprietà Width fissa di 230 pixel.

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

3. Aggiungere un'altra riga a RowDefinitions.

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

4. Spostare i controlli nella seconda colonna impostando Grid.Column su 1. Spostare ciascun controllo di una riga verso il basso aumentando Grid.Row di 1.

     <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 dell'oggetto Grid come file di immagine watermark.png.

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

6. Prima di Border aggiungere un oggetto Label con il contenuto "View Expense Report" come 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.

Nell'illustrazione che segue vengono mostrati i risultati di questa sezione.

Aggiunta di codice per la gestione degli eventi

1. Aprire ExpenseItHome.xaml.

2. Aggiungere un gestore eventi Click all'elemento Button. Per ulteriori 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>
   

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

4. Aggiungere il codice mostrato di seguito al gestore eventi Click. Ciò consente di passare al file ExpenseReportPage.xaml all'interno della finestra.

           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
   

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

Creazione dell'interfaccia utente per ExpenseReportPage

Nel file ExpenseReportPage.xaml viene visualizzata la nota spese relativa alla persona selezionata nel file ExpenseItHome.xaml. In questa sezione vengono aggiunti i controlli e viene creata l'UI per ExpenseReportPage.xaml. In questa sezione vengono inoltre aggiunti sfondo e colori di riempimento ai diversi elementi dell'UI.

1. Aprire il file ExpenseReportPage.xaml.

2. Aggiungere il seguente XAML tra i tag Grid.

   Questa interfaccia utente è simile all'interfaccia utente creata in ExpenseItHome.xaml tranne per il fatto che i dati del rapporto sono visualizzati in un oggetto DataGrid.

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

3. Compilare ed eseguire l'applicazione.

   Nota
   Se viene generato un errore che indica che DataGrid non è stato trovato o non esiste, verificare che il progetto sia destinato a .NET Framework 4.Per ulteriori informazioni, vedere Procedura: scelta di una versione o profilo di .NET Framework specifico.

4. Fare clic sul pulsante Visualizza.

   Verrà visualizzata la pagina della nota spese.

Nell'illustrazione che segue vengono mostrati gli elementi dell'UI aggiunti al file ExpenseReportPage.xaml. Si noti che il pulsante Indietro è abilitato.

Applicazione di uno stile ai controlli

Spesso, in un'UI, l'aspetto dei diversi elementi può essere identico per tutti gli elementi di uno stesso tipo. Per rendere riutilizzabile l'aspetto tra più elementi, nell'UI vengono utilizzati gli stili. La possibilità di riutilizzo consente di semplificare la creazione e la gestione di XAML. Per ulteriori informazioni sugli stili, vedere Applicazione di stili e modelli. 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 seguente XAML tra i tag Application.Resources.

   
   <!-- 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>
   

   Grazie a questo markup XAML è possibile aggiungere i seguenti stili:

   • headerTextStyle: per formattare l'oggetto Label del titolo della pagina.

   • labelStyle: per formattare i controlli Label.

   • columnHeaderStyle: per formattare DataGridColumnHeader.

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

   • listHeaderTextStyle: per formattare l'oggetto Label dell'intestazione dell'elenco.

   • buttonStyle: per formattare l'oggetto Button in ExpenseItHome.xaml.

   Si noti che gli stili sono risorse ed elementi figlio dell'elemento proprietà Application.Resources. In questa sede, gli stili vengono applicati a tutti gli elementi presenti in un'applicazione. Per un esempio di utilizzo delle risorse in un'applicazione .NET Framework, vedere Procedura: utilizzare le risorse delle applicazioni.

3. Aprire ExpenseItHome.xaml.

4. Sostituire tutti i dati inclusi tra gli elementi Grid con il seguente XAML.

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

   Proprietà quali VerticalAlignment e FontFamily che definiscono l'aspetto di ogni controllo verranno rimosse e sostituite mediante l'applicazione degli stili. Ad esempio headerTextStyle verrà applicato all'oggetto Label "View Expense Report".

5. Aprire il file ExpenseReportPage.xaml.

6. Sostituire tutti i dati inclusi tra gli elementi Grid con il seguente XAML.

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

   Ciò consente di aggiungere gli stili agli elementi Label e Border.

7. Compilare ed eseguire l'applicazione.

   Dopo aver aggiunto l'XAML in questa sezione, l'aspetto dell'applicazione sarà di nuovo quello precedente all'aggiornamento con gli stili.

Associazione di dati a un controllo

In questa sezione vengono creati i dati XML che vengono associati a diversi controlli.

1. Aprire ExpenseItHome.xaml.

2. Dopo l'apertura dell'elemento Grid aggiungere il seguente XAML per creare un oggetto XmlDataProvider contenente i dati per ogni persona.

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

   <Grid.Resources>
   
   
   ...
   
   
   <!-- Expense Report Data -->
   <XmlDataProvider x:Key="ExpenseDataSource" XPath="Expenses">
       <x:XData>
           <Expenses >
               <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>
   

3. Nella risorsa Grid aggiungere il seguente oggetto DataTemplate che definisce la modalità di visualizzazione dei dati in ListBox. Per ulteriori informazioni sui modelli di dati, vedere Cenni preliminari sui modelli di dati.

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

4. Sostituire l'oggetto ListBox esistente con il seguente XAML.

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

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

Connessione dei dati ai controlli

In questa sezione viene scritto il codice che consente di recuperare l'elemento corrente selezionato nell'elenco di persone nella pagina ExpenseItHome.xaml e passarne il riferimento al costruttore di ExpenseReportPage durante la creazione di istanze. ExpenseReportPage imposta il contesto dati con l'elemento passato a cui verranno 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 passare i dati della nota spese della persona selezionata.

       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
   

   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;
       }
   
   }
   

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

4. Modificare il gestore eventi Click per chiamare il nuovo costruttore che passa i dati della nota spese relativa alla persona selezionata.

           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
   

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

Aggiunta di stili ai dati con i modelli di dati

In questa sezione viene aggiornata l'UI per ciascun elemento presente negli elenchi associati ai dati tramite i modelli di dati:

1. Aprire il file ExpenseReportPage.xaml.

2. Associare il contenuto degli elementi Label "Name" e "Department" alla proprietà di origine dati adeguata. Per ulteriori informazioni sull'associazione dati, vedere Cenni preliminari sull'associazione dati.

   <!-- 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'apertura dell'elemento Grid, aggiungere i modelli di dati seguenti che definiscono le modalità di visualizzazione dei dati della nota 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. Applicare i modelli alle colonne DataGrid in cui sono visualizzati i dati della nota spese.

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

5. Compilare ed eseguire l'applicazione.

6. Selezionare una persona e fare clic sul pulsante Visualizza.

Nella figura seguente vengono illustrate entrambe le pagine dell'applicazione ExpenseIt a cui sono stati applicati i controlli, il layout, gli stili, l'associazione dati e i modelli di dati.

Suggerimenti

In questo esempio viene illustrata una funzionalità specifica di WPF e, di conseguenza, non vengono seguite le procedure consigliate per lo sviluppo di applicazioni. Per una descrizione completa delle procedure consigliate per lo sviluppo di applicazioni WPF e .NET Framework, vedere gli argomenti riportati di seguito scegliendo in base alle esigenze:

• Accesso facilitato - Procedure consigliate per l'accesso facilitato

• Sicurezza - Sicurezza (WPF)

• Localizzazione - Cenni preliminari sulla globalizzazione e localizzazione WPF

• Prestazioni - Ottimizzazione delle prestazioni di applicazioni WPF

Fasi successive

A questo punto si dispone di un gran numero tecniche di creazione di un'UI mediante Windows Presentation Foundation (WPF). È stata acquisita una conoscenza approfondita dei blocchi predefiniti di base di un'applicazione .NET Framework associata ai dati. Questo argomento non è da intendersi come esaustivo, ma intende fornire un'idea delle possibilità di scoprire altre tecniche al di là di quelle presentate.

Per ulteriori informazioni sull'architettura WPF e sui modelli di programmazione, vedere gli argomenti seguenti:

• Architettura WPF

• Cenni preliminari su XAML (WPF)

• Cenni preliminari sulle proprietà di dipendenza

• Sistema di layout

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

• Sviluppo di applicazioni

• Controlli

• Cenni preliminari sull'associazione dati

• Grafica e funzionalità multimediali

• Documenti in WPF

Vedere anche

Concetti

Cenni preliminari sugli elementi Panel

Cenni preliminari sui modelli di dati

Compilazione di un'applicazione WPF (WPF)

Altre risorse

Stili e modelli

Cronologia delle modifiche

Data	Cronologia	Motivo
Dicembre 2010	Aggiunta di note relative a progetti destinati a .NET Framework 4.	Miglioramento delle informazioni.