逐步解說：在設計階段變更屬性行為

發行項
08/12/2011

當您使用擴充性自訂 WPF Designer for Visual Studio 時，通常會建立自訂控制項。您有時會需要控制項的屬性在設計階段與執行階段有不同的行為，但又能正常讓使用者設定屬性的值。例如，您可能希望使用者能夠為控制項將可見的屬性設為 false，但是此控制項在設計階段仍應保持可見狀態。

在這個逐步解說中，您會建立一個自訂 Button，並變更 Background 和 Content 屬性的行為。若要完成這個工作，可以建立 DesignModeValueProvider 並附加至您的自訂控制項。 DesignModeValueProvider 會擷取使用者所做的屬性變更，您可以在 TranslatePropertyValue 方法中插入自己的邏輯，而 DesignModeValueProvider 會將新的值傳遞至設計工具。

重要事項
當您使用這項技術時，設計工具中的屬性行為和 [XAML] 檢視中的屬性值並不相符。 [XAML] 檢視會顯示使用者在設計階段輸入的值。 [XAML] 檢視中的值表示屬性在執行階段時顯示的行為。

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

建立 WPF 自訂控制項程式庫專案。
建立自訂 DesignModeValueProvider。
建立自訂按鈕控制項。
將 DesignModeValueProvider 附加到自訂控制項。
建立測試應用程式。
測試自訂控制項。

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

必要條件

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

Visual Studio 2010

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

若要建立專案

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

CustomControl1 的程式碼隨即在 [程式碼編輯器] 中開啟。
加入下列組件的參考。
- Microsoft.Windows.Design.Extensibility
在 [方案總管] 中，將程式碼檔案的名稱變更為 CustomButton.cs 或 CustomButton.vb。

如果顯示訊息方塊詢問您是否要重新命名專案中的所有參考，請按一下 [是]。
在 [建置] 功能表上，按一下 [建置方案]。

建立自訂 DesignModeValueProvider

在這個程序中，您會建立一個自訂 DesignModeValueProvider。在 TranslatePropertyValue 方法中，您會變更 Button 的 Content 屬性，以在設計工具中顯示為大寫。您也可以變更 Button 的 Background 屬性，如此一來，它就會在設計工具中以預設系統色彩顯示。這些變更只會對設計工具造成影響。在執行階段，內含使用者所設定之值的 Content 和 Background 屬性都會顯示。

注意事項
在這個程序中，您會建立一個處理兩個不同屬性的 DesignModeValueProvider。您也可以建立多個 DesignModeValueProvider 物件來處理不同的屬性。

若要建立自訂 DesignModeValueProvider

將名為 CustomButtonDesignModeValueProvider.cs 或 CustomButtonDesignModeValueProvider.vb 新類別加入到 CustomButton 專案。

新類別隨即在 [程式碼編輯器] 中開啟。

將下列命名空間加入到檔案的最上方。取代任何現有的命名空間。


Imports System
Imports System.Windows                  'SystemColors
Imports System.Windows.Media            'SolidColorBrush
Imports System.Windows.Controls         'Button
Imports Microsoft.Windows.Design.Model  'DesignModeValueProvider
Imports Microsoft.Windows.Design.Metadata


using System;
using System.Windows;                   //SystemColors
using System.Windows.Media;             //SolidColorBrush
using System.Windows.Controls;          //Button
using Microsoft.Windows.Design.Model;
using Microsoft.Windows.Design.Metadata;   //DesignModeValueProvider

編輯 CustomButtonDesignModeValueProvider 類別，以從 DesignModeValueProvider 繼承。


Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class


class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

將建構函式加入至類別。在建構函式中，識別您要擷取的屬性。


Public Sub New()
    Properties.Add(GetType(Button), "Content")
    Properties.Add(GetType(Button), "Background")
End Sub


public CustomButtonDesignModeValueProvider()
{
    Properties.Add( typeof(Button), "Content");
    Properties.Add(typeof(Button), "Background");
}

覆寫類別中的 TranslatePropertyValue 方法。這是您指定屬性之新設計階段行為的地方。


Public Overrides Function TranslatePropertyValue( _
    ByVal item As ModelItem, _
    ByVal identifier As PropertyIdentifier, _
    ByVal value As Object) As Object

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Content" Then

        Return value.ToString().ToUpper()
    End If

    If identifier.DeclaringType Is GetType(Button) And _
       identifier.Name = "Background" Then

        Return New SolidColorBrush(SystemColors.ControlColor)
    End If

    Return MyBase.TranslatePropertyValue(item, identifier, value)
