RadioButton 控制項樣式提示

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

RadioButton 控制項的狀態

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

狀態名稱	描述
Normal	與控制項沒有互動時的 RadioButton 控制項外觀。
MouseOver	使用者將指標移到 RadioButton 控制項上方時，控制項所顯示的外觀。
Pressed	當使用者按一下 RadioButton 控制項，或當該控制項具有焦點且使用者按下 ENTER 或空格鍵時，該控制項的外觀。
Disabled	當 IsEnabled 屬性設為 False 時， RadioButton 控制項的外觀。

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

狀態名稱	描述
Unfocused	RadioButton 控制項沒有鍵盤焦點時的外觀。
Focused	RadioButton 控制項具有鍵盤焦點時的外觀。例如，使用者可能會按 TAB 鍵來循環顯示應用程式中的物件，直到鍵盤焦點停留在 RadioButton 控制項為止。

RadioButton 控制項可以處於 [CheckStates] 狀態群組的下列三種狀態之一：

狀態名稱	描述
Unchecked	當 [IsChecked] 屬性設為 [False] 時， RadioButton 控制項的外觀。
Checked	當 [IsChecked] 屬性設為 [True] 時， RadioButton 控制項的外觀。
Indeterminate	當 [IsThreeState] 屬性設為 [True] 時， RadioButton 控制項的外觀。

RadioButton 控制項可以處於 [ValidationStates] 狀態群組的下列三種狀態之一：

狀態名稱	描述
Valid	RadioButton 控制項有效時的外觀。
InvalidUnfocused	RadioButton 控制項無效且沒有鍵盤焦點時的外觀。
InvalidFocused	RadioButton 控制項無效但具有鍵盤焦點時的外觀。

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

當您選取狀態時，狀態錄製功能便會開啟，以錄製您對該狀態所做的任何變更。若要關閉狀態錄製功能，請按一下錄製按鈕 ，或在 [狀態] 面板中選取 [Base]。若要修改控制項在兩種個別狀態同時作用時的外觀，您可以鎖定其中一個狀態群組之狀態的預覽，同時修改另一個狀態群組中的狀態。

範本繫結

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

將物件轉換成 RadioButton 控制項

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

Normal

MouseOver

Pressed

Disabled

Focused

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

此範例使用下列程序步驟 4 中的 XAML 程式碼。

1. 開啟新的 Microsoft Silverlight 專案。在 [筆刷] 類別中，按一下 [單色筆刷]。在 [編輯器] 的 [十六進位值] 方塊中，輸入 #FF808080 。

2. 按兩下 [工具] 面板中的 [格線] ，在畫板上建立新容器。在 [屬性] 面板的 [版面配置] 類別中，按一下 [Width] 右側的 [進階選項]，然後按一下 [重設]。請針對 [Height] 重複相同的動作。

3. 在 [程式碼] 檢視中，找出下列程式碼，然後刪除結尾的斜線 (/)。

   <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
   

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

   <Grid>
      <Ellipse Stroke="#FF3C3C3C" Width="12" Height="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Ellipse x:Name="bullet" Fill="White" Width="6" Height="6" HorizontalAlignment="Left" Margin="3,0,0,0"/>
      <TextBlock Foreground="White" Text="Lorem" Margin="15,0,0,0" VerticalAlignment="Center"/>
   </Grid>
   

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

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

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

   原始格線中的 TextBlock 具有白色前景，因此新的 RadioButton 樣式也具有白色前景。 TextBlock 元素的文字是 Lorem ，因此成為新 RadioButton 的 Content 屬性。在範本中， TextBlock 已由與 TextBlock 具有相同版面配置屬性的 ContentPresenter 取代。

7. 若要將 [MouseOver] 狀態新增至 [RadioButton]，請執行下列動作：

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

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

   3. 在 [屬性] 面板的 [筆刷] 類別中，按一下 [Fill]，然後在 [編輯器] 類別中，將 [Alpha] 設定為 25 。

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

   注意：
   您也可以按一下文件視窗左上角的 [記錄模式指標] ，結束狀態錄製作業。

8. 以滑鼠右鍵按一下 [狀態] 面板中的 [MouseOver]，按一下 [將狀態複製到]，然後按一下 [Pressed]。

9. 若要建立位移，請在 [狀態] 面板中選取 [Pressed] 狀態後，選取 [物件與時間軸] 面板中的 [Grid]。在 [屬性] 面板的 [轉換] 類別中，將 [X] 和 [Y] 設定為 1 。按一下 [Base]，結束狀態錄製作業。請注意，[Grid] 現在名為 [grid]。

10. 在 [狀態] 面板中，按一下 [Disabled]。在 [屬性] 面板的 [外觀] 類別中，將 [Opacity] 設定為 50 。按一下 [Base]，結束狀態錄製作業。

11. 在 [狀態] 面板中，按一下 [Normal]。按一下 [新增切換]，然後按一下 [Normal 到 MouseOver]。將 [切換持續時間] 設定為 .2 。按一下 [Base]，結束狀態錄製作業。

12. 在 [物件與時間軸] 面板中，按一下 [bullet]。在 [屬性] 面板的 [外觀] 類別中，將 [Opacity] 設定為 0 。

13. 在 [狀態] 面板中，按一下 [Checked]。在 [屬性] 面板的 [外觀] 類別中，將 [Opacity] 設定為 100 。按一下 [Base]，結束狀態錄製作業。

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

15. 下一個步驟是設定新矩形的屬性。屬性必須在 [Base] 狀態中變更，而不是 [Focused] 狀態。不過，此矩形目前是透明的，而且不會在 [Base] 狀態下顯示。請按一下錄製按鈕 以繼續顯示矩形。請注意，新的矩形 (rectangle) 在 [物件與時間軸] 面板中仍為選取狀態。在 [屬性] 面板中，設定 rectangle 的下列屬性：

    • Fill   在 [筆刷] 類別中，按一下 [沒有筆刷]。

    • Stroke   在 [筆刷] 類別中，按一下 [單色筆刷]。在 [編輯器] 中，將色彩設為 #FF00C0FF 。

    • RadiusX   在 [外觀] 類別中，將 [RadiusX] 設為 2 。

    • RadiusY   在 [外觀] 類別中，將 [RadiusY] 設為 2 。

    • Margin   在 [版面配置] 類別中，將 [Margin] 設為下列值：

      • Left    -2

      • Right    -2

      • Top    0

      • Bottom    0

16. 按一下 [將範圍傳回] 。在 [物件與時間軸] 面板中選取 [RadioButton] 後，按 CTRL+C 複製它。按 CTRL+V 四次，再貼四個 RadioButton 控制項到容器中。使用 [選取] 工具  將核取方塊排列在一欄內。在 [物件與時間軸] 面板中選取其中一個 RadioButton 物件後，清除 [屬性] 面板中 [一般屬性] 類別裡的 [IsEnabled] 方塊。

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

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

參照

您可以在 MSDN 上的 Silverlight Control Gallery  (Silverlight 控制項陳列庫) 找到有關 Silverlight  RadioButton 控制項之屬性與事件的詳細資訊。

另請參閱

工作

完成範本的物件屬性

概念

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

Copyright © 2011 by Microsoft Corporation. All rights reserved.