在專案中建立控制項的面板

發行項
10/11/2017

您可以使用靜態資源來定義套用到控制項的範本，以自訂控制項的外觀。例如，您可以建立使用影像而非矩形來建構按鈕外觀的按鈕範本。

若想在不同控制項範本或使用者控制項之間建立共同的外觀，請將個別屬性轉換成靜態資源，然後將其套用至範本和使用者控制項。例如，您可以將按鈕範本的框線色彩轉換成資源，然後將該色彩資源套用到核取方塊範本或自訂使用者控制項的框線屬性。

若要在其他專案中重複使用範本和資源，您可以將資源移到資源字典檔案中，然後將該檔案新增到其他專案。資源字典檔案會變成應用程式面板的存放庫。

建立控制項的範本

若要自訂任何控制項的範本，您可以使用修改不同狀態的系統控制項外觀與修改狀態變更之間的切換時間中的程序。

[資源] 面板會列出成為資源的範本。

如需有關如何修改已建立資源的詳細資訊，請參閱修改資源。

建立使用者控制項

您可使用在專案中建立新的使用者控制項中的程序，建立從頭開始設計的自訂使用者控制項。

將屬性轉換成靜態資源

在畫板上選取包含要在其他控制項重覆使用屬性值的物件。

在 [屬性] 面板的屬性檢視 Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(zh-tw,Expression.40).png 中，找出想要重複使用的屬性。

秘訣：
您可以使用 [屬性] 面板中的 [搜尋] 文字方塊，透過搜尋屬性名稱中的字元快速找出屬性。輸入的文字會篩選屬性清單。若要還原 [屬性] 面板，請按一下 [搜尋] 文字方塊旁的 [清除] 。

您可以使用 [屬性] 面板中的 [搜尋] 文字方塊，透過搜尋屬性名稱中的字元快速找出屬性。

Dd185519.a1e4026a-4e48-4f0c-8898-3783121e57fa(zh-tw,Expression.40).png

輸入的文字會篩選屬性清單。

Dd185519.c286ad76-70a6-41f7-bed6-d6d4ad69e549(zh-tw,Expression.40).png

若要還原 [屬性] 面板，請按一下 [搜尋] 文字方塊旁的 [清除] Dd185519.1d1f5548-6c7a-46bd-9d93-591edc576888(zh-tw,Expression.40).png 。

執行下列其中一項動作：
- 若要重複使用 [筆刷]，請按一下筆刷屬性 (例如 Fill 或 Background 屬性) 旁的 [進階選項] ，然後按一下 [轉換成新資源]。
- 若要重複使用套用至筆刷的色彩，請選取狀態為 [單色筆刷] 的筆刷，而如果筆刷是 [漸層筆刷] ，請針對想要重覆使用的色彩，選取漸層停駐點。然後，按一下 [將色彩轉換成資源] 。
- 若想要重複使用數值或其他值類型，請依序按一下屬性旁的 [進階選項] 按鈕和 [轉換成新資源]。
在出現的對話方塊上 (標題為 [建立<類型> 資源])，為資源輸入有意義的名稱，然後按一下 [確定]。

資源建立後會列在 [資源] 面板中。

如需如何修改已建立資源的詳細資訊，請參閱修改資源。

將資源套用至其他屬性

有數種方式可將資源套用至屬性。

從資源面板中以拖曳的方式來套用資源

從 [資源] 面板中，將資源拖曳至畫板的控制項。

將字型家族資源拖曳至核取方塊控制項
從顯示的下拉式清單功能表中，選取想要套用到資源的控制項屬性。

將字型家族資源套用到核取方塊的 FontFamily 屬性。

使用進階選項功能表來套用資源

在 [屬性] 面板的屬性檢視中，找出想要設為資源的屬性。
按一下 [進階選項] ，指向 [本機資源]，然後從顯示的下拉式清單中選取資源名稱。

套用筆刷資源

