ScrollBar 控件样式提示

可以使用内置的 ScrollBar 控件模板创建自定义的 ScrollBar 模板。默认情况下， ScrollBar 控件模板类似于下图：

ScrollBar 模板的部件

ScrollBar 模板包含两组部件：一组用于垂直滚动条，另一组用于水平滚动条。部件名称带有“vertical”或“horizontal”前缀，具体取决于滚动条的方向。

提示：
若要查看模板的部件，请在修改模板的同时打开“部件”面板。

部件名称	对象类型
VerticalRoot   HorizontalRoot	FrameworkElement
VerticalSmallDecrease   HorizontalSmallDecrease	RepeatButton
VerticalLargeDecrease   HorizontalLargeDecrease	RepeatButton
VerticalThumb   HorizontalThumb	Thumb
VerticalLargeIncrease   HorizontalLargeIncrease	RepeatButton
VerticalSmallIncrease   HorizontalSmallIncrease	RepeatButton

ScrollBar 提示

Root 部件

此部件是必需的。 Root 部件包含构成特定方向的 ScrollBar 的所有元素。

若要创建 Root 部件，请创建名为 HorizontalRoot 或 VerticalRoot 的网格，它包含五列（对于水平方向）或五行（对于垂直方向），其大小分别为“自动”、“自动”、“自动”、“星号”和“自动”。

Thumb 部件

此部件是必需的。Thumb 是滚动条中可移动的元素。

若要将表示 Thumb 的一个或多个对象变为 Thumb 控件（ HorizontalThumb 或 VerticalThumb ），请将 Thumb 部件放入 Root 部件的中间列/行中，并且设置 Thumb 部件的 Width 和 Height 属性，以便此列（或行）将调整大小以适应 Thumb。

不要设置 Thumb 的 Margin 属性。若要获得相同的效果，请设置 Thumb 模板的根对象的边距。

Track

Thumb 对象在其中移动的空间称为 Track。Track 并不是部件，并且是可选的。

若要包含 Track，请将表示 Track 的对象放入 Root 部件中，此对象可以跨所有这五列（或行），也可以只跨中间三列（或行）。

若要使对象跨越多个列（或行），请选择该对象，然后在“属性”面板中设置“ColumnSpan”或“RowSpan”属性。

以较大的增量沿 Track 移动 Thumb

如果希望用户能够单击 Thumb 两侧的 Track，以便以较大的增量移动 Thumb，则将 RepeatButton 控件放入 Thumb 部件两侧的两个列（或行）中，然后将它们命名为 VerticalLargeDecrease 和 VerticalLargeIncrease （或者 HorizontalLargeDecrease 和 HorizontalLargeIncrease ）。将 RepeatButtons 的 Opacity 指定为零，以便它们正常工作但不可见。或者，也可以向 RepeatButton 控件应用模板，此模板包含 Opacity 为零的一个对象。

以较小的增量沿 Track 移动 Thumb

如果希望用户能够单击 Track 任意一端的按钮以较小的增量移动 Thumb，则将表示这些按钮的对象变为 RepeatButton 控件，并将它们命名为 VerticalSmallDecrease 和 VerticalSmallIncrease （或 HorizontalSmallDecrease 和 HorizontalSmallIncrease ）。将它们放入两个端列（或行）中。

ScrollBar 控件的状态

也可以将各种状态与 ScrollBar 控件模板一起使用。默认情况下， ScrollBar 控件所处的状态可以为 CommonStates 状态组中的以下三种状态之一：

状态名称	描述
Normal	ScrollBar 控件没有交互时的外观。
MouseOver	用户将指针移到 ScrollBar 控件上时该控件的外观。
Disabled	在 IsEnabled 属性设置为 False 时， ScrollBar 控件的外观。

提示：
若要查看可用的状态，请在修改 ScrollBar 模板的同时打开“状态”面板。

当您选择状态时，状态记录功能将启用，并且将为该状态记录您进行的任何更改。若要禁用状态记录功能，请单击“记录模式指示器”，或者在“状态”面板中选择“Base”。

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

模板绑定

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

将对象转换为 ScrollBar 控件

以下图像是包含 VerticalThumb 、 VerticalSmallDecrease 和 VerticalSmallIncrease 部件的 MouseOver 和 Pressed 状态的滚动条的设计综合 (comp)。

Normal

MouseOver

Pressed

Disabled

本例在以下过程的步骤 1 中使用 XAML 代码，此过程对应前面的图形，通过使用 ScrollBar 控件模板来创建自定义滚动条。

提示：
在执行此过程时，单击“拆分视图”可以同时在“设计”视图和“代码”视图中看到所做的更改。

1. 打开新的 Microsoft Silverlight 项目。在“代码”视图中，找到以下代码，然后删除结尾斜线标记 (/)。

   <Grid x:Name="LayoutRoot" Background="White"/>
   

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

   <Grid x:Name="verticalscrollbar" Width="17" Height="146" >
      <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
      <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" VerticalAlignment="Top"/>
      <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" 
         Margin="0,24,0,0" VerticalAlignment="Top"/>
      <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" 
         VerticalAlignment="Bottom" />
   </Grid>
   

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

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

   在“代码”视图中，请注意，您在上一步中粘贴的代码已替换为新的“ScrollBar”控件的代码（请查找以 <Grid x:Name="verticalscrollbar"> 开头的代码）。此外，Microsoft Expression Blend 将 verticalscrollbar 变为新的 ScrollBar 样式的模板，并将该模板应用于 verticalscrollbar （请查找 <Style x:Key="ScrollBarStyle1" TargetType="ScrollBar">）。

   提示：
   在“对象和时间线”面板中，请注意“UserControl”已替换为“Template”。

