Présentation de WPFIntroduction to WPF

Windows Presentation Foundation (WPF) vous permet de créer des applications clientes de bureau pour Windows avec des expériences utilisateur visuellement surprenantes.Windows Presentation Foundation (WPF) lets you create desktop client applications for Windows with visually stunning user experiences.

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.The core of WPF is a resolution-independent and vector-based rendering engine that is built to take advantage of modern graphics hardware. WPF étend le cœur avec un ensemble complet de fonctionnalités de développement d’applications qui incluent XAML (Extensible Application Markup Language), des contrôles, la liaison de données, la disposition, les graphiques 2D et 3D, l’animation, des styles, des modèles, des documents, des médias, du texte et de la typographie.WPF extends the core with a comprehensive set of application-development features that include Extensible Application Markup Language (XAML), controls, data binding, layout, 2D and 3D graphics, animation, styles, templates, documents, media, text, and typography. WPF étant inclus dans le .NET Framework, vous pouvez développer des applications qui incorporent d’autres éléments de la bibliothèque de classes .NET Framework.WPF is included in the .NET Framework, so you can build applications that incorporate other elements of the .NET Framework class library.

Cette vue d’ensemble est destinée aux utilisateurs inexpérimentés ; elle couvre les fonctions et les concepts clés de WPF.This overview is intended for newcomers and covers the key capabilities and concepts of WPF.

Programmer avec WPFProgram with WPF

WPF existe comme sous-ensemble de types .NET Framework qui pour la plupart sont situés dans l’espace de noms System.Windows .WPF exists as a subset of .NET Framework types that are for the most part located in the System.Windows namespace. Si vous avez déjà créé des applications avec .NET Framework à l’aide de technologies managées comme ASP.NET et Windows Forms, l’expérience de programmation WPF doit vous sembler familière ; vous instanciez des classes, définissez des propriétés, appelez des méthodes et gérez des événements, le tout en utilisant votre langage de programmation .NET préféré, tel que C# ou Visual Basic.If you have previously built applications with .NET Framework using managed technologies like ASP.NET and Windows Forms, the fundamental WPF programming experience should be familiar; you instantiate classes, set properties, call methods, and handle events, all using your favorite .NET programming language, such as C# or Visual Basic.

WPF inclut des constructions de programmation supplémentaires qui améliorent les propriétés et événements : les propriétés de dépendance et événements routés.WPF includes additional programming constructs that enhance properties and events: dependency properties and routed events.

Balisage et code-behindMarkup and code-behind

WPF vous permet de développer une application en utilisant à la fois le balisage et le code-behind, une expérience avec laquelle les développeurs ASP.NET sont censés être familiarisés.WPF lets you develop an application using both markup and code-behind, an experience that ASP.NET developers should be familiar with. Vous utilisez généralement le balisage XAML pour implémenter l’apparence d’une application et les langages de programmation managés (code-behind) pour implémenter son comportement.You generally use XAML markup to implement the appearance of an application while using managed programming languages (code-behind) to implement its behavior. Cette séparation de l’apparence et du comportement présente les avantages suivants :This separation of appearance and behavior has the following benefits:

  • Les coûts de développement et de maintenance sont réduits, car le balisage spécifique à l’apparence n’est pas fortement couplé avec le code spécifique au comportement.Development and maintenance costs are reduced because appearance-specific markup is not tightly coupled with behavior-specific code.

  • 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.Development is more efficient because designers can implement an application's appearance simultaneously with developers who are implementing the application's behavior.

  • Laglobalisation et la localisation des applications WPF sont simplifiées.Globalization and localization for WPF applications is simplified.

balisageMarkup

XAML est un langage de balisage fondé sur XML qui est utilisé pour implémenter l’apparence d’une application de façon déclarative.XAML is an XML-based markup language that is used to implement an application's appearance declaratively. 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.It is typically used to create windows, dialog boxes, pages, and user controls, and to fill them with controls, shapes, and graphics.

L’exemple suivant utilise XAML pour implémenter l’apparence d’une fenêtre qui contient un seul bouton.The following example uses XAML to implement the appearance of a window that contains a single button.

