Button 控制項樣式提示

  • 發行項

Ee341364.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(zh-tw,Expression.40).png

您可以使用內建的 Button 控制項範本來建立自訂 Button 範本。 Button 控制項的預設外觀如下：

Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(zh-tw,Expression.40).png

Button 控制項的狀態

修改 Button 範本時，您可以在 [狀態] 面板中檢視 Button 控制項的可能狀態。根據預設， Button 控制項可以處於 [CommonStates] 狀態群組中下列四種狀態的其中一種：

狀態名稱 描述

Normal

與控制項沒有互動時的 Button 控制項外觀。

MouseOver

使用者將指標移到 Button 控制項上方時，控制項所顯示的外觀。

Pressed

當使用者按一下 Button 控制項，或當該控制項具有焦點且使用者按下 ENTER 或空格鍵時，該控制項的外觀。

Disabled

當 IsEnabled 屬性設為 False 時， Button 控制項的外觀。

Button 控制項也可以處於 [FocusStates] 狀態群組的下列兩種狀態之一：

狀態名稱 描述

Unfocused

Button 控制項沒有鍵盤焦點時的外觀。

Focused

Button 控制項具有鍵盤焦點時的外觀。例如，使用者可能會按 TAB 鍵來循環顯示應用程式中的物件，直到鍵盤焦點停留在 Button 控制項為止。
tip note秘訣：

狀態群組包含屬於相同邏輯類別且無法同時顯示的視覺狀態。例如，[CommonStates] 群組包含的狀態與使用者和輸入裝置 (例如滑鼠) 的互動有關。雖然控制項一次只能顯示同一狀態群組中的一種狀態，但卻可以同時顯示來自不同狀態群組的兩種狀態。

當您選取狀態時，狀態錄製功能便會開啟，以錄製您對該狀態所做的任何變更。若要關閉狀態錄製功能，請按一下畫板上的 [記錄模式指標] Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-tw,Expression.40).png，或在 [狀態] 面板中選取 [Base]。

如需詳細資訊，請參閱定義控制項的不同視覺狀態。

範本繫結

您可以對 Background、BorderBrush、Foreground、BorderThickness 或 Padding 屬性進行範本繫結。如需詳細資訊，請參閱完成範本的物件屬性。

將文字轉換成 Button 控制項

下面幾張圖是建立之按鈕的詳細設計圖 (comp)，此按鈕包含 Normal 、 MouseOver 、 Pressed 、 Disabled 和 Focused 狀態：

Normal

處於 Normal 狀態的 Button

MouseOver

處於 MouseOver 狀態的 Button

Pressed

處於 Pressed 狀態的 Button

Disabled

處於 Disabled 狀態的 Button

Focused

處於 Focused 狀態的 Button

Note注意：

請特別注意，前面的圖形還不是 Button 控制項，而是可以轉換為 Button 控制項的圖案。

下列程序會使用以下程序之步驟 2 中的 XAML 程式碼 (對應於前面圖形中的 Normal 狀態)。

tip note秘訣：

