动手试验：自定义 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 控件模板的副本，并将其存储在与 ScrollBar 的模板相同的位置。

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]”元素，指向“编辑控件部件(模板)”，然后单击“编辑副本”。在 ScrollBarStyle 的编辑范围中，单击“Rectangle”元素，再将“Fill”属性更改为深灰色的“纯色画笔”，并将左右两侧的“Margin”属性均设为“2”。

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

另请参见

概念

SimpleScrollBar