<Window
    xmlns="http://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.Specifically, this XAML defines a window and a button by using the Window and Button elements, respectively. Chaque élément est configuré avec des attributs, tels que l’attribut Window de l’élément Title pour spécifier le texte de la barre de titre de la fenêtre.Each element is configured with attributes, such as the Window element's Title attribute to specify the window's title-bar text. Pendant l’exécution, WPF convertit les éléments et les attributs définis dans le balisage en instances des classes WPF.At run time, WPF converts the elements and attributes that are defined in markup to instances of WPF classes. 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 .For example, the Window element is converted to an instance of the Window class whose Title property is the value of the Title attribute.

L’illustration suivante montre l’interface utilisateur définie par XAML dans l’exemple précédent.The following figure shows the user interface (UI) that is defined by the XAML in the previous example.

Fenêtre qui contient un bouton

Comme XAML est basé sur XML, l’interface utilisateur que vous composez avec est assemblée dans une hiérarchie d’éléments imbriqués, connue sous le nom d’ arborescence des éléments.Since XAML is XML-based, the UI that you compose with it is assembled in a hierarchy of nested elements known as an element tree. L’arborescence des éléments offre un moyen logique et intuitif de créer et gérer des interfaces utilisateur.The element tree provides a logical and intuitive way to create and manage UIs.

Code-behindCode-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.The main behavior of an application is to implement the functionality that responds to user interactions, including handling events (for example, clicking a menu, tool bar, or button) and calling business logic and data access logic in response. Dans WPF, ce comportement est implémenté dans le code associé au balisage.In WPF, this behavior is implemented in code that is associated with markup. Ce type de code est appelé code-behind.This type of code is known as code-behind. L’exemple suivant montre le code-behind et le balisage mis à jour par rapport à l’exemple précédent.The following example shows the updated markup from the previous example and the code-behind.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>
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!");
        }
    }
}
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

Dans cet exemple, le code-behind implémente une classe qui dérive de la classe Window .In this example, the code-behind implements a class that derives from the Window class. L’attribut x:Class est utilisé pour associer le balisage à la classe code-behind.The x:Class attribute is used to associate the markup with the code-behind class. 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 is called from the code-behind class's constructor to merge the UI that is defined in markup with the code-behind class. (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.(InitializeComponent is generated for you when your application is built, which is why you don't need to implement it manually.) The combination of x:Class and InitializeComponent ensure that your implementation is correctly initialized whenever it is created. La classe code-behind implémente également un gestionnaire d’événements pour l’événement Click du bouton.The code-behind class also implements an event handler for the button's Click event. Quand vous cliquez sur le bouton, le gestionnaire d’événements affiche un message en appelant la méthode System.Windows.MessageBox.Show .When the button is clicked, the event handler shows a message box by calling the System.Windows.MessageBox.Show method.

L’illustration suivante affiche le résultat obtenu quand vous cliquez sur le bouton.The following figure shows the result when the button is clicked.

MessageBox

ContrôlesControls

Les expériences utilisateur fournies par le modèle d’application sont des contrôles construits.The user experiences that are delivered by the application model are constructed controls. 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 interface utilisateur et qui implémentent un certain comportement.In WPF, "control" is an umbrella term that applies to a category of WPF classes that are hosted in either a window or a page, have a user interface, and implement some behavior.

Pour plus d’informations, consultez Contrôles.For more information, see Controls.

Contrôles WPF par fonctionWPF controls by function

Les contrôles WPF intégrés sont répertoriés ici.The built-in WPF controls are listed here.

Entrée et commandesInput and Commands

Les contrôles détectent le plus souvent l’entrée utilisateur et y répondent.Controls most often detect and respond to user input. 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.The WPF input system uses both direct and routed events to support text input, focus management, and mouse positioning.

Les applications ont souvent des spécifications d’entrée complexes.Applications often have complex input requirements. WPF fournit un système de commande qui sépare les actions d’entrée utilisateur du code qui répond à ces actions.WPF provides a command system that separates user input actions from the code that responds to those actions.

Mise en pageLayout