按一下 [分割檢視]，即可在執行此程序時同時查看 [設計] 檢視和 [程式碼] 檢視中的變更。

  1. 開啟新的 Microsoft Silverlight 專案。在 [程式碼] 檢視中，找出下列程式碼，然後刪除結尾的斜線符號 (/)。

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 複製下列程式碼，然後將它貼到新專案中，接在步驟 1 找到的程式碼後面。

    <Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. 在剛貼上的程式碼後面新增結尾 Grid 標籤 (</Grid>)。

  4. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [Grid]，然後按一下 [變成控制項]。在 [變成控制項] 對話方塊中，按一下 [Button]，然後按一下 [確定]。

    請注意，在 [程式碼] 檢視中，您在前一個步驟中貼上的程式碼已被取代為新 Button 控制項的程式碼。此外，Microsoft Expression Blend 也已將 Button 控制項變成新 Button 樣式的範本，並將該範本套用至 Button 。

    詳細設計圖中的 TextBlock 具有淺灰色前景。新的 Button 樣式也具有淺灰色前景。 OK 是前一個按鈕和 Button 控制項的文字內容，而前面程式碼中的 TextBlock 已由與原始 TextBlock 具有相同屬性的 ContentPresenter 所取代。

  5. 若要新增狀態至 Button 控制項，請執行下列步驟：

    1. 在 [物件與時間軸] 面板中，按一下 [Rectangle]。

    2. 在 [狀態] 面板中，按一下 [MouseOver]。

    3. 在 [屬性] 面板中，將 [Fill] 和 [Stroke] 設為 #FF808080。

    4. 返回 [狀態] 面板，然後按一下 [Base]，結束狀態錄製作業。

  6. 若要將相同屬性套用到 Pressed 狀態，請在 [狀態] 面板中，以滑鼠右鍵按一下 [MouseOver]，按一下 [將狀態複製到]，然後按一下 [Pressed]。

  7. 若要在按下按鈕時讓按鈕文字位移，請執行下列步驟：

    1. 在 [狀態] 面板中，按一下 [Pressed]。

    2. 在 [物件與時間軸] 面板中，按一下 [內容展示框]。

    3. 在 [屬性] 面板中 [轉換] 類別的 [平移] 索引標籤上，將 [X] 和 [Y] 設為 1 。

    4. 返回 [狀態] 面板，然後按一下 [Base]，結束狀態錄製作業。

  8. 在 [狀態] 面板中，按一下 [Normal]，按一下 [新增切換]，然後按一下 [Normal 到 MouseOver]。在 [切換持續時間] 方塊中輸入 .2 ，然後按一下 [Base]。

  9. 在詳細設計圖中，當按鈕處於 Focused 狀態時，周圍會出現藍色矩形。若要建立此矩形，請在選取 Focused 狀態的情況下新增 Rectangle 物件。這稱為「繪製為狀態」，代表只有在處於您繪製物件的狀態時，新物件才會顯現。若要建立 Focused 狀態的矩形，請在 [狀態] 面板中按一下 [Focused]，然後按兩下 [工具] 面板中的 [矩形] 工具，建立新的 Rectangle 物件。

  10. 下一個步驟是設定新矩形的屬性。這些屬性必須在 Base 狀態中變更，而非 Focused 狀態。不過，此矩形目前是透明的，而且不會在 Base 狀態下顯示。請按一下 [記錄模式指標] Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-tw,Expression.40).png 來顯示矩形。請注意，新的矩形 ( rectangle1 ) 在 [物件與時間軸] 面板中仍為選取狀態。在 [屬性] 面板中，設定 rectangle1 的下列屬性：

    • Fill    設為 [沒有筆刷]。

    • Stroke color    設為 #FF00C0FF。

    • RadiusX    設為 2。

    • RadiusY    設為 2。

    • Margin    將 [Left] 設為 1、[Right] 設為 1、[Top] 設為 1，並將 [Bottom] 設為 1。

  11. 如果您要在按鈕處於 Focused 狀態時新增矩形的其他互動功能，也可以執行下列步驟來建立穩定狀態的動畫。否則，請跳到步驟 12。

    1. 在 [狀態] 面板中，選取 [Focused] 狀態。

    2. 在 [物件與時間軸] 面板中，按一下 [顯示時間軸] 按鈕。

    3. 將主要畫面格拖曳至 2 秒標記處，然後將時間軸播放點移到 2.2 秒處。

    4. 在 [狀態] 面板中，選取 [rectangle1]。

    5. 在 [屬性] 面板的 [外觀] 索引標籤中，將 [Opacity] 設定為 0。

    6. 在 [物件與時間軸] 面板中，將時間軸播放點往回移到 0 秒處，然後選取 rectangle1。在 [屬性] 面板的 [縮放] 索引標籤上，將 [X] 和 [Y] 設為 5。

    7. 在 [物件與時間軸] 面板中，按一下位於 2 的主要畫面格。在 [屬性] 面板的 [加/減速] 類別中，將 [EasingFunction] 設為 [Quartic Out]。

    8. 在 [物件與時間軸] 面板中的索引標籤正下方，按一下狀態名稱 (在此範例中為 [Focused])。在 [屬性] 面板的 [一般屬性] 索引標籤上，將 [RepeatBehavior] 設為 [不限次數]。

  12. 建置專案 (CTRL+SHIFT+B)，然後按 F5 來測試您的專案。

將物件轉換成 Button 控制項

下面幾張圖是設計人員建立之按鈕的詳細設計圖，此按鈕包含 Normal 、 MouseOver 、 Pressed 、 Disabled 和 Focused 狀態：

Normal

Button 圖形 Normal

MouseOver

Button 圖形 MouseOver

Pressed

Button 圖形 Pressed

Disabled

Button 圖形 Disabled

Focused

Button 圖形 Focused

Note注意：

請特別注意，前面的圖形還不是 Button 控制項，而是可以轉換為 Button 控制項的圖案。

下列程序會使用以下程序之步驟 2 中的 XAML 程式碼 (對應於前面圖形中的 Normal 狀態)。

tip note秘訣：

