Tutoriel : Créer votre première application WPF dans Visual Studio 2019

  • Article

Cet article explique comment développer une application de bureau Windows Presentation Foundation (WPF) qui inclut les éléments communs à la plupart des applications WPF : balisage XAML (Extensible Application Markup Language), code-behind, définitions d’application, contrôles, disposition, liaison de données et styles. Pour développer l’application, vous allez utiliser Visual Studio.

Important

Cet article a été écrit pour .NET Framework. Pour bien démarrer avec .NET 7, consultez Tutoriel : Créer une application WPF (WPF .NET).

Dans ce tutoriel, vous allez apprendre à :

  • Créez un projet WPF.
  • Utilisez XAML pour concevoir l’apparence de l’interface utilisateur de l’application.
  • Écrivez du code pour générer le comportement de l’application.
  • Créez une définition d’application pour gérer l’application.
  • Ajoutez des contrôles et créez la disposition pour composer l’interface utilisateur de l’application.
  • Créez des styles pour une apparence cohérente dans l’interface utilisateur de l’application.
  • Liez l’interface utilisateur aux données, à la fois pour remplir l’interface utilisateur à partir de données et pour conserver les données et l’interface utilisateur synchronisées.

À la fin du tutoriel, vous aurez créé une application Windows autonome qui permet aux utilisateurs d’afficher les rapports de dépenses pour les personnes sélectionnées. L’application se compose de plusieurs pages WPF hébergées dans une fenêtre de style navigateur.

Conseil

L’exemple de code utilisé dans ce tutoriel est disponible pour Visual Basic et C# dans l’exemple de code de l’application WPF tutoriel.

Vous pouvez basculer la langue du code de l’exemple de code entre C# et Visual Basic à l’aide du sélecteur de langue en haut de cette page.

Prérequis

  • Visual Studio 2019 avec la charge de travail de développement de bureau .NET installée.

    Pour plus d’informations sur l’installation de la dernière version de Visual Studio, consultez Installer Visual Studio.

Créer le projet d’application

La première étape consiste à créer l’infrastructure d’application, qui inclut une 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:

    1. Ouvrez Visual Studio et sélectionnez Créer un projet sous le menu Bien démarrer .

      La boîte de dialogue Créer un projet s’ouvre.

    2. Dans la liste déroulante Langage , sélectionnez C# ou Visual Basic.

    3. Sélectionnez le modèle Application WPF (.NET Framework), puis sélectionnez Suivant.

      Create a new project dialog

      La boîte de dialogue Configurer votre nouveau projet s’ouvre.

    4. Entrez le nom ExpenseIt du projet, puis sélectionnez Créer.

      Configure a new project dialog

      Visual Studio crée le projet et ouvre le concepteur pour la fenêtre d’application par défaut nommée MainWindow.xaml.

  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’interface utilisateur, dans ce cas MainWindow.xaml, qui s’affiche automatiquement au démarrage de l’application.

    Votre code XAML doit ressembler à ce qui suit dans Visual Basic :

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

    Et comme dans C# :

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

  3. Ouvrez MainWindow.xaml.

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

  4. Remplacez l’élément Window par un NavigationWindowélément, comme indiqué dans le code XAML suivant :

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

    Cette application accède à un contenu différent en fonction de l’entrée utilisateur. C’est pourquoi le principal Window doit être remplacé par un NavigationWindow. NavigationWindow hérite de toutes les propriétés de Window. L’élément NavigationWindow du fichier XAML crée une instance de la NavigationWindow classe. Pour plus d’informations, consultez Vue d’ensemble de la navigation.

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

  6. Modifiez les propriétés suivantes dans le code XAML de l’élément NavigationWindow :

    • Définissez la Title propriété sur «ExpenseIt ».

    • Définissez la Height propriété sur 350 pixels.

    • Définissez la Width propriété sur 500 pixels.

    Votre code XAML doit ressembler à ce qui suit pour Visual Basic :

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

    Et comme suit pour C# :

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

  7. Ouvrez MainWindow.xaml.vb ou MainWindow.xaml.cs.

    Ce fichier est un fichier code-behind qui contient du code pour 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.

  8. Si vous utilisez C#, modifiez la MainWindow classe à partir de NavigationWindowlaquelle dériver . (En Visual Basic, cela se produit automatiquement lorsque vous modifiez la fenêtre en XAML.) Votre code C# doit maintenant ressembler à ceci :

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

