Condividi tramite

Guida introduttiva a Windows Presentation Foundation

  • Articolo

Aggiornamento: novembre 2007

In questa esercitazione viene fornita una semplice introduzione allo sviluppo di un'applicazione Windows Presentation Foundation (WPF) che include elementi comuni alla maggior parte delle applicazioni WPF: markup CSS, code-behind, definizioni di applicazioni, controlli, layout, associazioni dati e stili.

Nel presente argomento sono contenute le seguenti sezioni.

  • Riepilogo
  • Prerequisiti
  • Creare i file di codice dell'applicazione
  • Compilazione ed esecuzione dell'applicazione
  • Aggiungere layout
  • Aggiungere controlli
  • Aggiungere un'immagine e un titolo
  • Aggiungere codice per gestire gli eventi
  • Creare l'interfaccia utente per ExpenseReportPage
  • Aggiungere codice per applicare uno stile a un controllo
  • Associare dati a un controllo
  • Connettere dati ai controlli
  • Aggiungere stili ai dati con i modelli di dati
  • Suggerimenti
  • Argomenti successivi
  • Argomenti correlati

Nel corso dell'esercitazione viene illustrato lo sviluppo di un'applicazione WPF semplice mediante la procedura descritta di seguito.

  • Definizione del markup XAML per la progettazione dell'aspetto dell'interfaccia utente 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 layout per la composizione dell'interfaccia utente dell'applicazione.

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

  • Associazione dell'interfaccia utente ai dati allo scopo di popolare l'interfaccia utente dai dati e di mantenere sincronizzati i dati e l'interfaccia utente.

Al termine dell'esercitazione, verrà completata la compilazione di un'applicazione Windows autonoma che consente agli utenti di visualizzare i report di spesa relativi a determinate persone. L'applicazione sarà costituita da più pagine WPF, inserite in una finestra di tipo browser.

Il codice di esempio utilizzato per compilare questa esercitazione è disponibile sia per C# che per Microsoft Visual Basic .NET; vedere Introduzione alla compilazione di applicazioni Windows Presentation Foundation.

Prerequisiti

Per compilare l'applicazione sviluppata in questa esercitazione, è necessario che Microsoft .NET Framework e Windows Software Development Kit (SDK) siano entrambi installati.

Una volta completata l'installazione, è possibile compilare l'applicazione da una finestra di comando (sebbene sia possibile utilizzare un Ambiente di sviluppo integrato (IDE, Integrated Development Environment) quale Microsoft Visual Studio). Per eseguire la compilazione dal prompt dei comandi, è necessario utilizzare la finestra di comando installata con Windows Software Development Kit (SDK). Tale finestra è disponibile nel percorso di menu indicato di seguito:

  • Menu Start | Tutti i programmi | Microsoft Windows SDK | CMD Shell

In alternativa, è possibile aprire il prompt dei comandi di Windows attenendosi alla seguente procedura:

  1. Nel menu Start, selezionare Esegui.

  2. Immettere i dati seguenti:

    C:\WINDOWS\system32\cmd.exe /E:ON /V:ON /T:0E /K "C:\Program Files\Microsoft SDKs\Windows\v6.0\Bin\SetEnv.Cmd"

  3. Scegliere OK.

Notare che SetEnv.cmd consente di configurare l'ambiente necessario per compilare le applicazioni WPF dal prompt dei comandi.

Creare i file di codice dell'applicazione

In questo passaggio viene creata l'infrastruttura dell'applicazione, che include una definizione dell'applicazione, due pagine e un'immagine.

  1. Creare un nuovo file di markup XAML denominato App.xaml. Questo file definisce un'applicazione WPF e viene inoltre utilizzato per specificare la visualizzazione automatica dell'interfaccia utente all'avvio dell'applicazione; in questo caso, HomePage.xaml (che verrà creata nel passaggio successivo). L'aspetto del markup XAML sarà simile a quello mostrato di seguito:

    <Application 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  StartupUri="HomePage.xaml">
</Application>

  2. Creare un nuovo file di markup XAML denominato HomePage.xaml, che sarà la prima pagina visualizzata all'avvio dell'applicazione. HomePage.xaml consente di visualizzare un elenco di persone tra le quali l'utente può selezionare quella per la quale verrà mostrato il report di spesa. Aggiungere un elemento Page a HomePage.xaml con la seguente configurazione:

    • Barra del titolo del browser "ExpenseIt".

    • Larghezza del browser pari a 550 Device Independent Pixel.

    • Altezza del browser pari a 350 Device Independent Pixel.

    • Titolo della pagina "ExpenseIt - Home".

    L'aspetto del markup XAML ottenuto sarà simile a questo:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
