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

Article
08/10/2011

Lorsque vous utilisez l'extensibilité pour personnaliser le Concepteur 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.

Important

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 allez effectuer 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é.

Notes

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.

Composants requis

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

Visual Studio 2010

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 une boîte de message s'affiche pour demander si vous souhaitez renommer toutes les références dans ce projet, cliquez sur Oui.
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.

Notes

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
Imports Microsoft.Windows.Design.Metadata


using System;
using System.Windows;                   //SystemColors
using System.Windows.Media;             //SolidColorBrush
using System.Windows.Controls;          //Button
using Microsoft.Windows.Design.Model;
using Microsoft.Windows.Design.Metadata;   //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(GetType(Button), "Content")
    Properties.Add(GetType(Button), "Background")
End Sub


public CustomButtonDesignModeValueProvider()
{
    Properties.Add( typeof(Button), "Content");
    Properties.Add(typeof(Button), "Background");
}

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 item As ModelItem, _
    ByVal identifier As PropertyIdentifier, _
    ByVal value As Object) As Object

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Content" Then

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

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Background" Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(item, identifier, value)
End Function


public override object TranslatePropertyValue(ModelItem item, PropertyIdentifier identifier, object value)
{
    if (identifier.DeclaringType == typeof( Button ) &&
        identifier.Name == "Content" )
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DeclaringType == typeof(Button) &&
        identifier.Name == "Background")
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(item, 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.

Notes

Vous pouvez également attacher un DesignModeValueProvider à un contrôle personnalisé à l'aide des métadonnées au moment du design personnalisées fournies. Pour plus d'informations, consultez Mise à disposition de métadonnées au moment du design.

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.

MainWindow.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 la vue XAML pour MainWindow.xaml, remplacez le code XAML existant par le code suivant :

<Window x:Class="CustomButtonTestApplication.MainWindow"
    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="MainWindow" 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.