Procédure pas à pas : modification du comportement d'une propriété au moment du design

Article
08/21/2008

Mise à jour : novembre 2007

Lorsque vous utilisez l'extensibilité pour personnaliser le Concepteur Windows Presentation Foundation (WPF) pour Visual Studio, vous créez souvent des contrôles personnalisés. Toutefois, vous souhaitez parfois qu'une propriété du contrôle se comporte différemment au moment du design qu'au moment de l'exécution, tout en permettant à l'utilisateur de définir normalement la valeur de la propriété. Par exemple, vous souhaitez que l'utilisateur puisse affecter la valeur false à la propriété visible d'un contrôle, mais celui-ci doit rester visible au moment du design.

Dans cette procédure pas à pas, vous créez un Button personnalisé et modifiez le comportement des propriétés Background et Content. Pour ce faire, vous créez un DesignModeValueProvider et l'attachez à votre contrôle personnalisé. DesignModeValueProvider capture les modifications de propriété apportées par l'utilisateur, vous insérez votre propre logique dans la méthode TranslatePropertyValue et DesignModeValueProvider passe les nouvelles valeurs au concepteur.

Remarque importante :
Lorsque vous utilisez cette technique, le comportement d'une propriété dans le concepteur ne correspond pas à la valeur de la propriété en mode XAML. En effet, le mode XAML affiche la valeur que l'utilisateur a entrée au moment du design. La valeur en mode XAML représente le comportement de la propriété au moment de l'exécution.

Dans cette procédure pas à pas, vous exécutez les tâches suivantes :

créer un projet de bibliothèque de contrôles personnalisés WPF ;
créer un DesignModeValueProviderpersonnalisé ;
créer un contrôle bouton personnalisé ;
attacher DesignModeValueProvider au contrôle personnalisé ;
créer une application de test ;
tester le contrôle personnalisé.

Remarque :
Selon vos paramètres actifs ou votre édition, les boîtes de dialogue et les commandes de menu que vous voyez peuvent différer de celles qui sont décrites dans l'aide. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Paramètres Visual Studio.

Composants requis

Vous avez besoin des composants suivants pour exécuter cette procédure pas à pas :

Visual Studio 2008

Création d'un projet de bibliothèque de contrôles personnalisés WPF

Pour créer le projet

Créez un projet de bibliothèque de contrôles personnalisés WPF dans Visual Basic ou Visual C# nommé CustomButton.

Le code pour CustomControl1 s'ouvre dans l'éditeur de code.
Ajoutez une référence à l'assembly suivant.
- Microsoft.Windows.Design.Extensibility
Dans l'Explorateur de solutions, remplacez le nom du fichier de code par CustomButton.cs ou CustomButton.vb.

Si un message s'affiche demandant si vous souhaitez renommer toutes les références dans ce projet, cliquez sur Oui.
Dans l'Explorateur de solutions, développez le dossier Thèmes et ouvrez le fichier Generic.xaml.

Generic.xaml s'ouvre dans le Concepteur WPF.
En mode XAML, remplacez toutes les occurrences de "CustomControl1" par "CustomButton" dans le fichier Generic.xaml.
Dans le menu Générer, cliquez sur Générer la solution.

Création d'un DesignModeValueProvider personnalisé

Dans cette procédure, vous créez un DesignModeValueProvider personnalisé. Dans la méthode TranslatePropertyValue, vous modifiez la propriété Content de Button afin qu'il s'affiche en majuscules dans le concepteur. Vous modifiez également la propriété Background de Button afin qu'il s'affiche avec la couleur système par défaut dans le concepteur. Ces modifications concernent le concepteur uniquement. Au moment de l'exécution, les propriétés Content et Background s'affichent avec les valeurs définies par l'utilisateur.

Remarque :
Dans cette procédure, vous créez un DesignModeValueProvider qui gère deux propriétés différentes. Vous pouvez également créer plusieurs objets DesignModeValueProvider pour gérer des propriétés différentes.

Pour créer un DesignModeValueProvider personnalisé

Ajoutez au projet CustomButton une nouvelle classe nommée CustomButtonDesignModeValueProvider.cs ou CustomButtonDesignModeValueProvider.vb.

La nouvelle classe s'ouvre dans l'éditeur de code.

Ajoutez les espaces de noms suivants au début du fichier. Remplacez les espaces existants, le cas échéant.

Imports System
Imports System.Windows                  'SystemColors
Imports System.Windows.Media            'SolidColorBrush
Imports System.Windows.Controls         'Button
Imports Microsoft.Windows.Design.Model  'DesignModeValueProvider

using System;
using System.Windows;                   //SystemColors
using System.Windows.Media;             //SolidColorBrush
using System.Windows.Controls;          //Button
using Microsoft.Windows.Design.Model;   //DesignModeValueProvider

Modifiez la classe CustomButtonDesignModeValueProvider afin qu'elle hérite de DesignModeValueProvider.

Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class

class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

Ajoutez un constructeur à la classe. Dans le constructeur, vous identifiez les propriétés à capturer.