Ajouter des fichiers à l’application

Dans cette section, vous allez ajouter deux pages et une image à l’application.

  1. Ajoutez une nouvelle page au projet et nommez-le ExpenseItHome.xaml:

    1. Dans Explorateur de solutions, cliquez avec le bouton droit sur le nœud du ExpenseIt projet et choisissez Ajouter>une page.

    2. Dans la boîte de dialogue Ajouter un nouvel élément , le modèle Page (WPF) est déjà sélectionné. Entrez le nom ExpenseItHome, puis sélectionnez Ajouter.

    Cette page est la première page affichée lors du lancement de l’application. Il affiche une liste de personnes à sélectionner, pour afficher un rapport de frais pour.

  2. Ouvrir ExpenseItHome.xaml.

  3. Définissez la Title valeur «ExpenseIt - Home ».

  4. Définissez les DesignHeight 350 pixels et les DesignWidth 500 pixels.

    Le code XAML apparaît maintenant comme suit pour Visual Basic :

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

    Et comme suit pour C# :

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

    <Grid>
        
    </Grid>
</Page>

  5. Ouvrez MainWindow.xaml.

  6. Ajoutez une Source propriété à l’élément et définissez-la NavigationWindow sur «ExpenseItHome.xaml ».

    Il s’agit ExpenseItHome.xaml de la première page ouverte au démarrage de l’application.

    Exemple XAML en Visual Basic :

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

    Et en C# :

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

    Conseil

    Vous pouvez également définir la propriété Source dans la catégorie Divers de la fenêtre Propriétés .

    Source property in Properties window

  7. Ajoutez une autre nouvelle page WPF au projet et nommez-la ExpenseReportPage.xaml ::

    1. Dans Explorateur de solutions, cliquez avec le bouton droit sur le nœud du ExpenseIt projet et choisissez Ajouter>une page.

    2. Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez le modèle Page (WPF). Entrez le nom ExpenseReportPage, puis sélectionnez Ajouter.

    Cette page affiche le rapport de frais de la personne sélectionnée sur la ExpenseItHome page.

  8. Ouvrez ExpenseReportPage.xaml.

  9. Définissez la Title valeur «ExpenseIt - View Expense ».

  10. Définissez les DesignHeight 350 pixels et les DesignWidth 500 pixels.

    ExpenseReportPage.xaml ressemble maintenant à ce qui suit en Visual Basic :

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

    Et comme dans C# :

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

    <Grid>
        
    </Grid>
</Page>

  11. Ouvrez ExpenseItHome.xaml.vb et ExpenseReportPage.xaml.vb, ou ExpenseItHome.xaml.cs et ExpenseReportPage.xaml.cs.

    Lorsque vous créez un fichier page, Visual Studio crée automatiquement son fichier code-behind . Ces fichiers code-behind gèrent la logique pour répondre à une saisie de l’utilisateur.

    Votre code doit ressembler à ce qui suit :ExpenseItHome

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

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

    Class ExpenseItHome

End Class

    Et comme suit pour ExpenseReportPage :

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

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

    Class ExpenseReportPage