Quand vous créez une interface utilisateur, réorganisez vos contrôles par emplacement et par taille pour former une disposition.When you create a user interface, you arrange your controls by location and size to form a layout. 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.A key requirement of any layout is to adapt to changes in window size and display settings. 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.Rather than forcing you to write the code to adapt a layout in these circumstances, WPF provides a first-class, extensible layout system for you.

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.The cornerstone of the layout system is relative positioning, which increases the ability to adapt to changing window and display conditions. De plus, le système de disposition gère la négociation entre les contrôles pour déterminer la disposition.In addition, the layout system manages the negotiation between controls to determine the layout. 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.The negotiation is a two-step process: first, a control tells its parent what location and size it requires; second, the parent tells the control what space it can have.

Le système de disposition est exposé aux contrôles enfants par des classes WPF de base.The layout system is exposed to child controls through base WPF classes. Pour des dispositions courantes telles que les grilles, l’empilement et l’ancrage, WPF comprend plusieurs contrôles de disposition :For common layouts such as grids, stacking, and docking, WPF includes several layout controls:

  • Canvas: les contrôles enfants fournissent leur propre disposition.Canvas: Child controls provide their own layout.

  • DockPanel: les contrôles enfants sont alignés aux bords du panneau.DockPanel: Child controls are aligned to the edges of the panel.

  • Grid: les contrôles enfants sont positionnés en lignes et en colonnes.Grid: Child controls are positioned by rows and columns.

  • StackPanel: les contrôles enfants sont empilés verticalement ou horizontalement.StackPanel: Child controls are stacked either vertically or horizontally.

  • VirtualizingStackPanel: les contrôles enfants sont virtualisés et réorganisés sur une seule ligne, verticale ou horizontale.VirtualizingStackPanel: Child controls are virtualized and arranged on a single line that is either horizontally or vertically oriented.

  • 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 actuelle que l’espace ne l’autorise.WrapPanel: Child controls are positioned in left-to-right order and wrapped to the next line when there are more controls on the current line than space allows.

L’exemple suivant utilise un DockPanel pour disposer plusieurs contrôles TextBox .The following example uses a DockPanel to lay out several TextBox controls.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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.The DockPanel allows the child TextBox controls to tell it how to arrange them. Pour cela, le DockPanel implémente une propriété jointe Dock exposée aux contrôles enfants pour permettre à chacun d’eux de spécifier un style d’ancrage.To do this, the DockPanel implements a Dock attached property that is exposed to the child controls to allow each of them to specify a dock style.

Note

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.A property that's implemented by a parent control for use by child controls is a WPF construct called an attached property.

L’illustration suivante affiche le résultat du balisage XAML dans l’exemple précédent.The following figure shows the result of the XAML markup in the preceding example.

DockPanel, page

Liaison de donnéesData binding

La plupart des applications sont créées pour permettre aux utilisateurs d’afficher et de modifier des données.Most applications are created to provide users with the means to view and edit data. 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.For WPF applications, the work of storing and accessing data is already provided for by technologies such as SQL Server and 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.After the data is accessed and loaded into an application's managed objects, the hard work for WPF applications begins. Cela implique essentiellement deux opérations :Essentially, this involves two things:

  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.Copying the data from the managed objects into controls, where the data can be displayed and edited.

  2. La garantie que les modifications apportées aux données à l’aide des contrôles sont recopiées vers les objets managés.Ensuring that changes made to data by using controls are copied back to the managed objects.

Pour simplifier le développement d’applications, WPF fournit un moteur de liaison de données pour effectuer automatiquement ces étapes.To simplify application development, WPF provides a data binding engine to automatically perform these steps. 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).The core unit of the data binding engine is the Binding class, whose job is to bind a control (the binding target) to a data object (the binding source). Cette relation est illustrée par la figure suivante :This relationship is illustrated by the following figure:

Diagramme de liaison de données de base

L’exemple suivant montre comment lier une TextBox à une instance d’un objet Person personnalisé.The next example demonstrates how to bind a TextBox to an instance of a custom Person object. Le code suivant montre l’implémentation de Person :The Person implementation is shown in the following code:

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é.The following markup binds the TextBox to an instance of a custom Person object.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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.In this example, the Person class is instantiated in code-behind and is set as the data context for the 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 ... }).In markup, the Text property of the TextBox is bound to the Person.Name property (using the "{Binding ... }" XAML syntax). Ce code XAML demande à WPF de lier le contrôle TextBox à l’objet Person stocké dans la propriété DataContext de la fenêtre.This XAML tells WPF to bind the TextBox control to the Person object that is stored in the DataContext property of the window.

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.The WPF data binding engine provides additional support that includes validation, sorting, filtering, and grouping. En outre, la liaison de données prend en charge l’utilisation de modèles de données afin de créer une interface utilisateur personnalisée pour les données liées quand l’interface utilisateur affichée par les contrôles WPF standard n’est pas appropriée.Furthermore, data binding supports the use of data templates to create custom user interface for bound data when the user interface displayed by the standard WPF controls is not appropriate.

