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 控件

以下图像是包含 Normal 、 MouseOver 、 Pressed 、 Disabled 和 Focused 状态的单选按钮的设计综合 (comp)：

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. 若要向“RadioButton”添加“MouseOver”状态，请执行下列操作：

   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”。将“过渡持续时间”设置为 0.2 。单击“Base”以结束状态的记录。

12. 在“对象和时间线”面板中，单击“bullet”。在“属性”面板的“外观”类别中，将“Opacity”设置为 0 。

13. 在“状态”面板中，单击“Checked”。在“属性”面板的“外观”类别中，将“Opacity”设置为 100 。单击“Base”以结束状态的记录。

14. 在单选按钮处于“Focused”状态时，设计 comp 会在该按钮周围加上一个蓝色矩形。若要创建矩形，则在选定“Focused”状态的情况下添加一个新的矩形对象。这称为“在状态下绘制”，意思是，如果您在某个状态下绘制了一个新对象，则仅当此对象处于该状态时才能看到它。若要创建处于“Focused”状态的矩形，则在“状态”面板中单击“Focused”，然后在“工具”窗格中双击“矩形”工具，以创建新的矩形对象。

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 控件的样式提示
设置支持模板的控件的样式

Microsoft Corporation 版权所有 ⓒ 2011。保留所有权利。