Procédure pas à pas : implémentation d'un rail à l'intérieur d'un contrôle

Article
08/10/2011

Cette procédure pas à pas indique comment créer un ornement de rail pour un contrôle personnalisé WPF (Windows Presentation Foundation). Un ornement de rail ajoute un marqueur ou une règle sur un côté d'un contrôle pour lequel il n'y a pas de mise à l'échelle sur un axe unique. L'ornement est un curseur placé dans le contrôle. Vous pouvez utiliser cet ornement pour définir la propriété RenderTransform sur un contrôle bouton personnalisé. La définition de la propriété RenderTransform incline le contrôle. Pour obtenir l'intégralité du code, consultez l'exemple d'ornement incliné sur le site Exemples d'extensibilité du Concepteur WPF (page éventuellement en anglais). .

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 assembly distinct pour les métadonnées au moment du design ;
implémenter le fournisseur d'ornements ;
tester le contrôle au moment du design.

Lorsque vous aurez terminé, vous saurez comment créer un ornement pour un 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 du contrôle personnalisé

La première étape consiste à créer le projet pour le contrôle personnalisé. Le contrôle est un bouton simple avec une petite portion de code au moment du design, qui utilise la méthode GetIsInDesignMode pour implémenter un comportement au moment du design.

Pour créer le contrôle personnalisé

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

Le code pour CustomControl1 s'ouvre dans l'éditeur de code.
Dans l'Explorateur de solutions, remplacez le nom du fichier de code par SkewButton.cs ou SkewButton.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.
Ouvrez SkewButton.cs ou SkewButton.vb dans l'éditeur de code.

Remplacez le code généré automatiquement par le code suivant. Le contrôle personnalisé SkewButton hérite de Button et affiche le texte "Actif en mode Design" lorsque le bouton apparaît dans le concepteur. La vérification GetIsInDesignMode et le code au moment du design suivant sont facultatifs et affichés uniquement dans le cadre de la démonstration.

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.ComponentModel


' The SkewButton control implements a button
' with a skew transformation applied.
Public Class SkewButton
    Inherits Button

    Public Sub New() 

        ' The following code enables custom design-mode logic.
        ' The GetIsInDesignMode check and the following design-time 
        ' code are optional and shown only for demonstration.
        If DesignerProperties.GetIsInDesignMode(Me) Then
            Content = "Design mode active"
        End If

    End Sub
End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;
using System.Windows.Media;
using System.ComponentModel;

namespace SkewButtonLibrary
{
    // The SkewButton control implements a button
    // with a skew transformation applied.
    public class SkewButton : Button
    {
        public SkewButton()
        {   
            // The following code enables custom design-mode logic.
            // The GetIsInDesignMode check and the following design-time 
            // code are optional and shown only for demonstration.
            if (DesignerProperties.GetIsInDesignMode(this))
            {
                Content = "Design mode active";
            }
        }
    }
}

Le chemin de sortie du projet doit être "bin\".
Générez la solution.

Création de l'assembly de métadonnées au moment du design

Le code au moment du design est déployé dans des assemblys de métadonnées spéciaux. Pour cette procédure pas à pas, l'ornement personnalisé est déployé dans un assembly nommé SkewButtonLibrary.VisualStudio.Design. Pour plus d'informations, consultez Mise à disposition de métadonnées au moment du design.

Pour créer l'assembly de métadonnées au moment du design

Ajoutez à la solution un nouveau projet de bibliothèque de classes dans Visual Basic ou Visual C# nommé SkewButtonLibrary.VisualStudio.Design.
Affectez au chemin de sortie du projet la valeur \SkewButtonLibrary\bin\". Cela permet de garder l'assembly du contrôle et l'assembly de métadonnées dans le même dossier, ce qui active la découverte de métadonnées pour les concepteurs.
Ajoutez des références aux assemblys WPF suivants.
- PresentationCore
- PresentationFramework
- System.Xaml
- WindowsBase
Ajoutez des références aux assemblys du Concepteur WPF suivants.
- Microsoft.Windows.Design.Extensibility
- Microsoft.Windows.Design.Interaction
Ajoutez une référence au projet SkewButtonLibrary.
Dans l'Explorateur de solutions, remplacez le nom du fichier de code Class1 par Metadata.cs ou Metadata.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.

