Partager via

Procédure pas à pas : mise en route de WPF

  • Article

Cette procédure pas à pas vous initie au développement d'une application Windows Presentation Foundation (WPF) qui inclut des éléments communs à la plupart des applications WPF : balisage Extensible Application Markup Language (XAML), code-behind, définitions d'applications, contrôles, disposition, liaison de données et styles.

Cette procédure pas à pas vous explique le développement d'une application WPF simple, en vous guidant tout au long des étapes suivantes.

  • Définition de XAML pour concevoir l'apparence de l'user interface (UI) de l'application.

  • Écriture du code pour générer le comportement de l'application.

  • Création d'une définition d'application pour gérer l'application.

  • Ajout de contrôles et création de la disposition pour composer l'UI de l'application.

  • Création de styles pour garantir l'homogénéité de l'apparence de l'UI de l'application.

  • Liaison de l'UI à des données pour remplir cette UI à partir de données et assurer la synchronisation entre données et UI.

À la fin de la procédure pas à pas, vous aurez créé une application Windows autonome qui permet aux utilisateurs d'afficher des rapports de notes de frais pour certaines personnes. L'application se composera de plusieurs pages WPF hébergées dans une fenêtre de style navigateur.

L'exemple de code utilisé pour générer cette procédure pas à pas est disponible pour Microsoft Visual Basic et C# à l'adresse suivante : Introduction à la génération d'applications Windows Presentation Foundation.

Composants requis

Pour exécuter cette procédure pas à pas, vous devez disposer des composants suivants :

  • Visual Studio 2010

Pour plus d'informations sur l'installation de Visual Studio, consultez Installation de Visual Studio.

Création du projet d'application

