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]。

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

範本繫結

您可以對 *BackgroundBorderBrushForegroundBorderThickness* 或 *Padding* 屬性進行範本繫結。如需詳細資訊,請參閱完成範本的物件屬性

將文字轉換成 Button 控制項

下面幾張圖是建立之按鈕的詳細設計圖 (comp),此按鈕包含 NormalMouseOverPressedDisabledFocused 狀態:

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 控制項

下面幾張圖是設計人員建立之按鈕的詳細設計圖,此按鈕包含 NormalMouseOverPressedDisabledFocused 狀態:

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.