Remplacez le code généré automatiquement par le code suivant. Ce code crée un AttributeTable qui attache l'implémentation au moment du design personnalisée à la classe SkewButton.

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.ComponentModel
Imports System.Windows.Media
Imports System.Windows.Controls
Imports System.Windows

Imports Microsoft.Windows.Design.Features
Imports Microsoft.Windows.Design.Metadata
Imports SkewButtonLibrary.VisualStudio.Design

Imports SkewButtonLibrary

' The ProvideMetadata assembly-level attribute indicates to designers
' that this assembly contains a class that provides an attribute table. 
<Assembly: ProvideMetadata(GetType(SkewButtonLibrary.VisualStudio.Design.Metadata))> 

' Container for any general design-time metadata to initialize.
' Designers look for a type in the design-time assembly that 
' implements IProvideAttributeTable. If found, designers instantiate
' this class and access its AttributeTable property automatically.
Friend Class Metadata
    Implements IProvideAttributeTable

    ' Accessed by the designer to register any design-time metadata.
    Public ReadOnly Property AttributeTable() As AttributeTable _
        Implements IProvideAttributeTable.AttributeTable
        Get
            Dim builder As New AttributeTableBuilder()

            ' Add the adorner provider to the design-time metadata.
            builder.AddCustomAttributes( _
                GetType(SkewButton), _
                New FeatureAttribute(GetType(SkewButtonAdornerProvider)))

            Return builder.CreateTable()
        End Get
    End Property
End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.ComponentModel;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows;

using SkewButtonLibrary;
using Microsoft.Windows.Design.Features;
using Microsoft.Windows.Design.Metadata;
using SkewButtonLibrary.VisualStudio.Design;

[assembly: ProvideMetadata(typeof(SkewButtonLibrary.VisualStudio.Design.Metadata))]
namespace SkewButtonLibrary.VisualStudio.Design
{
    // Container for any general design-time metadata to initialize.
    // Designers look for a type in the design-time assembly that 
    // implements IProvideAttributeTable. If found, designers instantiate 
    // this class and access its AttributeTable property automatically.
    internal class Metadata : IProvideAttributeTable
    {
        // Accessed by the designer to register any design-time metadata.
        public AttributeTable AttributeTable
        {
            get
            {
                AttributeTableBuilder builder = new AttributeTableBuilder();

                // Add the adorner provider to the design-time metadata.
                builder.AddCustomAttributes(
                    typeof(SkewButton),
                    new FeatureAttribute(typeof(SkewButtonAdornerProvider)));

                return builder.CreateTable();
            }
        }
    }
}

Enregistrez la solution.

Implémentation du fournisseur d'ornements

Le fournisseur d'ornements est implémenté dans un type nommé SkewButtonAdornerProvider. Le FeatureProvider de l'ornement permet la définition de la propriété RenderTransform du contrôle au moment du design.

Pour implémenter le fournisseur d'ornements

Ajoutez une nouvelle classe nommée SkewButtonAdornerProvider au projet SkewButtonLibrary.VisualStudio.Design.

Dans l'éditeur de code pour SkewButtonAdornerProvider, remplacez le code généré automatiquement par le code suivant. Ce code implémente un PrimarySelectionAdornerProvider qui fournit un ornement personnalisé.

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Windows.Input
Imports System.Windows
Imports System.Windows.Automation
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports Microsoft.Windows.Design.Interaction
Imports Microsoft.Windows.Design.Model


