Partager via

Mise en route de Windows Presentation Foundation

  • Article

Mise à jour : novembre 2007

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

Cette rubrique comprend les sections suivantes.

  • Résumé
  • Composants requis
  • Créer les fichiers de code de l'application
  • Génération et exécution de l'application
  • Ajouter une disposition
  • Ajouter des contrôles
  • Ajouter une image et un titre
  • Ajoutez du code pour gérer des événements
  • Créer l'interface utilisateur pour ExpenseReportPage
  • Ajouter du code pour affecter un style à un contrôle
  • Lier des données à un contrôle
  • Connecter les données à des contrôles
  • Ajouter un style aux données à l'aide de modèles de données
  • Meilleures pratiques
  • Quoi d'autre ?
  • Rubriques connexes

Résumé

Ce didacticiel vous explique pas à pas le développement d'une application WPF simple, en vous guidant au long des étapes suivantes.

  • Définition du balisage XAML pour concevoir l'apparence de l'interface utilisateur (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 de la disposition pour composer l'interface utilisateur de l'application.

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

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

À la fin du didacticiel, 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 ce didacticiel est disponible pour C# et Microsoft Visual Basic .NET ; consultez Introduction à la génération d'applications Windows Presentation Foundation.

Composants requis

Pour générer l'application développée dans ce didacticiel, vous devrez avoir installé Microsoft .NET Framework et le Kit de développement logiciel (SDK) Windows.

Lorsque ces éléments sont installés, vous pouvez générer l'application à partir d'une fenêtre de commande (bien que, si vous le souhaitez, vous puissiez utiliser un environnement de développement intégré (IDE, Integrated Development Environment) comme Microsoft Visual Studio). Pour effectuer la génération à partir de l'invite de commande, vous devez utiliser la fenêtre de commande installée avec le Kit de développement logiciel (SDK) Windows. Cet élément se trouve à l'emplacement suivant :

  • Menu Démarrer | Tous les programmes | Microsoft Windows SDK | CMD Shell

Vous pouvez également ouvrir l'invite de commandes de Windows en procédant comme suit :

  1. Dans le menu Démarrer, cliquez sur Exécuter.

  2. Entrez :

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

  3. Cliquez sur OK.

Notez que SetEnv.cmd établit l'environnement dont vous avez besoin pour générer des applications WPF à partir de l'invite de commandes.

Créer les fichiers de code de l'application

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

  1. Créez un fichier de balisage XAML nommé App.xaml. Ce fichier définit une application WPF et vous permet de spécifier que l'interface utilisateur s'affiche automatiquement au démarrage de l'application ; dans ce cas, il s'agit de HomePage.xaml (créé au cours de l'étape suivante). Votre balisage XAML doit se présenter comme suit :

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

  2. Créez un fichier de balisage XAML nommé HomePage.xaml, qui correspond à la première page qui s'affichera au lancement de l'application. HomePage.xaml affichera une liste de personnes que l'utilisateur pourra sélectionner pour afficher un rapport de note de frais correspondant. Ajoutez un élément Page à HomePage.xaml, présentant la configuration suivante :

    • La barre de titre du navigateur est "ExpenseIt".

    • La largeur du navigateur est de 550 pixels indépendants du périphérique.

    • La hauteur du navigateur est de 350 pixels indépendants du périphérique.

    • Le titre de la page est "ExpenseIt – Home".

    Votre balisage XAML doit se présenter comme suit :

    <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. Créez un fichier de code nommé HomePage.xaml.cs. Il s'agit d'un fichier code-behind qui contiendra code destiné à gérer les événements déclarés dans HomePage.xaml. Votre code doit se présenter comme suit :

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

  4. Créez un fichier de balisage XAML nommé ExpenseReportPage.xaml. Ajoutez un élément Page et définissez "ExpenseIt - View Expense Report" comme page de titre. Cette page affichera la note de frais pour la personne sélectionnée dans HomePage.xaml. Votre balisage XAML doit se présenter comme suit :

    <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. Créez un fichier nommé ExpenseReportPage.xaml.cs. Il s'agit d'un fichier code-behind qui va lier les données de la note de frais à l'interface utilisateur définie dans ExpenseReportPage.xaml. Votre code doit se présenter comme suit :

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

  6. Ajoutez une image nommée watermark.png dans le même dossier que celui contenant les cinq fichiers que vous venez de créer. Vous pouvez créer votre propre image ou copier le fichier du même nom depuis l'exemple de code.

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

Au cours de cette étape, vous utilisez MSBuild pour générer l'application que vous avez définie au cours de la section précédente.

  1. Créez un fichier nommé ExpenseIt.csproj. Il s'agit du fichier MSBuild, à savoir un fichier XML qui contient la configuration de génération de votre application et inclut les éléments suivants :

    • Les variables de génération globales pour le projet compilé, y compris le nom de l'assembly généré, le type d'assembly à générer et le dossier auquel ajouter l'assembly obtenu.

    • Les références aux fichiers de code.

    • Références aux assemblys Microsoft .NET Framework qui contiennent les types utilisés par l'application.

    Le contenu du fichier de génération doit se présenter comme suit :

    <?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. Ouvrez une fenêtre de commande vers le même dossier que celui contenant le fichier de projet et les fichiers de code de l'application.

  3. À partir de l'invite de commandes, exécutez la commande suivante :

    MSBuild ExpenseIt.csproj

    Pour Microsoft Visual Basic .NET, exécutez la commande suivante à la place :

    MSBuild ExpenseIt.vbproj

    Pour compiler et exécuter l'application à l'aide de Visual Studio, ouvrez le fichier projet dans Visual Studio et appuyez sur F5.

Remarque :

Visual Studio 2005 génère automatiquement un fichier de projet. Comme ce didacticiel ne part pas du principe que Visual Studio est installé, il détaille le processus de création d'un fichier de projet. Pour plus d'informations sur la création de fichiers .csproj, consultez Génération d'une application WPF (WPF). Si vous utilisez Visual Studio pour exécuter ce didacticiel, écrasez le contenu du fichier .csproj généré avec le texte MSBuild précédent.

  1. Ouvrez le dossier qui contient l'exécutable de l'application générée : expenseit.exe. Si vous avez effectué la génération à partir de l'invite de commandes, le fichier expenseit.exe est situé dans le dossier suivant :

    Dossier contenant les fichiers de code de l'application\bin\

    Si vous avez effectué la génération à l'aide de Visual Studio, le fichier expenseit.exe est situé dans le dossier suivant :

    Dossier contenant les fichiers de code de l'application\bin\debug\

  2. À partir de l'invite de commandes, exécutez expenseit.exe. L'illustration suivante montre l'application en cours d'exécution.

    Capture d'écran : exemple ExpenseIt

Ajouter une disposition

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

Chacun de ces contrôles 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.

Remarque :

Pour plus d'informations sur les éléments Panel, consultez Vue d'ensemble de Panel.

Le balisage XAML suivant crée une table d'une seule colonne comportant trois lignes et une marge de10 pixels en ajoutant une Grid à HomePage.xaml:

  1. Ouvrez HomePage.xaml

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

Ajouter des contrôles

Au cours de cette étape, vous mettez à jour l'interface utilisateur 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 notre frais. Pour créer cette interface utilisateur, vous ajoutez les éléments suivants à HomePage.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).

Procédez comme suit pour mettre à jour HomePage.xaml :

  1. Remplacez le contenu du fichier HomePage.xaml par le code XAML suivant.

    <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. Compilez et exécutez l'application.

L'illustration suivante montre les contrôles qui sont créés par le code au cours de cette étape.

Capture d'écran : exemple ExpenseIt

Ajouter une image et un titre

Au cours de cette étape, vous mettez à jour l'interface utilisateur de la page d'accueil en ajoutant une image appropriée et un titre de page :

  1. Ouvrez HomePage.xaml.

  2. Remplacez le contenu du fichier HomePage.xaml par le code XAML suivant.

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

    Ce code XAML met à jour la Grid comme suit :

    • Création d'une nouvelle grille de deux lignes.

    • Ajout d'un DockPanel avec une Canvas, Image et une Label à la première ligne. Le DockPanel s'étend sur les deux colonnes de la première ligne qui, conjointement à la Canvas ancrée à gauche, permet à l'Label de chevaucher l'Image.

    • Utilisation de l'attribut Source de l'élément Image pour spécifier l'image source : watermark.png.

    • Ajout du texte de titre suivant à l'Label : "View Expense Report".

    • Utilisation des attributs de la Canvas et de l'Label pour en configurer l'apparence et la taille.

    • Déplacement de la grille qui contenait initialement HomePage.xaml jusqu'à la deuxième colonne de la deuxième ligne de la nouvelle grille.

  3. Compilez et exécutez l'application.

L'illustration suivante montre les résultats de cette étape.

Capture d'écran : exemple ExpenseIt

Ajoutez du code pour gérer des événements

  1. Ouvrez HomePage.xaml.

  2. Remplacez l'élément Button défini au cours de l'étape précédente par le code suivant :

    ...
<!-- 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>
...
    Remarque :

    Le nom de l'événement Button à gérer est Click. Le nom du gestionnaire d'événements défini par le développeur est viewButton_Click. Le gestionnaire d'événements est enregistré avec l'événement Click pour le contrôle Button.

  3. Ouvrez le fichier HomePage.xaml.cs que vous avez créé au cours de l'étape Créer les fichiers de code de l'application de ce didacticiel.

  4. Remplacez le contenu du fichier par le code suivant. Cette étape ajoute du code pour gérer l'événement Click qui permet d'accéder au fichier 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);
        }
    }
}

