使用 Expression Blend 进行 Silverlight 定制滚动

引言

在某些情况下，我们需要根据需求自定义 Silverlight 中的滚动功能。ScrollViewer 的默认外观无法提供良好的 UI 效果。在这种情况下，您需要通过修改 XAML 和编写大量 C# 代码来创建整个滚动行为。

在本文中，我将演示如何通过 Expression Blend 轻松地创建上述滚动功能，而无需编写任何 C# 代码。您只需要使用 Expression Blend 来创建丰富的滚动效果。请继续阅读以了解更多信息。

背景

在各种情况下，根据您的 Silverlight 应用程序 UI 的用户体验，您可能需要像上图所示那样自定义水平或垂直滚动功能。几年前，当我还在使用 Silverlight 2 Beta 1 时，我也遇到了同样的情况，并编写了自己的逻辑来实现。我声明了一些成员变量来存储当前位置、视图状态等，这确实非常难以实现。
最近，我想实现相同的 UI 功能，但发现再次实现起来非常困难。它需要考虑算法，需要在 xaml.cs 中编写代码，在开发过程中需要进行充分测试，并且在集成到任何应用程序之前都需要进行彻底测试。

我在互联网上搜索，找到了一些很好的主题，但它们都零散地描述了相同的逻辑。我需要编写一些代码来实现。哦，不！我不想再经历一次。那么，如何实现呢？我突然有了一个想法。我能使用默认的 Scroll Viewer 来实现吗？我能只通过修改它的模板来实现吗？我不能完全确定，但我想尝试一下。让我们看看我能做什么。最终，我提出了我的设计，它只是使用了 Expression Blend，没有编写任何 C# 代码。

在本文中，我将为您一步一步地演示，以便您能够轻松理解。文章篇幅很长，但如果您遵循所有步骤，您会很容易理解。是的，有大量的截图可以帮助您轻松理解。

第一部分：创建基本 UI

在开始任何工作之前，我们需要为我们的示例应用程序创建基本 UI。首先，让我们创建一个 Silverlight 应用程序。如前所述，我们将使用 Expression Blend 来完成。因此，请打开您的 Expression Blend。现在创建一个新项目。您可以在“Silverlight 应用程序”网站和“Silverlight 应用程序”之间进行选择。为您的项目命名，然后单击“OK”继续。

这将为您创建 Silverlight 项目。打开您的 MainPage.xaml 文件。现在，从工具面板中选择 ListBox 控件。

在您的 MainPage.xaml UI 中绘制一个 ListBox 。暂时绘制一个更宽的 ListBox 控件。完成我们设计模板后，我们会稍后调整它的大小。

从“对象和时间线”面板中，选择 ListBox 控件。现在从工具箱中，在 ListBox 内部添加一些 TextBlocks。更改每个 TextBlock 的内容为不同的文本。这样可以更容易地区分各个项。

完成后，您的默认 ListBox 将如下所示：

这是 Silverlight 中 ListBox 控件的默认外观。现在我们的目标将是更改 ListBox 的样式以实现我们的目标。

第二部分：修改 ListBox 模板

让我们开始修改模板。转到您的“对象和时间线”，右键单击 ListBox –> 编辑模板 –> 编辑副本…

在下一个对话框中，为样式命名。选择存储样式的位置，然后单击 OK。

这将创建模板并将其打开到“对象和时间线”面板中。您会在其中看到一个 ScrollViewer。选择 ScrollViewer，然后转到“属性”面板。在“布局”下，单击小箭头以正确展开面板。在展开的“布局”部分下，找到名为 HorizontalScrollBarVisibility 的属性并将其设置为“可见”。就在其下方，您会找到另一个名为 VerticalScrollBarVisibility 的属性。将其设置为“禁用”或“隐藏”。

第三部分：修改 ScrollViewer 模板

现在，对 ScrollViewer 执行相同的步骤来编辑其模板。右键单击它，然后转到“编辑模板” –> “编辑副本…”

在屏幕上出现的以下对话框中为样式输入一个合适的名称，然后单击“OK”。

您将在“对象和时间线”面板中看到以下模板：

删除名为“VerticalScrollBar”的控件，因为在我们的场景中不需要它。我们将创建一个水平滚动功能。因此，最好删除它。

现在，选择 Grid 并展开您的 XAML 代码。您将找到以下代码。删除突出显示的文本，即删除 Grid 的列和行定义。我们不需要它们。

删除 Grid 的行和列后，再次回到设计模式。哦，对了，选择 Rectangle 并删除它。

第四部分：修改 HorizontalScrollBar 模板

现在您将有一个更简洁的 ScrollViewer 模板，如下所示：

右键单击 HorizontalScrollBar 并选择“编辑模板” –> “编辑副本…”为其也执行此操作。为样式命名，然后单击“OK”。

