在 Visual Studio LightSwitch 中使用 Silverlight 饼图

• 下载源代码 - 1.81 MB

引言

通常，您需要提供数据的可视化表示，并且通过图表呈现信息并不罕见。这是非常常见的业务需求。在 Visual Studio LightSwitch 中，没有内置的控件来显示图表，但您可以轻松利用其可扩展性，并使用免费的 Silverlight Toolkit 中的图表控件，该控件在 CodePlex 上可用。在本文中，您将学习如何通过嵌入饼图控件并将其数据绑定到屏幕集合的自定义 Silverlight 控件来扩展 LightSwitch 应用程序。

背景

您需要下载并安装 Silverlight Toolkit 和 Northwind 数据库。Northwind 数据库将用作外部数据源，以减小源代码存档的大小，并且该数据库已包含大量数据。您还需要对 Silverlight 4 有一定的熟悉度，至少要了解 XAML 代码和数据绑定概念。此外，您还需要拥有 Visual Studio 2010 Professional 或更高版本。示例应用程序将显示 Northwind 数据库中的产品列表，并根据产品的单价显示图表。本示例将使用一个实体和一个屏幕；如果您不熟悉 Silverlight，构建本文所述的应用程序需要不到半小时的时间。

LightSwitch

基本上，该应用程序使用自定义控件，这是 LightSwitch 的一个可扩展点。我自行编写了该自定义控件，嵌入了 Silverlight Toolkit 的图表控件。请注意，如果没有 LightSwitch，创建像这样的业务应用程序将需要使用 Silverlight 4（或 WPF）并编写所有基础代码，例如数据访问层、用户界面、数据绑定代码等。使用 LightSwitch 大大提高了我的生产力，并为我节省了大量时间（以及企业资金）。

创建项目

在 Visual Studio 2010 中要做的第一件事是创建一个新的 LightSwitch 项目

新项目准备就绪后，单击“**附加到外部数据源**”。在“**附加数据源向导**”对话框中，首先选择“**数据库**”选项

然后，您将指定 Northwind 的连接信息，之后就可以选择表了。只需选择 `Products` 表即可，这已经足够了

此时，Visual Studio LightSwitch 将生成一个新的 `Product` 实体。将 `Decimal` 类型替换为 `Money` 业务类型，如下图所示

此时您需要一个搜索屏幕，但由于产品列表很长，您可以通过一个排除已停产产品的查询来过滤搜索结果。要实现此目的，请在设计器中单击“**查询**”。将新查询重命名为 `AvailableProducts`，并指定一个 `Where` 条件，如下例所示

现在单击“**添加屏幕**”，然后添加一个类型为“搜索屏幕”的新屏幕，该屏幕指向该查询

接下来，您将实现一个自定义 Silverlight 控件，该控件根据产品列表绘制饼图，稍后您将把该控件嵌入到搜索屏幕中。

创建自定义 Silverlight 控件以显示图表

选择“**文件**”、“**添加**”、“**新建项目**”，然后向解决方案添加一个类型为“**Silverlight 类库**”的新项目。新项目准备就绪后，删除默认代码文件（Class1.vb），然后添加一个类型为“**Silverlight 用户控件**”的新项，并将其命名为 `ProductsChartControl`。

此时，您需要添加一个对名为 `System.Windows.Controls.Toolkit.dll` 的程序集的引用，该程序集位于磁盘上 Silverlight Toolkit 的文件夹下。现在的目标是实现一个自定义控件，该控件根据产品名称和单价显示饼图。以下代码演示了如何实现这样一个自定义控件

<UserControl x:Class="ProductsChart.ProductsChartControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="420" Height="340"
    d:DesignHeight="300" d:DesignWidth="400" 
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">

    <Grid x:Name="LayoutRoot" Background="White">
        <toolkit:Chart x:Name="unitsInStockChart" Background="LightBlue" 
		BorderBrush="Green" BorderThickness="2"                        
                       Title="Situation of products in stock" Grid.Column="0" >
            <toolkit:Chart.Series>
                <toolkit:PieSeries Name="PieSeries1" 
		ItemsSource="{Binding Screen.AvailableProducts}" 
		IsSelectionEnabled="False"                           
              	IndependentValueBinding="{Binding ProductName}" 
		DependentValueBinding="{Binding UnitPrice}" />
            </toolkit:Chart.Series>
        </toolkit:Chart>
    </Grid>
</UserControl>

基本上，工具包中的 `Chart` 控件就像一个图表绘图的容器。`PieSeries` 控件将与屏幕集合进行数据绑定（`ItemsSource`）；`IndependentValueBinding` 属性代表您将在图表的 X 轴上看到的内容，而 `DependentValueBinding` 代表您将在 Y 轴上看到的内容。此时，只需编译项目即可。

在 LightSwitch 中使用自定义控件

在解决方案资源管理器中，双击之前添加的搜索屏幕，以便在屏幕设计器中打开它。展开设计器底部的“添加”下拉框，然后选择“**新建自定义控件**”

此时，您将需要先添加对类库项目的引用，然后选择之前创建的 `ProductsChartControl`

您会注意到它位于屏幕控件树的底部；您可以选择在属性窗口中删除控件标签。

测试应用程序

现在您可以按 F5 运行应用程序。数据加载后，图表控件也会根据之前指定的数据绑定属性进行填充

关注点

Visual Studio LightSwitch 中的可扩展性允许为应用程序添加有趣的功能和行为，即使某些功能或控件并非开箱即用。Silverlight Toolkit 提供了许多免费、可重用的控件，可以轻松地嵌入到 LightSwitch 应用程序中，并在数据可视化方面增加特殊效果。

历史

• 2011 年 10 月 27 日：首次发布