Pour plus d’informations, consultez Vue d’ensemble de la liaison de données.For more information, see Data Binding Overview.

GraphiquesGraphics

WPF présente un ensemble de fonctionnalités graphiques étendu, évolutif et flexible possédant les avantages suivants :WPF introduces an extensive, scalable, and flexible set of graphics features that have the following benefits:

  • Graphiques indépendants du périphérique et de toute résolution.Resolution-independent and device-independent graphics. L’unité de mesure de base du système graphique WPF est le pixel indépendant du périphérique, soit 1/96ème de 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 la résolution.The basic unit of measurement in the WPF graphics system is the device-independent pixel, which is 1/96th of an inch, regardless of actual screen resolution, and provides the foundation for resolution-independent and device-independent rendering. 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.Each device-independent pixel automatically scales to match the dots-per-inch (dpi) setting of the system it renders on.

  • Précision améliorée.Improved precision. Le système de coordonnées WPF est mesuré avec des nombres à virgule flottante double précision plutôt que simple précision.The WPF coordinate system is measured with double-precision floating-point numbers rather than single-precision. Les transformations et valeurs d’opacité sont également exprimées sous la forme de valeurs double précision.Transformations and opacity values are also expressed as double-precision. 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.WPF also supports a wide color gamut (scRGB) and provides integrated support for managing inputs from different color spaces.

  • Graphiques avancés et prise en charge de l’animation.Advanced graphics and animation support. 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 ni de l’interpolation bilinéaire.WPF simplifies graphics programming by managing animation scenes for you; there is no need to worry about scene processing, rendering loops, and bilinear interpolation. En outre, WPF fournit une prise en charge du test de recherche et une prise en charge complète de la composition alpha.Additionally, WPF provides hit-testing support and full alpha-compositing support.

  • Accélération matérielle.Hardware acceleration. Le système graphique WPF profite du matériel vidéo pour réduire l’utilisation du processeur.The WPF graphics system takes advantage of graphics hardware to minimize CPU usage.

Formes 2D2D shapes

WPF fournit une bibliothèque de formes vectorielles 2D courantes, comme les rectangles et les ellipses présentés dans l’illustration suivante :WPF provides a library of common vector-drawn 2D shapes, such as the rectangles and ellipses that are shown in the following illustration:

Ellipses et rectangles

Les formes ont notamment pour intérêt de ne pas servir uniquement à l’affichage ; elles implémentent la majorité des fonctionnalités que vous attendez des contrôles, y compris l’entrée au clavier et à la souris.An interesting capability of shapes is that they are not just for display; shapes implement many of the features that you expect from controls, including keyboard and mouse input. L’exemple suivant montre l’événement MouseUp d’une Ellipse gérée.The following example shows the MouseUp event of an Ellipse being handled.

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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.The following figure shows what is produced by the preceding code.

Fenêtre avec le texte « vous avez cliqué sur l’ellipse! »

Pour plus d’informations, consultez Vue d’ensemble des formes et dessins de base dans WPF.For more information, see Shapes and Basic Drawing in WPF Overview.

Géométries 2D2D geometries

Les formes 2D fournies par WPF couvrent le jeu standard des formes de base.The 2D shapes provided by WPF cover the standard set of basic shapes. Toutefois, vous pouvez avoir besoin de créer des formes personnalisées afin de faciliter la conception d’une interface utilisateur personnalisée.However, you may need to create custom shapes to facilitate the design of a customized user interface. Pour cela, WPF fournit des géométries.For this purpose, WPF provides geometries. 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.The following figure demonstrates the use of geometries to create a custom shape that can be drawn directly, used as a brush, or used to clip other shapes and controls.

Les objetsPath peuvent être utilisés pour dessiner des formes fermées ou ouvertes, plusieurs formes et même des formes courbées.Path objects can be used to draw closed or open shapes, multiple shapes, and even curved shapes.