' The following class implements an adorner provider for the 
' SkewButton control. The adorner is a slider control, which 
' changes the SkewTransform of the SkewButton along the x-axis. 
' The adorner is placed inside the adorned control.
Class SkewButtonAdornerProvider
    Inherits PrimarySelectionAdornerProvider
    Private adornedControlModel As ModelItem
    Private batchedChange As ModelEditingScope
    Private skewSlider As Slider
    Private skewSliderAdornerPanel As AdornerPanel

    Public Sub New() 
        skewSlider = New Slider()
    End Sub

    ' The following method is called when the adorner is activated.
    ' It creates the adorner control, sets up the adorner panel,
    ' and attaches a ModelItem to the SkewButton.
    Protected Overrides Sub Activate(ByVal item As ModelItem)
        ' Save the ModelItem and hook into when it changes.
        ' This enables updating the slider position when 
        ' a new background value is set.
        adornedControlModel = item
        AddHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged

        ' Setup the slider's min and max values.
        skewSlider.Minimum = 0
        skewSlider.Maximum = 45

        ' Set the slider's background to the rail fill color.
        skewSlider.Background = AdornerColors.RailFillBrush

        ' All adorners are placed in an AdornerPanel
        ' for sizing and layout support.
        Dim panel As AdornerPanel = Me.Panel

        ' Position the slider as a rail inside the custom control.
        AdornerPanel.SetAdornerHorizontalAlignment(skewSlider, AdornerHorizontalAlignment.Stretch)
        AdornerPanel.SetAdornerVerticalAlignment(skewSlider, AdornerVerticalAlignment.Top)
        AdornerPanel.SetAdornerMargin(skewSlider, New Thickness(5, 5, 5, 0))

        ' Initialize the slider when it is loaded.
        AddHandler skewSlider.Loaded, AddressOf slider_Loaded

        ' Handle the value changes of the slider control.
        AddHandler skewSlider.ValueChanged, AddressOf slider_ValueChanged

        AddHandler skewSlider.PreviewMouseLeftButtonUp, AddressOf slider_MouseLeftButtonUp

        AddHandler skewSlider.PreviewMouseLeftButtonDown, AddressOf slider_MouseLeftButtonDown

        ' Run the base implementation.
        MyBase.Activate(item)

    End Sub

    ' The Panel utility property demand-creates the 
    ' adorner panel and adds it to the provider's 
    ' Adorners collection.
    Public ReadOnly Property Panel() As AdornerPanel
        Get
            If Me.skewSliderAdornerPanel Is Nothing Then
                Me.skewSliderAdornerPanel = New AdornerPanel()

                ' Add the adorner to the adorner panel.
                Me.skewSliderAdornerPanel.Children.Add(skewSlider)

                ' Add the panel to the Adorners collection.
                Adorners.Add(skewSliderAdornerPanel)
            End If

            Return Me.skewSliderAdornerPanel
        End Get
    End Property

    ' The following method deactivates the adorner.
    Protected Overrides Sub Deactivate() 

        RemoveHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged

        MyBase.Deactivate()

    End Sub


    ' The following method handles the Loaded event.
    ' It assigns the slider control's initial value.
    Sub slider_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs) 
        skewSlider.Value = GetCurrentSkewAngle()

    End Sub


    ' The following method handles the PropertyChanged event.
    ' It updates the slider control's value if the SkewButton control's 
    ' RenderTransform property changed.
    Sub AdornedControlModel_PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) 
        If e.PropertyName = "RenderTransform" Then
            ' Assign the SkewButton control's skew angle to the slider.
            skewSlider.Value = GetCurrentSkewAngle()
        End If

    End Sub


    ' The following method handles the MouseLeftButtonDown event.
    ' It calls the BeginEdit method on the ModelItem which represents the
    ' Skewcontrol.
    Sub slider_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) 
        batchedChange = adornedControlModel.BeginEdit()

    End Sub


    ' The following method handles the MouseLeftButtonUp event.
    ' It commits any changes made to the ModelItem which represents the
    ' Skewcontrol.
    Sub slider_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) 
        If Not (batchedChange Is Nothing) Then
            batchedChange.Complete()
            batchedChange.Dispose()
            batchedChange = Nothing
        End If

    End Sub


    ' The following method handles the slider control's 
    ' ValueChanged event. It sets the value of the 
    ' RenderTransform property by using the ModelProperty
    ' type.
    Sub slider_ValueChanged(ByVal sender As Object, ByVal e As RoutedPropertyChangedEventArgs(Of Double))

        Dim newSkewValue As Double = e.NewValue

        ' During setup, don't make a value local and set the skew angle.
        If newSkewValue = GetCurrentSkewAngle() Then
            Return
        End If

        ' Access the SkewButton control's RenderTransform property
        ' by using the ModelProperty type.
        Dim skewProperty As ModelProperty = adornedControlModel.Properties("RenderTransform")

        If Not skewProperty.IsSet Then
            ' If the value isn't local, make it local 
            ' before setting a sub-property value.
            skewProperty.SetValue(skewProperty.ComputedValue)
        End If

        ' Set the RenderTransform property on the SkewButton.
        skewProperty.SetValue(New SkewTransform(newSkewValue, 0))

    End Sub

    ' This utility method gets the SkewControl control's
    ' skew angle by using the ModelItem.
    Private Function GetCurrentSkewAngle()
        Dim skewXform As SkewTransform = adornedControlModel.Properties("RenderTransform").ComputedValue
        Return skewXform.AngleX
    End Function