Dans cette section, vous créez l'infrastructure de l'application, qui inclut la définition d'application, deux pages et une image.

  1. Créez un projet d'application WPF dans Visual Basic ou Visual C# nommé ExpenseIt. Pour plus d'informations, consultez Comment : créer un projet d'application WPF.

    RemarqueRemarque

    Cette procédure pas à pas utilise le contrôle DataGrid qui est disponible dans .NET Framework 4.Assurez-vous que votre projet cible .NET Framework 4.Pour plus d'informations, consultez Comment : cibler une version ou un profil spécifique du .NET Framework.

  2. Ouvrez Application.xaml (Visual Basic) ou App.xaml (C#).

    Ce fichier XAML définit une application WPF et toutes les ressources d'application. Vous utilisez également ce fichier pour spécifier l'UI qui s'affiche automatiquement au démarrage de l'application ; dans ce cas, MainWindow.xaml.

    Votre XAML doit ressembler à ceci en 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>

    Ou à cela en 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. Ouvrez MainWindow.xaml.

    Ce fichier XAML est la fenêtre principale de votre application et affiche le contenu créé en pages. La classe Window définit les propriétés d'une fenêtre, telle que son titre, sa taille ou son icône et gère les événements, tels que la fermeture ou le masquage.

  4. Modifiez l'élément Window en une NavigationWindow.

    Cette application naviguera jusqu'au contenu différent selon l'interaction utilisateur. Par conséquent, la Window principale doit se transformer en une NavigationWindow. NavigationWindow hérite de toutes les propriétés de Window. L'élément NavigationWindow dans le fichier XAML crée une instance de la classe NavigationWindow. Pour plus d'informations, consultez Vue d'ensemble de la navigation.

  5. Modifiez les propriétés suivantes sur l'élément NavigationWindow :

    • Affectez à la propriété Title la valeur « ExpenseIt ».

    • Affectez à la propriété Width la valeur 500 pixels.

    • Affectez à la propriété Height la valeur 350 pixels.

    • Supprimez les éléments Grid entre les balises NavigationWindow.

    Votre XAML doit ressembler à ceci en 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>

    Ou à cela en 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. Ouvrez MainWindow.xaml.vb ou MainWindow.xaml.cs.

    Il s'agit d'un fichier code-behind qui contiendra le code destiné à gérer les événements déclarés dans MainWindow.xaml. Ce fichier contient une classe partielle pour la fenêtre définie en XAML.

  7. Si vous utilisez C#, modifiez la classe MainWindow à dériver de NavigationWindow.

    En Visual Basic, cela se produit automatiquement lorsque vous modifiez la fenêtre en XAML.

    Votre code doit se présenter comme suit.

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

Ajout de fichiers à l'application

Dans cette section, vous ajoutez deux pages et une image à l'application.

  1. Ajoutez une nouvelle page (WPF) au projet nommé ExpenseItHome.xaml. Pour plus d'informations, consultez Comment : ajouter de nouveaux éléments à un projet WPF.

    Cette page est la première page affichée lorsque l'application est lancée. Elle affichera une liste de personnes que l'utilisateur pourra sélectionner pour afficher un rapport de note de frais correspondant.

  2. Ouvrez ExpenseItHome.xaml.

  3. Affectez au Title la valeur « ExpenseIt - Home ».

    Votre XAML doit ressembler à ceci en 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>

    Ou à cela en 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. Ouvrez MainWindow.xaml.

  5. Affectez à la propriété Source sur le NavigationWindow la valeur « ExpenseItHome.xaml ».

    ExpenseItHome.xaml est ainsi définie comme la première page à s'ouvrir lorsque l'application démarre. Votre XAML doit ressembler à ceci en 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>

    Ou à cela en 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. Ajoutez une nouvelle page (WPF) au projet nommé ExpenseReportPage.xaml.

    Cette page affichera la note de frais pour la personne sélectionnée dans ExpenseItHome.xaml.

  7. Ouvrez ExpenseReportPage.xaml.

  8. Affectez à Title la valeur « ExpenseIt - View Expense ».

    Votre XAML doit ressembler à ceci en 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>

    Ou à cela en 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. Ouvrez ExpenseItHome.xaml.vb et ExpenseReportPage.xaml.vb, ou ExpenseItHome.xaml.cs et ExpenseReportPage.xaml.cs.

    Lorsque vous créez un nouveau fichier Page, Visual Studio crée automatiquement un fichier code-behind. Ces fichiers code-behind gèrent la logique pour répondre à l'entrée d'utilisateur.

    Votre code doit se présenter comme suit.

    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. Ajoutez une image nommée watermark.png au projet. Vous pouvez créer votre propre image ou copier le fichier du même nom depuis l'exemple de code. Pour plus d'informations, consultez Comment : ajouter des éléments existants à un projet.

Génération et exécution de l'application

Dans cette section, vous générez et exécutez l'application.

  1. Générez et exécutez l'application en appuyant sur F5 ou sélectionnez Démarrer le débogage dans le menu Déboguer.

    L'illustration suivante montre l'application avec les boutons NavigationWindow.

    Capture d'écran : exemple ExpenseIt

  2. Fermez l'application à retourner à Visual Studio.

Création de la disposition

La disposition permet de placer les éléments de l'UI de façon ordonnée et de gérer la taille et la position de ces éléments lors du redimensionnement d'une UI. Généralement, vous créez une disposition au moyen de l'un des contrôles de disposition suivants :

Chacun de ces contrôles de disposition prend en charge un type spécial de disposition pour ses éléments enfants. Les pages ExpenseIt peuvent être redimensionnées et chacune contient des éléments qui peuvent être disposés horizontalement et verticalement aux côtés d'autres éléments. Par conséquent, la Grid est l'élément de disposition idéal pour l'application.

RemarqueRemarque

Pour plus d'informations sur les éléments Panel, consultez Vue d'ensemble de Panel.Pour plus d'informations sur la disposition, consultez Système de disposition.

Dans la section, vous créez un tableau à une seule colonne et à trois lignes et avec une marge de 10 pixels en ajoutant des définitions de colonne et de ligne à la Grid dans ExpenseItHome.xaml.

  1. Ouvrez ExpenseItHome.xaml.

  2. Affectez à la propriété Margin sur l'élément Grid la valeur « 10,0,10,10 » qui correspond aux marges gauche, haute, droite et inférieure.

  3. Ajoutez le XAML suivant entre les balises Grid pour créer les définitions de colonne et ligne. 

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

    La Height de deux lignes a la valeur Auto qui signifie que les lignes seront classées selon la taille de base sur le contenu dans les lignes. La Height par défaut est dimensionnée via Star, ce qui signifie que la ligne sera proportionnelle à l'espace disponible. Par exemple, si chacune des deux lignes ont une hauteur de « * », leur hauteur correspondra à la moitié de l'espace disponible.

    Votre Grid devrait maintenant ressembler au XAML suivant :

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

Ajout de contrôles

Dans cette section, vous mettez à jour l'UI de la page d'accueil pour qu'elle affiche une liste de personnes parmi lesquelles les utilisateurs pourront sélectionner celle dont ils souhaitent afficher un rapport de note de frais. Les contrôles sont des objets d'interface utilisateur qui permettent aux utilisateurs d'interagir avec votre application. Pour plus d'informations, consultez Contrôles.

Pour créer cette UI, vous ajoutez les éléments suivants à ExpenseItHome.xaml :

  • ListBox (pour une liste de personnes).

  • Label (pour l'en-tête de liste).

  • Button (qui permettra de cliquer pour afficher la note de frais correspondant à la personne sélectionnée dans la liste).

Chaque contrôle est placé dans une ligne de la Grid en définissant la propriété jointe Grid.Row. Pour plus d'informations sur les propriétés jointes, consultez Vue d'ensemble des propriétés jointes.

  1. Ouvrez ExpenseItHome.xaml.

  2. Ajoutez le code XAML suivant entre les balises 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. Générez et exécutez l'application.

L'illustration suivante montre les contrôles créés par le XAML dans cette section.

Capture d'écran : exemple ExpenseIt

Ajout d'une image et d'un titre

Dans cette section, vous mettez à jour l'UI de la page d'accueil en ajoutant une image appropriée et un titre de page.

  1. Ouvrez ExpenseItHome.xaml.

  2. Ajoutez une autre colonne aux ColumnDefinitions avec une Width fixe de 230 pixels.

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

  3. Ajoutez une autre ligne aux RowDefinitions.

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

  4. Déplacez les contrôles vers la deuxième colonne en affectant à Grid.Column la valeur 1. Déplacez chaque contrôle d'une ligne vers le bas, en augmentant la Grid.Row d'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. Définissez le Background de la Grid afin qu'il soit le fichier image watermark.png.

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

  6. Avant la Border, ajoutez une Label avec « View Expense Report » comme titre de page.

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

  7. Générez et exécutez l'application.

L'illustration suivante présente les résultats de cette section.

Capture d'écran : exemple ExpenseIt

Ajout de code pour gérer des événements

  1. Ouvrez ExpenseItHome.xaml.

  2. Ajoutez un gestionnaire d'événements Click à l'élément Button. Pour plus d'informations, consultez Comment : créer un gestionnaire d'événements simple.

      <!-- 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. Ouvrez ExpenseItHome.xaml.vb ou ExpenseItHome.xaml.cs.

  4. Ajoutez le code suivant au gestionnaire d'événements Click qui permet à la fenêtre de naviguer jusqu'au fichier ExpenseReportPage.xaml.

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

}

Création de l'interface utilisateur pour ExpenseReportPage

ExpenseReportPage.xaml affiche la note de frais pour la personne sélectionnée dans ExpenseItHome.xaml. Cette section ajoute des contrôles et crée l'UI pour ExpenseReportPage.xaml. Cette section ajoute aussi des couleurs d'arrière-plan et de remplissage pour les divers éléments de l'UI.

  1. Ouvrez ExpenseReportPage.xaml.

  2. Ajoutez le XAML suivant entre les balises Grid.

    Cette interface utilisateur est semblable à celle créée sur ExpenseItHome.xaml, à l'exception du fait que les données de rapport s'affichent dans un 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. Générez et exécutez l'application.

    RemarqueRemarque

    Si une erreur indique que DataGrid est introuvable ou n'existe pas, vérifiez que votre projet cible .NET Framework 4.Pour plus d'informations, consultez Comment : cibler une version ou un profil spécifique du .NET Framework.

  4. Cliquez sur le bouton Afficher.

    La page de note de frais apparaît.

L'image suivante montre les éléments d'UI ajoutés à ExpenseReportPage.xaml. Remarquez que le bouton de navigation arrière est activé.

Capture d'écran : exemple ExpenseIt

Application d'un style aux contrôles

L'apparence de différents éléments peut souvent être la même pour tous les éléments du même type dans une UI. UI utilise des styles pour permettre la réutilisation des apparences dans plusieurs éléments. La possibilité de réutiliser des styles simplifie la création et la gestion du balisage XAML. Pour plus d'informations sur les styles, consultez Application d'un style et création de modèles. Cette section remplace les attributs définis par des éléments définis au cours des étapes précédentes par des styles.

  1. Ouvrez Application.xaml ou App.xaml.

  2. Ajoutez le XAML suivant entre les balises 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>

    Cet XAML ajoute les styles suivants :

    • headerTextStyle : pour mettre en forme la Label du titre de la page.

    • labelStyle : pour mettre en forme les contrôles Label.

    • columnHeaderStyle : pour mettre en forme DataGridColumnHeader.

    • listHeaderStyle : pour mettre en forme les contrôles Border de l'en-tête de la liste.

    • listHeaderTextStyle : pour mettre en forme la Label de l'en-tête de la liste.

    • buttonStyle : pour mettre en forme le Button sur ExpenseItHome.xaml.

    Notez que les styles sont des ressources et des enfants de l'élément de propriété Application.Resources. À cet endroit, les styles sont appliqués à tous les éléments d'une application. Pour obtenir un exemple de l'utilisation des ressources dans une application .NET Framework, consultez Comment : utiliser des ressources d'application.

  3. Ouvrez ExpenseItHome.xaml.

  4. Remplacez tout ce qu'il y a entre les éléments Grid par le XAML suivant.

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

    Les propriétés, telles que VerticalAlignment et FontFamily qui définissent l'apparence de chaque contrôle, sont supprimées et remplacées en appliquant les styles. Par exemple, le headerTextStyle est appliqué à la Label « View Expense Report ».

  5. Ouvrez ExpenseReportPage.xaml.

  6. Remplacez tout ce qu'il y a entre les éléments Grid par le XAML suivant.

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

    Cela ajoute des styles aux éléments Border et Label.

  7. Générez et exécutez l'application.

    Après l'ajout du balisage XAML dans cette section, l'application conserve l'apparence qu'elle avait avant la mise à jour à l'aide de styles.

Liaison de données à un contrôle

Dans cette section, vous créez les données XML liées à différents contrôles.

  1. Ouvrez ExpenseItHome.xaml.

  2. Après l'ouverture de l'élément Grid, ajoutez le XAML suivant pour créer un XmlDataProvider qui contient les données pour chaque personne.

    Les données sont créées comme une ressource Grid. Normalement elles seraient chargées comme un fichier, mais par mesure de simplicité, les données sont ajoutées 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. Dans la ressource Grid, ajoutez le DataTemplate suivant, qui définit la façon d'afficher les données dans le ListBox. Pour plus d'informations sur les modèles de données, consultez Vue d'ensemble des modèles de données.

    <Grid.Resources>


...


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


...


</Grid.Resources>

  4. Remplacez la ListBox existante par le XAML suivant.

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

    Cet XAML lie la propriété ItemsSource de la ListBox à la source de données et applique le modèle de données en tant que ItemTemplate.

Connexion des données à des contrôles

Dans cette section, vous écrivez le code qui récupère l'élément actuel sélectionné dans la liste de personnes sur la page ExpenseItHome.xaml et passez sa référence au constructeur de ExpenseReportPage pendant l'instanciation. ExpenseReportPage définit son contexte de données avec l'élément passé, avec lequel les contrôles définis dans ExpenseReportPage.xaml vont établir la liaison.

  1. Ouvrez ExpenseReportPage.xaml.vb ou ExpenseReportPage.xaml.cs.

  2. Ajoutez un constructeur qui prend un objet de sorte que vous pouvez passer les données de note de frais de la personne sélectionnée.

        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. Ouvrez ExpenseItHome.xaml.vb ou ExpenseItHome.xaml.cs.

  4. Modifiez le gestionnaire d'événements Click pour appeler le nouveau constructeur qui passe les données de note de frais de la personne sélectionnée.

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

}

