CheckBox 控件样式设置提示

可以使用内置的 CheckBox 控件模板创建自定义的 CheckBox 模板。默认情况下， CheckBox 控件如下所示：

CheckBox 控件的状态

默认情况下， CheckBox 控件的状态可以是“CommonStates”状态组中的以下四种状态之一，在修改 CheckBox 模板时，您可以在“状态”面板中查看这些状态：

状态名称	描述
Normal	CheckBox 控件没有交互时的外观。
MouseOver	用户将指针移到 CheckBox 控件上时该控件的外观。
Pressed	用户单击 CheckBox 控件时或当该控件具有焦点且用户按 Enter 或空格键时该控件的外观。
Disabled	在 IsEnabled 属性设置为 False 时， CheckBox 控件的外观。

CheckBox 控件所处的状态可以为“FocusStates”状态组中的以下两种状态之一：

状态名称	描述
Unfocused	控件上没有键盘焦点时 CheckBox 控件的外观。
Focused	CheckBox 控件具有键盘焦点时的外观。例如，用户可能会按 Tab 键来循环选择应用程序中的各个对象，直至键盘焦点位于 CheckBox 控件上为止。

CheckBox 控件所处的状态可以为“ValidationStates”状态组中的以下两种状态之一：

状态名称	描述
Valid	控件有效时 CheckBox 控件的外观。
InvalidUnfocused	CheckBox 控件无效且没有焦点时的外观。
InvalidFocused	CheckBox 控件无效但有焦点时的外观。

CheckBox 控件所处的状态可以为“CheckStates”状态组中的以下三种状态之一：

状态名称	描述
Unchecked	在 IsChecked 属性设置为 False 时， CheckBox 控件的外观。
Checked	在 IsChecked 属性设置为 True 时， CheckBox 控件的外观。
Indeterminate	在 IsThreeState 属性设置为 True ，并且“IsChecked”属性设置为 Null 时， CheckBox 控件的外观。

默认情况下， CheckBox 控件的选中状态看起来如下所示：

提示：
状态组包含属于同一逻辑类别并且无法同时显示的可视状态。例如，“CommonStates”组包含的状态和用户与输入设备（例如鼠标）的交互相关。一次只能显示状态组中的一种状态，但一个组中的状态可与另一个状态组中的状态同时显示。

当您选择状态时，状态记录功能将启用，并且将为该状态记录您进行的任何更改。若要禁用状态记录功能，请在美工板上单击记录按钮 ，或者在“状态”面板中选择“Base”。若要在两个独立状态处于活动状态时修改控件的外观，您可以固定一个状态组中状态的预览，同时修改另一个状态组中的状态。

模板绑定

可以对 Background 、 BorderBrush 、 Foreground 、 BorderThickness 或 Padding 属性进行模板绑定。有关详细信息，请参阅在模板中使用对象属性。

将对象转换为 CheckBox 控件

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

Normal

MouseOver

Pressed

Disabled

Focused

注意：
请务必注意，前面的图形尚不是 CheckBox 控件，而是可以转换为 CheckBox 控件的作品。

本例在以下过程的步骤 4 中使用 XAML 代码，对应于前面的图形中的 Normal 状态。

1. 打开新的 Microsoft Silverlight 项目。在“画笔”类别中，单击“纯色画笔”。在“编辑器”的“十六进制值”框中，键入 #FF808080 。

2. 在“工具”面板中，双击“网格” 以在美工板上创建一个新容器。在“属性”面板的“布局”类别中，在“Width”右侧单击“高级选项”，然后单击“重置”。对“Height”重复该步骤。

3. 在“代码”视图中，找到以下代码，然后删除结尾斜线 (/)。

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

4. 复制以下代码，然后将它们粘贴到您的新项目中（粘贴到您在步骤 3 中找到的代码之后）。

   <Grid>
      <Rectangle Stroke="#FF333333" Height="12" Width="12" HorizontalAlignment="Left" Fill="Transparent"/>
      <Path x:Name="check" Height="8" Width="8" Fill="White" Stretch="Fill" 
         Data="M14.8,6.2 C14.9,6.2 14.9,6.3 14.9,6.2 C14.9,6.3 14.9,6.3 14.8,6.5 
         C14.1,7.2 13.4,8.1 12.6,9.2 C11.8,10.4 11.1,11.7 10.6,13 
         C10.4,13.5 10.2,13.8 10.2,13.9 C10.1,14.1 9.8,14.1 9.4,14.1 
         C9.1,14.1 8.9,14.1 8.9,14 C8.8,14 8.7,13.8 8.5,13.5 
         C8.2,13 7.8,12.6 7.5,12.2 C7.3,12 7.2,11.9 7.2,11.8 
         C7.2,11.6 7.3,11.5 7.5,11.3 C7.7,11.2 7.9,11.1 8,11.1 
         C8.2,11.1 8.5,11.2 8.7,11.4 C9,11.6 9.3,12 9.6,12.5 
         C10,11.8 10.3,11.1 10.6,10.4 C11,9.7 11.4,9.11.8,8.5 
         C12.3,7.8 12.6,7.3 12.9,7 C13.1,6.8 13.3,6.6 13.4,6.5 
         C13.5,6.5 13.6,6.4 13.8,6.4 C14.3,6.3 14.6,6.2 14.8,6.2 z"
         HorizontalAlignment="Left" Margin="2,2,0,2"/>
      <TextBlock 
         Foreground="White" Text="Lorem" Margin="15,0,0,0" 
         VerticalAlignment="Center"/>
   </Grid>
   

