逐步解說：建立 WPF 工具箱控制項

發行項
05/16/2015

WPF 工具箱控制項範本中包含的Visual Studio 2010 SDK讓你能夠生產 Windows Presentation Foundation (WPF) 控制項，會自動加入至工具箱安裝擴充功能時。這個逐步解說會示範如何使用範本來建立 [計數器] 控制項，您可以發佈給其他使用者。

必要條件

若要完成這個逐步解說中，您必須安裝Visual Studio 2010 SDK。

注意事項
如需有關 Visual Studio 的 SDK 的詳細資訊，請參閱擴充 Visual Studio 的概觀。若要了解如何下載 Visual Studio 的 SDK，請參閱Visual Studio 擴充性開發人員中心 MSDN 網站上。

Visual Studio 執行尋找試 WPF 工具箱控制項範本

工具箱的 WPF 控制項範本可用於新的專案 對話方塊後，在 安裝的範本，在這些位置中：

Visual Basic， 擴充性。專案的語言是 Visual Basic。
視覺 C#， 擴充性。專案的語言是 C#。

建立 WPF 工具箱控制項專案

工具箱的 WPF 控制項範本會建立一個未定義的使用者控制項，並提供功能來新增控制項所需的所有工具箱。

若要建立專案

在 [檔案] 功能表上，按一下 [新增]，然後按一下 [專案]。
在新的專案 對話方塊後，在 安裝的範本，按一下您偏好的程式設計語言的節點，然後選取 擴充性。在 [專案類型清單中，選取 [ WPF 工具箱控制項。
在名稱方塊中，輸入您想要用於專案的名稱。 (此逐步解說中使用的名稱，計數器。) 按一下 [確定]。

這會建立包含使用者控制項，放置在控制項屬性的方案工具箱，和部署資訊清單的 VSIX。名稱方塊設定方案的名稱和命名空間的名稱，但它並不會設定控制項的名稱，在所顯示的樣子 工具箱。您將設定，稍後在逐步解說。

建置使用者介面控制項

計數器控制項需要三個的子控制項：兩個Label控制項來顯示的文字與目前的計數，以及Button控制項重設為 0 的計數。因為裝載應用程式就遞增計數器以程式設計的方式，是必要的其他的子控制項。

若要建立使用者介面

在方案總管] 中，連按兩下以開啟設計工具] 中的 ToolboxControl.cs。

設計工具會顯示Grid控制項，其中包含Button控制項。
選取 [ Grid控制，然後按一下 [顯示在上方和左邊的旁邊，將它分為兩個資料列和兩個資料行方格的藍色長條。
從工具箱，拖曳Label到每個方格的第一列中的儲存格的控制項。

此時，您可以設定控制項的配置排列在格線上的項目。相反地，您可以編輯可延伸應用程式標記語言 (XAML) 直接使控制項將會動態調整大小以配合文字。
在 XAML 的高度設定] 窗格中， RowDefinition項目和寬度的ColumnDefinition項目 "auto"。
編輯按鈕和兩個標籤到類似下列範例的標記。
```
<Button Content="Reset" Name="button1" Click="button1_Click" Grid.Row="1" Grid.ColumnSpan="2" />
<Label Content="{Binding Text}" Grid.Row="0" Grid.Column="0" Name="label1" />
<Label Content="{Binding Count}" Grid.Row="0" Grid.Column="1" Name="label2" />
```
Grid.Row和Grid.Column屬性在方格上設定之項目的位置。 Grid.ColumnSpan在按鈕上的屬性可讓獨立的按鈕的寬度會調整大小的第一欄。

Content屬性的標籤使用{Binding}語法來繫結至稍後在逐步解說中，您將定義的屬性。

程式碼撰寫使用者控制項

計數器控制項都會公開 (expose) 的方法，以逐步遞增計數器，而引發的事件，此計數器會遞增，每當重設按鈕和三個屬性來儲存目前的計數、顯示文字，以及是否要顯示或隱藏重設 ] 按鈕。 ProvideTolboxControl屬性會決定在何處工具箱計數器，會出現控制項。

您可以撰寫此控制項，以相同的方式會撰寫 Windows Form 控制項，也就是藉由使用事件處理常式和公用方法，若要設定標籤的內容。不過，在 WPF 中您可以設定控制項的資料內容，使您可以將 XAML 元素屬性繫結直接與程式碼中的屬性。這種模式也會提供核心功能，從控制項的使用者介面 (UI) 分隔的抽象的層。

這個逐步解說會示範如何建立資料模型類別，，然後再將資料的內容控制項繫結至資料模型。

若要建立資料模型

按兩下按鈕以開啟 [程式碼] 視窗。
在檔案頂端，加入using指示詞的System.ComponentModel命名空間。
之後產生的類別，建立公用類別來定義資料內容。
```
public class MyDataModel : INotifyPropertyChanged
```
這個類別會實作INotifyPropertyChanged介面，可讓 XAML 項目，將繫結至自訂屬性。
以滑鼠右鍵按一下INotifyPropertyChanged介面宣告中，按一下 [ 實作介面，然後按一下 [ 實作介面一次。

宣告 Visual Studio PropertyChanged事件。

在事件宣告之後，建立下列的私用方法來引發事件。

public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this, 
            new PropertyChangedEventArgs(propertyName));
    }
}

