演练：在控件内部实现一个轨道

项目
08/18/2008

更新：2007 年 11 月

本演练演示如何为 Windows Presentation Foundation (WPF) 自定义控件创建轨道装饰器。轨道装饰器在控件的一侧添加一个标记或标尺，该控件应当在某个轴向上是不可缩放的。该装饰器是一个置于控件内的滑块。可以使用该装饰器为自定义按钮控件设置 RenderTransform 属性。设置 RenderTransform 属性会使控件发生扭曲。有关完整的代码清单，请参见如何：在控件内实现一个轨道。

在本演练中，您将执行下列任务：

创建一个 WPF 自定义控件库项目。
为设计时元数据创建一个单独的程序集。
实现装饰器提供程序。
在设计时测试控件。

完成本演练后，您将知道如何为自定义控件创建装饰器。

说明：
显示的对话框和菜单命令可能会与“帮助”中的描述不同，具体取决于您的当前设置或版本。若要更改设置，请在“工具”菜单上选择“导入和导出设置”。有关更多信息，请参见 Visual Studio 设置。

先决条件

您需要以下组件来完成本演练：

Visual Studio 2008。

创建自定义控件

第一步是为自定义控件创建项目。该控件是一个带有少量设计时代码的简单按钮，该按钮使用 GetIsInDesignMode 方法来实现设计时行为。

创建自定义控件

使用 Visual Basic 或 Visual C# 新建一个名为 SkewButtonLibrary 的 WPF 自定义控件库项目。

CustomControl1 的代码在“代码编辑器”中打开。
在“解决方案资源管理器”中，将代码文件的名称改为 SkewButton.cs 或 SkewButton.vb。如果出现询问是否要对此项目中的所有引用执行重命名操作的消息框，请单击“是”。
在“解决方案资源管理器”中展开 Themes 文件夹。
双击 Generic.xaml。

Generic.xaml 在 WPF 设计器中打开。
在 XAML 视图中，将出现的所有“CustomControl1”都替换为“SkewButton”。
在代码编辑器中打开 SkewButton.cs 或 SkewButton.vb。

用下面的代码替换自动生成的代码。SkewButton 自定义控件继承自 Button，当按钮出现在设计器中时，该控件将显示文本“已激活设计模式”。GetIsInDesignMode 检查和下面的设计时代码均为可选，仅用作演示。

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";
            }
        }
    }
}

将项目的输出路径设置为“bin\”。
生成解决方案。

创建设计时元数据程序集

设计时代码在特定元数据程序集中部署。在本演练中，自定义装饰器部署在一个名为 SkewButtonLibrary.VisualStudio.Design 的程序集中。有关更多信息，请参见元数据存储区。

创建设计时元数据程序集

使用 Visual Basic 或 Visual C# 为解决方案添加一个名为 SkewButtonLibrary.VisualStudio.Design 的新类库项目。
将项目的输出路径设置为“..\SkewButtonLibrary\bin\”。这样可使控件的程序集与元数据程序集位于同一文件夹中，从而可为设计器启用元数据发现。
添加对下列 WPF 程序集的引用。
- PresentationCore
- PresentationFramework
- WindowsBase
添加对下列 WPF 设计器程序集的引用。
- Microsoft.Windows.Design
- Microsoft.Windows.Design.Extensibility
- Microsoft.Windows.Design.Interaction
添加一个对 SkewButtonLibrary 项目的引用。
在“解决方案资源管理器”中，将 Class1 代码文件的名称更改为 Metadata.cs 或 Metadata.vb。如果出现询问是否要对此项目中的所有引用执行重命名操作的消息框，请单击“是”。

用下面的代码替换自动生成的代码。此代码将创建一个将自定义设计时实现附加到 SkewButton 类的 AttributeTable。

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());
        }
    }
}

保存解决方案。

实现装饰器提供程序

装饰器提供程序是在名为 SkewButtonAdornerProvider 的类型中实现的。通过此装饰器 FeatureProvider，可以在设计时设置控件的 RenderTransform 属性。

实现装饰器提供程序

向 SkewButtonLibrary.VisualStudio.Design 项目中添加一个名为 SkewButtonAdornerProvider 的新类。

在 SkewButtonAdornerProvider 的代码编辑器中，用下面的代码替换自动生成的代码。此代码实现一个提供自定义装饰器的 PrimarySelectionAdornerProvider。

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;
        }
    }
}

生成解决方案。

测试设计时实现

可以像使用任何其他 WPF 控件一样使用 SkewButton 控件。WPF 设计器处理所有设计时对象的创建。

测试设计时实现

向解决方案中添加一个名为 DemoApplication 的新 WPF 应用程序项目。

Window1.xaml 将在 WPF 设计器中打开。
添加一个对 SkewButtonLibrary 项目的引用。

在 XAML 视图中，用以下 XAML 替换自动生成的 XAML。此 XAML 将添加对 SkewButtonLibrary 命名空间的引用并添加 SkewButton 自定义控件。该按钮出现在“设计”视图中，并显示文本“已激活设计模式”，表明该按钮处于设计模式下。如果该按钮未出现，则可能需要单击设计器顶部的信息栏以重新加载视图。

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

在“设计”视图中，单击 SkewButton 控件将其选中。

SkewButton 控件内将出现一个 Slider 控件。如果滑块控件未出现，应尝试重新生成解决方案。
更改滑块控件的值。

在您拖动滑块时，控件将发生扭曲。在 XAML 视图中，RenderTransform 属性设置为装饰器指定的值。
运行 DemoApplication 项目。

运行时，该按钮将按您用装饰器设置的角度扭曲。

后续步骤

您可以向自定义控件中添加更多设计时功能。

向控件的设计时添加自定义装饰器。有关更多信息，请参见演练：创建设计时装饰器。
创建一个用于进行就地编辑的装饰器提供程序。有关更多信息，请参见演练：实现就地编辑。
创建一个可在“属性”窗口中使用的自定义颜色编辑器。有关更多信息，请参见演练：实现颜色编辑器。

请参见

Share via

演练：在控件内部实现一个轨道

先决条件

创建自定义控件

创建自定义控件

创建设计时元数据程序集

创建设计时元数据程序集

实现装饰器提供程序

实现装饰器提供程序

测试设计时实现

测试设计时实现

后续步骤

请参见

任务

参考

其他资源

其他资源