通过

Button 控件样式提示

  • 项目

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

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

Ee341364.c01e5314-5b29-4283-a483-b0a1cb3b59f6(zh-cn,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-cn,Expression.40).png，或者在“状态”面板中选择“Base”。

有关详细信息，请参阅定义控件的不同视觉状态。

模板绑定

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

将文本转换为 Button 控件

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

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 。

    comp 中的 TextBlock 具有浅灰色前景。新的 Button 样式也具有浅灰色前景。“确定” 是前面按钮和 Button 控件的文本内容，并且前面代码中的 TextBlock 已替换为属性与原始 TextBlock 相同的 ContentPresenter 。

  5. 若要将状态添加到 Button 控件，请按下列步骤进行操作：

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

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

    3. 在“属性”面板中，将“Fill”和“Stroke”设置为“#FF808080”。

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

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

  7. 若要在按钮处于按下状态时使按钮文本产生偏移，请按照下列步骤进行操作：

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

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

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

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

  8. 在“状态”面板中，单击“Normal”，单击“添加过渡”，然后单击“从 Normal 到 MouseOver”。在“过渡持续时间”框中，键入 0.2 ，然后单击“Base”。

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

  10. 下一步是设置新矩形的属性。必须在 Base 中而不是 Focused 状态下更改这些属性。但是，矩形当前是透明的，并且在 Base 中是看不见的。单击“记录模式指示器”Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-cn,Expression.40).png 以使矩形可见。请注意，在“对象和时间线”面板中仍要选定新的矩形（“rectangle1” ）。在“属性”面板中，设置“rectangle1”的以下属性：

    • Fill    设置为“无画笔”。

    • Stroke color    设置为“#FF00C0FF”。

    • RadiusX    设置为“2”。

    • RadiusY    设置为“2”。

    • Margin    将“Left”、“Right”、“Top”和“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”设置为“Forever”。

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

将对象转换为 Button 控件

以下图像是由设计器创建的按钮综合，其中包括 Normal 、 MouseOver 、 Pressed 、 Disabled 和 Focused 状态：

Normal

按钮图形 Normal

MouseOver

按钮图形 MouseOver

Pressed

按钮图形 Pressed

Disabled

按钮图形 Disabled

Focused

按钮图形 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. 在“对象和时间线”面板中，单击“矩形”。

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

    3. 在“属性”面板中，将“Fill”和“Stroke”设置为“#FF808080”。

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

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

  9. 若要在按钮处于按下状态时使按钮文本产生偏移，请按照下列步骤进行操作：

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

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

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

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

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

  11. 在“过渡持续时间”框中，键入 0.2 ，然后单击“Base”。

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

  12. 下一步是设置新矩形的属性。必须在 Base 中而不是 Focused 状态下更改这些属性。但是，矩形当前是透明的，并且在 Base 中是看不见的。单击“记录模式指示器”Ee341364.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-cn,Expression.40).png 以使矩形可见。请注意，在“对象和时间线”面板中仍要选定新的矩形（“rectangle1” ）。在“属性”面板中，设置“rectangle1”的以下属性：

    • Fill    设置为“无画笔”。

    • Stroke color    设置为“#FF00C0FF”。

    • Margin    将“Left”、“Right”、“Top”和“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”设置为“Forever”。

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

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

引用

您可以在 MSDN 上的 Silverlight Control Gallery Ee341364.xtlink_newWindow(zh-cn,Expression.40).png（Silverlight 控件库）中找到关于 Silverlight Button 控件的属性和事件的详细信息。

另请参阅

任务

从现有对象创建控件

概念

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

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