Silverlight 4 PathListBox 控件入门指南 (第一部分)

下载

• 下载 PathListBoxDemo.zip - 487.87 KB
• 下载 PathListBoxDemo.zip - 外部源

引言

您是否听说过 Silverlight 4 中引入的 Expression Blend 4 命名空间中的 PathListBox？是的，它是“http://schemas.microsoft.com/expression/2010/controls”命名空间中新增的一个控件。您可以使用它以单个或多个路径控件的方式来定位您的数据、文本、图像或其他控件。您可以使用锯齿状路径来设置您的内容，也可以使用圆形或矩形路径来组织您的内容。 

在本文中，我将指导您了解此控件的功能。此外，我将逐步指导您创建第一个 PathListBox 控件演示应用程序。在这里，我们将创建上述两个示例，其中文本集合将把它们定位在圆形路径边缘的适当位置。 

请阅读完整的帖子以了解它，并在最后，如果您有任何疑问或评论，请告诉我。我会尽快回答您的问题。 

什么是 PathListBox 控件

PathListBox 是 Expression Blend 4 SDK 中包含的一个新控件，它基于 ListBox 的原始功能，显示多个项目和项目选择，并增加了启用基于路径布局的新功能。PathListBox 通过属性和自定义子容器控件 PathListBoxItem 提供了许多自定义区域。

您可以从 Microsoft 网站阅读有关此控件的更多信息。单击下面的链接以阅读更多相关内容

• PathListBox 简介 

创建您的 Silverlight 项目

在开始讨论之前，我们需要先创建 Silverlight 项目。请确保您使用的是 Silverlight 4。您需要安装 Visual Studio 2010 和/或 Expression Blend 4 进行开发。这里我只使用 Expression Blend，因此，如果您在开发机上安装了它，那么我们就准备好了。

让我们开始开发项目。打开 Expression Blend 4，然后从“文件”菜单中选择“新建项目”。

1. 从左侧窗格中选择“Silverlight”。
2. 现在，从右侧窗格中选择“Silverlight 应用程序 + 网站”（如上屏幕截图所示）。我们需要将 Silverlight 应用程序托管在一个网页中，因此我们创建了一个网站项目。
3. 为您的项目命名。我使用了“PathListBoxDemo”作为我的解决方案名称。
4. 单击“浏览”以设置解决方案的位置。
5. 点击“确定”继续。这将从默认模板创建您的 Silverlight 项目。

创建第一个 PathListBox 控件

项目创建完成后，默认页面名为“MainPage.xaml”，请打开该文件，使用 PathListBox 控件进行设计。请按照屏幕截图中的以下步骤操作： 

1. 单击“Assets”（资源）选项卡以打开控件库。
2. 从左侧面板点击“Controls”（控件），这将显示 Silverlight 应用程序可用的所有控件。
3. 从右侧面板搜索“PathListBox”。点击以选择。
4. 选定的 PathListBox 控件将添加到您最近选择的面板中。
5. 双击最近选择的面板（步骤 4 中所示），该控件将添加到您的 LayoutRoot Grid 面板中。
6. 您可以看到 PathListBox 已添加到您的页面，将其命名为“pathListBox”。不用担心尺寸。您也可以将其设置为零，因为我们不需要它。现在，保持不变。

创建圆形路径

将 PathListBox 控件添加到页面后，就该为我们的应用程序添加一个圆形路径控件了。要在 XAML 页面中创建圆形路径，请在您的 Expression Blend IDE 中执行以下步骤：

1. 如上屏幕截图所示，从 Expression Blend 的工具箱中选择“Ellipse”（椭圆）控件。
2. 将其添加到名为“LayoutRoot”的网格控件中。确保它已添加到 PathListBox 的后面。
3. 调整“Ellipse”控件的大小，使其成为一个完美的圆形。

现在，对您的圆形路径进行一些样式设置。我使用了渐变填充颜色和渐变描边颜色。步骤在以下快照中给出： 

样式设置完成后，我们可以将“Ellipse”控件转换为 Path 控件。由于 PathListBox 控件需要一个 Path 来定位内容，因此将其转换为 Path 控件。在图层资源管理器中右键单击您的“Ellipse”控件（如以下快照所示），然后在右键单击上下文菜单中选择“Path”，然后点击“Convert to Path”（转换为路径）。这将把椭圆更改为路径控件。 