End Class

  12. Ajoutez une image nommée watermark.png au projet. Vous pouvez créer votre propre image, copier le fichier à partir de l’exemple de code ou l’obtenir à partir du dépôt GitHub microsoft/WPF-Samples .

    1. Cliquez avec le bouton droit sur le nœud du projet, puis sélectionnez Ajouter un>élément existant, ou appuyez sur Maj Alt++A.

    2. Dans la boîte de dialogue Ajouter un élément existant, définissez le filtre de fichier sur Tous les fichiers ou fichiers image, accédez au fichier image que vous souhaitez utiliser, puis sélectionnez Ajouter.

    3. Sélectionnez le fichier image dans Explorateur de solutions, puis, dans la fenêtre Propriétés, définissez l’action de génération sur Ressource.

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

  1. Pour générer et exécuter l’application, appuyez sur F5 ou sélectionnez Démarrer le débogage dans le menu Débogage .

    L’illustration suivante montre l’application avec les NavigationWindow boutons :

    Application after you build and run it.

  2. Fermez l’application pour revenir à Visual Studio.

Créer le layout

La disposition fournit un moyen ordonné de placer des éléments d’interface utilisateur et gère également la taille et la position de ces éléments lorsqu’une interface utilisateur est redimensionnée. En règle générale, vous allez créer une disposition avec l’un des contrôles de disposition suivants :

  • Canvas - Définit une zone dans laquelle vous pouvez positionner explicitement les éléments enfants à l’aide de coordonnées relatives à la zone de canevas.
  • DockPanel - Définit une zone dans laquelle vous pouvez organiser les éléments enfants horizontalement ou verticalement, par rapport à l’autre.
  • Grid - Définit une zone de grille flexible qui se compose de colonnes et de lignes.
  • StackPanel - Organise les éléments enfants en une seule ligne qui peut être orientée horizontalement ou verticalement.
  • VirtualizingStackPanel - Organise et virtualise le contenu sur une seule ligne orientée horizontalement ou verticalement.
  • WrapPanel - Positionne les éléments enfants en position séquentielle de gauche à droite, en cassant le contenu à la ligne suivante au bord de la zone contenante. L’ordre suivant se produit séquentiellement de haut en bas ou de droite à gauche, en fonction de la valeur de la propriété Orientation.

Chacun de ces contrôles de disposition prend en charge un type particulier de disposition pour ses éléments enfants. ExpenseIt les pages peuvent être redimensionnées, et chaque page a des éléments organisés horizontalement et verticalement en même temps que d’autres éléments. Dans cet exemple, l’élément Grid de disposition est utilisé comme élément de disposition pour l’application.

Conseil

Pour plus d’informations sur les éléments, consultez La vue d’ensemble Paneldes panneaux. Pour plus d’informations sur la disposition, consultez la rubrique Disposition.

Dans cette section, vous créez une table à colonne unique avec trois lignes et une marge de 10 pixels en ajoutant des définitions de colonne et de ligne à l’élément Grid in ExpenseItHome.xaml.

  1. Dans ExpenseItHome.xaml, définissez la Margin propriété sur l’élément Grid sur « 10,0,10,10 », qui correspond aux marges gauche, supérieure, droite et inférieure :

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

    Conseil

    Vous pouvez également définir les valeurs de marge dans la fenêtre Propriétés, sous la catégorie Disposition :

    Margin values in Properties window

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

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

    Les Height deux lignes sont définies Autosur , ce qui signifie que les lignes sont dimensionnées en fonction du contenu des lignes. La valeur par défaut Height est Star le dimensionnement, ce qui signifie que la hauteur de ligne est une proportion pondérée de l’espace disponible. Par exemple, si deux lignes ont chacune une Height valeur « * », elles ont chacune une hauteur qui correspond à la moitié de l’espace disponible.

    Votre Grid doit maintenant contenir le code 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>

Ajouter des contrôles

Dans cette section, vous allez mettre à jour l’interface utilisateur de la page d’accueil pour afficher une liste de personnes, où vous sélectionnez une personne pour afficher son rapport 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 interface utilisateur, vous allez ajouter les éléments suivants à ExpenseItHome.xaml:

  • R ListBox (pour la liste des personnes).
  • A Label (pour l’en-tête de liste).
  • A Button (pour afficher le rapport de frais de la personne sélectionnée dans la liste).

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

  1. Dans ExpenseItHome.xaml, ajoutez le code XAML suivant entre les Grid balises :

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

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

    Conseil

    Vous pouvez également créer les contrôles en les faisant glisser de la fenêtre Boîte à outils vers la fenêtre création, puis en définissant leurs propriétés dans la fenêtre Propriétés .

  2. Créer et exécuter l’application.

    L’illustration suivante montre les contrôles que vous avez créés :

