Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Mise à jour : novembre 2007
Cette procédure pas à pas indique comment créer un ornement au moment du design pour un contrôle personnalisé WPF (Windows Presentation Foundation). Vous pouvez utiliser cet ornement dans le Concepteur Windows Presentation Foundation (WPF) pour Visual Studio pour définir la valeur de la propriété Opacity sur un contrôle bouton personnalisé. Pour cette procédure pas à pas, le contrôle est un bouton simple et l'ornement est un curseur qui permet de modifier l'opacité du bouton. Pour obtenir la liste de code complète, consultez Comment : créer un ornement au moment du design.
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é
Créez un projet de bibliothèque de contrôles personnalisés WPF dans Visual Basic ou Visual C# nommé CustomControlLibrary.
Le code pour CustomControl1 s'ouvre dans l'éditeur de code.
Dans l'Explorateur de solutions, remplacez le nom du fichier de code par ButtonWithDesignTime.cs ou ButtonWithDesignTime.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.
Double-cliquez sur Generic.xaml.
Generic.xaml s'ouvre dans le Concepteur WPF.
En mode XAML, remplacez toutes les occurrences de "CustomControl1" par "ButtonWithDesignTime".
Ouvrez ButtonWithDesignTime.cs ou ButtonWithDesignTime.vb dans l'éditeur de code.
Remplacez le code généré automatiquement par le code suivant. Le contrôle personnalisé ButtonWithDesignTime 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 Public Class ButtonWithDesignTime Inherits Button Public Sub New() ' 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 Classusing System; using System.Collections.Generic; using System.Text; using System.Windows.Controls; using System.Windows.Media; using System.ComponentModel; namespace CustomControlLibrary { public class ButtonWithDesignTime : Button { public ButtonWithDesignTime() { // 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 plus d'informations, consultez Comment : utiliser le magasin de métadonnées. Pour cette procédure pas à pas, l'ornement personnalisé est pris en charge par Visual Studio uniquement et est déployé dans un assembly nommé CustomControlLibrary.VisualStudio.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é CustomControlLibrary.VisualStudio.Design.
Le chemin de sortie du projet doit être "..\CustomControlLibrary\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
WindowsBase
Ajoutez des références aux assemblys du Concepteur WPF suivants.
Microsoft.Windows.Design
Microsoft.Windows.Design.Extensibility
Microsoft.Windows.Design.Interaction
Ajoutez une référence au projet CustomControlLibrary.
Dans l'Explorateur de solutions, remplacez le nom du fichier de code Class1 par Metadata.cs ou Metadata.vb.
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 ButtonWithDesignTime.
Imports System Imports System.Collections.Generic Imports System.Text Imports System.ComponentModel Imports System.Windows.Media Imports System.Windows.Controls Imports System.Windows Imports CustomControlLibrary Imports Microsoft.Windows.Design.Features Imports Microsoft.Windows.Design.Metadata Namespace CustomControlLibrary.VisualStudio.Design ' 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(ButtonWithDesignTime), _ New FeatureAttribute(GetType(OpacitySliderAdornerProvider))) MetadataStore.AddAttributeTable(builder.CreateTable()) End Sub End Class End Namespaceusing System; using System.Collections.Generic; using System.Text; using System.ComponentModel; using System.Windows.Media; using System.Windows.Controls; using System.Windows; using CustomControlLibrary; using Microsoft.Windows.Design.Features; using Microsoft.Windows.Design.Metadata; namespace CustomControlLibrary.VisualStudio.Design { // 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(ButtonWithDesignTime), new FeatureAttribute(typeof(OpacitySliderAdornerProvider))); MetadataStore.AddAttributeTable(builder.CreateTable()); } } }Enregistrez la solution.
Implémentation du fournisseur d'ornements
Le fournisseur d'ornements est implémenté dans un type nommé OpacitySliderAdornerProvider. Grâce à cet ornement, l'utilisateur peut définir la propriété Opacity du contrôle au moment du design.
Pour implémenter le fournisseur d'ornements
Ajoutez une nouvelle classe nommée OpacitySliderAdornerProvider au projet CustomControlLibrary.VisualStudio.Design.
Dans l'éditeur de code pour OpacitySliderAdornerProvider, remplacez le code généré automatiquement par le code suivant. Ce code implémente un PrimarySelectionAdornerProvider qui fournit un ornement basé sur un contrôle Slider.
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 Namespace CustomControlLibrary.VisualStudio.Design ' The following class implements an adorner provider for the ' adorned control. The adorner is a slider control, which ' changes the Background opacity of the adorned control. Class OpacitySliderAdornerProvider Inherits PrimarySelectionAdornerProvider Private adornedControlModel As ModelItem Private batchedChange As ModelEditingScope Private opacitySlider As Slider Private opacitySliderAdornerPanel As AdornerPanel Public Sub New() opacitySlider = 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 adorned control. 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. opacitySlider.Minimum = 0 opacitySlider.Maximum = 1 ' Setup the adorner panel. ' All adorners are placed in an AdornerPanel ' for sizing and layout support. Dim myPanel = Me.Panel AdornerPanel.SetHorizontalStretch(opacitySlider, AdornerStretch.Stretch) AdornerPanel.SetVerticalStretch(opacitySlider, AdornerStretch.None) Dim placement As New AdornerPlacementCollection() ' The adorner's width is relative to the content. ' The slider extends the full width of the control it adorns. placement.SizeRelativeToContentWidth(1.0, 0) ' The adorner's height is the same as the slider's. placement.SizeRelativeToAdornerDesiredHeight(1.0, 0) ' Position the adorner above the control it adorns. placement.PositionRelativeToAdornerHeight(-1.0, 0) ' Position the adorner up 5 pixels. This demonstrates ' that these placement calls are additive. These two calls ' are equivalent to the following single call: ' PositionRelativeToAdornerHeight(-1.0, -5). placement.PositionRelativeToAdornerHeight(0, -5) AdornerPanel.SetPlacements(opacitySlider, placement) ' Initialize the slider when it is loaded. AddHandler opacitySlider.Loaded, AddressOf slider_Loaded ' Handle the value changes of the slider control. AddHandler opacitySlider.ValueChanged, AddressOf slider_ValueChanged AddHandler opacitySlider.PreviewMouseLeftButtonUp, _ AddressOf slider_MouseLeftButtonUp AddHandler opacitySlider.PreviewMouseLeftButtonDown, _ AddressOf slider_MouseLeftButtonDown 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.opacitySliderAdornerPanel Is Nothing Then Me.opacitySliderAdornerPanel = New AdornerPanel() ' Add the adorner to the adorner panel. Me.opacitySliderAdornerPanel.Children.Add(opacitySlider) ' Add the panel to the Adorners collection. Adorners.Add(opacitySliderAdornerPanel) End If Return Me.opacitySliderAdornerPanel 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 PropertyChanged event. ' It updates the slider control's value if the adorned control's ' Background property changed, Sub AdornedControlModel_PropertyChanged( _ ByVal sender As Object, _ ByVal e As System.ComponentModel.PropertyChangedEventArgs) If e.PropertyName = "Background" Then opacitySlider.Value = GetCurrentOpacity() End If 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) opacitySlider.Value = GetCurrentOpacity() End Sub ' The following method handles the MouseLeftButtonDown event. ' It calls the BeginEdit method on the ModelItem which represents ' the adorned control. 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 ' the adorned control. 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 ' Background opacity by using the ModelProperty type. Sub slider_ValueChanged( _ ByVal sender As Object, _ ByVal e As RoutedPropertyChangedEventArgs(Of Double)) If (True) Then Dim newOpacityValue As Double = e.NewValue ' During setup, don't make a value local and set the opacity. If newOpacityValue = GetCurrentOpacity() Then Return End If ' Access the adorned control's Background property ' by using the ModelProperty type. Dim backgroundProperty As ModelProperty = _ adornedControlModel.Properties(Control.BackgroundProperty) If Not backgroundProperty.IsSet Then ' If the value isn't local, make it local ' before setting a sub-property value. backgroundProperty.SetValue(backgroundProperty.ComputedValue) End If ' Set the Opacity property on the Background Brush. backgroundProperty.Value.Properties(Brush.OpacityProperty).SetValue(newOpacityValue) End If End Sub ' This utility method gets the adorned control's ' Background brush by using the ModelItem. Function GetCurrentOpacity() As Double If (True) Then Dim backgroundBrushComputedValue As Brush = _ CType(adornedControlModel.Properties(Control.BackgroundProperty).ComputedValue, _ Brush) Return backgroundBrushComputedValue.Opacity End If End Function End Class End Namespaceusing 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 CustomControlLibrary.VisualStudio.Design { // The following class implements an adorner provider for the // adorned control. The adorner is a slider control, which // changes the Background opacity of the adorned control. class OpacitySliderAdornerProvider : PrimarySelectionAdornerProvider { private ModelItem adornedControlModel; private ModelEditingScope batchedChange; private Slider opacitySlider; private AdornerPanel opacitySliderAdornerPanel; public OpacitySliderAdornerProvider() { opacitySlider = 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 adorned control. 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. opacitySlider.Minimum = 0; opacitySlider.Maximum = 1; // Setup the adorner panel. // All adorners are placed in an AdornerPanel // for sizing and layout support. AdornerPanel myPanel = this.Panel; AdornerPanel.SetHorizontalStretch(opacitySlider, AdornerStretch.Stretch); AdornerPanel.SetVerticalStretch(opacitySlider, AdornerStretch.None); AdornerPlacementCollection placement = new AdornerPlacementCollection(); // The adorner's width is relative to the content. // The slider extends the full width of the control it adorns. placement.SizeRelativeToContentWidth(1.0, 0); // The adorner's height is the same as the slider's. placement.SizeRelativeToAdornerDesiredHeight(1.0, 0); // Position the adorner above the control it adorns. placement.PositionRelativeToAdornerHeight(-1.0, 0); // Position the adorner up 5 pixels. This demonstrates // that these placement calls are additive. These two calls // are equivalent to the following single call: // PositionRelativeToAdornerHeight(-1.0, -5). placement.PositionRelativeToAdornerHeight(0, -5); AdornerPanel.SetPlacements(opacitySlider, placement); // Initialize the slider when it is loaded. opacitySlider.Loaded += new RoutedEventHandler(slider_Loaded); // Handle the value changes of the slider control. opacitySlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>( slider_ValueChanged); opacitySlider.PreviewMouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler( slider_MouseLeftButtonUp); opacitySlider.PreviewMouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler( slider_MouseLeftButtonDown); 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.opacitySliderAdornerPanel == null) { opacitySliderAdornerPanel = new AdornerPanel(); opacitySliderAdornerPanel.Children.Add(opacitySlider); // Add the panel to the Adorners collection. Adorners.Add(opacitySliderAdornerPanel); } return this.opacitySliderAdornerPanel; } } // 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 PropertyChanged event. // It updates the slider control's value if the adorned control's // Background property changed, void AdornedControlModel_PropertyChanged( object sender, System.ComponentModel.PropertyChangedEventArgs e) { if (e.PropertyName == "Background") { opacitySlider.Value = GetCurrentOpacity(); } } // The following method handles the Loaded event. // It assigns the slider control's initial value. void slider_Loaded(object sender, RoutedEventArgs e) { opacitySlider.Value = GetCurrentOpacity(); } // The following method handles the MouseLeftButtonDown event. // It calls the BeginEdit method on the ModelItem which represents // the adorned control. 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 // the adorned control. 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 // Background opacity by using the ModelProperty type. void slider_ValueChanged( object sender, RoutedPropertyChangedEventArgs<double> e) { double newOpacityValue = e.NewValue; // During setup, don't make a value local and set the opacity. if (newOpacityValue == GetCurrentOpacity()) { return; } // Access the adorned control's Background property // by using the ModelProperty type. ModelProperty backgroundProperty = adornedControlModel.Properties[Control.BackgroundProperty]; if (!backgroundProperty.IsSet) { // If the value isn't local, make it local // before setting a sub-property value. backgroundProperty.SetValue(backgroundProperty.ComputedValue); } // Set the Opacity property on the Background Brush. backgroundProperty.Value.Properties[Brush.OpacityProperty].SetValue(newOpacityValue); } // This utility method gets the adorned control's // Background brush by using the ModelItem. private double GetCurrentOpacity() { Brush backgroundBrushComputedValue = (Brush)adornedControlModel.Properties[Control.BackgroundProperty].ComputedValue; return backgroundBrushComputedValue.Opacity; } } }Générez la solution.
Test de l'implémentation au moment du design
Vous pouvez utiliser le contrôle ButtonWithDesignTime 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 dans Visual Basic ou Visual C# nommé DemoApplication.
Window1.xaml s'ouvre dans le Concepteur WPF.
Ajoutez une référence au projet CustomControlLibrary.
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 CustomControlLibrary ainsi que le contrôle personnalisé ButtonWithDesignTime. 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:CustomControlLibrary;assembly=CustomControlLibrary" Title="Window1" Height="300" Width="300"> <Grid> <cc:ButtonWithDesignTime Margin="30,30,30,30" Background="#FFD4D0C8"></cc:ButtonWithDesignTime> </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:CustomControlLibrary;assembly=CustomControlLibrary" Title="Window1" Height="300" Width="300"> <Grid> <cc:ButtonWithDesignTime Margin="30,30,30,30" Background="#FFD4D0C8"></cc:ButtonWithDesignTime> </Grid> </Window>En mode Design, cliquez sur le contrôle ButtonWithDesignTime pour le sélectionner.
Un contrôle Slider apparaît au-dessus du contrôle ButtonWithDesignTime.
Utilisez l'ornement du contrôle Slider pour modifier l'opacité du bouton.
En mode XAML, la propriété Opacity a la valeur spécifiée par le contrôle Slider.
Exécutez le projet DemoApplication.
Au moment de l'exécution, l'opacité du bouton est celle définie avec l'ornement.
Étapes suivantes
Vous pouvez ajouter plus des fonctionnalités personnalisées au moment du design à vos contrôles personnalisés.
Ajoutez MenuAction à votre contrôle au moment du design personnalisé. Pour plus d'informations, consultez Procédure pas à pas : création d'un MenuAction.
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.
Voir aussi
Tâches
Comment : créer un ornement au moment du design
Référence
PrimarySelectionAdornerProvider
Remarque :