End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Input;
using System.Windows;
using System.Windows.Automation;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using Microsoft.Windows.Design.Interaction;
using Microsoft.Windows.Design.Model;

namespace SkewButtonLibrary.VisualStudio.Design
{
    // The following class implements an adorner provider for the 
    // SkewButton control. The adorner is a slider control, which 
    // changes the SkewTransform of the SkewButton along the x-axis. 
    // The adorner is placed inside the adorned control.
    class SkewButtonAdornerProvider : PrimarySelectionAdornerProvider
    {
        private ModelItem adornedControlModel;
        private ModelEditingScope batchedChange;
        private Slider skewSlider;
        private AdornerPanel skewButtonAdornerPanel;

        public SkewButtonAdornerProvider()
        {
            skewSlider = new Slider();
        }

        // The following method is called when the adorner is activated.
        // It creates the adorner control, sets up the adorner panel,
        // and attaches a ModelItem to the SkewButton.
        protected override void Activate(ModelItem item)
        {
            // Save the ModelItem and hook into when it changes.
            // This enables updating the slider position when 
            // a new background value is set.
            adornedControlModel = item;
            adornedControlModel.PropertyChanged += 
                new System.ComponentModel.PropertyChangedEventHandler(
                    AdornedControlModel_PropertyChanged);

            // Setup the slider's min and max values.
            skewSlider.Minimum = 0;
            skewSlider.Maximum = 45;

            // Set the slider's background to the rail fill color.
            skewSlider.Background = AdornerColors.RailFillBrush;

            // All adorners are placed in an AdornerPanel
            // for sizing and layout support.
            AdornerPanel panel = this.Panel;

            AdornerPanel.SetAdornerHorizontalAlignment(skewSlider, AdornerHorizontalAlignment.Stretch);
            AdornerPanel.SetAdornerVerticalAlignment(skewSlider, AdornerVerticalAlignment.Top);
            AdornerPanel.SetAdornerMargin(skewSlider, new Thickness(5, 5, 5, 0));

            // Initialize the slider when it is loaded.
            skewSlider.Loaded += new RoutedEventHandler(slider_Loaded);

            // Handle the value changes of the slider control.
            skewSlider.ValueChanged += 
                new RoutedPropertyChangedEventHandler<double>(
                    slider_ValueChanged);

            skewSlider.PreviewMouseLeftButtonUp += 
                new System.Windows.Input.MouseButtonEventHandler(
                    slider_MouseLeftButtonUp);

            skewSlider.PreviewMouseLeftButtonDown += 
                new System.Windows.Input.MouseButtonEventHandler(
                    slider_MouseLeftButtonDown);

            // Run the base implementation.
            base.Activate(item);
        }

        // The Panel utility property demand-creates the 
        // adorner panel and adds it to the provider's 
        // Adorners collection.
        public AdornerPanel Panel
        {
            get
            {
                if (this.skewButtonAdornerPanel == null)
                {
                    skewButtonAdornerPanel = new AdornerPanel();

                    skewButtonAdornerPanel.Children.Add(skewSlider);

                    // Add the panel to the Adorners collection.
                    Adorners.Add(skewButtonAdornerPanel);
                }

                return this.skewButtonAdornerPanel;
            }
        }

        // The following method deactivates the adorner.
        protected override void Deactivate()
        {
            adornedControlModel.PropertyChanged -= 
                new System.ComponentModel.PropertyChangedEventHandler(
                    AdornedControlModel_PropertyChanged);

            base.Deactivate();
        }

        // The following method handles the Loaded event.
        // It assigns the slider control's initial value.
        void slider_Loaded(object sender, RoutedEventArgs e)
        {   
            skewSlider.Value = GetCurrentSkewAngle();
        }

        // The following method handles the PropertyChanged event.
        // It updates the slider control's value if the SkewButton control's 
        // RenderTransform property changed.
        void AdornedControlModel_PropertyChanged(
            object sender, 
            System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == "RenderTransform")
            {
                // Assign the SkewButton control's skew angle to the slider.
                skewSlider.Value = GetCurrentSkewAngle();
            }
        }

        // The following method handles the MouseLeftButtonDown event.
        // It calls the BeginEdit method on the ModelItem which represents the
        // Skewcontrol.
        void slider_MouseLeftButtonDown(
            object sender, 
            System.Windows.Input.MouseButtonEventArgs e)
        {
            batchedChange = adornedControlModel.BeginEdit();
        }

