通过

如何：在控件内实现一个轨道

  • 项目

更新：2007 年 11 月

下面的代码示例演示如何创建一个轨道装饰器，该装饰器是在设计时在选定的自定义控件内绘制的。

Visual Studio 中有关于此任务的广泛支持。有关更多信息，请参见演练：在控件内部实现一个轨道。

示例

下面的代码示例演示如何为 Windows Presentation Foundation (WPF) 自定义控件创建设计时装饰器。该装饰器是一个置于控件内的滑块。可以使用该装饰器为自定义按钮控件设置 RenderTransform 属性。设置 RenderTransform 属性会使控件发生扭曲。

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

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

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

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

编译代码

在三个单独的程序集内编译上面的代码示例。

编译自定义控件

  1. 创建 SkewButton 类。

  2. 添加对下列程序集的引用。

    • PresentationCore

    • PresentationFramework

    • WindowsBase

  3. 在名为 SkewButtonLibrary 的程序集中编译 SkewButton 类。

    vbc /r:PresentationCore.dll /r:PresentationFramework.dll /r:WindowsBase.dll /t:library /out:SkewButtonLibrary.dll SkewButton.vb

    csc /r:PresentationCore.dll /r:PresentationFramework.dll /r:WindowsBase.dll /t:library /out:SkewButtonLibrary.dll SkewButton.cs

编译自定义装饰器

  1. 创建 SkewButtonAdornerProvider 和 Metadata 类。

  2. 添加对下列程序集的引用：

    • PresentationCore

    • PresentationFramework

    • WindowsBase

    • Microsoft.Windows.Design

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  3. 添加对 SkewButtonLibrary 程序集或项目的引用。

  4. 在名为 SkewButtonLibrary.VisualStudio.Design 的单独程序集中编译 SkewButtonAdornerProvider 和 Metadata 类。将编译后的程序集定向到 SkewButtonLibrary 程序集所在的文件夹。

    vbc /r:PresentationCore.dll /r:PresentationFramework.dll /r:WindowsBase.dll /r:Microsoft.Windows.Design.dll /r:Microsoft.Windows.Design.Extensibility.dll /r:Microsoft.Windows.Design.Interaction.dll /r:SkewButtonLibrary.dll /t:library /out:SkewButtonLibrary.VisualStudio.Design.dll SkewButtonAdornerProvider.vb Metadata.vb

    csc /r:PresentationCore.dll /r:PresentationFramework.dll /r:WindowsBase.dll /r:Microsoft.Windows.Design.dll /r:Microsoft.Windows.Design.Extensibility.dll /r:Microsoft.Windows.Design.Interaction.dll /r:SkewButtonLibrary.dll /t:library /out:SkewButtonLibrary.VisualStudio.Design.dll SkewButtonAdornerProvider.cs Metadata.cs

编译测试应用程序

  1. 在 Visual Studio 中创建一个新的 WPF 应用程序项目。

  2. 添加对 SkewButtonLibrary 程序集或项目的引用。

  3. 将 Window1.xaml 中的现有 XAML 替换为前面列出的 XAML。

    在设计视图中，SkewButton 控件内将出现一个 Slider 控件。

请参见

任务

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

参考

PrimarySelectionAdornerProvider

SkewTransform

其他资源

高级扩展性概念

WPF 设计器扩展性