Créer l'interface utilisateur pour ExpenseReportPage

ExpenseReportPage.xaml affiche la note de frais pour la personne sélectionnée dans HomePage.xaml. Le code suivant ajoute des contrôles et une disposition afin de créer l'interface utilisateur de base pour ExpenseReportPage.xaml. Il ajoute également des couleurs d'arrière-plan et de remplissage pour les divers éléments de l'interface utilisateur.

  1. Ouvrez le fichier ExpenseReportPage.xaml et ajoutez le code suivant.

    <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. Compilez et exécutez l'application.

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

Capture d'écran : exemple ExpenseIt

Ajouter du code pour affecter un style à un contrôle

L'apparence de tous les éléments du même type d'une interface utilisateur peut souvent être identique. L'interface utilisateur utilise des styles pour que l'apparence soit réutilisable d'un élément à l'autre. La possibilité de réutiliser des styles simplifie la création et la gestion du balisage XAML. Cette étape remplace par des styles les attributs définis élément par élément au cours des étapes précédentes :

  1. Ouvrez le fichier App.xaml que vous avez créé au cours de l'étape Créer les fichiers de code de l'application de ce didacticiel.

  2. Remplacez le contenu de ce fichier par le balisage XAML suivant :

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

    Ce balisage XAML ajoute les styles suivants :

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

    • labelStyle : pour mettre en forme les étiquettes Label.

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

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

    • buttonStyle : pour mettre en forme le bouton de la page HomePage.xaml.

    Notez que les styles sont des ressources 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 avoir un exemple de l'utilisation des ressources dans une application .NET Framework, consultez Comment : utiliser des ressources d'application.

  3. Ouvrez HomePage.xaml.

  4. Remplacez le contenu du fichier par le code suivant. Cette étape remplace les attributs d'apparence de chaque élément par un style approprié.

    <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. Ouvrez ExpenseReportPage.xaml.

  6. Remplacez le contenu du fichier par le code suivant.

    <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. Compilez et exécutez l'application. Après l'ajout du balisage XAML au cours de cette étape, l'application conserve la même apparence qu'avant la mise à jour à l'aide de styles.

