從現有的物件建立控制項

發行項
10/11/2017

您可以使用 Microsoft Expression Blend 中的 [變成控制項] 功能，透過畫板上的任意物件來製作控制項範本。[變成控制項] 工具會將物件包裝在可重複使用的樣式資源中。

秘訣：
Expression Blend 中的「物件」是任何您可以放在畫板上的項目，例如版面配置面板、圖形、文字控制項、影像、按鈕、控制項範本或任何其他使用者介面 (UI) 設計元素。將 UI 元素放到畫板上，就會在應用程式中建立該元素的物件例項。

透過橢圓形建立按鈕

如果尚未這麼做，請開啟或建立新的專案。

如需詳細資訊，請參閱建立新專案。
在畫板上，使用 [工具] 面板中的 [橢圓形] 繪製圓形。若要使橢圓形變得更明顯，您可以在 [屬性] 面板的 [筆刷] 下變更橢圓形的屬性，以變更外觀。

如需詳細資訊，請參閱將單色或漸層筆刷套用至物件的填滿效果或筆觸。
以滑鼠右鍵按一下橢圓形，接著指向 [群組置入]，然後再按一下版面配置容器的名稱，例如 [格線]。
在 [物件與時間軸] 面板中選取格線後，按一下 [工具] 功能表上的 [變成控制項] 將格線轉換為按鈕。

[變成控制項] 對話方塊隨即開啟。
在 [控制項類型] 下，按一下您要建立之控制項的類型 (例如 Button 控制項)。
在 [名稱 (索引碼)] 下，選取第一個選項按鈕 (預設值)，然後輸入要用以識別按鈕樣式的名稱。如果畫板上的按鈕尚未依名稱來參照樣式，您也可以選取 [全部套用] 選項，將該樣式套用至畫板上的這類按鈕。
在 [定義於] 之下，按一下會反映要在其中定義按鈕樣式的選項。按一下 [應用程式]，可以讓按鈕樣式適用於應用程式中的所有文件。按一下 [此文件 (Window: Window)]，則可讓按鈕樣式只適用於目前的文件。而按一下 [資源字典]，則可以在應用程式的資源字典中定義按鈕樣式。
按一下 [確定] 結束 [建立樣式資源] 對話方塊，以及建立按鈕樣式。

請注意，在 [物件與時間軸] 面板中，橢圓形物件會轉換為按鈕物件，而此按鈕物件的樣式會設為新的按鈕樣式。

此外，按鈕樣式會列在定義該按鈕樣式之節點的 [資源] 索引標籤中 (例如，在 [視窗] 節點中)。

出現在 Expression Blend 的 [資源] 索引標籤中的新按鈕樣式

修改按鈕樣式

若要修改剛才所建立的按鈕樣式，請以滑鼠右鍵按一下 [物件與時間軸] 面板中的新按鈕物件，並指向 [編輯範本]，然後按一下 [編輯目前的項目]。

畫板會切換為控制項範本的編輯範圍。

秘訣：
有多種方式可以進入控制項範本的編輯範圍。例如，您可以在 [資源] 索引標籤中檢視按鈕樣式，然後按一下資源名稱旁邊的 [編輯資源] 按鈕。如此會帶您進入樣式的編輯範圍，並由此進入控制項範本的編輯範圍，方法是以滑鼠右鍵按一下 [物件與時間軸] 面板中的樣式物件，指向 [編輯範本]，然後按一下 [編輯目前的項目]。若要結束控制項範本的編輯範圍，請按一下 [物件與時間軸] 面板中的 [將範圍傳回] 。如果已從樣式的編輯範圍進入控制項範本的編輯範圍，則會回到該樣式。請再按一下 [將範圍傳回] 按鈕，回到文件的編輯模式。

有多種方式可以進入控制項範本的編輯範圍。例如，您可以在 [資源] 索引標籤中檢視按鈕樣式，然後按一下資源名稱旁邊的 [編輯資源] 按鈕。如此會帶您進入樣式的編輯範圍，並由此進入控制項範本的編輯範圍，方法是以滑鼠右鍵按一下 [物件與時間軸] 面板中的樣式物件，指向 [編輯範本]，然後按一下 [編輯目前的項目]。