ExpenseIt sample screenshot displaying a list of names

Ajouter une image et un titre

Dans cette section, vous allez mettre à jour l’interface utilisateur de la page d’accueil avec une image et un titre de page.

  1. Dans ExpenseItHome.xaml, ajoutez une autre colonne à l’aide ColumnDefinitions d’un fixe Width de 230 pixels :

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

  2. Ajoutez une autre ligne au RowDefinitions, pour un total de quatre lignes :

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

  3. Déplacez les contrôles vers la deuxième colonne en définissant la Grid.Column propriété sur 1 dans chacun des trois contrôles (Bordure, ListBox et Button).

  4. Déplacez chaque contrôle vers le bas d’une ligne en incrémentant sa Grid.Row valeur de 1 pour chacun des trois contrôles (Bordure, ListBox et Button) et pour l’élément Border.

    Le code XAML pour les trois contrôles ressemble désormais à ce qui suit :

      <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 la propriété Background sur le fichier image watermark.png, en ajoutant le code XAML suivant n’importe où entre les balises et </Grid> les <Grid> balises :

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

  6. Avant l’élément Border , ajoutez un Label avec le contenu « Afficher le rapport de dépenses ». Cette étiquette est le titre de la page.

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

  7. Créer et exécuter l’application.

L’illustration suivante montre les résultats de ce que vous venez d’ajouter :

ExpenseIt sample screenshot showing the new image background and page title

Ajouter du code pour gérer les événements

  1. Dans ExpenseItHome.xaml, ajoutez un gestionnaire d’événements Click à l’élément Button . Pour plus d’informations, consultez Guide pratique pour 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>

  2. Ouvrez ExpenseItHome.xaml.vb ou ExpenseItHome.xaml.cs.

  3. Ajoutez le code suivant à la ExpenseItHome classe pour ajouter un gestionnaire d’événements click de bouton. Le gestionnaire d’événements ouvre la page ExpenseReportPage .

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

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

End Sub

Créer l’interface utilisateur pour ExpenseReportPage

ExpenseReportPage.xaml affiche le rapport de dépenses de la personne sélectionnée sur la ExpenseItHome page. Dans cette section, vous allez créer l’interface utilisateur pour ExpenseReportPage. Vous allez également ajouter des couleurs d’arrière-plan et de remplissage aux différents éléments de l’interface utilisateur.

  1. Ouvrez ExpenseReportPage.xaml.

  2. Ajoutez le code XAML suivant entre les Grid balises :

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

    Cette interface utilisateur est similaire à ExpenseItHome.xaml, sauf que les données de rapport sont affichées dans un DataGrid.

  3. Créer et exécuter l’application.

  4. Sélectionnez le bouton Affichage .

    La page de note de frais s’affiche. Notez également que le bouton de navigation arrière est activé.

L’illustration suivante montre les éléments d’interface utilisateur ajoutés à ExpenseReportPage.xaml.

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

Contrôles de style