Les objets Geometry peuvent être utilisés pour le découpage, les tests de recherche et le rendu de données graphiques 2D.Geometry objects can be used for clipping, hit-testing, and rendering 2D graphic data.

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

Pour plus d’informations, consultez Vue d’ensemble de Geometry.For more information, see Geometry Overview.

Effets 2D2D effects

Un sous-ensemble des fonctionnalités 2D de WPF inclut des effets visuels, comme des dégradés, des bitmaps, des dessins, la peinture avec des vidéos, la rotation, la mise à l’échelle et l’inclinaison.A subset of WPF 2D capabilities includes visual effects, such as gradients, bitmaps, drawings, painting with videos, rotation, scaling, and skewing. Ces derniers sont tous réalisés avec des pinceaux ; l’illustration suivante montre quelques exemples.These are all achieved with brushes; the following figure shows some examples.

Illustration de différents pinceaux

Pour plus d’informations, consultez Vue d’ensemble des pinceaux WPF.For more information, see WPF Brushes Overview.

Rendu 3D3D rendering

WPF comprend également des fonctionnalités de rendu 3D qui s’intègrent aux graphiques 2D, permettant ainsi la création d’interfaces utilisateur plus intéressantes.WPF also includes 3D rendering capabilities that integrate with 2-d graphics to allow the creation of more exciting and interesting user interfaces. Par exemple, la figure suivante montre des images 2D restituées sur des formes 3D.For example, the following figure shows 2D images rendered onto 3D shapes.

Capture d’écran : exemple Visual3D

Pour plus d’informations, consultez Vue d’ensemble des graphiques 3D.For more information, see 3D Graphics Overview.

AnimationAnimation

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.WPF animation support lets you make controls grow, shake, spin, and fade, to create interesting page transitions, and more. Vous pouvez animer la plupart des classes WPF, même les classes personnalisées.You can animate most WPF classes, even custom classes. L’illustration suivante montre une animation simple en action.The following figure shows a simple animation in action.

Images d’un cube animé

Pour plus d’informations, consultez Vue d’ensemble de l’animation.For more information, see Animation Overview.

MédiasMedia

L’un des moyens d’acheminer un contenu riche est d’utiliser des médias audiovisuels.One way to convey rich content is through the use of audiovisual media. WPF fournit une prise en charge spéciale pour les images, les vidéos et l’audio.WPF provides special support for images, video, and audio.

ImagesImages

Les images sont communes à la plupart des applications et WPF fournit plusieurs façons de les utiliser.Images are common to most applications, and WPF provides several ways to use them. L’illustration suivante montre une interface utilisateur avec une zone de liste qui contient des images miniatures.The following figure shows a user interface with a list box that contains thumbnail images. Lorsque vous sélectionnez une miniature, l’image s’affiche en grand.When a thumbnail is selected, the image is shown full-size.

Images miniatures et image plein écran

Pour plus d’informations, consultez Vue d’ensemble de la création d’images.For more information, see Imaging Overview.

Audio et vidéoVideo and audio

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é.The MediaElement control is capable of playing both video and audio, and it is flexible enough to be the basis for a custom media player. Le balisage XAML suivant implémente un lecteur multimédia.The following XAML markup implements a media player.

<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.The window in the following figure shows the MediaElement control in action.

Contrôle MediaElement avec audio et vidéo

Pour plus d’informations, consultez Graphisme et multimédia.For more information, see Graphics and Multimedia.

Texte et typographieText and Typography

Pour faciliter un rendu de texte de qualité optimale, WPF offre les fonctionnalités suivantes :To facilitate high-quality text rendering, WPF offers the following features:

  • Prise en charge de la police OpenType.OpenType font support.

  • Améliorations ClearType.ClearType enhancements.

  • Performances élevées tirant parti de l’accélération matérielle.High performance that takes advantage of hardware acceleration.

  • Intégration de texte avec des médias, des graphiques et des animations.Integration of text with media, graphics, and animation.

  • Prise en charge de polices internationales et de mécanismes de secours.International font support and fallback mechanisms.

Comme démonstration d’une intégration de texte avec des graphiques, l’illustration suivante montre l’application d’un ornement de texte.As a demonstration of text integration with graphics, the following figure shows the application of text decorations.