在 [屬性] 面板的屬性檢視中，選取想要設為資源的筆刷。
在 [筆刷資源] 索引標籤上，選取資源的名稱。

套用色彩資源

在 [屬性] 面板的屬性檢視中，選取想要設為資源的筆刷色彩。如果筆刷是 [漸層筆刷] ，請選取色彩的漸層停駐點。
在 [色彩資源] 索引標籤上，選取資源的名稱。

將範本套用到其他相同類型的控制項

有數種方式可將範本套用至控制項。

在資產面板中選取範本並繪製新控制項以套用範本

在 [工具] 面板中，按一下 [資產] 。
在 [資產] 面板的 [樣式] 類別中，選取已建立的範本。
在畫板上，使用指標來繪製週框方塊。

已繪製的新控制項與選取的範本相符，且會自動套用範本。

從資源面板中以拖曳的方式來套用範本

從 [資源] 面板中，將範本資源拖曳至畫板的控制項。
在出現的下拉式清單上，選取 [Style] 屬性。

使用進階選項功能表來套用範本

選取要套用範本的物件。
在 [屬性] 面板的屬性檢視中，找出 [ Style ] 屬性。
在 [ Style ] 屬性旁，按一下 [進階選項] ，指向 [本機資源]，然後從出現的下拉式清單中選取範本的名稱。

將資源移到 App.xaml 檔案

若在 App.xaml 檔案中建立資源時未定義資源，可以拖曳 [資源] 面板中的資源，將其移至 App.xaml 檔案。

秘訣：

若無法看到資源，您可以展開文件節點下的節點 (通常為 Page.xaml)。

秘訣：
若無法看到資源，您可以展開文件節點下的節點 (通常為 Page.xaml)。

將資源複製到其他專案

從 [專案] 面板上，按兩下 App.xaml 檔案，在畫板上開啟此檔案。
App.xaml 檔案無法在 [設計] 中檢視，因此請選取畫板右邊的 [XAML] 索引標籤。

資源會定義在 <Application.Resources> 標籤之間。

<Application.Resources>
</Application.Resources>

在這些標籤之間，屬性資源會定義在代表屬性類別的標籤中。[ Key ] 屬性代表資源的命名名稱。

  <FontFamily x:
    Key="ApplicationFont"
  >Segoe UI</FontFamily>
  <LinearGradientBrush x:
    Key="BorderBrush"
   EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF000000"/>
    <GradientStop Color="#FFC64545" Offset="1"/>
  </LinearGradientBrush>

範本會定義在 <Style> 標籤之間。[ Key ] 屬性代表範本的命名名稱。

  <Style x:
    Key="ImageButton"
   TargetType="Button">
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="Template">
      ...
    </Setter>
  </Style>

反白顯示代表要移至其他專案資源的 XAML，然後按下 CTRL+C 進行複製。
在 Expression Blend 中開啟其他專案，在畫板上以 [XAML] 檢視開啟 App.xaml 檔案，並將滑鼠指標插在 <Application.Resources> 標籤後面，然後按下 CTRL+V 貼上資源。
確認沒有與已存在資源重複的索引碼名稱。

建置專案 (CTRL+SHIFT+B) 並確認已正確複製新資源。

秘訣：
或者，您可以將完整的 App.xaml 檔案複製到新的專案，然後只需將 [ x:Class ] 屬性的名稱變更至新專案的名稱。 `<Application` `xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"` `xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"` `x:Class="ProjectName.App"` `...`

秘訣：

或者，您可以將完整的 App.xaml 檔案複製到新的專案，然後只需將 [ x:Class ] 屬性的名稱變更至新專案的名稱。

<Application

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

x:Class="ProjectName.App" ...

後續步驟

您可以在 Expression 社群網站的＜How Do I?＞(如何？) 視訊教學課程中，觀看如何建立按鈕和核取方塊的控制項外觀。

另請參閱

概念

一般 Silverlight 控制項的樣式提示
 WPF 簡單樣式的樣式提示

共用方式為