将路径绑定到 PathListBox

现在是时候将新添加的 Path 绑定到 PathListBox 了。您可以将多个路径作为 LayoutPaths 绑定到您的 PathListBox。从图层面板中选择名为“pathListBox”的 PathListBox 控件，然后打开所选控件的属性面板。展开名为“Layout Paths”的属性组。有一个圆形项目，如以下图片所示。点击它并拖动到下一个快照中显示的圆形路径。 

1. 一旦拖到我们的圆形路径上，它就会显示一条消息“[Path] 将重命名为 ‘path’” 。是的，由于我们的路径控件没有任何名称，因此 Blend 将为其提供一个默认名称。
2. 放置后，它将在 LayoutPaths 部分添加一个名为“path”（刚刚重命名的）的路径控件。您可以在此步骤中添加任意数量的路径，也可以删除任何现有路径。

如果打开您的 XAML 页面，您将在页面中看到以下 XAML 代码片段： 

让我为您解释 XAML 代码。在这里，您将看到 PathListBox 控件，它在 LayoutPaths 集合中包含一个 LayoutPath。您可以在此处添加任意数量的 LayoutPath。LayoutPath 已绑定到名为“path”的元素，即我们的圆形路径。

您可以在此处使用 Padding 来设置每个项目之间的增量值。稍后在绑定内容并演示代码时，我将讨论这一点。

您可能会问我一个问题：“PathListBox 中提到的 ec 命名空间是什么？” PathListBox 控件不是默认库的一部分。它在 Expression controls 命名空间中。查看以下代码以查看完整的命名空间： 

处理代码

到目前为止，我们的 UI 设计已经完成。现在，是时候在代码隐藏中创建一些数据记录并将其相应地绑定到 PathListBox 控件的 ItemSource 了。打开您的 MainPage.xaml.cs 文件，并在其中创建一个字符串列表集合。我在这里使用一年的 12 个月。现在将创建的列表集合设置到 pathListBox 的 ItemSource。

在此处查看代码片段： 

应用程序演示

是时候演示我们的应用程序了。生成项目，然后在 IDE（Visual Studio 2010 或 Expression Blend 4）中按“F5”运行它。您会发现 Silverlight 应用程序已加载到您的浏览器窗口中。您会注意到，月份集合已加载到 Silverlight 应用程序中，方向与圆形路径相同。每个项目之间的间隔相同。这正是您的填充值。如果增加填充值，您将看到项目之间的间隔比以前更大，反之，项目会更靠近。

请看下面的屏幕截图： 

 

到目前为止，我们的第一个示例已准备就绪。现在，您可能会遇到一种情况，即单词中的每个字符都将以与圆形路径相同的方向放置。那么，我的问题是：我们能做到吗？是的，我们可以。我们可以更改 PathListBox 的方向。方向的默认值为 none。我们还有另一种方向，称为“OrientToPath”。设置后，它会将项目重新定位到路径的边缘。 

因此，请再次打开您的 Expression Blend，然后转到 PathListBox 控件的“Properties”（属性）面板。在 LayoutPaths 选项卡中，您可以看到一个名为“Orientation”（方向）的属性（请参见下面的屏幕截图）。点击第二个方向，称为“OrientToPath”。 

现在再次运行您的应用程序，您会注意到月份的方向已更改为您的圆形路径的方向。请看下面的屏幕截图： 

结束语

那么，这个 PathListBox 控件有什么好处呢？我认为，答案对您来说很清楚。让我从我的角度来解释一下好处。您可以以圆形方式或任何您想要的方式随机动画化任何控件或文本。您可以使用此控件为您的业务应用程序为客户旋转一些广告。您可以使用它轻松创建加载控件。您不必为您的圆形加载器编写更多逻辑，就像 Silverlight 应用程序加载时（XAP 下载期间）那样。您甚至可以根据您的需求做更多的事情。 

本文是一篇基础性文章，旨在向您展示 PathListBox 控件，主要面向刚接触 Silverlight 或 Silverlight 4 的初学者。本文也有助于那些不了解此控件或未探索此控件强大功能的人。请在您的网站上尝试一下，如果您有任何疑问，请告诉我。我会尽快回答您的问题。别忘了在此处留下您的评论。通过这种方式，我可以改进我未来的文章，并为您提供更多 Silverlight 教程。