共用方式為

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

  • 發行項

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

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

重要

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

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

注意

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

必要條件

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

  • Visual Studio 2010

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

若要建立專案

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

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

  2. 加入下列組件的參考。

    • Microsoft.Windows.Design.Extensibility

  3. 在 [方案總管] 中，將程式碼檔案的名稱變更為 CustomButton.cs 或 CustomButton.vb。

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

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

建立自訂 DesignModeValueProvider

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

注意

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

若要建立自訂 DesignModeValueProvider

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

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

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

    
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

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

    
Public Class CustomButtonDesignModeValueProvider
    Inherits DesignModeValueProvider

End Class

    
class CustomButtonDesignModeValueProvider : DesignModeValueProvider
{
}

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

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

  5. 覆寫類別中的 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);
}

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

建立自訂按鈕控制項

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

若要建立自訂按鈕控制項

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

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

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

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

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

    
Public Class CustomButton
    Inherits Button

    Shared Sub New()

    End Sub
End Class

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

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

將 DesignModeValueProvider 附加到自訂控制項

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

注意

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

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

  1. 在 [程式碼編輯器] 中，找出 CustomButton 類別的宣告。 看起來應該像這樣子：

    
Public Class CustomButton
    Inherits Button

    
public class CustomButton : Button

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

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

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

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

建立測試應用程式

若要建立測試應用程式

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

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

  2. 在 [方案總管] 中，以滑鼠右鍵按一下專案，然後按一下 [設定為啟始專案]。

  3. 按一下 [專案] 功能表上的 [加入參考]，然後使用 [專案] 索引標籤將參考加入到 CustomButton 專案。

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

測試自訂控制項

若要測試自訂控制項

  1. 在 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>

  2. 在 [設計] 檢視中選取按鈕。 如有必要，按一下設計工具頂端的資訊列，重新載入檢視。

  3. 在 [屬性] 視窗中，找出 [Background] 屬性。

  4. 輸入 Red，然後按 Enter。

    XAML 會更新成程式碼 Background="Red"，但按鈕的色彩在 [設計] 檢視中不會變更。

  5. 在 [屬性] 視窗中，找出 [Content] 屬性。

  6. 輸入 Hello World，然後按 Enter。

    XAML 會更新成內容 Hello World，但按鈕會在 [設計] 檢視中顯示文字 HELLO WORLD。

  7. 按一下 [偵錯] 功能表上的 [開始偵錯]。

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

  8. 關閉視窗。

請參閱

工作

HOW TO：在設計階段變更屬性行為

HOW TO：判斷自訂控制項是在設計階段或執行階段

概念

提供設計階段中繼資料

其他資源

設計階段和執行階段行為的比較

了解 WPF 設計工具擴充性

WPF 設計工具擴充性