</Page>

  3. Creare un nuovo file di codice denominato HomePage.xaml.cs. Questo file sarà di tipo code-behind e conterrà il codice per la gestione degli eventi dichiarati in HomePage.xaml. Il codice dovrebbe risultare simile al seguente:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
    }
}

  4. Creare un nuovo file di markup XAML denominato ExpenseReportPage.xaml. Aggiungere un elemento Page e impostare "ExpenseIt - View Expense Report" come titolo della pagina. La pagina conterrà il report di spesa relativo alla persona selezionata in HomePage.xaml. L'aspetto del markup XAML ottenuto sarà simile al seguente:

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">
</Page>

  5. Creare un nuovo file di markup denominato ExpenseReportPage.xaml.cs. Si tratterà di un file code-behind che associa i dati del report di spesa all'interfaccia utente definita in ExpenseReportPage.xaml. Il codice dovrebbe risultare simile al seguente:

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage()
        {
            InitializeComponent();
        }
    }
}

  6. Aggiungere un'immagine denominata watermark.png nella stessa cartella contenente i cinque file di codice creati nei passaggi precedenti. È possibile creare un'immagine personalizzata oppure copiare il file con lo stesso nome dal codice di esempio.

Compilazione ed esecuzione dell'applicazione

In questo passaggio si utilizza MSBuild per compilare l'applicazione definita nella sezione precedente.

  1. Creare un nuovo file denominato ExpenseIt.csproj. Si tratterà del file di MSBuild, ovvero di un file XML speciale che contiene la configurazione della build per l'applicazione e che include gli elementi indicati di seguito:

    • Le variabili di compilazione globali per il progetto compilato, inclusi il nome dell'assembly compilato, il tipo di assembly da compilare e la cartella in cui aggiungere l'assembly compilato.

    • I riferimenti ai file di codice.

    • I riferimenti agli assembly Microsoft .NET Frameworkche contengono i tipi utilizzati dall'applicazione.

    Il contenuto del file compilato dovrebbe essere simile al seguente:

    <?xml version="1.0" encoding="utf-8"?>
<Project xmlns="https://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <AssemblyName>ExpenseIt</AssemblyName>
        <TargetType>winexe</TargetType>
        <OutputPath>bin\$(Configuration)\</OutputPath>
    </PropertyGroup>
    <ItemGroup>
        <Reference Include="System"/>
        <Reference Include="System.Xml"/>
        <Reference Include="System.Data"/>
        <Reference Include="WindowsBase"/>
        <Reference Include="PresentationCore"/>
        <Reference Include="PresentationFramework"/>
    </ItemGroup>
    <ItemGroup>
        <ApplicationDefinition Include="App.xaml"/>
        <Page Include="HomePage.xaml"/>
        <Compile Include="HomePage.xaml.cs" />
        <Page Include="ExpenseReportPage.xaml"/>
        <Compile Include="ExpenseReportPage.xaml.cs" />
        <Resource Include="watermark.png"/>
    </ItemGroup>
    <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets"/>
    <Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets"/>
</Project>

  2. Aprire una finestra di comando nella stessa cartella contenente il file di progetto e i file di codice dell'applicazione.

  3. Dal prompt dei comandi eseguire il comando riportato di seguito.

    MSBuild ExpenseIt.csproj

    Per Microsoft Visual Basic .NET, eseguire invece il comando seguente:

    MSBuild ExpenseIt.vbproj

    Per compilare ed eseguire l'applicazione tramite Visual Studio, aprire il file di progetto in Visual Studio e premere F5.

Nota

