共用方式為

逐步解說：實作內嵌值編輯器

  • 發行項

WPF Designer for Visual Studio 的擴充性模型可讓您在設計階段為 [屬性] 視窗中的屬性建立自訂值編輯器。 編輯器可以是內嵌編輯器，以便直接在 [屬性] 視窗中編輯值，也可以是擴充編輯器，能讓您提供額外的 UI，在 [屬性] 視窗以外編輯屬性。 為示範如何建立內嵌編輯器，本逐步解說提供如何為控制項的 Background 屬性建立內嵌值編輯器的逐步程序。

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

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

  • 建立內嵌編輯器，這可用來在 [屬性] 視窗中編輯屬性值。

  • 建立繼承自 PropertyValueEditor 的類別，用來將內嵌編輯器連接至要為其提供自訂編輯的類別。

  • 建立實作 IProvideAttributeTable 介面的類別，以註冊新的內嵌編輯器。

  • 在設計階段測試內嵌值編輯器。

必要條件

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

  • Visual Studio 2012 RC.

建立自訂控制項

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

建立自訂控制項

  1. 在 Visual C# 中建立名為 CustomControlLibrary 的新 WPF 自訂控制項程式庫。

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

  2. 在 CustomControl1 的 [程式碼編輯器] 中，將 CustomControlLibrary 命名空間 (Namespace) 中的程式碼替換成下列程式碼：

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CustomControlLibrary
{
    public class CustomControl1 : Button
    {
        public CustomControl1()
        {
            if (System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
            {
                Content = "In design mode";
            }
        }
    }
}

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

  4. 建置方案。

建立內嵌編輯器的樣板

內嵌編輯器可以使用 XAML 資料範本建立。 這會是簡單的下拉式清單 (Drop-Down List)，其中列出 Background 屬性的色彩選項。

若要建立內嵌編輯器的樣板

  1. 將 Visual C# 中名為 CustomControlLibrary.Design 的新 WPF 自訂控制項程式庫專案加入到方案中。

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

  2. 在 [方案總管] 中，從 CustomControlLibrary.Design 專案刪除 CustomControl1 檔案。

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

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  4. 加入 CustomControlLibrary 專案的參考。

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

  6. 將名為 EditorResources 的新類別加入到 CustomControlLibrary.Design 專案。

  7. 在 EditorResources 的 [程式碼編輯器] 中，以下列程式碼取代自動產生的程式碼。

    namespace CustomControlLibrary.Design
{
    using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Windows;
    public partial class EditorResources : ResourceDictionary
    {
        public EditorResources()
            : base()
        {
            InitializeComponent();
        }
    }
}

  8. 按一下 [專案] 功能表上的 [加入資源字典]。

  9. 將檔案命名為 EditorResources.xaml，然後按一下 [加入]。

  10. 在 EditorResources.xaml 的 [XAML] 檢視中，將自動產生的 XAML 替換成下列 XAML。

        <ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:PropertyEditing="clr-namespace:Microsoft.Windows.Design.PropertyEditing;assembly=Microsoft.Windows.Design.Interaction"
    xmlns:Local="clr-namespace:CustomControlLibrary.Design"
    xmlns:Media="clr-namespace:System.Windows.Media;assembly=PresentationCore"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    x:Class="CustomControlLibrary.Design.EditorResources">
    <DataTemplate x:Key="BrushInlineEditorTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <ComboBox Grid.Column="0" Text="{Binding StringValue}">
                <ComboBoxItem>Red</ComboBoxItem>
                <ComboBoxItem>Blue</ComboBoxItem>
                <ComboBoxItem>Green</ComboBoxItem>
            </ComboBox>
        </Grid>
    </DataTemplate>
</ResourceDictionary>

  11. 建置方案。

封裝樣板和註冊內嵌編輯器

現在您已為內嵌編輯器建立了樣板，接下來就必須建立繼承自 PropertyValueEditor 的類別，以便使用樣板做為自訂編輯器，而且必須註冊新的內嵌編輯器。

若要封裝和註冊內嵌編輯器

  1. 將名為 BrushInlineEditor 的新類別加入到 CustomControlLibrary.Design 專案。

  2. 在 BrushInlineEditor 的 [程式碼編輯器] 中，以下列程式碼取代自動產生的程式碼。

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using Microsoft.Windows.Design.PropertyEditing;

namespace CustomControlLibrary.Design
{
    public class BrushInlineEditor : PropertyValueEditor
    {
        private EditorResources res = new EditorResources();

        public BrushInlineEditor()
        {
            this.InlineEditorTemplate = res["BrushInlineEditorTemplate"] as DataTemplate;
        }
    }
}

  3. 將名為 Metadata 的新類別加入到 CustomControlLibrary.Design 專案。

  4. 在 Metadata 的 [程式碼編輯器] 中，以下列程式碼取代自動產生的程式碼。

    using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.Windows.Design.Metadata;
using System.ComponentModel;
using Microsoft.Windows.Design.PropertyEditing;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows;
using CustomControlLibrary;

// The ProvideMetadata assembly-level attribute indicates to designers
// that this assembly contains a class that provides an attribute table. 
[assembly: ProvideMetadata(typeof(CustomControlLibrary.Design.Metadata))]

namespace CustomControlLibrary.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();
                builder.AddCustomAttributes
                    (typeof(CustomControl1),
                    "Background",
                    PropertyValueEditor.CreateEditorAttribute(
                        typeof(BrushInlineEditor)));

                return builder.CreateTable();
            }
        }
    }
}

  5. 建置方案。

測試內嵌值編輯器

內嵌值編輯器現在已經完成並可以使用。 接著就要進行最後測試。 為測試內嵌編輯器，您會將 WPF 應用程式加入到專案、將自訂控制項加入到 WPF 應用程式，然後檢視內嵌編輯器的實際運作。

若要測試內嵌值編輯器

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

    MainWindow.xaml 隨即在 WPF Designer中開啟。

  2. 加入 CustomControlLibrary 專案的參考。

  3. 在 MainWindow.xaml 的 XAML 檢視中，將自動產生的 XAML 替換為下列 XAML。 這個 XAML 會加入 CustomControlLibrary 命名空間的參考，並加入 CustomControl1 自訂控制項。 按鈕會顯示在 [設計] 檢視中，背景為紅色，表示控制項處於設計模式。 如果按鈕不顯示，您可能需要按一下設計工具頂端的資訊列以重新載入檢視。

        <Window x:Class="DemoApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" xmlns:my="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary">
    <Grid>
        <my:CustomControl1 Margin="30,30,30,30" Name="customControl11"></my:CustomControl1>
    </Grid>
</Window>

  4. 在 [設計] 檢視中選取控制項。

  5. 在 [屬性] 視窗中，按一下 [Background] 屬性旁的下拉按鈕。 這時會顯示代表新內嵌編輯器的小型色彩選項清單，而非預設色彩清單。 色彩選項有紅色、藍色和綠色。

  6. 從下拉式清單選取色彩。 自訂控制項的背景就會變更為該色彩。

後續步驟

如需更複雜的屬性編輯器，請參閱逐步解說：實作色彩編輯器，其中示範如何建立擴充編輯器。

請參閱

工作

逐步解說：實作色彩編輯器

HOW TO：建立值編輯器

其他資源

建立自訂編輯器

WPF 設計工具擴充性