Texte avec différents ornements de texte

Pour plus d’informations, consultez Typographie dans WPF.For more information, see Typography in Windows Presentation Foundation.

Personnaliser des applications WPFCustomize WPF apps

Jusqu’à présent, vous avez vu les principaux blocs de construction de WPF pour le développement des applications.Up to this point, you've seen the core WPF building blocks for developing applications. Vous utilisez le modèle d’application pour héberger et transmettre le contenu de l’application, principalement composé de contrôles.You use the application model to host and deliver application content, which consists mainly of controls. Pour simplifier l’organisation des contrôles dans une interface utilisateur 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.To simplify the arrangement of controls in a user interface, and to ensure the arrangement is maintained in the face of changes to window size and display settings, you use the WPF layout system. É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 interface utilisateur avec des données.Because most applications allow users to interact with data, you use data binding to reduce the work of integrating your user interface with data. 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.To enhance the visual appearance of your application, you use the comprehensive range of graphics, animation, and media support provided by 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.Often, though, the basics are not enough for creating and managing a truly distinct and visually stunning user experience. Il est possible que les contrôles WPF standard ne s’intègrent pas à l’apparence souhaitée de votre application.The standard WPF controls may not integrate with the desired appearance of your application. Les données risquent de ne pas s’afficher de la manière la plus efficace.Data may not be displayed in the most effective way. L’expérience utilisateur globale de votre application peut ne pas être adaptée à l’apparence par défaut des thèmes Windows.Your application's overall user experience may not be suited to the default look and feel of Windows themes. À bien des égards, une technologie de présentation a autant besoin d’une extensibilité visuelle que de tout autre type d’extensibilité.In many ways, a presentation technology needs visual extensibility as much as any other type of extensibility.

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’interface utilisateur, les thèmes et les apparences.For this reason, WPF provides a variety of mechanisms for creating unique user experiences, including a rich content model for controls, triggers, control and data templates, styles, user interface resources, and themes and skins.

Modèle de contenuContent model

L’objectif principal d’une majorité des contrôles WPF est d’afficher du contenu.The main purpose of a majority of the WPF controls is to display content. 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 contenudu contrôle.In WPF, the type and number of items that can constitute the content of a control is referred to as the control's content model. 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 .Some controls can contain a single item and type of content; for example, the content of a TextBox is a string value that is assigned to the Text property. L’exemple suivant définit le contenu d’une TextBox.The following example sets the content of a TextBox.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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.The following figure shows the result.

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.Other controls, however, can contain multiple items of different types of content; the content of a Button, specified by the Content property, can contain a variety of items including layout controls, text, images, and shapes. L’exemple suivant montre un Button avec du contenu qui inclut un DockPanel, une Label, une Borderet un MediaElement.The following example shows a Button with content that includes a DockPanel, a Label, a Border, and a MediaElement.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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.The following figure shows the content of this button.

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.For more information on the kinds of content that is supported by various controls, see WPF Content Model.

DéclencheursTriggers

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.Although the main purpose of XAML markup is to implement an application's appearance, you can also use XAML to implement some aspects of an application's behavior. Vous pouvez, par exemple, utiliser des déclencheurs pour modifier l’apparence d’une application à partir des interventions de l’utilisateur.One example is the use of triggers to change an application's appearance based on user interactions. Pour plus d’informations, consultez Application d’un style et création de modèles.For more information, see Styling and Templating.

Modèles de contrôleControl templates

Les interfaces utilisateur par défaut pour les contrôles WPF sont en général construites à partir d’autres formes et contrôles.The default user interfaces for WPF controls are typically constructed from other controls and shapes. Par exemple, un Button est composé de contrôles ButtonChrome et ContentPresenter .For example, a Button is composed of both ButtonChrome and ContentPresenter controls. 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 .The ButtonChrome provides the standard button appearance, while the ContentPresenter displays the button's content, as specified by the Content property.

Parfois, l’apparence par défaut d’un contrôle peut être incompatible avec l’apparence globale d’une application.Sometimes the default appearance of a control may be incongruent with the overall appearance of an application. Dans ce cas, vous pouvez utiliser un ControlTemplate pour modifier l’apparence de l’interface utilisateur du contrôle sans modifier ni son contenu, ni son comportement.In this case, you can use a ControlTemplate to change the appearance of the control's user interface without changing its content and behavior.