按一下 [分割檢視]，即可在執行此程序時同時查看 [設計] 檢視和 [程式碼] 檢視中的變更。

  1. 開啟新的 Microsoft Silverlight 專案。在 [程式碼] 檢視中，找出下列程式碼，然後刪除結尾的斜線符號 (/)。

    <Grid x:Name="LayoutRoot" Background="White"/>

  2. 複製下列程式碼，然後將它貼到新專案中，接在步驟 1 找到的程式碼後面。

    <Grid MinWidth="79" MinHeight="20" HorizontalAlignment="Center" VerticalAlignment="Center">
   <Rectangle Fill="#FF3D3D3D" Stroke="#FF3D3D3D" RadiusX="3" RadiusY="3"/>
   <TextBlock Foreground="LightGray" Text="OK" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

  3. 在剛貼上的程式碼後面新增結尾 Grid 標籤 (</Grid>)。

  4. 在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [Grid]，然後按一下 [變成控制項]。在 [變成控制項] 對話方塊中，按一下 [Button]，然後按一下 [確定]。

    請注意，在 [程式碼] 檢視中，您在前一個步驟中貼上的程式碼已被取代為新 Button 控制項的程式碼。此外，Expression Blend 也已將 Button 控制項變成新 Button 樣式的範本，並將該範本套用至 Button 。

  5. 請在 [物件與時間軸] 面板中，以滑鼠右鍵按一下 [Content]，然後按一下 [剪下]。

  6. 讓範圍回到 [UserControl]，以滑鼠右鍵按一下 [UserControl]，然後按一下 [貼上]。

  7. 若要新增狀態至 Button 控制項，請執行下列步驟：

    1. 在 [物件與時間軸] 面板中，按一下 [Rectangle]。

    2. 在 [狀態] 面板中，按一下 [MouseOver]。

    3. 在 [屬性] 面板中，將 [Fill] 和 [Stroke] 設為 #FF808080。

    4. 返回 [狀態] 面板，然後按一下 [Base]，結束狀態錄製作業。

  8. 若要將相同屬性套用到 Pressed 狀態，請在 [狀態] 面板中，以滑鼠右鍵按一下 [MouseOver]，按一下 [將狀態複製到]，然後按一下 [Pressed]。

  9. 若要在按下按鈕時讓按鈕文字位移，請執行下列步驟：

    1. 在 [狀態] 面板中，按一下 [Pressed]。

    2. 在 [物件與時間軸] 面板中，按一下 [內容展示框]。

    3. 在 [屬性] 面板中 [轉換] 類別的 [平移] 索引標籤上，將 [X] 和 [Y] 設為 1 。

    4. 返回 [狀態] 面板，然後按一下 [Base]，結束狀態錄製作業。

  10. 在 [狀態] 面板中，按一下 [Normal]，按一下 [新增切換]，然後按一下 [Normal 到 MouseOver]。

  11. 在 [切換持續時間] 方塊中輸入 .2 ，然後按一下 [Base]。

    在詳細設計圖中，當按鈕處於 Focused 狀態時，周圍會出現藍色矩形。若要建立此矩形，請在選取 Focused 狀態的情況下新增 Rectangle 物件。這稱為「繪製為狀態」，代表只有在處於您繪製物件的狀態時，新物件才會顯現。若要建立 Focused 狀態的矩形，請在 [狀態] 面板中按一下 [Focused]，然後按兩下 [工具] 面板中的 [矩形] 工具，建立新的 Rectangle 物件。

  12. 下一個步驟是設定新矩形的屬性。這些屬性必須在 Base 狀態中變更，而非 Focused 狀態。不過，此矩形目前是透明的，而且不會在 Base 狀態下顯示。請按一下 [記錄模式指標] Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-tw,Expression.40).png 來顯示矩形。請注意，新的矩形 ( rectangle1 ) 在 [物件與時間軸] 面板中仍為選取狀態。在 [屬性] 面板中，設定 rectangle1 的下列屬性：

    • Fill    設為 [沒有筆刷]。

    • Stroke color    設為 #FF00C0FF。

    • Margin    將 [Left] 設為 1、[Right] 設為 1、[Top] 設為 1，並將 [Bottom] 設為 1。

  13. 如果您要在按鈕處於 Focused 狀態時新增矩形的其他互動功能，也可以執行下列步驟來建立穩定狀態的動畫。否則，請跳到步驟 14。

    1. 在 [狀態] 面板中，選取 [Focused] 狀態。

    2. 在 [物件與時間軸] 面板中，按一下 [顯示時間軸] 按鈕。

    3. 將主要畫面格拖曳至 2 秒標記處，然後將時間軸播放點移到 2.2 秒處。

    4. 在 [狀態] 面板中選取 [rectangle1]，然後在 [屬性] 面板的 [外觀] 索引標籤上，將 [Opacity] 設定為 0。

    5. 在 [物件與時間軸] 面板中，將時間軸播放點往回移到 0 秒處，然後選取 rectangle1。在 [屬性] 面板的 [縮放] 索引標籤上，將 [X] 和 [Y] 設為 5。

    6. 在 [物件與時間軸] 面板中，按一下位於 2 的主要畫面格。在 [屬性] 面板的 [加/減速] 類別中，將 [EasingFunction] 設為 [Quartic Out]。

    7. 在 [物件與時間軸] 面板中的索引標籤正下方，按一下狀態名稱 (在此範例中為 [Focused])。

    8. 在 [屬性] 面板的 [一般屬性] 索引標籤上，將 [RepeatBehavior] 設為 [不限次數]。

  14. 建置專案 (CTRL+SHIFT+B)，然後按 F5 來測試您的專案。

如需將新 Button 範本套用至其他 Button 物件的詳細資訊，請參閱套用或移除資源。

參照

您可以在 MSDN 上的 Silverlight Control Gallery Ee341364.xtlink_newWindow(zh-tw,Expression.40).png (Silverlight 控制項陳列庫) 找到有關 Silverlight  Button 控制項之屬性與事件的詳細資訊。

另請參閱

工作

從現有的物件建立控制項

概念

一般 Silverlight 控制項的樣式提示
SimpleButton
設定支援範本之控制項的樣式

Copyright © 2011 by Microsoft Corporation. All rights reserved.