动手试验：自定义 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 对象，指向“自动调整大小”，然后单击“填充”，从而自动调整 Border 对象的大小。

10. 仍然在“对象和时间线”面板中选定新的 Border 对象，然后在“属性”面板中的“外观”下，将“CornerRadius”属性改为“4,4,4,4”。这将使边框的四个角成为圆角。

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

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

另请参见

概念

SimpleScrollBar