5. 在您刚粘贴的代码之后添加一个 Grid 结束标记 (</Grid>)。

6. 在“对象和时间线”面板中，右键单击“Grid”，然后单击“构成控件”。在“构成控件”对话框中，单击“CheckBox”，然后单击“确定”。

   在“代码”视图中，请注意，您在上一步中粘贴的代码已替换为新的 CheckBox 控件的代码。此外，Expression Blend 将 CheckBox 控件变为新的 CheckBox 样式的模板，并将该模板应用于 CheckBox 。

   comp 中的 TextBlock 具有白色前景。comp 中的 TextBlock 还包含文本 Lorem 。同样，前面代码中的 TextBlock 已替换为具有与原始 TextBlock 相同的属性的 ContentPresenter 。

7. 若要将 MouseOver 状态添加到 Button 控件，请执行以下操作：

   1. 在“对象和时间线”面板中，单击“矩形”。

   2. 在“状态”面板中，单击“MouseOver”。

   3. 在“属性”面板中选择“Fill”，并将“Alpha”属性设置为 25 。

      请注意，“Rectangle”已重命名为“rectangle”。

   4. 返回到“状态”面板，然后单击“Base”以结束状态的记录。

8. 若要将相同的属性应用于 Pressed 状态，请在“状态”面板中右键单击“MouseOver”，单击“将状态复制到”，然后单击“Pressed”。

9. 若要在复选框处于 Pressed 状态时使 CheckBox 模板偏移，请执行以下操作：

   1. 在“状态”面板中，单击“Pressed”。

   2. 在“对象和时间线”面板中，单击“Grid”。

   3. 在“属性”面板“转换”类别中的“转换”选项卡上，将“X”和“Y”设置为 1 。

      请注意，“对象和时间线”面板中的“Grid”已重命名为“grid”。

   4. 返回到“状态”面板，然后单击“Base”以结束状态的记录。

10. 在“状态”面板中，选择“Disabled”。在“对象和时间线”面板中，选择“grid”。在“属性”面板中，将“Opacity”设置为 50 。返回到“状态”面板，然后单击“Base”以结束状态的记录。

11. 若要将交互性添加到 CheckBox 控件，请执行以下操作：

    1. 在“状态”面板中，单击“Normal”，单击“添加过渡”，然后单击“从 Normal 到 MouseOver”。

    2. 在“过渡持续时间”框中，键入 0.2 。

    3. 单击“Base”以结束状态的记录。

    现在，当您将指针悬停在 CheckBox 上时，从 Normal 状态到 MouseOver 状态的过渡将花费 0.2 秒。所有其他过渡将立即发生。

12. 在“对象和时间线”面板中，单击“check”。在“属性”面板的“外观”类别中，将“Opacity”设置为 0 。在“状态”面板中，单击“Checked”，然后在“属性”面板中将“Opacity”设置为 100 。单击“Base”以结束状态的记录。

13. comp 将包括一个处于 Focused 状态的淡蓝色圆角矩形，该矩形在处于 Normal 状态时不会出现在 XAML 中。

    若要创建矩形，则在选定“Focused”状态的情况下添加一个新的 Rectangle 对象。这称为“在状态下绘制”，意思是，如果您在某个状态下绘制了一个新对象，则仅当此对象处于该状态时才能看到它。

    若要创建处于 Focused 状态的矩形，则在“状态”面板中单击“Focused”，然后在“工具”面板中双击“矩形”工具，以创建新的 Rectangle 对象。

14. 下一步是设置新矩形的属性。必须在 Base 中而不是 Focused 状态下更改这些属性。但是，矩形当前是透明的，并且在 Base 中是看不见的。若要保持矩形可见，请单击“记录模式指示器”。请注意，在“对象和时间线”面板中仍要选定新的矩形（“rectangle1”）。

    在“属性”面板中，设置“rectangle1”的以下属性：

    • Fill   在“画笔”类别中，单击“无画笔”。

    • Stroke   在“画笔”类别中，单击“纯色画笔”。在“编辑器”中，将颜色设置为 #FF00C0FF 。

    • RadiusX   在“外观”类别中，将“RadiusX”设置为 2 。

    • RadiusY   在“外观”类别中，将“RadiusY”设置为 2 。

    • Margin   在“布局”类别中，将“Margin”设置为以下值：

      • Left    -2

      • Right    -2

      • Top    0

      • Bottom    0

15. 单击“返回到范围”。在“对象和时间线”面板中选定“CheckBox”，按 Ctrl+C 以复制它。按 Ctrl+V 四次，将另外四个“CheckBox”控件粘贴到容器中。使用“选择”工具 将复选框排列到列中。在“对象和时间线”面板中选择一个 CheckBox 对象，然后清除“属性”面板的“公共属性”类别中的“IsEnabled”框。

16. 按 Ctrl+Shift+B 生成项目，然后按 F5 测试项目。

有关向其他 CheckBox 对象应用新的 CheckBox 模板的信息，请参阅应用或删除资源。

引用

您可以在 MSDN 上的 Silverlight Control Gallery （Silverlight 控件库）中找到关于 Microsoft Silverlight CheckBox 控件的属性和事件的详细信息。

另请参阅

概念

常用 Silverlight 控件的样式提示
SimpleCheckBox
设置支持模板的控件的样式

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