动手试验：自定义 SimpleScrollBar 的外观

在 Microsoft Expression Blend 中，通过使用 SimpleScrollBar 控件模板，可以轻松地自定义滚动条的外观。

自定义 SimpleScrollBar 样式的外观

1. 在 Expression Blend 美工板上绘制 SimpleScrollBar 对象。

   提示：
   “资产”面板的“样式”类别中的“简单样式”下提供了简单样式控件。从列表中选择简单样式控件后，即可在美工板上进行绘制。

2. 在“对象和时间线”面板中，右键单击滚动条，指向“编辑模板”，然后单击“编辑当前模板”。如果不希望更改 SimpleStyles.xaml 资源字典，则可以单击“编辑副本”（而不是“编辑当前模板”），以创建新模板并将其保存在文档中。

   有关创建副本的详细信息，请参阅创建资源。

   提示：
   若要退出模板编辑模式并返回到文档范围，请单击位于“对象和时间线”面板中对象树上方的“返回到范围”。 若要返回到现有模板的模板编辑模式，请在“对象和时间线”面板中，右键单击要编辑其模板的对象，指向“编辑模板”，然后单击“编辑当前模板”。

3. 在“对象和时间线”面板中，单击 IncreaseRepeat 对象，然后在“属性”面板的“画笔”下，将 Background 和 BorderBrush 属性的 Alpha 特性（由调色板右侧的“A”标识）设置为 0%。

4. 在“对象和时间线”面板中，单击 IncreaseArrow 路径对象，然后将 Stroke 和 Fill 属性设置为白色的“纯色画笔”。对于 Stroke 属性，需要先通过以下操作删除绑定：单击“高级选项”，然后单击“重置”。

5. 在“对象和时间线”面板中，右键单击 IncreaseRepeat 对象，指向“编辑模板”，然后执行下列操作之一：

   • 如果在步骤 2 中选择了“编辑当前模板”，此时请单击“编辑当前模板”以编辑存储在 SimpleStyles.xaml 中的 SimpleRepeatButton 控件模板。

   • 如果在步骤 2 中选择了“编辑副本”，此时请单击“编辑副本”以创建 SimpleRepeatButton 控件模板的副本，并将其存储在与 SimpleScrollBar 样式的模板相同的位置。

6. 在 SimpleRepeatButton 样式的编辑范围内，通过在“触发器”面板中选择名为 IsMouseOver = True 和 IsPressed = True 的事件触发器，然后单击“删除触发器”，从而删除这两个事件触发器。

7. 通过执行下列操作之一返回到 SimpleScrollBar 模板的编辑范围：

   • 如果由于在步骤 5 中选择了“编辑模板”而正在编辑 SimpleStyles.xaml 文档，请单击美工板顶部的主文档对应的选项卡（例如 Window1.xaml 选项卡）。右键单击 ScrollBar 对象，指向“编辑模板”，然后单击“编辑当前模板”以返回到之前编辑的 ScrollBar 模板。

   • 如果正在编辑主文档，请单击“返回到范围”。

8. 对 DecreaseRepeat 对象重复上一步。

9. 通过在“对象和时间线”面板中单击 GridRoot 对象将其激活。在“工具”面板中单击 Border 控件，然后在 GridRoot 对象内绘制 Border 对象。在“对象和时间线”面板中右键单击新的 Border 对象，指向“自动调整大小”，然后单击“填充”，从而自动调整该对象的大小。

10. 在“对象和时间线”面板中的新 Border 对象仍然处于选定状态时，在“属性”面板的“外观”下将 CornerRadius 属性更改为 4,4,4,4 。这会将边框的边角变为圆角。

11. 在“对象和时间线”面板中右键单击 [Thumb] 对象，指向“编辑模板”，然后单击“编辑副本”。在 SimpleThumbStyle 样式的编辑范围中，单击 Rectangle 对象，再将 Fill 属性更改为深灰色的“纯色画笔”，并将左右两侧的 Margin 属性均设为 2 。

12. 测试应用程序 (F5) 以查看效果。

另请参阅

概念

SimpleScrollBar

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