Slider 控件样式设置提示

Ee371160.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(zh-cn,Expression.40).png

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

Ee371160.42dd6b3d-3876-435a-b401-1f9d2c815454(zh-cn,Expression.40).png

Slider 模板的部件

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

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

Ee371160.7db0aaf3-dcb4-427a-9ebc-3d192e34df54(zh-cn,Expression.40).png

部件名称	对象类型
HorizontalTemplate VerticalTemplate	FrameworkElement
HorizontalTrackLargeChangeDecreaseRepeatButton VerticalTrackLargeChangeDecreaseRepeatButton	RepeatButton
HorizontalThumb VerticalThumb	Thumb
HorizontalTrackLargeChangeIncreaseRepeatButton VerticalTrackLargeChangeIncreaseRepeatButton	RepeatButton

滑块提示

模板部件

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

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

Thumb 部件

此部件是必需的。Thumb 是滑块中可移动的元素。

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

Track

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

若要包含 Track，请将表示 Track 的一个或多个对象放入 Template 部件中，此对象可以跨所有这三列（或行）。

以较大的增量沿 Track 移动 Thumb

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

Slider 控件的状态

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

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

Slider 控件所处的状态可以为“FocusStates”状态组中的以下两种状态之一：

状态名称	描述
Unfocused	控件上没有键盘焦点时 Slider 控件的外观。
Focused	Slider 控件具有键盘焦点时的外观。例如，用户可能会按 Tab 键来循环选择应用程序中的各个对象，直至键盘焦点位于 Slider 控件上为止。

提示：
状态组包含属于同一逻辑类别并且无法同时显示的可视状态。例如，“CommonStates”组包含的状态和用户与输入设备（例如鼠标）的交互相关。一次只能显示状态组中的一种状态，但一个组中的状态可与另一个状态组中的状态同时显示。

当您选择状态时，状态记录功能将启用，并且将为该状态记录您进行的任何更改。若要禁用状态记录功能，请单击记录按钮 Ee371160.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-cn,Expression.40).png ，或者在“状态”面板中选择“Base”。若要在两个独立状态处于活动状态时修改控件的外观，您可以固定一个状态组中状态的预览，同时修改另一个状态组中的状态。

模板绑定

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

将对象转换为 Slider 控件

以下图像是由设计器创建的滑块的设计综合 (comp)，其中包括 HorizontalThumb 部件的 MouseOver 和 Pressed 状态。

Normal

处于 Normal 状态的 Slider

MouseOver

处于 MouseOver 状态的 Slider

Pressed

处于 Pressed 状态的 Slider

Disabled

处于 Disabled 状态的 Slider

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

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

在“代码”视图中，找到以下代码，然后删除结尾斜线标记 (/)。
```
<Grid x:Name="LayoutRoot" Background="White"/>
```

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

<Grid Width="146" Height="17" >
<Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" Margin="0,6" />
<Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Width="7"/>
</Grid>

在您刚粘贴的代码之后添加一个 Grid 结束标记 (</Grid>)。
在“对象和时间线”面板中，右键单击 Grid ，然后单击“构成控件”。在“构成控件”对话框中，单击“Slider”，然后单击“确定”。

在“代码”视图中，请注意，您在上一步中粘贴的代码已替换为新的“Slider”的代码。此外，Expression Blend 将 Grid 变为新的 Slider 样式的模板，并将该模板应用于 Grid 。
若要向 Template 部件网格添加列，则在“设计”视图中单击控件左侧的蓝色标尺以添加新行，如下图所示：

如果如图所示添加行，则部件将处于正确的行中。 Track 的 ColumnSpan 为 3、 thumb 处于 Column 1 中。

注意：

编号从 0 开始，因此这 3 列的编号是 0 到 2。
若要将模板的根变为“HorizontalTemplate”部件，请在“对象和时间线”面板中右键单击“Grid”，单击“构成 Slider 的部件”，然后单击“HorizontalTemplate”。请注意 Grid 已重命名为 HorizontalTemplate 。
在“对象和时间线”面板中，右键单击 thumb ，单击“构成 Slider 的部件”，然后单击“HorizontalThumb”。
若要将状态添加到“HorizontalThumb”部件，请执行以下操作：
1. 在“对象和时间线”面板中，单击“thumb”。
2. 在“状态”面板中，单击“MouseOver”。
3. 在“属性”面板中，将“Fill”设置为 #FFCCCCCC 。
4. 返回到“状态”面板，然后单击“Base”以结束状态的记录。
  
  注意：
  
  也可以通过单击文档窗口左上角中的“记录模式指示器” 来结束状态的记录。
在“状态”面板中右键单击“MouseOver”，单击“将状态复制到”，然后单击“Pressed”。
若要创建偏移，请在“状态”面板中选定“Pressed”状态，然后在“属性”面板的“转换”类别中将“X”和“Y”设置为 1 。单击“Base”以结束状态的记录。
在“状态”面板中，单击“Normal”。单击“添加过渡”，然后单击“从 Normal 到 MouseOver”。将“过渡持续时间”设置为 0.2 。单击“Base”以结束状态的记录。
在“对象和时间线”面板中单击“返回到范围”，返回到 Slider 控件 [“SliderStyle1(Slider 模板)”] 的模板编辑模式。
在“对象和时间线”面板中，单击“HorizontalThumb”。在“属性”面板的“布局”类别中，在“Margin”的旁边单击“高级选项”，然后单击“重置”。
在“对象和时间线”面板中，单击“HorizontalTemplate”。在“部件”面板中，双击“HorizontalTrackLargeChangeDecreaseRepeatButton”，以创建该部件并使其成为“HorizontalTemplate”的子项。在“属性”面板的“外观”类别中，将“Opacity”设置为 0 。
在“对象和时间线”面板中，单击“HorizontalTemplate”。在“部件”面板中，双击“HorizontalTrackLargeChangeIncreaseRepeatButton”，以创建该部件并使其成为“HorizontalTemplate”的子项。在“属性”面板的“外观”类别中，将“Opacity”设置为 0 。
对于列 0 和 1，单击“星形”图标两次，直到出现自动图标为止。对于列 2，确保出现“星形”图标。单击中间的列分隔线，然后在“属性”面板中单击“显示高级属性”。在“MinHeight”值的右侧，单击“高级选项”，然后单击“重置”。
在“对象和时间线”面板中，单击“HorizontalTemplate”。在“状态”面板中，单击“Disabled”。在“属性”面板的“外观”类别中，将“Opacity”设置为 50 。
按 Ctrl+Shift+B 生成项目。生成项目后，按 F5 运行项目，然后测试滚动条。

注意：
编号从 0 开始，因此这 3 列的编号是 0 到 2。

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

引用

您可以在 MSDN 上的 Silverlight Control Gallery Ee371160.xtlink_newWindow(zh-cn,Expression.40).png （Silverlight 控件库）中找到关于 Silverlight Slider 控件的属性和事件的详细信息。

另请参阅

任务

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

概念

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

Last updated on 2017-10-11

通过