ListBox 样式（第 1 部分 - 滚动条）在 Expression Blend 和 Silverlight 中
4.97/5 (45投票s)
如何对一个比简单按钮更复杂的控件进行样式设置，从滚动条开始！
引言
欢迎阅读我的第五个 Expression Blend 和 Silverlight 初学者教程。
这次，我们将重点关注 滚动条，它是复杂且嵌套的 控件（如 ListBox）的核心组件。
我在此系列教程中的目的是制作一个漂亮的/样式化的 ListBox，以便我们可以开始考虑对整个应用程序进行 样式设置。它不会是一个非常复杂的应用程序，因为它将基于 Defwebserver 的 MVVM 文件管理器 CodeProject 文章，他还在他的博客上进行了扩展：启用设计时数据
那么，这会多难呢？一点也不难，只要我们记住像 ListBox 这样的东西不仅仅是一个单一的东西。它有多个组件，或者说 部件！
例如，ListBox 的 模板（控件模板）由多个元素和一个以 ScrollViewer 形式存在的“控件部件”组成。
控件部件 由“眼睛”符号旁边的小图标表示。-（不确定它代表什么？）
基本上，ScrollViewer “控制” ListBox 控件的这一部分的 模板（即整体基本外观）。此 控件 有多个 模板，但我们稍后会讨论。首先，让我们探索这个 ScrollViewer 控件部件，因为如果我们深入研究，还有更多内容可看。如果我们查看 ScrollViewer 模板 内部，我们会发现 3 个更多的 控件部件：ScrollContentPresenter、VerticalScrollBar 和 HorizontalScrollBar。
因此，在 ListBox 中，我们有嵌套的 控件，并且正在从多个更简单的 控件 构建一个复杂的 控件。您可以通过将所有这些 控件 视为独立的 资产 来证明这一点。我认为这些名称是不言自明的，并且显而易见的是：滚动条 驱动着 内容 窗格的滚动功能。现在，内容 窗格没有当前 内容，这是因为 ContentPresenter 是一个占位符，它没有自己的实际内容。此控件的“内容”由 ListBox 控件 的另一个区域控制/格式化。这就是事情变得更复杂的地方，但请记住，这些 附加模板 基本上描述了 生成项目（数据/内容）的 外观 和 布局。
现在我不想贸然进入这些 附加模板 并增加复杂性，因为在获得一些内容之前我们甚至无法看到它！所以，我想先看看 ScrollViewer 模板 中的 滚动条。正如我们所见，这些以及几乎所有复杂的 控件 都有一个 滚动条。所以我想我们应该从它们开始，因为它们非常重要……
再次强调，在开始本教程之前，我建议您阅读我以前的 CodeProject 教程。
我将它们写成一个系列，因此，本教程将假定您具有先验知识。
- 第一课 - "构建更佳按钮"（入门指南）
- 第 2 课 -“街机按钮”（如何控制 控件模板 中元素的位置）
- 第 3 课 -“相框控件”（什么是 控件，为什么要使用它？）
- 第 4 课 - “最后构建按钮”（
WCDoor按钮和所有 10 个按钮可供下载）
滚动条
- 第 1 节 - 页面设置和拇指模板
- 第 2 节 - 应用滚动条样式
- 第 3 节 - 返回垂直滚动条
- 第 4 节 - 仍然是垂直滚动条
- 第 5 节 - 水平滚动条样式设置
- 第 6 节 - 最终调整
- 第 7 节 - 来源（如果我必须的话！:-))
第 1 节 - 页面设置和拇指模板
在 Expression Blend 中启动一个新的 Silverlight 项目（我使用的是 Version 4 Beta），并将其命名为“MVVMListBox”。
从 资产 菜单中，将 ListBox 拖到 画板 中，然后拖出 滚动条，如下图所示
选择 滚动条，然后选择 编辑模板 > 编辑副本。
将此 滚动条样式 命名为“MVVMScrollBarStyle”，然后单击 确定。
在 对象和时间线 中，有一个 HorizontalRoot 和一个 VerticalRoot（我已将其展开）。
我们感兴趣的是 垂直 根，因为这是我们拥有的 滚动条 的方向 （我们正在编辑）。
那么 滚动条 中有什么呢？更多的 控件部件 和 3 个矩形。
我们首先看看 矩形，它们功能的线索在于查看 视觉状态管理器！
（以及使用 眼睛 图标隐藏或取消隐藏元素）
在一个复杂的 控件 中，我们可以在 控件 的多个级别拥有 视觉状态，所以请保持警惕！
现在我为这个应用程序设想的 滚动条 不需要这些 背景 元素。
我希望 滚动条 浮动，这些 矩形 对我们没有任何用处，所以 删除 它们。
选中 VerticalRoot 后，滚动条 及其布局 网格 将如下图所示
现在唯一完全可见的部分是 VerticalThumb 元素，所以让我们从它开始。
选择 VerticalThumb 元素并选择 编辑 模板。（但这次，您可以选择编辑 当前模板）。
这基本上是因为 滚动条 必须有一个 滑块，所以默认情况下会定义或生成一个。
VerticalThumb 不是一个真正的 控件，不能作为 资产 使用，也没有自己的 样式。
但它确实有 视觉状态 可以交互，如下图所示
查看各种 状态，看看哪些状态有 关键帧，如下图所示
还要看看 模板 元素的结构，注意我们有 MouseOver 和 Pressed 元素，它们作为覆盖层。
所以，让我们 删除 ThumbVisual Grid 中的所有元素，从头开始设计一个新的 Thumb。
在 ThumbVisual Grid 中插入一个设置为 拉伸 且 0 边距 的新 矩形，并将其命名为“BGround”。
现在将 填充 模板绑定 到 背景，将 描边 绑定到 边框画刷。
但是，如果此 控件部件 没有自己的 样式，我们刚刚将其 模板绑定 到什么呢？
它已 模板绑定 到其父级的 背景 和 边框画刷 属性。
因此，如果我们要在此 样式 中设置这些颜色，我们还需要将父 控件部件 模板绑定 到 滚动条样式。
结构或层次结构位于 画板 顶部，如下图所示
因此，将 VerticalThumb 模板绑定 到 滚动条 样式，并在 样式 中为 背景 和 边框画刷 设置一些 纯色填充 颜色。
返回到 VerticalThumb 模板 中的 BGround 元素，并将 矩形 的角 半径 的 X 和 Y 都设置为 4。
现在复制 矩形 并将新 矩形 重命名为“Texture”，
移除 描边 和 填充绑定，并将 填充 设置为如下图所示的 线性 渐变
确保 渐变停止点 为白色，并在 功能区 上在 25、50 和 75 处添加 3 个额外的 渐变停止点。
在 功能区 上将 Alpha 值更改为 30%、80%、100%、80% 和 30%，如下图所示
现在将元素 不透明度 设置为 60%，根据您在 滚动条样式 中选择的颜色，您将得到类似下图所示的效果
现在您可能会想，我们可以在 样式 中设置这个渐变，以从 样式 获得更大的灵活性，但这在测试配色方案时会更棘手。
所以，我相信最好将渐变作为叠加层生成，我们仍然可以在一个地方（例如 样式）进行调整。但它将被定义为 资源。
选择 Texture 元素的 填充，在 高级属性 中，选择 转换为新资源，如下图所示
将此新资源命名为“ScrollBarVerticalTexture”并点击 确定。（我们稍后会再次使用此纹理。）
现在选择 Texture 元素并复制它以生成一个新元素，我们将其重命名为 Pressed。
将 Pressed 元素的 填充 设置为 纯黑色，并将元素 不透明度 更改为 0%。
现在在 VSM 中，选择 Pressed 状态，并将 Pressed 元素 不透明度 更改为 20%。
现在转到 MouseOver 状态，并将纹理元素的不透明度更改为 80%。
VerticalThumb 的操作就到此为止！但在我们看到它实际应用之前，让我们将其应用到我们的 ListBox 样式。
第 2 节 - 应用样式
退出 滚动条模板，进入 ListBox 的 模板。
将 ListBox 样式 命名为“ListBoxStyleMVVM”或类似名称。
然后进入 ScrollViewer 模板，将此 样式 命名为“ScrollViewerStyleMVVM”或类似名称。
选择 VerticalScrollBar，选择 编辑模板 > 应用资源 > MVVMScrollBarStyle。
现在对 HorizontalScrollBar 执行相同的操作（稍后会节省时间！）
这并没有对 ListBox 产生任何可见的变化，但这是因为没有什么可显示或 滚动 的……
我本可以强制 滚动条 可见，但 滑块 仍然不可见，因为没有内容！
因此，我们将向 ListBox 注入一些 示例数据 以显示 滚动条。
退出 ListBox 模板，转到 Blend 左上角的 数据 选项卡，如下图所示
创建一个类型为“新建示例数据”的示例数据源，命名为“MVVMSampleData”，然后单击 确定（或保留默认名称...）
这将生成一个垃圾数据的 集合 来填充我们的 ListBox 并显示我们的 滚动条。
所以将 集合 从 数据 选项卡拖到 ListBox 上，如果运气和魔力发挥作用，我们应该得到下图
现在 水平滚动条 看起来不太好，但我们可以在一分钟内解决这个问题。
首先，让我们快速看一下 生成的内容，也就是我们刚刚填充 ListBox 的 示例数据。
所以选择 ListBox 并选择 编辑附加模板 > 编辑生成项目 > 编辑当前。
我们不需要 编辑副本，因为我们在插入 示例数据源 时已经生成了 当前模板。
在 对象和时间线 中，我们应该有一个 StackPanel，如下图所示
在 StackPanel 中布局的是 示例数据，包含一个 TextBlock 和一个 CheckBox。
我们如何查看这些 示例数据 项取决于 StackPanel 及其方向。
所以选择 StackPanel，在 属性 选项卡的 布局 部分，将 对齐方式 更改为 水平，如下图所示
这应该会改变 示例数据 的布局，如下图所示
但它仍然不完全符合我的要求，我更喜欢 CheckBox 排在列表的首位。
你可能会认为我们需要调换 示例数据 来实现这一点。
但是“不”，别傻了！！！- Expression Blend 让它变得容易得多！
我们只需要选择 TextBlock 元素并将其拖到 CheckBox 元素下方，如下图所示
这会重新排列 StackPanel 的结构，并且 CheckBox 成为第一个显示的项目，如下图所示
目前关于 生成项模板 我就说这么多，因为我想完成 滚动条！
到目前为止，您可能已经意识到，我设置了这个 ListBox，旁边有一个我们正在编辑的 滚动条。
（非常类似于我展示如何制作按钮的方式！——原因稍后会提到……）
所以，在我们回到 滚动条模板 之前，让我们在 ListBox 底部设置一个 水平滚动条。
确保您不在任何 模板 中，选择 滚动条控件 并复制它。
调整复制的 滚动条 的大小，并将其放置在 ListBox 下方，如下图所示
（不要旋转它，只需拖动到上图中的形状）。
在 属性 选项卡中，将复制的 滚动条 的 方向 更改为 水平。
这应该有助于整理 滚动条 并使其看起来像 ListBox 滚动条，如下图所示
还是不对，但我们稍后再讨论 水平滚动条，让我们回到完成 垂直滚动条！
第 3 节 - 返回垂直滚动条
再次在 画板 中选择 垂直滚动条 (在 ListBox 的右侧)，然后进入 模板。
这次，我想编辑 VerticalSmallDecrease 并进入此 控件部件 的 模板。
这会显示构成 VerticalSmallDecrease 的元素列表，如下图所示
但目前，我们只能看到 路径 元素，这是由于 VSM（视觉状态管理器）造成的。
使用各种 状态，您会注意到我们有 MouseOver、Pressed 和 Disabled 的 状态。
考虑到这一点，让我们 删除 所有内容并重新开始。
选择 根 并插入一个 矩形，其角 半径 的 X 和 Y 值均为 4。
将 矩形 重命名为“BGround”，并将 填充 和 描边 模板绑定 到父 控件部件。
（请记住，此父 控件部件 现在需要 绑定 到 滚动条模板样式！）
因此，将所有内容链接在一起后，我们应该得到类似下图的效果（取决于您的 样式 颜色）。
（注意我是如何操作 滚动条 的，但 ListBox 会自动更新！） - 我喜欢这样！
所以让我们复制 BGround 元素并设置一个覆盖纹理，就像我们为 Thumb 所做的那样。
将复制的 矩形 重命名为“Texture”，并将 填充 设置为“ScrollBarVerticalTexture”资源，如下图所示
移除 Texture 元素的 描边，复制它 并将其重命名为“Pressed”。
（如果它默认显示为“Pressed1”，请不要担心，Blend 只是认为此 控件部件 中仍然存在同名元素）。
将 填充 设置为黑色，将元素 不透明度 设置为 0%。
现在切换到 Pressed 状态，并将 Pressed 元素 不透明度 设置为 20%。
然后在 MouseOver 状态 下，将 Texture 元素的不透明度更改为 80%。
现在设置了一些基本动画后，我们只需要一个 箭头 和一个 禁用状态。
我们先做 箭头，为了保持简单，我们将使用/修改现有的 箭头。
我们从 VerticalSmallDecrease 中删除了它，但它仍然以 Path 的形式存在于 VerticalSmallIncrease 控件部件 中。
所以将 VerticalSmallIncrease 控件部件 中的 箭头路径 元素复制到 VerticalSmallDecrease 控件部件 中。
将 Path 重命名为“UpArrow”，重置 边距，如果运气好的话，您将得到与下图相同的结果
UpArrow 的方向不对，所以在 Transform 部分，翻转 Y 轴。
现在复制 UpArrow，并将此新元素的 填充 设置为任何其他颜色。（我用了红色。）
再次选择 UpArrow，并将 宽度 和 高度 设置为 自动。
在 画板 中，您应该能看到与下图相同的内容
（请记住，我们正在处理这 2 个 滚动条 中的右侧一个。)
如果您的布局有问题，请检查您的 边距 和 拉伸 设置！
现在选择较小的红色复制 箭头，并将 X 轴的 比例变换 设置为 3。
使用箭头键（边距）将红色 箭头 向下移动，直到它看起来像下图所示
现在按住 Shift 键选择原始的黑色 向上箭头（糕点），然后选择红色的复制 向上箭头（切割器）。
然后从 对象 菜单中，选择 组合 > 减去。
（如果您在 画板 中右键单击执行此步骤，可能会得到不同的结果。）
撤消并重复最后几个步骤，直到您得到类似下图所示的结果
重置 边距，并将 宽度 和 高度 分别更改为 10 和 8 像素。
接下来，将 填充 模板绑定 到父 控件部件边框画刷。（不是 背景 画刷！）
这应该会给我们一个 向上箭头，适用于 滚动条 和 ListBox 滚动条。
它有点粗体，我们可以尝试将其放置在 Texture 元素下方，但这会使其过于模糊。
相反，只需将 UpArrow 元素 不透明度 更改为 75%，以使其柔和一些。
现在我们只需要 Disabled 元素，然后我们就可以完成 VerticalSmallDecrease 控件部件 的工作了。
因此，复制 Pressed 元素并将其重命名为“Disabled”，将 填充 设置为白色，并将元素 不透明度 设置为 0%。
现在在 VSM 中，转到 Disabled 状态，并将元素 不透明度 设置为 70%。
这个 控件部件 就这样了，但我们现在需要对 VerticalSmallIncrease 控件部件 进行同样的操作。
所以仍在 VerticalSmallDecrease 中，将所有 控件部件 元素复制到剪贴板 (Ctrl + C)。
现在转到 VerticalSmallIncrease，删除 所有现有元素，并 粘贴 剪贴板中的元素。
在所有 粘贴 的元素仍被选中的情况下，重置 边距 以确保正确放置。
只选择 UpArrow 元素，将其重命名为“DownArrow”，并 翻转 Y 轴。
这应该使 VerticalSmallIncrease 看起来像下图所示
颜色都不对，因为当前的父 控件部件 没有 模板 绑定到 滚动条样式。
所以退出 控件部件，选择 VerticalSmallIncrease，并 模板绑定 背景 和 边框画刷。
这应该可以解决颜色问题，剩下的唯一问题是 VSM 中的 视觉状态。
（遗憾的是，不能指望 Blend 也复制这些内容……）
因此，根据我们之前使用的设置，为 MouseOver、Pressed 和 Disabled 设置 视觉状态。
同时，为 CommonStates 组的状态更改设置 0.1 秒的 持续时间。
对 VerticalSmallDecrease 和 VerticalThumb 控件部件模板 重复此 持续时间。
运行应用程序 (F5) 并查看您的结果，如下图所示
现在我们已经讨论了 5 个控件部件 中的 3 个，是时候简要提一下另外 2 个控件部件 了。
VerticalLargeDecrease 和 VerticalLargeIncrease 是空的，里面除了一个空白的 Grid 什么都没有。
但这并不意味着不可能有……
这些部分的主要作用是定义 滑块 和 VerticalSmallIncrease/Decrease 之间的间隙。
（这样它就可以接收点击事件，将 滑块 移动一页的长度 - 一个 大幅增加/减少）
第 4 节 - 仍是垂直滚动条
我们现在拥有 滚动条 中所需的所有移动或交互组件。
但是我们可以对其进行更多的 样式设置，使其看起来像是 滑块 在 轨道 上滑动。
所以确保您不在 控件部件模板 中，并选择 VerticalRoot，如下图所示
拖出一个没有圆角 半径 的 矩形，使其填充 滚动条网格 的所有子分区。
将此 矩形 重命名为 BGround，并将 填充 和 描边 模板绑定 到 滚动条样式。
现在将 BGround 矩形 的 边距 设置为 左 和 右 为 5，上 和 下 为 1。
这应该会给您和下图相同的结果，请注意我们正在设计右侧的 滚动条，但将左侧的视为真正的 样式！
（我更感兴趣的是这些 滚动条 在 复杂控件 使用的默认设置下工作，而不是一个超粗的版本！）
（而且 滚动条 通常不像按钮那样进行 缩放 或 增长，所以使用 边距 定义了此 轨道 的宽度/大小）
选择 BGround 矩形，右键单击并选择 分组到 > 网格，并将 网格 重命名为“Rail”。
（聪明的 Blend 将应用于 BGround 矩形 的 边距 应用到 网格）
在 对象和时间线 中，选择 Rail 网格 并将其移到 5 个控件部件 的上方，如下图所示
选择 BGround 元素，复制 它并将其重命名为“Texture”。
重置 描边，将 填充 设置为“ScrollBarVerticalTexture”，并将元素 不透明度 设置为 80%。
现在在 VSM 中切换到 MouseOver 状态，并将 Texture 元素 不透明度 更改为 90%。
为 视觉状态 更改设置 0.1 秒的 持续时间，然后运行您的应用程序！
最后一步是减小 VerticalThumb 控件部件 的大小，我们将通过设置左右两侧 2 的 边距 来实现。
再次运行应用程序，然后将 VerticalThumb 控件部件 的顶部和底部 边距 设置为 2。
再次运行应用程序，你会发现当 滑块 滑到底部时，滚动条 的行为很奇怪。
看看 VerticalSmallIncrease 是如何被向下推动并部分超出画面。
（这是因为我们刚刚设置的顶部和底部 边距 与 滚动条 认为它现在拥有的空间量冲突。）
所以我们不想在 滑块 的顶部和底部使用 边距！（移除它们。）
选择 VerticalSmallDecrease 并将底部 边距 从 1 更改为 3（仅底部），如下图所示。
然后选择 VerticalSmallIncrease，并在此 控件部件 的顶部应用 3 的 边距。
这就是 垂直滚动条 的全部内容，现在我们需要对 水平滚动条 重复所有这些操作……
第 5 节 - 水平滚动条样式设置
完全退出 垂直滚动条，选择 ListBox 下方的 水平滚动条。
进入 模板，展开 HorizontalRoot 和 VerticalRoot，如下图所示
请记住，我们仍在编辑与 垂直滚动条 相同的 滚动条样式！
（请参阅 VerticalRoot 中的 Rail Grid 以证明。）
删除 HorizontalRoot 中的 4 个矩形，以便我们可以重新开始。
从 VerticalRoot 中选择 Rail，并将其 副本 放置在 HorizontalRoot 中。
不用担心更改名称，但将其向上移动列表顺序，如下图所示
画板 中的 滚动条 应如下图所示
拖动 Rail_Copy 网格，使其填充整个 滚动条，然后将左右 边距 设置为 1，将上下 边距 设置为 5。
水平滚动条 现在应该如下图所示
（但渐变方向不对！）
所以选择 HorizontalRoot 中的 Texture 元素，并将 填充 更改为 渐变画刷。
使用 渐变工具，更改方向，如下图所示
如果您像我一样喜欢精确，可以完全按照下图所示设置值
将此 渐变画刷 转换为新 资源，并将其命名为“ScrollBarHorizontalTexture”。
对于 MouseOver 状态，将 Texture 元素的不透明度设置为 90%。
现在转到 VerticalRoot，进入 VerticalSmallDecrease 并 复制 所有元素。
接下来回到 HorizontalRoot 并进入 HorizontalSmallDecrease 控件部件。
删除所有现有元素，并 粘贴 剪贴板中的元素。
重置所有元素的 边距，如果幸运的话，画板 将如下图所示
颜色不对，因为父 控件部件 没有 模板绑定 到 样式，所以现在就做！
接下来选择 UpArrow，将其重命名为“LeftArrow”，重置 应用的 变换（翻转），并将其 旋转 90 度。
LeftArrow 没有居中，这是因为 路径 的 中心点 需要 重置。
（这在我们制作糕点时被弄乱了！）
转到 中心点，将 X 和 Y 的值都设置为 0.5，如下图所示
（这些 中心点 校正也应应用于 垂直向上 和 向下箭头。）
所以尝试从 水平滚动条 的 模板 中编辑 VerticalSmallDecrease，看看会发生什么……
你最终可能会得到类似下图所示的结果
这是因为 Blend 没有任何真实值来确定此 控件部件 的大小，因为它是用于 垂直滚动条 的。
而我们所在的 模板 是用于 水平滚动条 的！
您仍然可以将 中心点 的 X 和 Y 都更改为 0.5，并对 VerticalSmallIncrease 重复此操作。
完成后使用 返回范围 图标，返回到 画板 的正常视图。
转到 水平滚动条模板，进入 HorizontalSmallDecrease 控件部件 并选择 Texture 元素。
现在将 Texture 元素的 填充 更改为 ScrollBarHorizontalTexture 资源。
这应该会纠正渐变使其与 滚动条 对齐，如下图所示
现在我们只需要设置 视觉状态，并重复我们为 垂直滚动条 所做的一切。
所以我将让您完成此操作，完成 HorizontalSmallIncrease 并设置 水平滑块 的大小。
别忘了 视觉状态 和为这些设置 持续时间……
（而且您可能不需要为 HorizontalSmallIncrease 的左侧更改 边距 来分隔 滑块。）
就是这样，您拥有了自己定制的 样式滚动条，几乎可以插入到任何复杂的 控件 中。
第 6 节 - 最终调整（滚动条）
为了完成 ListBox 的 滚动条 部分，让我们转到 ListBox 并对 滚动条 应用一些最终 样式。
所以在 ListBox 的 控件模板 中，选择 ScrollViewer 并进入其 控件模板。
选择 矩形，即 ListBox 右下角的淡蓝色方块，并将其 可见性 设置为 折叠。
现在选择 VerticalScrollBar，将其所有侧面的 边距 更改为 2，然后对 HorizontalScrollBar 执行相同的操作。
查看 滚动条 的 宽度 和 高度，您会发现它们具有固定大小。如果您想更改它们的 宽度，请在此处更改！
（在上图中，我将 滚动条 的 宽度 更改为 22。）
我想这篇 文章/教程 就到此为止了，否则它会变得非常庞大！！！
玩转我们创建的 纹理资源，以制作介绍图中所示的更大胆的 滚动条。
箭头 以及 SmallIncrease/Decrease 也可以通过在 Expression Design 中进行一些努力来修改/更改。
我计划在我的下一篇 文章 中继续这个 ListBox 教程，我将在其中讨论 ListBox 的更多方面，以便我们可以继续对其进行 样式设置！
但是 滚动条 已经从列表中勾掉，并且应该成为每个人 Silverlight 工具箱的有用补充 - 尽情享受吧！
（您可以随意重命名 资源 以满足您的需求，但我会将我的保留原样，直到 第 2 部分。）
关于 控件部件，我最后需要提到的是，它们是预期的，所以不要随意删除或重命名它们。控件部件 可以在 部件 选项卡中看到。
谢谢，请投票！
第 7 节 - 来源
显然，如果您完成本教程，您将学到更多，但对于那些只想即插即用的人，请点击此处。
历史
- 2010年4月14日：初始版本