这将会在您的“对象和时间线”面板中打开 ScrollBar 模板（如下所示）。选择并删除名为“HorizontalRoot”的 Grid。因为我们正在创建水平滚动体验，所以我们不需要它。

展开“HorizontalRoot” Grid。在 Grid 中，您会找到许多 Rectangles 和 Repeat Buttons。选择所有 Rectangle 控件并按 Delete。这将从模板中删除这些矩形。如图所示，选择“HorizontalLargeDecrease”、“HorizontalThumb”和“HorizontalLargeIncrease” Repeat Buttons 并按 Delete 将它们删除。

现在您将拥有一个干净的 HorizontalScrollBar 模板。在右侧面板中，UI 现在看起来不太好。您可以看到滚动按钮（箭头）定位不正确。现在是时候修改它们了。

第五部分：修改滚动箭头模板

单击“HorizontalSmallDecrease”按钮，然后在属性面板中将其左边距设置为“-30”（如下图所示）。

同样，将“HorizontalSmallIncrease”按钮的右边距设置为“-30”，如下所示：

现在您可以看到更好的 UI。在此处查看其效果：

让我们修改滚动箭头。我们将调整它们的大小，使其更大，并且还将为它们添加悬停颜色。为此，首先从 HorizontalSmallDecrease Repeat Button 开始。右键单击它，如下所示，然后转到“编辑模板” –> “编辑当前”。

在“水平递减模板”中，您将看到各种 Rectangles，如下面的屏幕截图所示。选择所有 Rectangles 并删除它们。在我们的场景中不需要它们。

现在，从左侧面板转到“状态”选项卡，然后从 CommonStates 中单击“MouseOver”状态。这将开始记录 MouseOver 状态。单击路径控件并将其 **Fill** 颜色更改为红色。这将确保当您将鼠标悬停在箭头图标上时，其默认颜色将变为红色。

返回父模板，并对 HorizontalSmallIncrease 按钮也执行相同的操作。两个按钮都应该具有相同的行为，否则它们看起来会很奇怪。

完成编辑两个 Repeat Button 样式后，选择它们，然后更改它们的尺寸。在我们的示例中，我们使用 Width = 16 和 Height = Auto。

现在单击小箭头，将模板范围返回到原始 UI 页面。按 I 多次，进入带有 ListBox 的主 UI。

第六部分：修改 ItemsPanel 模板

我们的 UI 已经准备好了，嘿，在我们的例子中，ListItems 是垂直定位的，但我们创建了水平滚动。为了保持一致，我们需要更改项目面板的设计。它实际上使用了 StackPanel。我们只需要将其方向设置为水平。

为此，右键单击 ListBox ，然后转到“编辑其他模板” –> “编辑项布局 (ItemsPanel)” –> “创建空”。请参阅下面的图以获取更多详细信息：

这将弹出与之前相同的对话框，您将在其中为 Item Panel Template 输入一个合适的名称。单击“OK”继续。

这将在“对象和时间线”面板中显示模板内容。单击 StackPanel 并将其 **Orientation** 更改为 **Horizontal**。您可以在属性面板中找到它。

现在再次回到主 UI，在设计视图中查看当前的可视化效果。哦，这接近我们预期的设计。唯一的问题是这个 ListBox 在底部有一些空白。让我们修改一下。嘿，这很难吗？我认为不。您可以轻松做到。

好的，我也会向您展示。单击 ListBox ，然后在设计视图中将 ListBox UI 调整得更小，如下所示：

请确保只有部分项可见。否则，您的滚动将无法工作。现在是时候为它编写一些代码了。 困惑吗？不，别担心，我们不会编写任何滚动代码，因为我们使用了默认的 ScrollViewer 并根据我们的需求修改了它的模板。

演示

现在让我们运行应用程序。您将在浏览器中看到下面带有自定义滚动功能的 ListBox ：

在这里，您将只看到 4 个项目，因为我们将其调整得那样。现在，将鼠标悬停在项目上。您将看到项目悬停和项目选择。它们是默认行为。如果您愿意，也可以更改它们。

现在，将鼠标悬停在滚动箭头上。您将看到它填充了红色。单击右侧的滚动箭头。您将看到滚动正在进行。

哦，项目正在从右向左滚动。这种行为是默认的，就像使用普通 ScrollViewer 一样。所以，无需再对此进行解释。

向左和向右滚动即可实时查看。目前，我们的设计已经完成。

结束语

我希望这能让您更好地了解如何根据您的 UI 需求来自定义滚动功能。在这里，我们为水平滚动实现了它。如果需要，您也可以用类似的方式实现垂直滚动。

如果您有更好的方法来实现这一点，我非常乐意接受任何建议。我一直非常感谢您的反馈。感谢阅读本文。祝您一切顺利！

历史

• 2010 年 11 月 13 日：初次发布