Lier des données à un contrôle

Cette étape crée les données XML liées à différents contrôles :

  1. Ouvrez HomePage.xaml.

  2. Remplacez le contenu de ce fichier par le balisage XAML suivant.

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

    Notez que les données sont créées en tant que ressource de Grid.

Connecter les données à des contrôles

Au cours de cette étape, vous écrivez le code qui récupère l'élément actuellement sélectionné dans la liste du HomePage et passe sa référence au constructeur de la ExpenseReportPage pendant l'instanciation. Le ExpenseReportPage définit son contexte de données à partir de l'élément transmis, auquel seront liés les contrôles définis dans ExpenseReportPage.xaml.

  1. Ouvrez HomePage.xaml.cs.

  2. Remplacez le contenu du fichier par le code suivant.

    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. Ouvrez ExpenseReportPage.xaml.cs.

  4. Remplacez le contenu du fichier par le code suivant.

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

Ajouter un style aux données à l'aide de modèles de données

Au cours de cette étape, vous mettez à jour l'interface utilisateur pour chaque élément des listes de données liées au moyen de modèles de données :

  1. Ouvrez ExpenseReportPage.xaml.

  2. Remplacez le contenu du fichier par le code suivant.

    <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. Compilez et exécutez l'application.

Notez que les modèles de données sont définis en tant que ressource de Grid.

Les deux illustrations suivantes 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 Windows Presentation Foundation 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 Windows Presentation Foundation (WPF) et Microsoft .NET Framework, reportez-vous, selon les cas, aux documents suivants :

Accessibilité - Meilleures pratiques d'accessibilité

Sécurité - Sécurité de Windows Presentation Foundation

Localisation - Vue d'ensemble de la globalisation et de la localisation WPF

Optimisation des performances des applications WPF

Quoi d'autre ?

Vous disposez maintenant de plusieurs techniques vous permettant de créer une interface utilisateur 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.

Les panneaux sont expliqués plus en détails sous Vue d'ensemble de Panel. La modélisation de données est approfondie sous Vue d'ensemble des modèles de données.

Voir aussi

Concepts

Système de disposition

Vue d'ensemble de Panel

Vue d'ensemble de la liaison de données

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

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