Application d'un style aux données avec les modèles de données

Dans cette section, vous mettez à jour l'UI pour chaque élément des listes de données liées au moyen de modèles de données.

  1. Ouvrez ExpenseReportPage.xaml.

  2. Liez le contenu des éléments Label « Name » et « Department » à la propriété de la source de données appropriée. Pour plus d'informations sur la liaison de données, consultez Vue d'ensemble de la liaison de données.

    <!-- 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. Une fois l'élément Grid ouvert, ajoutez les modèles de données suivants, qui définissent la façon d'afficher les données de note de frais.

    <!--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. Appliquez les modèles aux colonnes DataGrid qui affichent les données de note de frais.

    <!-- 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. Générez et exécutez l'application.

  6. Sélectionnez une personne, puis cliquez sur le bouton Afficher.

L'illustration suivante montre les deux pages de l'application ExpenseIt une fois que les contrôles, la disposition, les styles, la liaison des données et les modèles de données ont été appliqués.

Captures d'écran : exemple ExpenseIt

Meilleures pratiques

Cet exemple présente une fonctionnalité spécifique de WPF et, par conséquent, ne suit pas les meilleures pratiques de développement d'applications. Pour obtenir un traitement complet des meilleures pratiques de développement d'applications WPF et .NET Framework, reportez-vous, selon les cas, aux rubriques suivantes :

Quoi d'autre ?

Vous disposez maintenant de plusieurs techniques vous permettant de créer une UI avec Windows Presentation Foundation (WPF) et vous avez une bonne connaissance des blocs de construction de base d'une application .NET Frameworkliée à des données. Cette rubrique n'est pas exhaustive mais nous espérons que vous avez maintenant une idée des possibilités que vous pouvez découvrir par vous-même au-delà des techniques qu'elle aborde.

Pour plus d'informations sur l'architecture et les modèles de programmation WPF, consultez les rubriques suivantes :

Pour plus d'informations sur la création des applications, consultez les rubriques suivantes :

Voir aussi

Concepts

Vue d'ensemble de Panel

Vue d'ensemble des modèles de données

Génération d'une application WPF (WPF)

Autres ressources

Styles et modèles

Historique des modifications

Date

Historique

Motif

Décembre 2010

Remarques ajoutées relatives au ciblage de .NET Framework 4.

Améliorations apportées aux informations.