建立下列的私用欄位和公用屬性，以保留控制項中的兩個標籤的值。

private string text = "Count:";
public string Text
{
    get { return this.text; }
    set
    {
        this.text = value;
        RaisePropertyChanged("Text");
    }
}

private int count = 0;
public int Count
{
    get { return this.count; }
    set
    {
        this.count = value;
        RaisePropertyChanged("Count");
    }
}

引發PropertyChanged事件會造成更新繫結的控制項內容的 XAML 繫結。設定屬性為public這類病毒到設計工具，但不是為其他程式除非它們所繫結到此資料內容。

既然您已建立資料模型，您可以實作控制項的程式碼後置功能。

若要實作的控制項

實作控制項的部分類別定義，請以滑鼠右鍵按一下類別名稱，請按一下重構，按一下 [ 重新命名，然後將變更為類別名稱計數器。這是會顯示在 [名稱工具箱安裝擴充功能時。
正上方的類別定義中，在ProvideToolboxControl屬性宣告，將從第一個參數值變更「計數器」到 "一般"。這會設定將會裝載該控制項中的項目群組的名稱工具箱。

下列範例所示ProvideToolboxControl屬性並調整過的類別定義。
```
[ProvideToolboxControl("General", true)]
public partial class Counter : UserControl
```

建立私用欄位來容納控制項的資料內容，並且建構函式，在指定的資料內容MyDataModel類別，如下列範例所示。

private MyDataModel dm;
public Counter()
{
    this.DataContext = new MyDataModel();
    dm = (MyDataModel)DataContext;
    InitializeComponent();            
}

建立下列的公用屬性，以反映Text和Count中的資料內容的屬性。
```
public string Text
{
    get { return dm.Text; }
    set { dm.Text = value; }
}

public int Count { get { return dm.Count; } }
```
這些屬性中的資料內容的內容可讓任何應用程式，其中包含控制項。

建立下列的公用方法，以遞增的計數器和事件以通知主應用程式。

public event EventHandler Incremented;
public void Increment()
{
    dm.Count ++;
    if (Incremented != null)
    {
        Incremented(this, EventArgs.Empty);
    }
}

實作 click 處理常式的重設按鈕，如下所示。

private void button1_Click(object sender, RoutedEventArgs e)
{
    dm.Count = 0;
}

將下列的公用屬性，以顯示或隱藏重設 ] 按鈕。

public Visibility ShowReset
{
    get { return button1.Visibility; }
    set { button1.Visibility = value; }
}

測試控制項

若要測試工具箱控制第一次在開發環境中進行測試，然後在裝載的應用程式中進行測試。

若要測試控制項

按 F5。

這會在建置專案，並開啟已安裝該控制項的 Visual Studio 的第二個執行個體。
在 Visual Studio 的新執行個體，建立 WPF 應用程式專案。
在方案總管] 中，連按兩下以開啟設計工具] 中的 MainWindow.xaml。
從一般一節的 工具箱，拖曳 計數器控制項加入表單，然後再選取。

Text和ShowReset屬性應該會顯示在屬性 ] 視窗中的，連同其他屬性繼承自UserControl。 Count應該不會顯示屬性，因為它是唯讀的。
變更 Text 屬性值。

在設計工具中顯示的標籤文字應該變更。
設定ShowReset屬性，以Hidden，再將它返回的設定Visible。

重設在控制項上的按鈕應該會消失，且會再出現。
拖曳Button控制項加入表單，請將設定其Content屬性設定為測試，然後連按兩下按鈕以開啟其 click 處理常式程式碼] 檢視中。

實作 click 處理常式，呼叫Increment控制項的方法。

private void button1_Click(object sender, RoutedEventArgs e)
{
    counter1.Increment();
}

在建構函式函式呼叫之後， InitializeComponent，型別 counter1。實作 + =，然後按下 TAB 鍵兩次以產生的處理常式Counter.Incremented事件。

實作新的處理常式，如下列範例所示。

public MainWindow()
{
    InitializeComponent();
    counter1.Incremented += new EventHandler(counter1_Incremented);
}

void counter1_Incremented(object sender, EventArgs e)
{
    button1.Opacity -= .2;
}

按 F5。

WPF 應用程式應該會開啟。
按一下 [測試]。

此計數器應該增加，應該稍微淡出] 按鈕。
按一下 [ 測試四次。

此計數器應該增加，按鈕應該繼續淡直到消失為止。如果您繼續按一下 [位置] 按鈕，而，應繼續計數器遞增。
按一下 [重設]。

此計數器應重設為 0。

後續步驟

當您建置工具箱 控制項，Visual Studio 會建立一個名為檔案 ProjectName.vsix 專案的 [\bin\debug\] 資料夾中。您可以將控制項部署上載到網路或網站的.vsix 檔案。當使用者開啟.vsix 檔案時，控制項已安裝並加入至 Visual Studio 工具箱。或者，如果您上載.vsix Visual Studio 庫 Web 站台，讓使用者可以藉由在瀏覽找到它 擴充管理員。

請參閱

共用方式為

逐步解說： 建立 WPF 工具箱控制項