Public Sub New()

    Properties.Add(Button.ContentProperty)
    Properties.Add(Button.BackgroundProperty)
End Sub

public CustomButtonDesignModeValueProvider()
{
    Properties.Add(Button.ContentProperty);
    Properties.Add(Button.BackgroundProperty);
}

Substituez la méthode TranslatePropertyValue de la classe. C'est ici que vous spécifiez le nouveau comportement des propriétés au moment du design.

Public Overrides Function TranslatePropertyValue(ByVal identifier As PropertyIdentifier, ByVal value As Object) As Object

    If identifier.DependencyProperty Is Button.ContentProperty Then

        Return value.ToString().ToUpper()
    End If

    If identifier.DependencyProperty Is Button.BackgroundProperty Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(identifier, value)
End Function

public override object TranslatePropertyValue(PropertyIdentifier identifier, object value)
{
    if (identifier.DependencyProperty == Button.ContentProperty)
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DependencyProperty == Button.BackgroundProperty)
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(identifier, value);
}

Dans le menu Générer, cliquez sur Générer la solution.

Création d'un contrôle bouton personnalisé

Dans cette procédure, vous créez le contrôle personnalisé. Vous créez un contrôle personnalisé simple qui hérite de Button, mais qui ne contient aucune fonctionnalité personnalisée supplémentaire.

Pour créer un contrôle bouton personnalisé

Ouvrez la classe CustomButton dans l'éditeur de code.

Ajoutez les espaces de noms suivants au début du fichier. Remplacez les espaces existants, le cas échéant.

Imports System.Windows.Controls             'Button
Imports Microsoft.Windows.Design.Features   'Feature

using System.Windows.Controls;              //Button
using Microsoft.Windows.Design.Features;    //Feature

Remplacez la classe existante par la suivante.

Public Class CustomButton
    Inherits Button

    Shared Sub New()

    End Sub
End Class

public class CustomButton : Button
{
    static CustomButton()
    {
    }
}

Dans le menu Générer, cliquez sur Générer la solution.

Attachement de DesignModeValueProvider au contrôle personnalisé

Dans cette procédure, vous attachez DesignModeValueProvider au contrôle personnalisé à l'aide de l'attribut FeatureAttribute.

Remarque :
Vous pouvez également attacher DesignModeValueProvider à un contrôle personnalisé à l'aide du magasin de métadonnées. Pour plus d'informations, consultez Magasin de métadonnées et Comment : utiliser le magasin de métadonnées.

Pour attacher DesignModeValueProvider au contrôle personnalisé

Dans l'éditeur de code, localisez la déclaration de la classe CustomButton. Elle doit se présenter comme suit :
```
Public Class CustomButton
    Inherits Button
```
```
public class CustomButton : Button
```

Ajoutez un attribut Feature à la déclaration de classe et spécifiez DesignModeValueProvider.

<Feature(GetType(CustomButtonDesignModeValueProvider))> _
Public Class CustomButton
    Inherits Button

[Feature(typeof(CustomButtonDesignModeValueProvider))]
public class CustomButton : Button

Dans le menu Générer, cliquez sur Générer la solution.

Création d'une application de test

Pour créer une application de test

Ajoutez à la solution un nouveau projet d'application WPF dans Visual C# nommé CustomButtonTestApplication.

Window1.xaml s'ouvre dans le Concepteur WPF.
Dans l'Explorateur de solutions, cliquez avec le bouton droit sur le projet, puis cliquez sur Définir comme projet de démarrage.
Dans le menu Projet, cliquez sur Ajouter une référence, puis utilisez l'onglet Projets pour ajouter une référence au projet CustomButton.
Dans le menu Générer, cliquez sur Générer la solution.

Test du contrôle personnalisé

Pour tester le contrôle personnalisé

Dans l'affichage de Window1.xaml en mode XAML, remplacez le code XAML par le code suivant :

<Window x:Class="CustomButtonTestApplication.Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cb="clr-namespace:CustomButton;assembly=CustomButton"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <cb:CustomButton Height="75" Width="100">Button1</cb:CustomButton>
    </Grid>
</Window>

En mode Design, sélectionnez le bouton. Si nécessaire, cliquez sur la barre d'informations située dans la partie supérieure du concepteur pour recharger l'affichage.
Dans la fenêtre Propriétés, recherchez la propriété Background.
Tapez Red, puis appuyez sur Entrée.

Le code XAML est mis à jour en fonction du code Background="Red", mais la couleur du bouton ne change pas en mode Design.
Dans la fenêtre Propriétés, recherchez la propriété Content.
Tapez Hello World, puis appuyez sur Entrée.

Le code XAML est mis à jour en fonction du contenu Hello World, mais le bouton affiche le texte HELLO WORLD en mode Design.
Dans le menu Déboguer, cliquez sur Démarrer le débogage.

L'application démarre et la fenêtre apparaît. Le bouton est rouge et contient le texte Hello World au moment de l'exécution.
Fermez la fenêtre.