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

 

Date de publication : juin 2016

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 langage XAML (eXtensible Application Markup Language), 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'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 création 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 à partir de données et assurer la synchronisation entre données et Interface utilisateur.

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

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

  • Visual Studio 2012

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

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.

    System_CAPS_ICON_note.jpg Remarque

    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 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'Interface utilisateur 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="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>
    

    Ou à cela en 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éé 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ExpenseIt" Height="350" Width="500">
     
    </NavigationWindow>
    

    Ou à cela 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">
        
    </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.

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

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="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="300" d:DesignWidth="300"
      Title="ExpenseIt - Home">
        <Grid>
            
        </Grid>
    </Page>
    

    Ou à cela en 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="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="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>
    

    Ou à cela 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>
    

  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="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="300" d:DesignWidth="300"
          Title="ExpenseIt - View Expense">
        <Grid>
            
        </Grid>
    </Page>
    

    Ou à cela en 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="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.

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

    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 NIB:How to: Add Existing Items to a Project.

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.

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

System_CAPS_ICON_note.jpg Remarque

Pour plus d'informations sur les éléments Panel, consultez Vue d'ensemble de Panel. Pour plus d'informations sur la disposition, consultez 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>
    

Dans cette section, 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 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 Interface utilisateur, 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

Dans cette section, vous mettez à jour l'Interface utilisateur 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

  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 void Button_Click(object sender, RoutedEventArgs e)
            {
                // View Expense Report
                ExpenseReportPage expenseReportPage = new ExpenseReportPage();
                this.NavigationService.Navigate(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'Interface utilisateur pour ExpenseReportPage.xaml. Cette section ajoute aussi des couleurs d'arrière-plan et de remplissage pour les divers éléments de l'Interface utilisateur.

  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.

    System_CAPS_ICON_note.jpg Remarque

    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 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'Interface utilisateur ajoutés à ExpenseReportPage.xaml. Remarquez que le bouton de navigation arrière est activé.

Capture d'écran : exemple ExpenseIt

L'apparence de différents éléments peut souvent être la même pour tous les éléments du même type dans une Interface utilisateur. Interface utilisateur 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 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.

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

  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.

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.

        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 void Button_Click(object sender, RoutedEventArgs e)
            {
                // View Expense Report
                ExpenseReportPage expenseReportPage = new ExpenseReportPage(this.peopleListBox.SelectedItem);
                this.NavigationService.Navigate(expenseReportPage);
    
            }
    

Dans cette section, 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. 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

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 :

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.

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 :

Vue d'ensemble de Panel
Vue d'ensemble des modèles de données
Génération d'une application WPF
Styles et modèles

Afficher: