ScrollBar 控件样式设置提示

ScrollBar 控件表示一个值范围，其中，当前值由名为 Thumb 的对象类型所处的位置来表示。ScrollBar 对象通常用于其他控件（如 ListBox 或 ScrollViewer 控件）的模板中，以提供滚动功能。

与所有控件一样，您可以修改 ScrollBar 控件，使其外观与其默认外观截然不同。默认情况下，ScrollBar 控件如下所示：

重要的 ScrollBar 控件属性

通过在“属性”面板中的“布局”下面设置“Orientation”属性，可以使 ScrollBar 控件沿水平或垂直方向放置。通过在“属性”面板中的“公共属性”下面设置“Minimum”和“Maximum”属性，可以指定值的范围。当前值（在“Value”属性中指定）必须介于最小值和最大值之间。“公共属性”类别中还有其他一些可设置的属性，如“LargeChange”和“SmallChange”属性。

可通过下列方法设置这些属性：

• 设置对象的属性   在美工板上绘制 ScrollBar 对象之后，您可以直接设置该对象的属性。如果希望若干个 ScrollBar 使用相同的值，请在样式中设置这些属性。

• 在样式中设置属性   如果在 ScrollBar 对象的样式 中设置这些属性，则任何使用该样式的 ScrollBar 对象都将使用这些值。您可以为特定对象覆盖这些值。

  有关详细信息，请参阅创建样式。

ScrollBar 控件的外观随其状态的变化而变化。通过在“状态”面板中选择状态，您可以在模板编辑模式下修改每种状态所对应的外观。

有关详细信息，请参阅下表中列出的状态，并参阅定义控件的不同视觉状态。

ScrollBar 模板的部件

ScrollBar 控件仅使用一种模板，即，“ScrollBar 模板”。该模板的各个部件将对应用了该模板的 ScrollBar 对象的外观和行为产生影响。

模板中可存在其他对象，以修饰 ScrollBar 控件的外观，但下表中列出的部件与约定的部件行为相关。

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

部件名称	对象类型	描述
VerticalRoot  HorizontalRoot	FrameworkElement	一个包含对象的版式面板，其中的对象用于定义 ScrollBar 控件沿垂直（或水平）方向放置时的外观。 此部件是必需的。
VerticalSmallDecrease  HorizontalSmallDecrease	RepeatButton	一个对象，单击该对象时，ScrollBar 的 Value 属性值将减小。Value 属性值按 SmallChange 属性中的值递减。
VerticalLargeDecrease  HorizontalLargeDecrease	RepeatButton	一个对象，单击该对象时，ScrollBar 的 Value 属性值将减小。Value 属性值按 LargeChange 属性中的值递减。 此部件是必需的。 提示： RepeatButton 对象的属性可以设置，但是，如果要添加、删除或修改组成 RepeatButton 对象的对象，请打开 RepeatButton 对象的模板。
VerticalThumb  HorizontalThumb	Thumb	一个对象，其在轨道上的位置表示 ScrollBar 控件的当前值。 此部件是必需的。 提示： Thumb 对象的属性可以设置，但是，如果要添加、删除或修改组成 Thumb 对象的对象，请打开 Thumb 对象的模板。
VerticalLargeIncrease  HorizontalLargeIncrease	RepeatButton	一个对象，单击该对象时，ScrollBar 的 Value 属性值将增大。Value 属性值按 LargeChange 属性中的值递增。 此部件是必需的。
VerticalSmallIncrease  HorizontalSmallIncrease	RepeatButton	一个对象，单击该对象时，ScrollBar 的 Value 属性值将增大。Value 属性值按 SmallChange 属性中的值递增。

ScrollBar 控件的状态

默认情况下，ScrollBar 控件的状态可以是以下三种状态之一，在修改 ScrollBar 模板时，您可以在“状态”面板中查看这些状态：

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

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

将对象转换为 ScrollBar 控件

若要修改 ScrollBar 控件的模板，请执行下列操作之一：

• 在美工板上绘制一个“ScrollBar”，然后创建默认模板的副本。

  有关详细信息，请参阅创建或修改模板。

• 通过绘制对象或导入作品来设计 ScrollBar 控件的外观，然后使用“构成控件”命令。

如果使用“构成控件”命令，请按以下步骤进行操作，以确保创建 ScrollBar 模板所需的所有对象：

1. 将对象组合到版式面板中，选择该版式面板，然后在“工具”菜单上，单击“构成控件”。

2. 在出现的对话框中，选择“ScrollBar”，对模板命名，然后选择模板的存储位置。

   有关位置的信息，请参阅创建资源。

3. 单击“确定”之后，Microsoft Expression Blend 将进入模板编辑模式并显示组成 ScrollBar 控件的对象。

4. ScrollBar 控件的模板包含当 ScrollBar 对象沿垂直或水平方向放置时所使用的部件。您可以向模板中的对象分配“部件”面板中的所有部件，也可以只分配与 ScrollBar 控件的某个方向相关的部件。如果只有一组对象，但是想要针对 ScrollBar 控件的两个方向来设计模板，则可以复制这些对象并重新排列它们。

   提示：
   如果只向模板中的对象分配“部件”面板中的水平部件，那么，当 ScrollBar 对象（应用了该模板）设置为垂直显示时，水平部件将从美工板上消失。若要更改 ScrollBar 对象的方向，请单击美工板顶部痕迹导航栏中的“[ScrollBar]”以返回到 ScrollBar 对象的编辑范围，将“Orientation”属性设置为“Horizontal”，然后使用痕迹导航栏上的第三个按钮返回到模板编辑模式。

5. 若要为 VerticalRoot（或 HorizontalRoot）部件创建对象，请执行下列操作：

   1. 绘制一个具有五列（或五行）的“网格”版式面板 。这五列的大小调整设置应分别为“自动”、“自动”、“自动”、“*”和“自动”。

      

      有关详细信息，请参阅添加或删除行或列和更改行或列的调整大小选项。

   2. 右键单击新的网格对象，指向“构成 ScrollBar 的部件”，然后单击“VerticalRoot”（或“HorizontalRoot”）。

6. Thumb 对象在其中移动的空间称为轨道。 轨道不是模板部件，因此是可选的。将想要用来表示轨道的任何一个或多个对象放入 VerticalRoot（或 HorizontalRoot）对象中，可以跨所有这五列（或行），也可以只跨中间三列（或行）。

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

7. 由于 Thumb 对象可以有它们自己的模板，因此，您可能需要将要使用的对象转换为 Thumb 控件，具体操作如下：

   1. 将表示 Thumb 对象的对象组合到版式面板中。

   2. 将新版式面板移到“VerticalRoot”（或“HorizontalRoot”）对象的中间一行（或列）。

      提示：
      若要将对象放入特定列（或行），请选中该对象，然后在“属性”面板中设置“Row”（或“Column”）属性。第一行（或列）的数值为 0。

   3. 右键单击新的版式面板，指向“构成 ScrollBar 的部件”，然后单击“VerticalThumb”（或“HorizontalThumb”）。

   4. 在“构成部件”对话框中，选择模板的存储位置。

   5. 当新的 Thumb 对象处于模板编辑模式时，您可以继续进行修改，例如，在“状态”面板中选择状态以修改这些状态下 Thumb 对象的外观。 如果希望 Thumb 对象中有边距，请在根对象上设置“Margin”属性。

   6. 通过单击“对象和时间线”面板中的“范围上移”，或单击美工板顶部痕迹导航栏中的“VerticalThumb”（或“HorizontalThumb”），返回 ScrollBar 的模板编辑模式。

   7. 将 Thumb 对象的“Width”和“Height”属性设置为“Auto”，将“MinHeight”（或“MinWidth”）属性设置为大于 0 的值，将“Margin”属性设置为 0。

8. 如果希望用户能够单击轨道任意一端的按钮按较小的增量移动 Thumb 对象，请执行下列操作：

   1. 将希望用作递减按钮的对象组合到版式面板中。

   2. 将该版式面板移入“VerticalRoot”对象的第一行（或“HorizontalRoot”对象的第一列）。

   3. 右键单击该版式面板，指向“构成 ScrollBar 的部件”，然后单击“VerticalSmallDecrease”（或“HorizontalSmallDecrease”）。

   4. 在“构成部件”对话框中，选择模板的存储位置。

   5. 当新的 RepeatButton 对象处于模板编辑模式时，您可以继续进行修改，如删除“ContentPresenter”对象。如果要在 RepeatButton 对象中设置边距，请设置根对象的“Margin”属性。

   6. 单击“对象和时间线”面板中的“范围上移”，或单击美工板顶部痕迹导航栏中的“VerticalSmallDecrease”（或“HorizontalSmallDecrease”），返回 ScrollBar 的模板编辑模式。

   7. 在“属性”面板中的“布局”下面调整属性，以使 RepeatButton 出现在所需的位置。如果您的对象隐藏在其他对象后面，则可能还需要对您的对象重新排序。

      有关详细信息，请参阅更改对象的分层顺序。

   8. 对“VerticalSmallIncrease”（或“HorizontalSmallIncrease”）对象重复上述步骤，并将该对象移入“VerticalRoot”对象的最后一行（或“HorizontalRoot”对象的最后一列）。

9. 若要使用户能够通过单击 Thumb 对象两端的轨道而以较大增量移动该对象，请执行下列操作：

   1. 在 Thumb 对象两端的行（或列）中分别绘制一个 RepeatButton 控件。

   2. 右键单击将减小 ScrollBar 对象的值的 RepeatButton 对象，指向“构成 ScrollBar 的部件”，然后单击“VerticalLargeDecrease”（或“HorizontalLargeDecrease”）。

   3. 右键单击将增大 ScrollBar 对象的值的 RepeatButton 对象，指向“构成 ScrollBar 的部件”，然后单击“VerticalLargeIncrease”（或“HorizontalLargeIncrease”）。

   4. 如果不希望 RepeatButton 对象可见，则可以将其“Opacity”属性设置为 0。

      提示：
      您可以选择将现有对象转换为 RepeatButton 控件模板，操作与转换“VerticalSmallDecrease”（或“HorizontalSmallDecrease”）对象的操作相同。请确保将转换后的 RepeatButton 对象移入 Thumb 对象两端的行（或列）。

10. 可以在此模式下继续修改模板。例如，添加或修改对象，或者在“状态”面板中选择一种状态以修改该状态下模板的外观。

11. 请考虑将模板中对象的某些画笔属性绑定到最终将使用模板的 ScrollBar 对象的以下属性：

    • Background

    • BorderBrush

    • Foreground

    • BorderThickness

    有关详细信息，请参阅在模板中使用对象属性。

12. 若要退出模板编辑模式，请单击美工板顶部痕迹导航栏中的“[ScrollBar]”，或单击“对象和时间线”面板中的“范围上移”。

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

引用

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

另请参见

任务

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

概念

常用 Silverlight 控件的样式提示

SimpleScrollBar

设置支持模板的控件的样式