L’exemple suivant indique comment modifier l’apparence d’un Button à l’aide d’un ControlTemplate.For example, the following example shows how to change the appearance of a Button by using a ControlTemplate.

<Window 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>
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!");
        }
    }
}
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

Dans cet exemple, l’interface utilisateur du bouton par défaut a été remplacée par une Ellipse aux bords bleu foncé remplie à l’aide d’un RadialGradientBrush.In this example, the default button user interface has been replaced with an Ellipse that has a dark blue border and is filled using a RadialGradientBrush. Le contrôle ContentPresenter affiche le contenu du Button, « Click Me! ».The ContentPresenter control displays the content of the Button, "Click Me!" Quand 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 .When the Button is clicked, the Click event is still raised as part of the Button control's default behavior. Le résultat est affiché dans la figure suivante :The result is shown in the following figure:

Bouton en forme d’ellipse et seconde fenêtre

Modèles de donnéesData templates

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.Whereas a control template lets you specify the appearance of a control, a data template lets you specify the appearance of a control's content. Les modèles de données sont souvent utilisés pour améliorer l’affichage des données liées.Data templates are frequently used to enhance how bound data is displayed. 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é.The following figure shows the default appearance for a ListBox that is bound to a collection of Task objects, where each task has a name, description, and priority.

Zone de liste avec une apparence par défaut

L’apparence par défaut correspond à ce que vous pourriez attendre d’une ListBox.The default appearance is what you would expect from a ListBox. Toutefois, l’apparence par défaut de chaque tâche ne contient que le nom de la tâche.However, the default appearance of each task contains only the task name. 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.To show the task name, description, and priority, the default appearance of the ListBox control's bound list items must be changed by using a DataTemplate. Le code XAML suivant définit ce type de DataTemplateappliqué à chaque tâche à l’aide de l’attribut ItemTemplate .The following XAML defines such a DataTemplate, which is applied to each task by using the ItemTemplate attribute.

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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.The following figure shows the effect of this 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.Note that the ListBox has retained its behavior and overall appearance; only the appearance of the content being displayed by the list box has changed.

Pour plus d’informations, consultez Vue d’ensemble des modèles de données.For more information, see Data Templating Overview.

StylesStyles

Les styles permettent aux développeurs et aux concepteurs de standardiser leur produit avec une apparence particulière.Styles enable developers and designers to standardize on a particular appearance for their product. WPF fournit un modèle de style fort, dont la fondation est l’élément Style .WPF provides a strong style model, the foundation of which is the Style element. 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.The following example creates a style that sets the background color for every Button on a window to Orange.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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, il est automatiquement appliqué à tous les boutons de la fenêtre, comme le montre la figure suivante :Because this style targets all Button controls, the style is automatically applied to all the buttons in the window, as shown in the following figure:

Deux boutons orange

Pour plus d’informations, consultez Application d’un style et création de modèles.For more information, see Styling and Templating.

RessourcesResources

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.Controls in an application should share the same appearance, which can include anything from fonts and background colors to control templates, data templates, and styles. Vous pouvez utiliser la prise en charge de WPF pour les ressources d’interface utilisateur afin d’encapsuler ces ressources dans un emplacement unique en vue d’une réutilisation.You can use WPF's support for user interface resources to encapsulate these resources in a single location for reuse.

L’exemple suivant définit une couleur d’arrière-plan commune partagée par un Button et une Label.The following example defines a common background color that is shared by a Button and a Label.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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.This example implements a background color resource by using the Window.Resources property element. Cette ressource est disponible pour tous les enfants de la Window.This resource is available to all children of the Window. Il existe différentes portées de ressource, dont les suivantes, répertoriées dans l’ordre dans lequel elles sont résolues : There are a variety of resource scopes, including the following, listed in the order in which they are resolved:

  1. Un contrôle individuel (à l’aide de la propriété System.Windows.FrameworkElement.Resources héritée).An individual control (using the inherited System.Windows.FrameworkElement.Resources property).

  2. Une Window ou une Page (également à l’aide de la propriété System.Windows.FrameworkElement.Resources héritée).A Window or a Page (also using the inherited System.Windows.FrameworkElement.Resources property).

  3. Une Application (à l’aide de la propriété System.Windows.Application.Resources ).An Application (using the System.Windows.Application.Resources property).