Visual Studio 2005 genera automaticamente un file di progetto. Poiché in questa esercitazione non si presume che Visual Studio sia installato, il processo di creazione di un file di progetto viene illustrato nei dettagli. Per ulteriori informazioni sulla creazione di file csproj , vedere Compilazione di un'applicazione WPF. Se per completare l'esercitazione si sta utilizzando Visual Studio, sovrascrivere il contenuto del file csproj con il testo di MSBuild precedente.

  1. Aprire la cartella che contiene l'applicazione compilata eseguibile: expenseit.exe. Se è stata compilata dal prompt dei comandi, l'applicazione expenseit.exe si trova nella cartella indicata di seguito:

    Cartella contenente i file di codice dell'applicazione\bin\

    Se è stata compilata tramite Visual Studio, l'applicazione expenseit.exe si trova invece nella seguente cartella:

    Cartella contenente i file di codice dell'applicazione\bin\debug\

  2. Dal prompt dei comandi, eseguire l'applicazione expenseit.exe. Nella figura riportata di seguito viene mostrata l'applicazione in esecuzione.

    Schermata dell'esempio ExpenseIt

Aggiungere layout

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

Ciascuno di questi controlli supporta un tipo speciale di layout per i relativi elementi figli. È 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.

Il markup XAML indicato di seguito consente di creare una tabella a colonna singola con tre righe e un margine di 10 pixel mediante l'aggiunta di un controllo Grid a HomePage.xaml:

  1. Aprire il file HomePage.xaml.

  2. Aggiungere il seguente codice XAML tra i tag Page.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">
    <Grid Margin="10">
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
    </Grid>
</Page>

Aggiungere controlli

In questo passaggio, l'interfaccia utente della home page viene aggiornata in modo da mostrare un elenco di persone dal quale gli utenti possono scegliere per visualizzare il report di spesa relativo una determinata persona. Per creare questa interfaccia utente, a HomePage.xaml vengono aggiunti 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).

Per aggiornare il file HomePage.xaml, utilizzare la procedura indicata di seguito:

  1. Sovrascrivere il contenuto del file HomePage.xaml con il codice XAML riportato di seguito.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid Margin="10">

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

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

  </Grid>

</Page>

  2. Compilare ed eseguire l'applicazione.

Nella seguente immagine vengono mostrati i controlli creati tramite il codice in questo passaggio.

Schermata dell'esempio ExpenseIt

Aggiungere un'immagine e un titolo

In questo passaggio, l'interfaccia utente della home page viene aggiornata con un'immagine appropriata e un titolo di pagina:

  1. Aprire il file HomePage.xaml.

  2. Sovrascrivere il contenuto del file HomePage.xaml con il codice XAML riportato di seguito.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        View Expense Report
      </Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

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

    </Grid>

  </Grid>
</Page>

    Questo codice XAML consente di aggiornare il controllo Grid nei seguenti modi:

    • Creando una nuova griglia con due righe.

    • Aggiungendo un oggetto DockPanel con Canvas, Image e Label nella prima riga. L'oggetto DockPanel si estende sulle due colonne della prima riga che, insieme all'oggetto Canvas ancorato sulla sinistra, consente all'oggetto Label di sovrapporsi all'oggetto Image.

    • Utilizzando l'attributo Source dell'elemento Image per specificare l'immagine di origine: watermark.png.

    • Aggiungendo a Label il seguente titolo: "View Expense Report".

    • Utilizzando gli attributi di Canvas e Label per configurarne l'aspetto e le dimensioni.

    • Spostando la griglia originariamente contenuta nel file HomePage.xaml nella seconda colonna della seconda riga della nuova griglia.

  3. Compilare ed eseguire l'applicazione.

Nella figura riportata di seguito vengono illustrati i risultati di questo passaggio.

Schermata dell'esempio ExpenseIt

Aggiungere codice per gestire gli eventi

  1. Aprire il file HomePage.xaml.

  2. Sovrascrivere l'elemento Buttondefinito nel precedente passaggio con il codice indicato di seguito.

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

    Nota

    Il nome dell'evento Button da gestire è Click. Il nome del gestore degli eventi definiti dallo sviluppatore è viewButton_Click. Il gestore eventi viene registrato con l'evento Click per il controllo Button.

  3. Aprire il file HomePage.xaml.cs creato nel passaggio Creare i file di codice dell'applicazione dell'esercitazione.

  4. Sovrascrivere il contenuto del file con il codice riportato di seguito. In questo modo viene aggiunto il codice per gestire l'evento Click che consentirà di passare al file ExpenseReportPage.xaml.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }
        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // View Expense Report
            ExpenseReportPage expenseReportPage = new ExpenseReportPage();
            this.NavigationService.Navigate(expenseReportPage);
        }
    }
}

Creare l'interfaccia utente per ExpenseReportPage