若要結束控制項範本的編輯範圍，請按一下 [物件與時間軸] 面板中的 [將範圍傳回] Cc295271.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png 。如果已從樣式的編輯範圍進入控制項範本的編輯範圍，則會回到該樣式。請再按一下 [將範圍傳回] 按鈕，回到文件的編輯模式。

秘訣：
[變成控制項] 工具會將原始物件 (橢圓形) 包裝在含有控制項範本的樣式資源中。樣式可定義在套用樣式之物件上所設定的屬性 (在此情況下，即為按鈕物件)。而控制項範本可定義物件的狀態、結構及外觀。

控制項範本內有 Grid 面板，內含原始物件 (橢圓形) 以及可顯示按鈕物件內容的 ContentPresenter 物件。將物件置於 Grid 面板內，可讓您快速新增及排列其他物件。

新按鈕樣式的控制項範本結構

Cc295271.d16a098c-d0c2-4f72-8e2f-19ce6469c4f8(zh-tw,Expression.40).png

您可以查看資源的可延伸應用程式標記語言 (XAML)，查看樣式及控制項範本的關係。例如，按鈕樣式結構可能如下所示：

  <Window.Resources>

    <Style x:Key="ButtonStyle1" ...>
    
      <Setter Property="Template">
        <Setter.Value>

    <ControlTemplate TargetType="{x:Type Button}">
    
            <Grid>
              <Ellipse>
                ...
              </Ellipse>
              <ContentPresenter .../>
            </Grid>
            <ControlTemplate.Triggers>
              ...
            </ControlTemplate.Triggers>

    </ControlTemplate>
    
        </Setter.Value>
      </Setter>

    </Style>
    
  </Window.Resources>

在 [觸發程序] 面板中，視需要定義按鈕的狀態。例如，按一下 IsMouseOver = True 會在使用者將滑鼠移過按鈕上方時，啟用狀態的觸發程序記錄。選取 [物件與時間軸] 面板中的橢圓形，然後在 [屬性] 面板的 [外觀] 之下，將橢圓形的 [Fill] 屬性變更為不同的色彩。請注意，[ellipse.Fill] 的新屬性變更會新增至 [觸發程序] 面板中的 [使用時的屬性] 下方 (如下列影像所示)。

注意：
您可能必須調整 [觸發程序] 面板的大小，才能看到 [使用時的屬性] 區段。若要調整大小，請按一下並拖曳面板的框線及面板內的框線。

指標在按鈕上方且變更橢圓形的 [Fill] 之後的 [觸發程序] 面板

Cc295271.6be5825d-f291-410b-bc75-423fee8f5d00(zh-tw,Expression.40).png

您也可以新增按鈕的動畫。例如，在 [觸發程序] 面板中，按一下 IsPressed = True ，會在使用者按一下按鈕時，啟用狀態的觸發程序記錄。如果橢圓形在 [物件與時間軸] 面板中仍然為選取狀態，則請按住 SHIFT 及 ALT 鍵，並拖曳橢圓形的一角 (SHIFT+ALT 鍵盤快速鍵可維持物件的中心點)。

您也可以建立新腳本，並從 IsPressed 事件的 [事件觸發程序] 觸發該腳本，以新增更加複雜的動畫。

如需詳細資訊，請參閱撰寫回應事件的程式碼。
視需要定義按鈕的狀態之後，請按一下 [物件與時間軸] 面板中的 [將範圍傳回] ，回到文件的編輯範圍。
若要測試狀態，請按一下 [專案] 功能表上的 [執行專案] (或按 F5)，然後查看按鈕狀態是否正常運作。例如，將指標移至按鈕上方時，填滿色彩應該會改變。

將按鈕樣式套用至按鈕

確定您位於想要的編輯範圍中。您可以將樣式套用至任何範圍中的按鈕 (包括控制項範本的範圍內)。
在畫板上，使用 [工具] 面板中的 Button 繪製按鈕。
以滑鼠右鍵按一下 [物件與時間軸] 面板中的新按鈕物件，並依序指向 [編輯範本] 及 [套用資源]，然後從清單中選取按鈕樣式。

您也可以使用 [物件] 功能表上的 [編輯樣式] 及 [編輯範本] 命令來套用樣式資源。

使用按一下滑鼠右鍵的方法，將按鈕樣式套用至按鈕物件