L’apparence de différents éléments est souvent la même pour tous les éléments du même type dans une interface utilisateur. L’interface utilisateur utilise des styles pour rendre les apparences réutilisables sur plusieurs éléments. La réutilisation des styles permet de simplifier la création et la gestion XAML. Cette section remplace par des styles les attributs d’élément qui ont été définis lors des étapes précédentes.

  1. Ouvrez Application.xaml ou App.xaml.

  2. Ajoutez le code XAML suivant entre les Application.Resources balises :

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

    Ce code XAML ajoute les styles suivants :

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

    • 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 liste.

    • listHeaderTextStyle: Pour mettre en forme l’en-tête Labelde liste .

    • buttonStyle: Pour mettre en forme ExpenseItHome.xamlle Button .

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

  3. Dans ExpenseItHome.xaml, remplacez tout ce qui se trouve entre les Grid éléments par le code 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 qui définissent l’apparence de chaque contrôle, comme VerticalAlignment et FontFamily , sont supprimées et remplacées lors de l’application de styles. Par exemple, l’application headerTextStyle est appliquée au « Rapport de dépenses d’affichage ». Label

  4. Ouvrez ExpenseReportPage.xaml.

  5. Remplacez tout ce qui se trouve entre les Grid éléments par le code 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>

    Ce code XAML ajoute des styles aux éléments et Border aux Label éléments.

  6. Créer et exécuter l’application. L’apparence de la fenêtre est la même que précédemment.

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

  7. Fermez l’application pour revenir à Visual Studio.

Lier des données à un contrôle

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

  1. Dans ExpenseItHome.xaml, après l’élément d’ouverture Grid , ajoutez le code XAML suivant pour créer un XmlDataProvider qui contient les données de chaque personne :

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

    Les données sont créées en tant que Grid ressource. Normalement, ces données sont chargées en tant que fichier, mais par souci de simplicité, les données sont ajoutées en ligne.

  2. Dans l’élément <Grid.Resources> , ajoutez l’élément suivant <xref:System.Windows.DataTemplate> , qui définit comment afficher les données dans le ListBox, après l’élément <XmlDataProvider> :

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

    Pour plus d’informations sur les modèles de données, consultez vue d’ensemble de la création de modèles de données.

  3. Remplacez l’existant ListBox par le code XAML suivant :

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

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

Connecter données aux contrôles

Ensuite, vous allez ajouter du code pour récupérer le nom sélectionné sur la ExpenseItHome page et le transmettre au constructeur de ExpenseReportPage. ExpenseReportPage définit son contexte de données avec l’élément passé, c’est-à-dire ce que les contrôles définis dans ExpenseReportPage.xaml sont liés.

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

  2. Ajoutez un constructeur qui prend un objet de façon à pouvoir transmettre les données de note de frais de la personne sélectionnée.

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

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

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

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

End Class

  3. Ouvrez ExpenseItHome.xaml.vb ou ExpenseItHome.xaml.cs.

  4. Modifiez le Click gestionnaire d’événements pour appeler le nouveau constructeur en passant les données du rapport de frais de la personne sélectionnée.

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

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

End Sub

Styler des données avec des modèles de données

Dans cette section, vous allez mettre à jour l’interface utilisateur de chaque élément dans les listes liées aux données à l’aide de modèles de données.

  1. Ouvrez ExpenseReportPage.xaml.

  2. Liez le contenu des éléments « Name » et « Department » Label à la propriété de 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. Après l’élément d’ouverture Grid , ajoutez les modèles de données suivants, qui définissent comment afficher les données du rapport 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. Remplacez les DataGridTextColumn éléments DataGridTemplateColumn par sous l’élément DataGrid et appliquez-les aux modèles. Spécifiez également l’attribut ItemsSource avec sa valeur dans l’élément DataGrid .

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

  5. Créer et exécuter l’application.

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

L’illustration suivante montre les deux pages de l’application ExpenseIt avec des contrôles, une disposition, des styles, une liaison de données et des modèles de données appliqués :

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

Remarque

Cet exemple illustre une fonctionnalité spécifique de WPF et ne suit pas toutes les bonnes pratiques pour les éléments tels que la sécurité, la localisation et l’accessibilité. Pour une couverture complète de WPF et des meilleures pratiques de développement d’applications .NET, consultez les rubriques suivantes :

Étapes suivantes

Dans cette procédure pas à pas, vous avez appris plusieurs techniques de création d’une interface utilisateur à l’aide de WPF (Windows Presentation Foundation). Vous devez maintenant avoir une compréhension de base des blocs de construction d’une application .NET liée aux données. Pour plus d’informations sur les modèles d’architecture et de programmation WPF, consultez les rubriques suivantes :

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

Voir aussi