Partager via


Présentation de WPF

Windows Presentation Foundation (WPF) est un système de présentation nouvelle génération qui génère des applications clientes Windows avec des expériences utilisateur visuellement surprenantes. Avec WPF, vous pouvez créer une large gamme d'applications autonomes et hébergées par un navigateur. C'est le cas notamment de l'exemple d'application Contoso Healthcare qui est indiqué dans l'illustration suivante.

Exemple d'interface utilisateur Contoso Healthcare

Le cœur de WPF est un moteur de rendu vectoriel et indépendant de toute résolution, créé pour tirer parti du matériel graphique moderne. WPF étend le cœur avec un jeu complet de fonctionnalités de développement d'applications qui incluent Extensible Application Markup Language (XAML), des contrôles, la liaison de données et la disposition ainsi que des graphiques 2-D et 3-D, l'animation, les styles, les modèles, les documents, les médias, le texte et la typographie. WPF est inclus dans le Microsoft .NET Framework, vous pouvez donc générer des applications intégrant d'autres éléments de la bibliothèque de classes .NET Framework.

Cette vue d'ensemble est destinée aux utilisateurs inexpérimentés ; elle couvre les fonctions et les concepts clés de WPF. Cette vue d'ensemble peut également être utile aux développeurs WPF expérimentés souhaitant passer en revue WPF.

Notes

Pour obtenir la liste des fonctionnalités WPF nouvelles et mises à jour du .NET Framework 4, consultez Nouveautés de WPF version 4.

Cette rubrique comprend les sections suivantes.

  • Programmation avec WPF
  • Balisage et code-behind
  • Applications
  • Contrôles
  • Entrée et commande
  • Disposition
  • Liaison de données
  • Graphiques
  • Animation
  • Médias
  • Texte et typographie
  • Documents
  • Personnalisation des applications WPF
  • Meilleures pratiques WPF
  • Résumé
  • Vues d'ensemble et exemples recommandés
  • Rubriques connexes

Programmation avec WPF

WPF existe comme sous-ensemble de types .NET Framework qui pour la plupart sont situés dans l'espace de noms System.Windows. Si vous avez déjà créé des applications avec .NET Framework à l'aide de technologies managées telles que Windows Forms et ASP.NET, l'expérience de programmation WPF doit être fondamentalement familière ; vous instanciez des classes, définissez des propriétés, appelez des méthodes et gérez des événements, entièrement à l'aide de votre langage de programmation préféré .NET Framework, tel que C# ou Visual Basic.

Pour prendre en charge certaines des fonctions WPF les plus puissantes et simplifier l'expérience de programmation, WPF inclut des constructions de programmation supplémentaires qui améliorent les propriétés et les événements : propriétés de dépendance et événements routés. Pour plus d'informations sur les propriétés de dépendance, consultez Vue d'ensemble des propriétés de dépendance. Pour plus d'informations sur les événements routés, consultez Vue d'ensemble des événements routés.

Balisage et code-behind

WPF offre des améliorations de programmation supplémentaires pour le développement d'applications clientes Windows. L'une des améliorations les plus évidentes est la capacité à développer une application aussi bien à l'aide du balisage que du code-behind, une expérience avec laquelle les développeurs ASP.NET sont censés être familiarisés. Généralement, on utilise le balisage Extensible Application Markup Language (XAML) pour implémenter l'apparence d'une application et les langages de programmation managés (code-behind) pour implémenter son comportement. Cette séparation de l'apparence et du comportement présente les avantages suivants :

  • Les coûts de développement et de maintenance sont réduits car le balisage de l'apparence n'est pas fortement couplé avec le code du comportement.

  • Le développement est plus efficace car les concepteurs peuvent implémenter l'apparence d'une application en même temps que les développeurs qui implémentent le comportement de l'application.

  • De nombreux outils de conception peuvent être utilisés pour l'implémentation et le partage du balisage XAML afin de cibler les exigences des collaborateurs participant au développement des applications ; Microsoft Expression Blend cible les concepteurs, alors que Visual Studio 2005 cible les développeurs.

  • La globalisation et la localisation des applications WPF sont considérablement simplifiées (consultez Vue d'ensemble de la globalisation et de la localisation WPF).

Les éléments suivants constituent une brève introduction au balisage et au code-behind WPF. Pour plus d'informations sur ce modèle de programmation, consultez Vue d'ensemble du langage XAML (WPF) et Code-behind et XAML dans WPF.

Balisage

XAML est un langage de balisage fondé sur le XML qui est utilisé pour implémenter l'apparence d'une application de façon déclarative. Il est généralement utilisé pour créer des fenêtres, des boîtes de dialogue, des pages et des contrôles utilisateur, et pour les remplir avec des contrôles, des formes et des graphiques.

L'exemple suivant utilise XAML pour implémenter l'apparence d'une fenêtre qui contient un seul bouton.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button">Click Me!</Button>

</Window>

Plus précisément, ce code XAML définit une fenêtre et un bouton à l'aide des éléments Window et Button, respectivement. Chaque élément est configuré avec des attributs, tels que l'attribut Title de l'élément Window pour spécifier le texte de la barre de titre de la fenêtre. Pendant l'exécution, WPF convertit les éléments et les attributs définis dans le balisage en instances des classes WPF. Par exemple, l'élément Window est converti en une instance de la classe Window dont la propriété Title est la valeur de l'attribut Title.

L'illustration suivante montre l'user interface (UI) définie par XAML dans l'exemple précédent.

Fenêtre contenant un bouton

Pour plus d'informations, consultez Vue d'ensemble du langage XAML (WPF).

Vu que XAML est basé sur XML, l'UI que vous composez avec est assemblée dans une hiérarchie d'éléments imbriqués, connus sous le nom d'arborescence des éléments. L'arborescence des éléments offre un moyen logique et intuitif de créer et gérer des UIs. Pour plus d'informations, consultez Arborescences dans WPF.

Code-behind

Le comportement principal d'une application est d'implémenter les fonctionnalités qui répondent aux interventions de l'utilisateur, y compris la gestion des événements (par exemple, un clic sur un menu, une barre d'outils ou un bouton) et, en réponse, l'appel à la logique métier et à la logique d'accès aux données. Dans WPF, ce comportement est généralement implémenté dans le code associé au balisage. Ce type de code est appelé code-behind. L'exemple suivant montre le code-behind et le balisage mis à jour par rapport à l'exemple précédent.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.AWindow"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button" Click="button_Click">Click Me!</Button>

</Window>

Namespace SDKSample

    Partial Public Class AWindow
        Inherits System.Windows.Window

        Public Sub New()

            ' InitializeComponent call is required to merge the UI
            ' that is defined in markup with this class, including 
            ' setting properties and registering event handlers
            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

            ' Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!")

        End Sub

    End Class