Nel file ExpenseReportPage.xaml viene visualizzato il report di spesa relativo alla persona selezionata nel file HomePage.xaml. Gli aggiornamenti indicati di seguito consentono di aggiungere controlli e layout per creare l'interfaccia utente di base per ExpenseReportPage.xaml. Consentono inoltre di aggiungere uno sfondo e colori di riempimento ai diversi elementi dell'interfaccia utente.

  1. Aprire il file ExpenseReportPage.xaml e aggiungere il codice riportato di seguito.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Source="watermark.png" />
      </Canvas>
      <Label VerticalAlignment="Center" FontFamily="Trebuchet MS" 
        FontWeight="Bold" FontSize="18" Foreground="#0066cc">
        Expense Report For:
      </Label>
    </DockPanel>

    <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="3">

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

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Height="35" Padding="5" Background="#4E87D4">
          <Label VerticalAlignment="Center" Foreground="White">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>
    </Grid>
  </Grid>
</Page>

  2. Compilare ed eseguire l'applicazione.

Nella seguente immagine vengono mostrati gli elementi dell'interfaccia utente aggiunti nel file ExpenseReportPage.xaml.

Schermata dell'esempio ExpenseIt

Aggiungere codice per applicare uno stile a un controllo

Spesso, in un'interfaccia utente, 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'interfaccia utente vengono utilizzati gli stili. La possibilità di riutilizzo consente di semplificare la creazione e la gestione di markup XAML. In questo passaggio gli attributi per elemento definiti nei passaggi precedenti vengono sostituiti con gli stili:

  1. Aprire il file App.xaml creato nel passaggio Creare i file di codice dell'applicazione di questa esercitazione.

  2. Sovrascrivere il contenuto del file con il markup XAML riportato di seguito:

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

  <Application.Resources>

    <!-- Background image style -->
    <Style x:Key="backgroundImageStyle">
      <Setter Property="Image.Source" Value="watermark.png"/>
    </Style>

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

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

  </Application.Resources>

</Application>

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

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

    • labelStyle: per formattare le etichette Label.

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

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

    • buttonStyle: per formattare il pulsante nel file HomePage.xaml.

    Notare che gli stili sono risorse figli 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 il file HomePage.xaml.

  4. Sovrascrivere il contenuto del file con il codice riportato di seguito. Con questo passaggio gli attributi specifici dell'aspetto di ciascun elemento vengono sostituiti con uno stile appropriato.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">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" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View
      </Button>

    </Grid>

  </Grid>

</Page>

  5. Aprire il file ExpenseReportPage.xaml.

  6. Sovrascrivere il contenuto del file con il codice riportato di seguito.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <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="3">

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

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  7. Compilare ed eseguire l'applicazione. Una volta aggiunto il markup XAML in questo passaggio, l'aspetto dell'applicazione sarà di nuovo quello precedente all'aggiornamento con gli stili.

Associare dati a un controllo

In questo passaggio vengono creati i dati XML che vengono associati a diversi controlli:

  1. Aprire il file HomePage.xaml.

  2. Sovrascrivere il contenuto del file con il markup XAML riportato di seguito.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.HomePage"
  WindowTitle="ExpenseIt"
  Title="ExpenseIt - Home" 
  WindowWidth="550" WindowHeight="380">

  <Grid>

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

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

    </Grid.Resources>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">View Expense Report</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

      <!-- People list -->
      <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
        <Label Style="{StaticResource listHeaderTextStyle}">Names</Label>
      </Border>
      <ListBox Name="peopleListBox" Grid.Column="0" Grid.Row="1" 
        ItemsSource="{Binding Source={StaticResource ExpenseDataSource}, XPath=Person}" 
        ItemTemplate="{StaticResource nameItemTemplate}" />

      <!-- View report button -->
      <Button Grid.Column="0" Grid.Row="2" Style="{StaticResource buttonStyle}" 
        Click="viewButton_Click">View</Button>

    </Grid>

  </Grid>

</Page>

    Notare che i dati vengono creati come risorsa Grid.

Connettere dati ai controlli