Les diverses portées offrent une grande flexibilité en ce qui concerne la manière de définir et partager vos ressources.The variety of scopes gives you flexibility with respect to the way in which you define and share your resources.

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.As an alternative to directly associating your resources with a particular scope, you can package one or more resources by using a separate ResourceDictionary that can be referenced in other parts of an application. L’exemple suivant définit une couleur d’arrière-plan par défaut dans un dictionnaire de ressources.For example, the following example defines a default background color in a resource dictionary.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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.The following example references the resource dictionary defined in the previous example so that it is shared across an application.

<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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.Resources and resource dictionaries are the foundation of WPF support for themes and skins.

Pour plus d’informations, consultez Ressources.For more information, see Resources.

Contrôles personnalisésCustom controls

Bien que WPF fournisse un hôte de prise en charge de la personnalisation, vous pouvez rencontrer des situations dans lesquelles des contrôles WPF existants ne satisfont pas les besoins de votre application ou de ses utilisateurs.Although WPF provides a host of customization support, you may encounter situations where existing WPF controls do not meet the needs of either your application or its users. Cela peut se produire lorsque :This can occur when:

  • l’interface utilisateur dont vous avez besoin ne peut pas être créée en personnalisant l’apparence des implémentations WPF existantes ;The user interface that you require cannot be created by customizing the look and feel of existing WPF implementations.

  • le comportement dont vous avez besoin n’est pas pris en charge (ou difficilement) par les implémentations WPF existantes.The behavior that you require is not supported (or not easily supported) by existing WPF implementations.

Toutefois, à ce stade, vous pouvez tirer parti de l’un des trois modèles WPF pour créer un contrôle.At this point, however, you can take advantage of one of three WPF models to create a new control. 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.Each model targets a specific scenario and requires your custom control to derive from a particular WPF base class. Les trois modèles sont répertoriés ici :The three models are listed here:

  • Modèle de contrôle utilisateur.User Control Model. Un contrôle personnalisé dérive d’ UserControl et est composé d’un ou de plusieurs autres contrôles.A custom control derives from UserControl and is composed of one or more other controls.

  • Modèle de contrôle.Control Model. 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.A custom control derives from Control and is used to build implementations that separate their behavior from their appearance using templates, much like the majority of WPF controls. Le fait qu’il dérive du Control offre une plus grande liberté pour créer une interface utilisateur personnalisée que des contrôles utilisateur, mais peut nécessiter plus d’effort.Deriving from Control allows you more freedom for creating a custom user interface than user controls, but it may require more effort.

  • Modèle de l’élément d’infrastructure.Framework Element Model. Un contrôle personnalisé dérive de FrameworkElement quand son apparence est définie par une logique de rendu personnalisé (et non des modèles).A custom control derives from FrameworkElement when its appearance is defined by custom rendering logic (not templates).

L’exemple suivant montre un contrôle NumericUpDown personnalisé dérivé de UserControl.The following example shows a custom numeric up/down control that derives from UserControl.

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>
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
    }
}
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

L’exemple suivant illustre le code XAML requis pour incorporer le contrôle utilisateur dans une Window.The next example illustrates the XAML that is required to incorporate the user control into a Window.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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.The following figure shows the NumericUpDown control hosted in a Window.

UserControl personnalisé

Pour plus d’informations sur les contrôles personnalisés, consultez Vue d’ensemble de la création de contrôles.For more information on custom controls, see Control Authoring Overview.

Bonnes pratiques pour WPFWPF best practices

Comme pour toute plateforme de développement, WPF peut être utilisé de différentes manières pour obtenir le résultat souhaité.As with any development platform, WPF can be used in a variety of ways to achieve the desired result. 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.As a way of ensuring that your WPF applications provide the required user experience and meet the demands of the audience in general, there are recommended best practices for accessibility, globalization and localization, and performance. Pour plus d'informations, voir :For more information, see:

Étapes suivantesNext steps

Nous avons examiné les fonctionnalités principales de WPF.We've looked at the key features of WPF. Il est maintenant temps de créer votre première application WPF.Now it's time to build your first WPF app.

Voir aussiSee also