End Function


public override object TranslatePropertyValue(ModelItem item, PropertyIdentifier identifier, object value)
{
    if (identifier.DeclaringType == typeof( Button ) &&
        identifier.Name == "Content" )
    {
        return ((string)value).ToUpper();
    }

    if (identifier.DeclaringType == typeof(Button) &&
        identifier.Name == "Background")
    {
        return new SolidColorBrush(SystemColors.ControlColor);
    }

    return base.TranslatePropertyValue(item, identifier, value);
}

在 [建置] 功能表上，按一下 [建置方案]。

建立自訂按鈕控制項

在這個程序中，您會建立自訂控制項。您會建立繼承自 Button 的簡單自訂控制項，但其中未包含其他自訂功能。

若要建立自訂按鈕控制項

在 [程式碼編輯器] 中開啟 CustomButton 類別。

將下列命名空間加入到檔案的最上方。取代任何現有的命名空間。


Imports System.Windows.Controls             'Button
Imports Microsoft.Windows.Design.Features   'Feature


using System.Windows.Controls;              //Button
using Microsoft.Windows.Design.Features;    //Feature

以下列內容取代現有的類別。


Public Class CustomButton
    Inherits Button

    Shared Sub New()

    End Sub
End Class


public class CustomButton : Button
{
    static CustomButton()
    {
    }
}

在 [建置] 功能表上，按一下 [建置方案]。

將 DesignModeValueProvider 附加到自訂控制項

在這個程序中，您會使用 FeatureAttribute 屬性，將 DesignModeValueProvider 附加到自訂控制項。

注意事項
您也可以透過提供自訂設計階段中繼資料的方式，將 DesignModeValueProvider 附加到自訂控制項。如需詳細資訊，請參閱提供設計階段中繼資料。

若要將 DesignModeValueProvider 附加到自訂控制項

在 [程式碼編輯器] 中，找出 CustomButton 類別的宣告。看起來應該像這樣子：
```
Public Class CustomButton
    Inherits Button
```
```
public class CustomButton : Button
```

將 Feature 屬性 (Attribute) 加入到類別宣告，然後指定 DesignModeValueProvider。

<Feature(GetType(CustomButtonDesignModeValueProvider))> _
Public Class CustomButton
    Inherits Button

[Feature(typeof(CustomButtonDesignModeValueProvider))]
public class CustomButton : Button

在 [建置] 功能表上，按一下 [建置方案]。

建立測試應用程式

若要建立測試應用程式

將名為 CustomButtonTestApplication 的新 WPF 應用程式專案加入到方案。

MainWindow.xaml 隨即在 WPF 設計工具中開啟。
在 [方案總管] 中，以滑鼠右鍵按一下專案，然後按一下 [設定為啟始專案]。
按一下 [專案] 功能表上的 [加入參考]，然後使用 [專案] 索引標籤將參考加入到 CustomButton 專案。
在 [建置] 功能表上，按一下 [建置方案]。

測試自訂控制項

若要測試自訂控制項

在 MainWindow.xaml 的 [XAML] 檢視中，以下列內容取代現有的 XAML：

<Window x:Class="CustomButtonTestApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cb="clr-namespace:CustomButton;assembly=CustomButton"
    Title="MainWindow" Height="300" Width="300">
    <Grid>
        <cb:CustomButton Height="75" Width="100">Button1</cb:CustomButton>
    </Grid>
</Window>

在 [設計] 檢視中選取按鈕。如有必要，按一下設計工具頂端的資訊列，重新載入檢視。
在 [屬性] 視窗中，找出 [Background] 屬性。
輸入 Red，然後按 Enter。

XAML 會更新成程式碼 Background="Red"，但按鈕的色彩在 [設計] 檢視中不會變更。
在 [屬性] 視窗中，找出 [Content] 屬性。
輸入 Hello World，然後按 Enter。

XAML 會更新成內容 Hello World，但按鈕會在 [設計] 檢視中顯示文字 HELLO WORLD。
按一下 [偵錯] 功能表上的 [開始偵錯]。

應用程式會啟動且視窗會出現。按鈕在執行階段會變成紅色並內含文字 Hello World。
關閉視窗。