In questo passaggio viene scritto il codice per recuperare l'elemento corrente selezionato nell'elenco di persone in HomePage e di passarne il riferimento al costruttore di ExpenseReportPage durante la creazione di istanze. ExpenseReportPage imposta il contesto dati insieme all'elemento passato, a cui saranno associati i controlli definiti in ExpenseReportPage.xaml.

  1. Aprire il file HomePage.xaml.cs.

  2. Sovrascrivere il contenuto del file con il codice riportato di seguito.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class HomePage : Page
    {
        public HomePage()
        {
            InitializeComponent();
        }

        private void viewButton_Click(object sender, RoutedEventArgs args)
        {
            // Create a new expense report page and pass it the selected person
            // by using the non-default constructor.
            ExpenseReportPage expenseReportPage = 
                new ExpenseReportPage(this.peopleListBox.SelectedItem);

            // Navigate to the expense report page,
            this.NavigationService.Navigate(expenseReportPage);
        }
    }
}

  3. Aprire il file ExpenseReportPage.xaml.cs.

  4. Sovrascrivere il contenuto del file con il codice riportato di seguito.

    using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
namespace ExpenseIt
{
    public partial class ExpenseReportPage : Page
    {
        public ExpenseReportPage(object data)
        {
            InitializeComponent();

            // Bind to expense report data.
            this.DataContext = data;
        }
    }
}

Aggiungere stili ai dati con i modelli di dati

In questo passaggio viene aggiornata l'interfaccia utente per ciascun elemento presente negli elenchi associati ai dati tramite i modelli di dati:

  1. Aprire il file ExpenseReportPage.xaml.

  2. Sovrascrivere il contenuto del file con il codice riportato di seguito.

    <Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="ExpenseIt.ExpenseReportPage"
  Title="ExpenseIt - View Expense Report">

  <Grid>

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

    <DockPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
      <Canvas DockPanel.Dock="Left" Width="230" Height="100">
        <Image Style="{StaticResource backgroundImageStyle}" />
      </Canvas>
      <Label Style="{StaticResource headerTextStyle}">Expense Report For:</Label>
    </DockPanel>

    <Grid Margin="10" Grid.Column="1" Grid.Row="1">

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

      <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 Content="{Binding XPath=@Name}" Style="{StaticResource labelStyle}"/>
      </StackPanel>

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

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

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

        <!-- Expense type list -->
        <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Expense Type</Label>
        </Border>
        <ListBox Grid.Column="0" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource typeItemTemplate}" />

        <!-- Amount list -->
        <Border Grid.Column="2" Grid.Row="0" Style="{StaticResource listHeaderStyle}">
          <Label Style="{StaticResource listHeaderTextStyle}">Amount</Label>
        </Border>
        <ListBox Grid.Column="2" Grid.Row="1" ItemsSource="{Binding XPath=Expense}" 
          ItemTemplate="{StaticResource amountItemTemplate}" />

      </Grid>

    </Grid>

  </Grid>

</Page>

  3. Compilare ed eseguire l'applicazione.

Notare che i modelli di dati vengono definiti come risorse Grid.

Nelle due figure riportate di seguito vengono mostrate entrambe le pagine dell'applicazione ExpenseIt in cui sono stati applicati i controlli, il layout, gli stili, l'associazione dati e i modelli di dati applicati:

Schermate dell'esempio ExpenseIt

Suggerimenti

In questo esempio viene illustrata una funzionalità specifica di Windows Presentation Foundation e non vengono pertanto seguite le procedure consigliate per lo sviluppo di applicazioni. Per una descrizione completa delle procedure consigliate per lo sviluppo di applicazioni Windows Presentation Foundation (WPF) e Microsoft .NET Framework, fare riferimento ai diversi argomenti indicati di seguito in base alle esigenze:

Accesso facilitato - Procedure consigliate per l'accesso facilitato

Sicurezza - Sicurezza di Windows Presentation Foundation

Localizzazione - Cenni preliminari sulla globalizzazione e localizzazione WPF

Ottimizzazione delle prestazioni di applicazioni WPF

Argomenti successivi

A questo punto si dispone di un gran numero tecniche di creazione di un'interfaccia utente mediante Windows Presentation Foundation (WPF). È stata acquisita una conoscenza approfondita dei componenti 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.

Una descrizione più dettagliata dei pannelli è disponibile in Cenni preliminari sugli elementi Panel. L'applicazione di modelli di dati viene esaminata in modo più approfondito in Cenni preliminari sui modelli di dati.

Vedere anche

Concetti

Sistema di layout

Cenni preliminari sugli elementi Panel

Cenni preliminari sull'associazione dati

Cenni preliminari sui modelli di dati

Compilazione di un'applicazione WPF