End Namespace
using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class AWindow : Window
    {
        public AWindow()
        {
            // InitializeComponent call is required to merge the UI
            // that is defined in markup with this class, including 
            // setting properties and registering event handlers
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

Dans cet exemple, le code-behind implémente une classe qui dérive de la classe Window. L'attribut x:Class est utilisé pour associer le balisage à la classe code-behind. InitializeComponent est appelé depuis le constructeur de la classe code-behind pour fusionner l'interface utilisateur définie dans le balisage avec la classe code-behind (InitializeComponent est généré pour vous lors de la génération de votre application, c'est pourquoi vous n'avez pas besoin de l'implémenter manuellement). La combinaison de x:Class et InitializeComponent garantit la bonne initialisation de votre implémentation chaque fois qu'elle est créée. La classe code-behind implémente également un gestionnaire d'événements pour l'événement Click du bouton. Lorsque vous cliquez sur le bouton, le gestionnaire d'événements affiche un message en appelant la méthode MessageBox.Show.

L'illustration suivante affiche le résultat obtenu lorsque vous cliquez sur le bouton.

MessageBox

Pour plus d'informations, consultez Code-behind et XAML dans WPF.

Applications

.NET Framework, System.Windows, le balisage et le code-behind constituent la fondation du développement d'applications WPF. En outre, WPF dispose de fonctionnalités complètes pour la création d'expériences utilisateur au contenu riche. Pour regrouper ce contenu et le remettre aux utilisateurs en tant qu'« applications », WPF fournit des types et des services collectivement connus sous le nom de modèle d'application. Le modèle d'application prend en charge le développement des applications autonomes et des applications hébergées par un navigateur.

Applications autonomes

Pour les applications autonomes, vous pouvez utiliser la classe Window pour créer des fenêtres et des boîtes de dialogue accessibles depuis des barres de menus et des barres d'outils. L'illustration suivante montre une application autonome avec une fenêtre principale et une boîte de dialogue.

Fenêtre principale et boîte de dialogue

En outre, vous pouvez utiliser les boîtes de dialogue WPF suivantes : MessageBox, OpenFileDialog, SaveFileDialog et PrintDialog.

Pour plus d'informations, consultez Vue d'ensemble des fenêtres WPF.

Applications hébergées par un navigateur

Pour les applications hébergées par un navigateur, appelées XAML browser applications (XBAPs), vous pouvez créer des pages (Page) et des fonctions de page (PageFunction<T>) et naviguer entre elles à l'aide de liens hypertextes (classes Hyperlink). L'illustration suivante montre une page dans une XBAP hébergée dans Internet Explorer 7.

Deux pages d'une application hébergée

Les applications WPF peuvent être hébergées dans Microsoft Internet Explorer 6 et dans Internet Explorer 7. WPF offre les deux options suivantes pour les autres hôtes de navigation :

  • Frame, pour héberger des îlots de contenu de navigation dans des pages ou des fenêtres.

  • NavigationWindow, pour héberger du contenu de navigation dans une fenêtre entière.

Pour plus d'informations, consultez Vue d'ensemble de la navigation.

La classe d'application

XBAPs et les applications autonomes sont souvent suffisamment complexes pour nécessiter des services de portée application supplémentaires, notamment la gestion du démarrage et de la durée de vie, les propriétés partagées et les ressources partagées. La classe Application encapsule ces services et davantage, et peut être implémentée uniquement à l'aide de XAML, comme indiqué dans l'exemple suivant.

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

Ce balisage est la définition d'application d'une application autonome et il demande à WPF de créer un objet Application qui ouvre automatiquement MainWindow au démarrage de l'application.

L'un des concepts clés à comprendre à propos de l'Application est que cette dernière fournit une plateforme de prise en charge commune aux applications autonomes et aux applications hébergées par un navigateur. Par exemple, le code XAML précédent pourrait être utilisé par une application hébergée par un navigateur pour la navigation automatique vers une page lorsqu'une XBAP est lancée, comme le montre l'exemple suivant.

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

Pour plus d'informations, consultez Vue d'ensemble de la gestion d'applications.

Sécurité

Étant donné que les XBAPs sont hébergées dans un navigateur, la sécurité est importante. En particulier, les XBAPs utilisent un bac à sable (sandbox) de sécurité de confiance partielle pour appliquer des restrictions inférieures ou égales aux restrictions imposées aux applications HTML. En outre, chaque fonctionnalité HTML pouvant être exécutée en confiance partielle depuis des XBAPs a été testée avec un processus de sécurité complet, détaillé dans Stratégie de sécurité de WPF - ingénierie de sécurité.

Cependant, la majorité des fonctionnalités WPF peuvent être exécutées en toute sécurité depuis des XBAPs, comme décrit dans Sécurité de confiance partielle de WPF.

Contrôles

Les expériences utilisateur fournies par le modèle d'application sont des contrôles construits. Dans WPF, « contrôle » est un terme général qui s'applique à une catégorie de classes WPF qui sont hébergées dans une fenêtre ou une page, qui ont une user interface (UI) et qui implémentent un certain comportement.

Pour plus d'informations, consultez Contrôles.

Contrôles WPF par fonction

Les contrôles WPF intégrés sont répertoriés ici.

Entrée et commande

Les contrôles détectent et répondent souvent à l'entrée utilisateur. Le système d'entrée WPF utilise des événements directs et routés pour prendre en charge la saisie de texte, la gestion du focus et la position de la souris. Pour plus d'informations, consultez Vue d'ensemble des entrées.

Les applications ont souvent des spécifications d'entrée complexes. WPF fournit un système de commande qui sépare les actions d'entrée utilisateur du code qui répond à ces actions. Pour plus d'informations, consultez Vue d'ensemble des commandes.

Disposition

Lorsque vous créez une UI, réorganisez vos contrôles par emplacement et par taille pour former une disposition. L'une des spécifications clés de toute disposition est de s'adapter aux modifications de la taille de la fenêtre et des paramètres d'affichage. Plutôt que de vous forcer à écrire le code pour vous adapter à une disposition, WPF vous fournit un système de disposition extensible de première classe.

Le positionnement relatif est l'élément essentiel du système de disposition. Il augmente la capacité d'adaptation aux modifications des conditions d'affichage et de disposition des fenêtres. De plus, le système de disposition gère la négociation entre les contrôles pour déterminer la disposition. La négociation est un processus qui s'effectue en deux étapes : premièrement, un contrôle informe son parent de l'emplacement et de la taille dont il a besoin ; deuxièmement, le parent informe le contrôle de l'espace dont il peut disposer.

Le système de disposition est exposé aux contrôles enfants par des classes WPF de base. Pour des dispositions courantes telles que les grilles, l'empilement et l'ancrage, WPF comprend plusieurs contrôles de disposition :

  • Canvas : les contrôles enfants fournissent leur propre disposition.

  • DockPanel : les contrôles enfants sont alignés aux bords du panneau.

  • Grid : les contrôles enfants sont positionnés en lignes et en colonnes.

  • StackPanel : les contrôles enfants sont empilés verticalement ou horizontalement.

  • VirtualizingStackPanel : les contrôles enfants sont virtualisés et réorganisés sur une seule ligne, verticale ou horizontale.

  • WrapPanel : les contrôles enfants sont positionnés de gauche à droite et renvoyés à la ligne suivante lorsqu'il y a plus de contrôles sur la ligne en cours que l'espace ne l'autorise.

L'exemple suivant utilise un DockPanel pour disposer plusieurs contrôles TextBox.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.LayoutWindow"
    Title="Layout with the DockPanel" Height="143" Width="319">

  <!--DockPanel to layout four text boxes--> 
  <DockPanel>
    <TextBox DockPanel.Dock="Top">Dock = "Top"</TextBox>
    <TextBox DockPanel.Dock="Bottom">Dock = "Bottom"</TextBox>
    <TextBox DockPanel.Dock="Left">Dock = "Left"</TextBox>
    <TextBox Background="White">This TextBox "fills" the remaining space.</TextBox>
  </DockPanel>

</Window>

Le DockPanel autorise les contrôles TextBox enfants à lui dire comment les réorganiser. Pour cela, le DockPanel implémente une propriété Dock exposée aux contrôles enfants pour permettre à chacun d'eux de spécifier un style d'ancrage.

Notes

Une propriété implémentée par un contrôle parent pour une utilisation par des contrôles enfants est une construction WPF appelée propriété attachée (consultez Vue d'ensemble des propriétés jointes).

L'illustration suivante affiche le résultat du balisage XAML dans l'exemple précédent.

Page DockPanel

Pour plus d'informations, consultez Système de disposition. Pour un exemple de présentation, consultez Galerie de dispositions WPF, exemple.

Liaison de données

La plupart des applications sont créées pour permettre aux utilisateurs d'afficher et de modifier des données. Pour les applications WPF, le travail de stockage et d'accès aux données est déjà fourni par des technologies telles que Microsoft SQL Server et ADO.NET. Après avoir accédé aux données et les avoir chargées dans les objets managés d'une application, les difficultés commencent pour les applications WPF. Cela implique essentiellement deux opérations :

  1. La copie des données depuis les objets managés vers des contrôles, où les données pourront être affichées et modifiées.

  2. La garantie que les modifications apportées aux données à l'aide des contrôles sont recopiées vers les objets managés.

Pour simplifier le développement d'applications, WPF fournit un moteur de liaison de données pour effectuer automatiquement ces étapes. La principale unité du moteur de liaison de données est la classe Binding dont le rôle est de lier un contrôle (la cible de liaison) à un objet de données (la source de liaison). Cette relation est illustrée ci-dessous.

Diagramme de liaison de données de base

L'exemple suivant montre comment lier une TextBox à une instance d'un objet Person personnalisé. Le code suivant montre l'implémentation Person.

Namespace SDKSample

    Class Person

        Private _name As String = "No Name"

        Public Property Name() As String
            Get
                Return _name
            End Get
            Set(ByVal value As String)
                _name = value
            End Set
        End Property

    End Class

End Namespace
namespace SDKSample
{
    class Person
    {
        string name = "No Name";

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
    }
}

Le balisage suivant lie la TextBox à une instance d'un objet Person personnalisé.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.DataBindingWindow">


...


<!-- Bind the TextBox to the data source (TextBox.Text to Person.Name) -->
<TextBox Name="personNameTextBox" Text="{Binding Path=Name}" />


...


</Window>
Imports System.Windows ' Window

Namespace SDKSample

    Partial Public Class DataBindingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()

            ' Create Person data source
            Dim person As Person = New Person()

            ' Make data source available for binding
            Me.DataContext = person

        End Sub

    End Class

End Namespace
using System.Windows; // Window

namespace SDKSample
{
    public partial class DataBindingWindow : Window
    {
        public DataBindingWindow()
        {
            InitializeComponent();

            // Create Person data source
            Person person = new Person();

            // Make data source available for binding
            this.DataContext = person;
        }
    }
}

Dans cet exemple, la classe Person est instanciée en code-behind et définie comme contexte de données de DataBindingWindow. Dans le balisage, la propriété Text de la TextBox est liée à la propriété Person.Name (à l'aide de la syntaxe XAML "{Binding ... }"). Ce code XAML demande à WPF de lier le contrôle TextBox à l'objet Person stocké dans la propriété DataContext de la fenêtre.

Le moteur de liaison de données WPF fournit une prise en charge supplémentaire qui inclut la validation, le tri, le filtrage et le regroupement. En outre, la liaison de données prend en charge l'utilisation de modèles de données afin de créer une UI personnalisée pour les données liées lorsque l'UI affichée par les contrôles WPF standard n'est pas appropriée.

Pour plus d'informations, consultez Vue d'ensemble de la liaison de données. Pour un exemple de présentation, consultez Liaison de données, démonstration.

Graphiques

WPF présente un jeu de fonctionnalités graphiques étendu, évolutif et flexible possédant les avantages suivants :

  • Graphiques indépendants du périphérique et de toute résolution. L'unité de mesure de base du système graphique WPF est le pixel indépendant du périphérique, soit 1/96e d'un pouce, quelle que soit la résolution réelle de l'écran. Elle sert de base au rendu indépendant du périphérique et de toute résolution. Chaque pixel indépendant du périphérique est automatiquement mis à l'échelle pour correspondre au paramètre de points par pouce (ppp) du système de restitution.

  • Précision améliorée. Le système de coordonnées WPF est mesuré avec des nombres à virgule flottante double précision plutôt que simple précision. Les transformations et valeurs d'opacité sont également exprimées sous la forme de valeurs double précision. WPF prend également en charge une vaste gamme de couleurs (scRGB) et assure la prise en charge intégrée de la gestion des entrées issues de différents espaces de couleurs.

  • Graphiques avancés et prise en charge de l'animation. WPF simplifie la programmation graphique en gérant les scènes d'animation à votre place ; ainsi, vous n'avez pas besoin de vous préoccuper du traitement des scènes, du rendu des boucles ou de l'interpolation bilinéaire. En outre, WPF fournit une prise en charge du test de recherche et une prise en charge complète de la composition alpha.

  • Accélération matérielle. Le système graphique WPF profite du matériel vidéo pour réduire l'utilisation du processeur.

Formes 2D

WPF fournit une bibliothèque de formes vectorielles courantes 2-D, telles que les rectangles et ellipses présentés dans l'illustration suivante.

Ellipses et rectangles

Les formes ont notamment pour intérêt de ne pas servir uniquement à l'affichage ; les formes implémentent la majorité des fonctionnalités que vous attendez des contrôles, y compris l'entrée au clavier et à la souris. L'exemple suivant montre l'événement MouseUp d'une Ellipse gérée.

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.EllipseEventHandlingWindow"
    Title="Click the Ellipse">
    <Ellipse Name="clickableEllipse" Fill="Blue" MouseUp="clickableEllipse_MouseUp" />
</Window>
Imports System.Windows ' Window, MessageBox
Imports System.Windows.Input ' MouseButtonEventArgs

Namespace SDKSample

    Public Class EllipseEventHandlingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub clickableEllipse_MouseUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            MessageBox.Show("You clicked the ellipse!")
        End Sub

    End Class

End Namespace
using System.Windows; // Window, MessageBox
using System.Windows.Input; // MouseButtonEventHandler

namespace SDKSample
{
    public partial class EllipseEventHandlingWindow : Window
    {
        public EllipseEventHandlingWindow()
        {
            InitializeComponent();
        }

        void clickableEllipse_MouseUp(object sender, MouseButtonEventArgs e)
        {
            // Display a message
            MessageBox.Show("You clicked the ellipse!");
        }
    }
}

L'illustration suivante montre ce qui est produit par le code précédent.

Fenêtre avec le texte "vous avez cliqué sur le bouton de sélection"

Pour plus d'informations, consultez Vue d'ensemble des formes et dessins de base dans WPF. Pour obtenir un exemple de présentation, consultez Éléments de forme, exemple.

Géométries 2D

Les formes 2-D fournies par WPF couvrent le jeu standard des formes de base. Toutefois, vous pourriez avoir besoin de créer des formes personnalisées afin de faciliter la conception d'une UI personnalisée. Pour cela, WPF fournit des géométries. L'illustration suivante montre l'utilisation de géométries pour créer une forme personnalisée qui peut être dessinée directement, utilisée comme pinceau ou pour découper d'autres formes et contrôles.

Les objets Path peuvent être utilisés pour dessiner des formes fermées ou ouvertes, plusieurs formes et même des formes courbées.

Les objets Geometry peuvent être utilisés pour le découpage, les tests de recherche et le rendu de données graphiques 2D.

Différentes utilisations d'un Chemin d'accès

Pour plus d'informations, consultez Vue d'ensemble de Geometry. Pour obtenir un exemple de présentation, consultez Géométries, exemple.

Effets 2D

Un sous-ensemble de fonctions 2-D WPF inclut des effets visuels tels que des dégradés, des bitmaps, des dessins, la peinture avec des vidéos, la rotation, la mise à l'échelle et l'inclinaison. Ces derniers sont tous réalisés avec des pinceaux ; l'illustration suivante montre quelques exemples.

Illustration de différents pinceaux

Pour plus d'informations, consultez Vue d'ensemble des pinceaux WPF. Pour obtenir un exemple de présentation, consultez Pinceaux, exemple.

Rendu 3D

WPF comprend également des fonctionnalités de rendu 3-D s'intégrant aux graphiques 2-D, permettant ainsi la création d'UIs plus intéressantes. Par exemple, l'illustration suivante montre des images 2-D restituées sur des formes 3-D.

Capture d'écran : exemple Visual3D

Pour plus d'informations, consultez Vue d'ensemble des graphiques 3D. Pour obtenir un exemple de présentation, consultez Solides 3D, exemple.

Animation

La prise en charge d'animations WPF vous permet d'agrandir, de faire bouger, de faire pivoter et de réaliser des fondus avec les contrôles pour créer des transitions de page intéressantes, et plus encore. Vous pouvez animer la plupart des classes WPF, même les classes personnalisées. L'illustration suivante montre une animation simple en action.

Images d'un cube animé

Pour plus d'informations, consultez Vue d'ensemble de l'animation. Pour obtenir un exemple de présentation, consultez Galerie d'exemples d'animation.

Médias

L'un des moyens d'acheminer un contenu riche est d'utiliser des médias audiovisuels. WPF fournit une prise en charge spéciale pour les images, les vidéos et l'audio.

Images

Les images sont communes à la plupart des applications et WPF fournit plusieurs façons de les utiliser. L'illustration suivante montre une UI avec une zone de liste qui contient des images miniatures. Lorsque vous sélectionnez une miniature, l'image s'affiche en grand.

Images miniatures et image plain écran

Pour plus d'informations, consultez Vue d'ensemble de la création d'images.

Audio et vidéo

Le contrôle MediaElement peut lire des vidéos et de l'audio et est assez flexible pour servir de base à un lecteur multimédia personnalisé. Le balisage XAML suivant implémente un lecteur multimédia.

<MediaElement 
  Name="myMediaElement" 
  Source="media/wpf.wmv" 
  LoadedBehavior="Manual" 
  Width="350" Height="250" />

La fenêtre de l'illustration suivante montre le contrôle MediaElement en action.

Contrôle MediaElement avec audio et vidéo

Pour plus d'informations, consultez Graphiques et multimédia.

Texte et typographie

Pour faciliter un rendu de texte de qualité optimale, WPF offre les fonctionnalités suivantes :

  • Prise en charge de la police OpenType.

  • Améliorations ClearType.

  • Performances élevées tirant parti de l'accélération matérielle.

  • Intégration de texte avec des médias, des graphiques et des animations.

  • Prise en charge de polices internationales et de mécanismes de secours.

Comme démonstration d'une intégration de texte avec des graphiques, l'illustration suivante montre l'application d'un ornement de texte.

Texte avec différents ornements

Pour plus d'informations, consultez Typographie dans WPF.

Documents

WPF possède une prise en charge native de trois types de documents : dynamiques, fixes et XML Paper Specification (XPS). WPF fournit également des services permettant de créer, afficher, gérer, annoter, empaqueter et imprimer des documents.

Documents dynamiques

Les documents dynamiques sont conçus pour optimiser l'affichage et la lisibilité en ajustant et en refluant dynamiquement le contenu lorsque la taille de la fenêtre et les paramètres d'affichage sont modifiés. Le balisage XAML suivant montre la définition d'un FlowDocument.

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

  <Paragraph FontSize="18" FontWeight="Bold">Flow Document</Paragraph>

  <Paragraph>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
    enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
  </Paragraph>


...


</FlowDocument>

L'exemple suivant montre comment charger un document dynamique dans un FlowDocumentReader pour l'affichage, la recherche et l'impression.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.FlowDocumentReaderWindow"
    Title="Flow Document Reader">
  <FlowDocumentReader Name="flowDocumentReader" />
</Window>
Imports System.Windows 'Window
Imports System.Windows.Documents 'FlowDocument
Imports System.IO 'FileStream, FileMode
Imports System.Windows.Markup 'XamlReader

Namespace SDKSample

    Public Class FlowDocumentReaderWindow
        Inherits Window

        Public Sub New()
            Me.InitializeComponent()
            Using stream1 As FileStream = New FileStream("AFlowDocument.xaml", _
                FileMode.Open, FileAccess.Read)
                Dim document1 As FlowDocument = _
                    TryCast(XamlReader.Load(stream1), FlowDocument)
                Me.flowDocumentReader.Document = document1
            End Using
        End Sub

    End Class

End Namespace
using System.Windows; // Window
using System.Windows.Documents; // FlowDocument
using System.IO; // FileStream, FileMode
using System.Windows.Markup; // XamlReader

namespace SDKSample
{
    public partial class FlowDocumentReaderWindow : System.Windows.Window
    {
        public FlowDocumentReaderWindow()
        {
            InitializeComponent();

            // Open the file that contains the FlowDocument
            using (FileStream xamlFile = new FileStream("AFlowDocument.xaml", 
                FileMode.Open, FileAccess.Read))
            {
                // Parse the file with the XamlReader.Load method
                FlowDocument content = XamlReader.Load(xamlFile) as FlowDocument;

                // Set the Document property to the parsed FlowDocument object
                this.flowDocumentReader.Document = content;
            }
        }
    }
}

L'exemple suivant affiche le résultat.

FlowDocument dans un contrôle FlowDocumentReader

Pour plus d'informations, consultez Vue d'ensemble des documents dynamiques.

Documents fixes

Les documents fixes sont prévus pour les applications qui requièrent une présentation WYSIWYG (« tel affichage, tel résultat ») précise, particulièrement en ce qui concerne l'impression. Les documents fixes sont principalement utilisés pour la Publication Assistée par Ordinateur (PAO),le traitement de texte et la présentation d'un formulaire, où le respect de la conception de la page d'origine est essentiel.

Les documents fixes conservent l'organisation précise de leur contenu indépendamment du périphérique. Par exemple, un document fixe affiché en 96 points par pouce (ppp) apparaît de la même manière que lorsqu'il est imprimé sur une imprimante laser 600 ppp ou une photocomposeuse 4800 ppp. Dans tous les cas, la disposition reste la même, bien que la qualité du document varie selon les fonctions de chaque périphérique.

Pour plus d'informations, consultez Documents dans WPF.

Documents XPS

Les documents XML Paper Specification (XPS) reposent sur les documents fixes WPF. Les documents XPS sont décrits par un schéma XML qui est une représentation paginée d'un document électronique. XPS est un format de document ouvert et multiplateforme, conçu pour faciliter la création, le partage, l'impression et l'archivage de documents paginés. Les principales fonctionnalités de la technologie XPS incluent les éléments suivants :

  • Empaquetage de documents XPS en fichiers ZipPackage conformes aux spécifications Open Packaging Conventions (OPC).

  • Hébergement dans des applications autonomes et dans des applications basées sur un navigateur.

  • Génération manuelle et manipulation de documents XPS depuis des applications WPF.

  • Rendu haute-fidélité en ciblant une qualité optimale du périphérique de sortie.

  • Impression Windows Vista en attente.

  • Routage direct de documents vers des imprimantes compatibles avec le format XPS.

  • Intégration de l'UI avec DocumentViewer.

L'illustration suivante montre un document XPS affiché par une DocumentViewer.

Document XPS dans un contrôle DocumentViewer

DocumentViewer permet également aux utilisateurs de modifier l'affichage, la recherche et l'impression de documents XPS.

Pour plus d'informations, consultez Documents dans WPF.

Annotations

Les annotations sont des remarques ou des commentaires ajoutés à des documents pour signaler des informations ou mettre en évidence des éléments intéressants afin de s'y référer ultérieurement. Bien qu'il soit facile d'écrire des remarques sur des documents imprimés, la capacité d'en « écrire » sur des documents électroniques est souvent limitée ou non disponible. Toutefois, WPF fournit un système d'annotations qui prend en charge les pense-bêtes et les mises en évidence. En outre, ces annotations peuvent être appliquées aux documents hébergés dans le contrôle DocumentViewer, comme indiqué dans l'illustration suivante.

Styles d'annotation

Pour plus d'informations, consultez Vue d'ensemble des annotations.

Empaquetage

Les APIs System.IO.Packaging WPF permettent à vos applications d'organiser des données, du contenu et des ressources dans des documents compressés uniques, portables, faciles à distribuer et faciles d'accès. Il est également possible d'inclure des signatures numériques pour authentifier des éléments contenus dans un package et pour vérifier que l'élément signé n'a pas été falsifié ou modifié. Vous pouvez également chiffrer des packages à l'aide de la gestion des droits afin de restreindre l'accès aux informations protégées.

Pour plus d'informations, consultez Documents dans WPF.

Impression

.NET Framework inclut un sous-système d'impression augmenté par WPF avec une prise en charge pour un contrôle amélioré du système d'impression. Les améliorations de l'impression incluent les éléments suivants :

  • Installation en temps réel de serveurs d'impression et de files d'attente distants.

  • Découverte dynamique des fonctions de l'imprimante.

  • Définition dynamique des options de l'imprimante.

  • Redirection et priorité du travail d'impression.

Les documents XPS disposent également d'une amélioration clé des performances. En général, le chemin d'accès d'impression Microsoft Windows Graphics Device Interface (GDI) existant requiert deux conversions :

  • La première est la conversion d'un document au format du processeur d'impression, tel que Enhanced Metafile (EMF).

  • La deuxième est une conversion dans le langage de description de page de l'imprimante, tel que le langage PCL (Printer Control Language) ou PostScript.

Toutefois, les documents XPS évitent ces conversions car l'un des composants du format de fichier XPS est un langage de processeur d'impression et un langage de description de page. Cette prise en charge permet de réduire la taille des fichiers en attente et les chargements de l'imprimante du réseau.

Pour plus d'informations, consultez Vue d'ensemble de l'impression.

Personnalisation des applications WPF

Jusqu'à présent, vous avez vu les principaux blocs de construction de WPF pour le développement des applications. Vous utilisez le modèle d'application pour héberger et transmettre le contenu de l'application, principalement composé de contrôles. Pour simplifier l'organisation des contrôles dans une UI et garantir la conservation de cette organisation face aux modifications de la taille de la fenêtre et des paramètres d'affichage, vous utilisez le système de disposition WPF. Étant donné que la plupart des applications permettent aux utilisateurs d'interagir avec les données, vous utilisez la liaison de données pour réduire le travail de l'intégration de votre UI avec des données. Pour améliorer l'apparence visuelle de votre application, vous utilisez la gamme complète de graphiques, d'animations et de prise en charge des supports fournie par WPF. Enfin, si votre application fonctionne avec du texte et des documents, vous pouvez utiliser les fonctions de texte, de typographie, de document, d'annotation, d'empaquetage et d'impression de WPF.

Les concepts de base ne sont pourtant pas tout le temps suffisants pour créer et gérer une expérience utilisateur vraiment particulière et visuellement surprenante. Il est possible que les contrôles WPF standard ne puissent pas s'intégrer avec l'apparence souhaitée de votre application. Les données risquent de ne pas s'afficher de la manière la plus efficace. L'expérience utilisateur globale de votre application peut ne pas être adaptée à l'apparence par défaut des thèmes Windows. À bien des égards, une technologie de présentation a autant besoin d'une extensibilité visuelle que de tout autre type d'extensibilité.

C'est pourquoi WPF fournit différents mécanismes pour créer des expériences utilisateur uniques, y compris un modèle de contenu riche pour les contrôles, les déclencheurs, les modèles de contrôles et de données, les styles, les ressources d'UI, les thèmes et les apparences.

Modèle de contenu

L'objectif principal d'une majorité des contrôles WPF est d'afficher du contenu. Dans WPF, le type et le nombre d'éléments qui peuvent constituer le contenu d'un contrôle sont appelés modèle de contenu du contrôle. Certains contrôles peuvent contenir un seul élément et un seul type de contenu ; par exemple, le contenu d'une TextBox est une valeur de chaîne assignée à la propriété Text. L'exemple suivant définit le contenu d'une TextBox.

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.TextBoxContentWindow"
    Title="TextBox Content">


...


<TextBox Text="This is the content of a TextBox." />


...


</Window>

L'illustration suivante affiche le résultat.

Contrôle TextBox contenant du texte

Toutefois, d'autres contrôles peuvent contenir plusieurs éléments de différents types de contenu ; le contenu d'un Button, spécifié par la propriété Content, peut contenir différents éléments, y compris des contrôles de disposition, du texte, des images et des formes. L'exemple suivant montre un Button avec du contenu qui inclut un DockPanel, une Label, une Border et un MediaElement.

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ButtonContentWindow"
    Title="Button Content">


...


<Button Margin="20">
  <!-- Button Content -->
  <DockPanel Width="200" Height="180">
    <Label DockPanel.Dock="Top" HorizontalAlignment="Center">Click Me!</Label>
    <Border Background="Black" BorderBrush="Yellow" BorderThickness="2" 
      CornerRadius="2" Margin="5">
      <MediaElement Source="media/wpf.wmv" Stretch="Fill" />
    </Border>
  </DockPanel>
</Button>


...


</Window>

L'illustration suivante montre le contenu de ce bouton.

Bouton contenant plusieurs types de contenu

Pour plus d'informations sur les types de contenu pris en charge par différents contrôles, consultez Modèle de contenu WPF.

Déclencheurs

Bien que l'objectif principal du balisage XAML soit d'implémenter l'apparence d'une application, vous pouvez également utiliser XAML pour implémenter certains aspects du comportement d'une application. Vous pouvez, par exemple, utiliser des déclencheurs pour modifier l'apparence d'une application à partir des interventions de l'utilisateur. Pour plus d'informations, consultez « Déclencheurs » dans Application d'un style et création de modèles.

Modèles de contrôle

Les UIs par défaut pour les contrôles WPF sont en général construites à partir d'autres formes et contrôles. Par exemple, un Button est composé de contrôles ButtonChrome et ContentPresenter. Le ButtonChrome fournit l'apparence du bouton standard, alors que le ContentPresenter affiche le contenu du bouton, comme spécifié par la propriété Content.

Parfois, l'apparence par défaut d'un contrôle peut être incompatible avec l'apparence globale d'une application. Dans ce cas, vous pouvez utiliser un ControlTemplate pour modifier l'apparence de l'UI du contrôle sans modifier ni son contenu, ni son comportement.

L'exemple suivant indique comment modifier l'apparence d'un Button à l'aide d'un ControlTemplate.

<Window 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.ControlTemplateButtonWindow"
  Title="Button with Control Template" Height="158" Width="290">

  <!-- Button using an ellipse -->
  <Button Content="Click Me!" Click="button_Click">
    <Button.Template>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid Margin="5">
          <Ellipse Stroke="DarkBlue" StrokeThickness="2">
            <Ellipse.Fill>
              <RadialGradientBrush Center="0.3,0.2" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Azure" Offset="0.1" />
                <GradientStop Color="CornflowerBlue" Offset="1.1" />
              </RadialGradientBrush>
            </Ellipse.Fill>
          </Ellipse>
          <ContentPresenter Name="content" HorizontalAlignment="Center" 
            VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Button.Template>

  </Button>

</Window>
Imports System.Windows ' Window, RoutedEventArgs, MessageBox

Namespace SDKSample

    Public Class ControlTemplateButtonWindow
        Inherits Window

        Public Sub New()

            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            MessageBox.Show("Hello, Windows Presentation Foundation!")
        End Sub

    End Class

End Namespace
using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class ControlTemplateButtonWindow : Window
    {
        public ControlTemplateButtonWindow()
        {
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

Dans cet exemple, l'UI du bouton par défaut a été remplacée par une Ellipse aux bords bleu foncé remplie à l'aide d'un RadialGradientBrush. Le contrôle ContentPresenter affiche le contenu du Button, "Click Me!". Lorsque l'utilisateur clique sur Button, l'événement Click est toujours déclenché dans le cadre du comportement par défaut du contrôle Button. Le résultat est affiché dans l'illustration suivante.

Bouton en forme d'ellipse et seconde fenêtre

Pour plus d'informations, consultez ControlTemplate. Pour un exemple de présentation, consultez Style avec ControlTemplates, exemple.

Modèles de données

Alors qu'un modèle de contrôle vous permet de spécifier l'apparence d'un contrôle, un modèle de données vous permet de spécifier l'apparence du contenu d'un contrôle. Les modèles de données sont souvent utilisés pour améliorer l'affichage des données liées. L'illustration suivante montre l'apparence par défaut d'une ListBox liée à une collection d'objets Task, où chaque tâche a un nom, une description et une priorité.

Zone de liste avec une apparence par défaut

L'apparence par défaut correspond à ce que vous pourriez attendre d'une ListBox. Toutefois, l'apparence par défaut de chaque tâche ne contient que le nom de la tâche. Pour afficher le nom, la description et la priorité de la tâche, l'apparence par défaut des éléments de liste liés du contrôle ListBox doit être modifiée à l'aide d'un DataTemplate. Le code XAML suivant définit ce type de DataTemplate appliqué à chaque tâche à l'aide de l'attribut ItemTemplate.

<Window
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.DataTemplateWindow"
  Title="With a Data Template">


...


<Window.Resources>
  <!-- Data Template (applied to each bound task item in the task collection) -->
  <DataTemplate x:Key="myTaskTemplate">
    <Border Name="border" BorderBrush="DarkSlateBlue" BorderThickness="2" 
      CornerRadius="2" Padding="5" Margin="5">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Padding="0,0,5,0" Text="Task Name:"/>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}"/>
        <TextBlock Grid.Row="1" Grid.Column="0" Padding="0,0,5,0" Text="Description:"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
        <TextBlock Grid.Row="2" Grid.Column="0" Padding="0,0,5,0" Text="Priority:"/>
        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
      </Grid>
    </Border>  
  </DataTemplate>
</Window.Resources>


...


<!-- UI -->
<DockPanel>
  <!-- Title -->
  <Label DockPanel.Dock="Top" FontSize="18" Margin="5" Content="My Task List:"/>

  <!-- Data template is specified by the ItemTemplate attribute -->
  <ListBox 
    ItemsSource="{Binding}" 
    ItemTemplate="{StaticResource myTaskTemplate}" 
    HorizontalContentAlignment="Stretch" 
    IsSynchronizedWithCurrentItem="True" 
    Margin="5,0,5,5" />

</DockPanel>


...


</Window>

L'illustration suivante montre l'effet de ce code.

Zone de liste utilisant un modèle de données

Notez que la ListBox a conservé son comportement et son apparence globale ; seule l'apparence du contenu affiché par la zone de liste a été modifiée.

Pour plus d'informations, consultez la page Vue d'ensemble des modèles de données. Pour obtenir un exemple de présentation, consultez Introduction aux modèles de données, exemple.

Styles

Les styles permettent aux développeurs et aux concepteurs de standardiser leur produit avec une apparence particulière. WPF fournit un modèle de style fort, dont la fondation est l'élément Style. L'exemple suivant crée un style qui définit la couleur d'arrière-plan Orange pour tous les éléments Button d'une fenêtre.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.StyleWindow"
    Title="Styles">


...


<!-- Style that will be applied to all buttons -->
<Style TargetType="{x:Type Button}">
  <Setter Property="Background" Value="Orange" />
  <Setter Property="BorderBrush" Value="Crimson" />
  <Setter Property="FontSize" Value="20" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="Margin" Value="5" />
</Style>


...


<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>

<!-- This label will not have the style applied to it -->
<Label>Don't Click Me!</Label>

<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>


...


</Window>

Étant donné que ce style cible tous les contrôles Button, le style est automatiquement appliqué à tous les boutons de la fenêtre, comme indiqué dans l'illustration suivante.

Deux boutons orange

Pour plus d'informations, consultez la page Application d'un style et création de modèles. Pour obtenir un exemple de présentation, consultez Introduction aux styles et aux modèles, exemple.

Ressources

Les contrôles d'une application doivent partager la même apparence, ce qui peut tout inclure, depuis les polices et les couleurs d'arrière-plan jusqu'aux modèles de contrôle, modèles de données et styles. Vous pouvez utiliser la prise en charge de WPF pour les ressources d'user interface (UI) afin d'encapsuler ces ressources dans un emplacement unique en vue d'une réutilisation.

L'exemple suivant définit une couleur d'arrière-plan commune partagée par un Button et une Label.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ResourcesWindow"
    Title="Resources Window">

  <!-- Define window-scoped background color resource -->
  <Window.Resources>
    <SolidColorBrush x:Key="defaultBackground" Color="Red" />
  </Window.Resources>


...


<!-- Button background is defined by window-scoped resource -->
<Button Background="{StaticResource defaultBackground}">One Button</Button>

<!-- Label background is defined by window-scoped resource -->
<Label Background="{StaticResource defaultBackground}">One Label</Label>


...


</Window>

Cet exemple implémente une ressource de couleur d'arrière-plan à l'aide de l'élément de propriété Window.Resources. Cette ressource est disponible pour tous les enfants de la Window. Il existe différentes portées de ressource, dont les suivantes, répertoriées dans l'ordre dans lequel elles sont résolues :

  1. Un contrôle individuel (à l'aide de la propriété FrameworkElement.Resources héritée).

  2. Une Window ou une Page (également à l'aide de la propriété FrameworkElement.Resources héritée).

  3. Une Application (à l'aide de la propriété Application.Resources).

Les diverses portées offrent une grande flexibilité en ce qui concerne la manière de définir et partager vos ressources.

Au lieu d'associer directement vos ressources à une portée précise, vous pouvez empaqueter une ou plusieurs ressources à l'aide d'un ResourceDictionary séparé qui peut être référencé dans d'autres parties d'une application. L'exemple suivant définit une couleur d'arrière-plan par défaut dans un dictionnaire de ressources.

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

  <!-- Define background color resource -->
  <SolidColorBrush x:Key="defaultBackground" Color="Red" />

  <!-- Define other resources -->


...


</ResourceDictionary>

L'exemple suivant référence le dictionnaire de ressources défini dans l'exemple précédent afin qu'il soit partagé dans une application.

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.App">

  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="BackgroundColorResources.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>


...


</Application>

Les ressources et les dictionnaires de ressources constituent la fondation de la prise en charge WPF pour les thèmes et les apparences.

Pour plus d'informations, consultez Vue d'ensemble des ressources.

Thèmes et apparences

D'un point de vue visuel, un thème définit une apparence globale de Windows et des applications qui y sont exécutées. Windows contient plusieurs thèmes. Par exemple, Microsoft Windows XP est fourni avec les thèmes Windows XP et Windows classiques, alors que Windows Vista est fourni avec les thèmes Windows Vista et Windows classiques. L'apparence définie par un thème définit l'apparence par défaut d'une application WPF. WPF ne s'intègre toutefois pas directement avec les thèmes Windows. Étant donné que l'apparence de WPF est définie par des modèles, WPF comprend un modèle pour chacun des thèmes Windows connus, notamment Aero (Windows Vista), le classique (Microsoft Windows 2000), Luna (Microsoft Windows XP) et Royale (Microsoft Windows XP Media Center Edition 2005). Ces thèmes sont empaquetés sous forme de dictionnaires de ressources qui sont résolus si les ressources sont introuvables dans une application. De nombreuses applications se fient à ces thèmes pour définir leur apparence visuelle ; rester cohérents avec l'apparence de Windows permet aux utilisateurs de se familiariser plus facilement avec davantage d'applications.

En revanche, l'expérience utilisateur de certaines applications ne vient pas nécessairement des thèmes standard. Par exemple, Microsoft Windows Media Player fonctionne avec des données audio et vidéo et bénéficie d'un style d'expérience utilisateur différent. Ces UIs ont tendance à fournir des thèmes personnalisés, spécifiques à une application. Ces derniers sont appelés apparences et les applications dotées d'une apparence fournissent souvent des raccordements avec lesquels les utilisateurs peuvent personnaliser de nombreux aspects de l'apparence. Microsoft Windows Media Player dispose de plusieurs apparences préfabriquées ainsi que d'un hôte d'apparences tierces.

Dans WPF, les thèmes et les apparences sont plus facilement définis à l'aide de dictionnaires de ressources. L'exemple suivant montre des exemples de définitions d'apparence.

<!-- Blue Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Blue" />
  </Style>


...


</ResourceDictionary>
<!-- Yellow Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Yellow" />
  </Style>


...


</ResourceDictionary>

Pour plus d'informations, consultez « Ressources et thèmes partagés » dans Application d'un style et création de modèles.

Contrôles personnalisés

Bien que WPF fournisse un hôte de prise en charge de la personnalisation, vous pourriez rencontrer des situations dans lesquelles des contrôles WPF existants ne satisfont pas les besoins de votre application ou de ses utilisateurs. Cela peut se produire lorsque :

  • l'UI dont vous avez besoin ne peut pas être créée en personnalisant l'apparence des implémentations WPF existantes.

  • le comportement dont vous avez besoin n'est pas pris en charge (ou difficilement) par les implémentations WPF existantes.

Toutefois, à ce stade, vous pouvez tirer parti de l'un des trois modèles WPF pour créer un nouveau contrôle. Chaque modèle cible un scénario spécifique et requiert que votre contrôle personnalisé dérive d'une classe de base WPF spécifique. Les trois modèles sont répertoriés ici :

  • Modèle de contrôle utilisateur. Un contrôle personnalisé dérive du UserControl et est composé d'un ou plusieurs autres contrôles.

  • Modèle de contrôle. Un contrôle personnalisé dérive du Control et est utilisé pour générer des implémentations qui séparent leur comportement de leur apparence à l'aide de modèles, comme la majorité des contrôles WPF. Le fait qu'il dérive du Control offre une plus grande liberté pour créer une UI personnalisée que des contrôles utilisateur, mais peut nécessiter plus d'effort.

  • Modèle de l'élément d'infrastructure. Un contrôle personnalisé dérive de FrameworkElement lorsque son apparence est définie par une logique de rendu personnalisé (et non des modèles).

L'exemple suivant montre un contrôle numeric up-down personnalisé dérivé de UserControl.

<UserControl
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.NumericUpDown">

  <Grid>

    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- Value text box -->
    <Border BorderThickness="1" BorderBrush="Gray" Margin="2" Grid.RowSpan="2" 
      VerticalAlignment="Center" HorizontalAlignment="Stretch">
      <TextBlock Name="valueText" Width="60" TextAlignment="Right" Padding="5"/>
    </Border>

    <!-- Up/Down buttons -->
    <RepeatButton Name="upButton" Click="upButton_Click" Grid.Column="1" 
      Grid.Row="0">Up</RepeatButton>
    <RepeatButton Name="downButton" Click="downButton_Click" Grid.Column="1" 
      Grid.Row="1">Down</RepeatButton>

  </Grid>

</UserControl>
imports System 'EventArgs
imports System.Windows 'DependencyObject, DependencyPropertyChangedEventArgs, 
                       ' FrameworkPropertyMetadata, PropertyChangedCallback, 
                       ' RoutedPropertyChangedEventArgs
imports System.Windows.Controls 'UserControl

Namespace SDKSample

    ' Interaction logic for NumericUpDown.xaml
    Partial Public Class NumericUpDown
        Inherits System.Windows.Controls.UserControl

        'NumericUpDown user control implementation


...



    End Class

End Namespace
using System; // EventArgs
using System.Windows; // DependencyObject, DependencyPropertyChangedEventArgs,
                      // FrameworkPropertyMetadata, PropertyChangedCallback, 
                      // RoutedPropertyChangedEventArgs
using System.Windows.Controls; // UserControl

namespace SDKSample
{
    public partial class NumericUpDown : UserControl
    {
        // NumericUpDown user control implementation


...


    }
}

L'exemple suivant illustre le code XAML requis pour incorporer le contrôle utilisateur dans une Window.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.UserControlWindow"
    xmlns:local="clr-namespace:SDKSample" 
    Title="User Control Window">


...


<!-- Numeric Up/Down user control -->
<local:NumericUpDown />


...


</Window>

L'illustration suivante montre le contrôle NumericUpDown hébergé dans une Window.

UserControl personnalisé

Pour plus d'informations sur les contrôles personnalisés, consultez Vue d'ensemble de la création de contrôles.

Meilleures pratiques WPF

Comme pour toute plateforme de développement, WPF peut être utilisé de différentes manières pour obtenir le résultat souhaité. Afin de garantir que vos applications WPF fournissent l'expérience utilisateur requise et répondent aux demandes du public en général, il existe des meilleures pratiques pour l'accessibilité, la globalisation, la localisation et les performances. Pour plus d'informations, consultez :

Résumé

WPF est une technologie de présentation complète pour générer une large gamme d'applications clientes visuellement surprenantes. Cette introduction a passé en revue les fonctionnalités clés de WPF.

L'étape suivante consiste à générer des applications WPF !

Pendant la génération de ces applications, vous pourrez revenir à cette introduction pour un petit rappel des fonctionnalités clés et pour rechercher des détails sur certaines fonctionnalités traitées dans cette introduction.

Vues d'ensemble et exemples recommandés

Les vues d'ensemble et exemples suivants sont mentionnés dans cette introduction.

Vues d'ensemble

Meilleures pratiques d'accessibilité

Vue d'ensemble de la gestion d'applications

Vue d'ensemble des commandes

Contrôles

Vue d'ensemble de la liaison de données

Vue d'ensemble des propriétés de dépendance

Documents dans WPF

Vue d'ensemble des entrées

Système de disposition

Vue d'ensemble de la navigation

Vue d'ensemble de l'impression

Vue d'ensemble des ressources

Vue d'ensemble des événements routés

Application d'un style et création de modèles

Typographie dans WPF

Sécurité (WPF)

Vue d'ensemble des fenêtres WPF

Modèle de contenu WPF

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

Graphiques et multimédia

Exemples

Solides 3D, exemple (page éventuellement en anglais)

Galerie d'animation, exemple (page éventuellement en anglais)

Pinceaux, exemple (page éventuellement en anglais)

Démonstration de liaison de données (page éventuellement en anglais)

Géométries, exemple (page éventuellement en anglais)

Introduction à la création de modèles de données, exemple (page éventuellement en anglais)

Introduction à la stylisation et à la création de modèles, exemple (page éventuellement en anglais)

Éléments de forme, exemple (page éventuellement en anglais)

Style avec ControlTemplates, exemple (page éventuellement en anglais)

Galerie de dispositions WPF, exemple (page éventuellement en anglais)

Voir aussi

Concepts

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

Commentaires de la communauté WPF