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

Mise à jour : novembre 2007

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 la liste de code complète, consultez Comment : implémenter un rail à l'intérieur d'un contrôle.

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

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 accomplir cette procédure pas à pas :

  • Visual Studio 2008.

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é

  1. 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.

  2. Dans l'Explorateur de solutions, remplacez le nom du fichier de code par SkewButton.cs ou SkewButton.vb. Si un message s'affiche demandant si vous souhaitez renommer toutes les références dans ce projet, cliquez sur Oui.

  3. Dans l'Explorateur de solutions, développez le dossier Thèmes.

  4. Double-cliquez sur Generic.xaml.

    Generic.xaml s'ouvre dans le Concepteur WPF.

  5. En mode XAML, remplacez toutes les occurrences de "CustomControl1" par "SkewButton".

  6. Ouvrez SkewButton.cs ou SkewButton.vb dans l'éditeur de code.

  7. 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";
                }
            }
        }
    }
    
  8. Le chemin de sortie du projet doit être "bin\".

  9. 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 Magasin de métadonnées.

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

  1. Ajoutez à la solution un nouveau projet de bibliothèque de classes dans Visual Basic ou Visual C# nommé SkewButtonLibrary.VisualStudio.Design.

  2. Le chemin de sortie du projet doit être "..\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.

  3. Ajoutez des références aux assemblys WPF suivants.

    • PresentationCore

    • PresentationFramework

    • WindowsBase

  4. Ajoutez des références aux assemblys du Concepteur WPF suivants.

    • Microsoft.Windows.Design

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  5. Ajoutez une référence au projet SkewButtonLibrary.

  6. Dans l'Explorateur de solutions, remplacez le nom du fichier de code Class1 par Metadata.cs ou Metadata.vb. Si un message s'affiche demandant si vous souhaitez renommer toutes les références dans ce projet, cliquez sur Oui.

  7. 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
    
    ' Container for any general design-time metadata to initialize.
    ' Designers look for a type in the design-time assembly that 
    ' implements IRegisterMetadata. If found, designers instantiate 
    ' this class and call its Register() method automatically.
    Friend Class Metadata
        Implements IRegisterMetadata
    
        ' Called by the designer to register any design-time metadata.
        Public Sub Register() Implements IRegisterMetadata.Register
            Dim builder As New AttributeTableBuilder()
    
            ' Add the adorner provider to the design-time metadata.
            builder.AddCustomAttributes(GetType(SkewButton), New FeatureAttribute(GetType(SkewButtonAdornerProvider)))
    
            MetadataStore.AddAttributeTable(builder.CreateTable())
    
        End Sub
    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;
    
    namespace CiderPropertiesTester
    {
        // Container for any general design-time metadata to initialize.
        // Designers look for a type in the design-time assembly that 
        // implements IRegisterMetadata. If found, designers instantiate 
        // this class and call its Register() method automatically.
        internal class Metadata : IRegisterMetadata
        {
            // Called by the designer to register any design-time metadata.
            public void Register()
            {
                AttributeTableBuilder builder = new AttributeTableBuilder();
    
                // Add the adorner provider to the design-time metadata.
                builder.AddCustomAttributes(
                    typeof(SkewButton), 
                    new FeatureAttribute(typeof(SkewButtonAdornerProvider)));
    
                MetadataStore.AddAttributeTable(builder.CreateTable());
            }
        }
    }
    
  8. 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

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

  2. 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, ByVal view As DependencyObject) 
            ' 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
    
            ' Place the slider in the adorner panel.
            Dim placement As New AdornerPlacementCollection()
            AdornerPanel.SetHorizontalStretch(skewSlider, AdornerStretch.Stretch)
            AdornerPanel.SetVerticalStretch(skewSlider, AdornerStretch.None)
    
            ' Use layout space for the adorner panel.
            ' If render space were used, the slider would skew along with the button.
            panel.CoordinateSpace = AdornerCoordinateSpaces.Layout
    
            ' The adorner's width is relative to the content.
            ' The slider extends half the width of the control it adorns.
            placement.SizeRelativeToContentWidth(0.5, 0)
    
            ' Center the adorner within the control.
            placement.PositionRelativeToAdornerWidth(0.5, 0)
    
            ' The adorner's height is the same as the slider's.
            placement.SizeRelativeToAdornerDesiredHeight(1.0, 0)
    
            ' Position the adorner within the control it adorns.
            placement.PositionRelativeToAdornerHeight(1.0, 0)
    
            AdornerPanel.SetPlacements(skewSlider, placement)
    
            ' 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, view)
    
        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 tf 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(Control.RenderTransformProperty)
    
            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(Control.RenderTransformProperty).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, DependencyObject view)
            {
                // 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;
    
                // Place the slider in the adorner panel.
                AdornerPlacementCollection placement = new AdornerPlacementCollection();
                AdornerPanel.SetHorizontalStretch(skewSlider, AdornerStretch.Stretch);
                AdornerPanel.SetVerticalStretch(skewSlider, AdornerStretch.None);
    
                // Use layout space for the adorner panel.
                // If render space were used, the slider would skew along with the button.
                panel.CoordinateSpace = AdornerCoordinateSpaces.Layout;
    
                // The adorner's width is relative to the content.
                // The slider extends half the width of the control it adorns.
                placement.SizeRelativeToContentWidth(0.5, 0);
    
                // Center the adorner within the control.
                placement.PositionRelativeToAdornerWidth(0.5, 0);
    
                // The adorner's height is the same as the slider's.
                placement.SizeRelativeToAdornerDesiredHeight(1.0, 0);
    
                // Position the adorner within the control it adorns.
                placement.PositionRelativeToAdornerHeight(1.0, 0);
    
                AdornerPanel.SetPlacements(skewSlider, placement);
    
                // 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, view);
            }
    
            // 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 tf 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[Control.RenderTransformProperty];
    
                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[ 
                    Control.RenderTransformProperty].ComputedValue as SkewTransform;
    
                return skewXform.AngleX;
            }
        }
    }
    
  3. 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

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

    Window1.xaml s'ouvre dans le Concepteur WPF.

  2. Ajoutez une référence au projet SkewButtonLibrary.

  3. 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.Window1"
        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>
    
    <Window x:Class="DemoApplication.Window1"
        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>
    
  4. 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.

  5. 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.

  6. 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.

Voir aussi

Tâches

Comment : implémenter un rail à l'intérieur d'un contrôle

Référence

PrimarySelectionAdornerProvider

SkewTransform

Autres ressources

Concepts d'extensibilité avancés

Extensibilité du concepteur WPF