        // The following method handles the MouseLeftButtonUp event.
        // It commits any changes made to the ModelItem which represents the
        // Skewcontrol.
        void slider_MouseLeftButtonUp(
            object sender, 
            System.Windows.Input.MouseButtonEventArgs e)
        {
            if (batchedChange != null)
            {
                batchedChange.Complete();
                batchedChange.Dispose();
                batchedChange = null;
            }
        }

        // The following method handles the slider control's 
        // ValueChanged event. It sets the value of the 
        // RenderTransform property by using the ModelProperty
        // type.
        void slider_ValueChanged(
            object sender, 
            RoutedPropertyChangedEventArgs<double> e)
        {
            double newSkewValue = e.NewValue;

            // During setup, don't make a value local and set the skew angle.
            if (newSkewValue == GetCurrentSkewAngle())
            {
                return;
            }

            // Access the SkewButton control's RenderTransform property
            // by using the ModelProperty type.
            ModelProperty skewProperty = 
                adornedControlModel.Properties["RenderTransform"];

            if (!skewProperty.IsSet)
            {
                // If the value isn't local, make it local 
                // before setting a sub-property value.
                skewProperty.SetValue(skewProperty.ComputedValue);
            }

            // Set the RenderTransform property on the SkewButton.
            skewProperty.SetValue(new SkewTransform(newSkewValue, 0));
        }

        // This utility method gets the SkewControl control's
        // skew angle by using the ModelItem.
        private double GetCurrentSkewAngle()
        {   
            SkewTransform skewXform = adornedControlModel.Properties[
                "RenderTransform"].ComputedValue as SkewTransform;

            return skewXform.AngleX;
        }
    }
}

Générez la solution.

Test de l'implémentation au moment du design

Vous pouvez utiliser le contrôle SkewButton comme vous utiliseriez tout autre contrôle WPF. Le Concepteur WPF gère la création de tous les objets au moment du design.

Pour tester l'implémentation au moment du design

Ajoutez à la solution un nouveau projet d'application WPF nommé DemoApplication.

MainWindow.xaml s'ouvre dans le Concepteur WPF.
Ajoutez une référence au projet SkewButtonLibrary.

En mode XAML, remplacez le code XAML généré automatiquement par le code XAML suivant. Ce code XAML ajoute une référence à l'espace de noms SkewButtonLibrary ainsi que le contrôle personnalisé SkewButton. Le bouton apparaît en mode Design avec le texte « Actif en mode Design », indiquant que ce mode est activé. Si le bouton ne s'affiche pas, il peut s'avérer nécessaire de cliquer sur la barre d'informations, située dans la partie supérieure du concepteur, pour recharger la vue.

<Window x:Class="DemoApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cc="clr-namespace:SkewButtonLibrary;assembly=SkewButtonLibrary"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <cc:SkewButton Margin="30,30,30,30" Background="#FFD4D0C8">
            <cc:SkewButton.RenderTransform>
                <SkewTransform AngleX="0" AngleY="0" />
            </cc:SkewButton.RenderTransform>
        </cc:SkewButton>
    </Grid>
</Window>

En mode Design, cliquez sur le contrôle SkewButton pour le sélectionner.

Un contrôle Slider apparaît dans le contrôle SkewButton. Si le contrôle Slider n'apparaît pas, régénérez la solution.
Modifiez la valeur du contrôle Slider.

Le contrôle s'incline lorsque vous faites glisser le curseur. En mode XAML, la propriété RenderTransform a la valeur spécifiée par l'ornement.
Exécutez le projet DemoApplication.

Au moment de l'exécution, le bouton est incliné selon l'angle défini avec l'ornement.

Étapes suivantes

Vous pouvez ajouter d'autres fonctionnalités personnalisées au moment du design à vos contrôles personnalisés.

Ajoutez un ornement personnalisé au moment du design de votre contrôle. Pour plus d'informations, consultez Procédure pas à pas : création d'un ornement au moment du design.
Créez un fournisseur d'ornements pour la modification sur place. Pour plus d'informations, consultez Procédure pas à pas : implémentation de la modification sur place.
Créez un éditeur de couleurs personnalisé, que vous pouvez utiliser dans la fenêtre Propriétés. Pour plus d'informations, consultez Procédure pas à pas : implémentation d'un éditeur de couleurs.