5. 若要将 verticalscrollbar 变为模板的根，则在“对象和时间线”面板中右键单击 verticalscrollbar ，单击“构成 ScrollBar 的部件”，然后单击“VerticalRoot”。请注意 verticalscrollbar 已重命名为 VerticalRoot 。

6. 若要向 Root 部件网格添加行，则在“设计”视图中单击控件左侧的蓝色标尺以添加新行，如下图所示：

   

   如果如图所示添加行，则部件将处于正确的行中。 Track 的 RowSpan 为 5、 smalldecrease 处于 Row 0 中、 thumb 处于 Row 2 中，而 smallincrease 处于 Row 4 中。

   注意：
   编号从 0 开始，因此这 5 行的编号是 0 到 4。

   现在，必须将作品的元素定义为模板的部件。在定义这些元素时，也可以向特定的属性分配值。

7. 在“对象和时间线”面板中，右键单击 smalldecrease ，单击“构成 ScrollBar 的部件”，然后单击“VerticalSmallDecrease”。在“构成部件”对话框中，单击“确定”。

   smalldecrease 元素刚已变为 RepeatButton 的类型，该按钮是 ScrollBar 控件模板的 VerticalSmallDecrease 部件。

8. 默认情况下，Expression Blend 为该部件创建一个 ContentPresenter 。在本例中将不使用 ContentPresenter ，因此可以删除它，方法是在“对象和时间线”面板中右键单击“ContentPresenter”，然后单击“删除”。

9. 若要设置 VerticalSmallDecrease 部件的属性，则在“对象和时间线”面板中单击 smalldecrease ，然后打开“属性”面板。在“布局”类别中，将“Width”和“Height”均设置为 7 。

10. 若要向 VerticalSmallDecrease 部件添加状态，则在“状态”面板中单击“MouseOver”。在“属性”面板中，将“Fill”设置为 #FFCCCCCC 。返回到“状态”面板，然后单击“Base”以结束状态的记录。

    注意：
    也可以通过单击文档窗口左上角中的“记录模式指示器” 来结束状态的记录。

    在“状态”面板中，单击“Pressed”。在“属性”面板中，将“Fill”设置为 #FFE5E5E5 。返回到“状态”面板，然后单击“Base”。

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

11. 在“对象和时间线”面板中，单击“Grid”。在“属性”面板的“画笔”类别中，单击“纯色画笔”，然后将“Alpha 属性”设置为 1 。

12. 单击“对象和时间线”面板中的“返回到范围”，或单击美工板顶部痕迹导航栏中的“VerticalSmallDecrease”，返回 ScrollBar 控件的模板编辑模式 [“ScrollBarStyle1(ScrollBar 模板)”]。

    为 smallincrease 元素重复步骤 7 至 12。

13. 若要将 thumb 定义为模板的部件，则在“对象和时间线”面板中右键单击 thumb ，单击“构成 ScrollBar 的部件”，然后单击“Vertical Thumb”。在“构成部件”对话框中，单击“确定”。

14. 若要设置 VerticalThumb 部件的属性，则单击“返回到范围”，然后在“对象和时间线”面板中单击“VerticalThumb”，以返回 ScrollBar 控件的模板编辑模式 [“ScrollBarStyle1(ScrollBarTemplate)”]。在“属性”面板的“布局”类别中，将“Width”和“Height”均设置为 7 。如下所示设置“Margin”的值：

    • Left: 5

    • Right: 5

    • Top: 0

    • Bottom: 0

    单击“高级属性”，然后将“MinHeight”设置为 7 。这将向 Thumb 分配最小高度值，以便它始终可见。

15. 若要向 thumb 部件添加状态，请在美工板顶部的痕迹导航栏中单击“thumb”，以返回 Thumb 模板 [“ThumbStyle1(ThumbTemplate)”]。在“状态”面板中，单击“MouseOver”。在“属性”面板中，将“Fill”设置为 #FFCCCCCC 。返回到“状态”面板，然后单击“Base”。

    在“状态”面板中，单击“Pressed”。在“属性”面板中，将“Fill”设置为 #FFE5E5E5 。返回到“状态”面板，然后单击“Base”。

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

16. 在“对象和时间线”面板中单击“返回到范围”，以返回“ScrollBarStyle1(ScrollBarTemplate)”。在“对象和时间线”面板中，单击“VerticalRoot”。在“部件”面板中，双击“VerticalLargeDecrease”，以创建该部件并使其成为 VerticalRoot 的子项。在“属性”面板中，将“Row”设置为 1 并将“Opacity”设置为 0 。

17. 在“对象和时间线”面板中，单击“VerticalRoot”。在“部件”面板中，双击“VerticalLargeIncrease”，以创建该部件并使其成为“VerticalRoot”的子项。在“属性”面板中，将“Row”设置为 3 并将“Opacity”设置为 0 。

18. 对于行 0、1、2 和 4，单击星号图标 两次，直到出现自动图标 为止。对于行 3，确保出现星号图标。这将如下所示设置这些行的高度：自动、自动、自动、星号和自动。单击每条自动调整大小的行分隔线，然后在“属性”面板中单击“显示高级属性”。在“MinHeight”值的右侧，单击“高级选项”，然后单击“重置”。

    

19. 在“对象和时间线”面板中，单击“VerticalRoot”。在“状态”面板中，单击“Disabled”。在“属性”面板中，将“Opacity”设置为 50 。

20. 按 Ctrl+Shift+B 生成项目。生成项目后，按 F5 运行项目，然后测试滚动条。

引用

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

另请参阅

任务

将对象绑定到用户输入或其他内部值

概念

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

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