共用方式為

逐步解說：在控制項中實作滑軌

  • 發行項

本逐步解說將示範如何為 Windows Presentation Foundation (WPF) 自訂控制項建立滑軌裝飾項。 滑軌裝飾項會在控制項的一側加上刻度或尺規，這一側不會沿著單一座標軸縮放。 裝飾項是一個滑軌，會放置在控制項內。 您可以使用這個裝飾項，設定自訂按鈕控制項上的 RenderTransform 屬性。 設定 RenderTransform 屬性會使控制項傾斜。 如需完整的程式碼清單，請參閱 WPF 設計工具擴充性範例網站上的＜傾斜裝飾項＞範例 (英文)。 .

在這個逐步解說中，您會執行下列工作：

  • 建立 WPF 自訂控制項程式庫專案。

  • 為設計階段中繼資料建立個別組件。

  • 實作裝飾項提供者。

  • 在設計階段測試控制項。

完成時，您就知道要如何建立自訂控制項的裝飾項。

注意事項注意事項

根據您目前使用的設定或版本，您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。 若要變更設定，請從 [工具] 功能表中選取 [匯入和匯出設定]。 如需詳細資訊，請參閱 使用設定。

必要條件

您需要下列元件才能完成此逐步解說：

  • Visual Studio 2010。

建立自訂控制項

第一個步驟是為自訂控制項建立專案。 這個控制項是一個具有少量設計階段程式碼的簡易按鈕，這個程式碼使用 GetIsInDesignMode 方法來實作設計階段行為。

建立自訂控制項

  1. 在 Visual Basic 或 Visual C# 中建立名為 SkewButtonLibrary 的新 WPF 自訂控制項程式庫專案。

    CustomControl1 的程式碼隨即在 [程式碼編輯器] 中開啟。

  2. 在 [方案總管] 中，將程式碼檔案的名稱變更為 SkewButton.cs 或 SkewButton.vb。 如果顯示訊息方塊詢問您是否要重新命名專案中的所有參考，請按一下 [是]。

  3. 在 [程式碼編輯器] 中開啟 SkewButton.cs 或 SkewButton.vb。

  4. 以下列程式碼取代自動產生的程式碼。 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";
            }
        }
    }
}

  5. 將專案的輸出路徑設定為 "bin\"。

  6. 建置方案。

建立設計階段中繼資料組件

設計階段程式碼部署在特殊中繼資料組件中。 在這個逐步解說中，自訂裝飾項會部署在名為 SkewButtonLibrary.VisualStudio.Design 的組件中。 如需詳細資訊，請參閱提供設計階段中繼資料。

若要建立設計階段中繼資料組件

  1. 在 Visual Basic 或 Visual C# 中，將名為 SkewButtonLibrary.VisualStudio.Design 的新類別庫 (Class Library) 專案加入至方案。

  2. 將專案的輸出路徑設定為 ".. \SkewButtonLibrary\bin\"。 這麼做會將控制項的組件和中繼資料組件保留在同一個資料夾中，讓設計工具可進行中繼資料探索。

  3. 加入下列 WPF 組件的參考。

    • PresentationCore

    • PresentationFramework

    • System.Xaml

    • WindowsBase

  4. 加入下列 WPF 設計工具組件的參考。

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  5. 加入 SkewButtonLibrary 專案的參考。

  6. 在 [方案總管] 中，將 Class1 程式碼檔案的名稱變更為 Metadata.cs 或 Metadata.vb。 如果顯示訊息方塊詢問您是否要重新命名專案中的所有參考，請按一下 [是]。

  7. 以下列程式碼取代自動產生的程式碼。 這個程式碼會建立 AttributeTable，會將自訂設計階段實作附加至 SkewButton 類別。

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

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

Imports SkewButtonLibrary

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

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

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

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

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

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

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

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

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

                return builder.CreateTable();
            }
        }
    }
}

  8. 儲存方案。

實作裝飾項提供者。

裝飾項提供者實作在名為 SkewButtonAdornerProvider 的型別中。 這個裝飾項 FeatureProvider 可讓您在設計階段，設定控制項的 RenderTransform 屬性。

若要實作裝飾項提供者

  1. 將名為 SkewButtonAdornerProvider 的新類別加入至 SkewButtonLibrary.VisualStudio.Design 專案。

  2. 在 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)
        ' Save the ModelItem and hook into when it changes.
        ' This enables updating the slider position when 
        ' a new background value is set.
        adornedControlModel = item
        AddHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged

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

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

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

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

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

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

        AddHandler skewSlider.PreviewMouseLeftButtonUp, AddressOf slider_MouseLeftButtonUp

        AddHandler skewSlider.PreviewMouseLeftButtonDown, AddressOf slider_MouseLeftButtonDown

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

    End Sub

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

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

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

            Return Me.skewSliderAdornerPanel
        End Get
    End Property

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

        RemoveHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged

        MyBase.Deactivate()

    End Sub


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

    End Sub


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

    End Sub


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

    End Sub


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

    End Sub


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

        Dim newSkewValue As Double = e.NewValue

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

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

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

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

    End Sub

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

End Class

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                    skewButtonAdornerPanel.Children.Add(skewSlider);

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

                return this.skewButtonAdornerPanel;
            }
        }

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

            base.Deactivate();
        }

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

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

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

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

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

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

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

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

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

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

            return skewXform.AngleX;
        }
    }
}

  3. 建置方案。

測試設計階段實作

您可以使用 SkewButton 控制項，就像使用任何其他 WPF 控制項一樣。 WPF 設計工具會負責建立所有的設計階段物件。

若要測試設計階段實作

  1. 將名為 DemoApplication 的新 WPF 應用程式專案加入至方案。

    MainWindow.xaml 隨即在 WPF 設計工具中開啟。

  2. 加入 SkewButtonLibrary 專案的參考。

  3. 在 [XAML] 檢視中，以下列 XAML 取代自動產生的 XAML。 這個 XAML 會加入 SkewButtonLibrary 命名空間的參考，並加入 SkewButton 自訂控制項。 按鈕會顯示在 [設計] 檢視中，並顯示文字「設計模式作用中」，表示正在設計模式下。 如果按鈕不顯示，您可能需要按一下設計工具頂端的資訊列以重新載入檢視。

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

  4. 在 [設計] 檢視中，按一下 SkewButton 控制項以選取該項目。

    Slider 控制項隨即出現在 SkewButton 控制項之內。 如果滑桿控制項沒有出現，請嘗試重建方案。

  5. 變更滑桿控制項的值。

    控制項會隨著您拖曳滑桿而傾斜。 在 [XAML] 檢視中，RenderTransform 屬性會設定為裝飾項所指定的值。

  6. 執行 DemoApplication 專案。

    在執行階段，按鈕會根據您使用裝飾項設定的角度傾斜。

後續步驟

您可以將多個自訂設計階段功能，加入至自訂控制項。

請參閱

參考

PrimarySelectionAdornerProvider

SkewTransform

其他資源

WPF 設計工具擴充性範例

進階擴充性概念

WPF 設計工具擴充性