如何在 LightSwitch 应用程序中集成 Usercontrols？

引言

如果您正在开发 LightSwitch 应用程序，您可能需要使用 UserControl，或者您可能需要使用 Telerik 控件或其他第三方控件。那么，在这种情况下，您将如何在 LightSwitch 应用程序中添加 UserControl？

在本文中，我将演示如何使用 Telerik RadChartControl 将 UserControl 添加到 LightSwitch 应用中。这将为您提供对 RadChartControl 用法的基本理解。

先决条件

要开始 LightSwitch 应用程序开发，您需要 Visual Studio LightSwitch 2011。请记住，这不是免费产品，因此下载的版本将有 30 天的试用期限制，并可以选择再注册 60 天。

如果您不是 MSDN 订阅者，您可以从以下链接下载试用版。在安装之前，请确保阅读同一链接中提到的安装步骤。

• Visual Studio LightSwitch 2011 已发布 - 立即下载最终版本

如果您是 MSDN 订阅者，您可以从 订阅者下载页面 免费下载。在安装此产品之前，请阅读 官方自述文件 中提到的系统要求和其他已知问题。

现在您需要 Telerik RadControls for Silverlight。您可以从以下链接下载试用版。

• 下载 Telerik RadControls for Silverlight (试用版)

开始项目设置

让我们开始创建项目。打开 Visual Studio 2010（希望您的开发环境中已安装先决条件）。转到“文件”并创建“新项目”。如下图所示，选择“LightSwitch”模板。我们将为我们的演示应用程序使用 C# 模板。

为我们的项目输入名称，并根据您的喜好选择位置。点击“确定”继续。这将需要一些时间来创建默认项目。完成后，它将打开启动屏幕。

设置表

完成项目创建后，就可以创建表了。如果您的 SQL Server 中存在任何表，您可以连接到它。在本文中，我们将直接从 IDE 创建自己的表。

如下图所示，点击“创建新表”链接。这将打开设计视图中的表。

为表命名（例如“TaskTable”）并添加适当的列。我们将添加一个名为“Task”的 string，两个名为“Estimate”和“Completed”的 Integer。我们将添加一个名为“Remaining”的计算属性作为列。

看一下我们的数据库表定义。

我们需要为“Remaining”列添加计算过程。为此，请在设计视图中选择列，然后转到“属性”面板。

如下图所示，转到“常规”类别，然后单击“编辑方法”链接。这将打开 IDE 中的代码隐藏（.CS）文件。还会为您生成适当的方法。在其中添加如下所示的代码。

结果将自动添加到“Remaining”列。

创建屏幕

现在是时候创建屏幕了。我们将向我们的应用程序添加一个“可编辑网格屏幕”。在设计模式下打开表，然后单击“屏幕...”按钮以开始屏幕创建过程。或者，您可以右键单击“屏幕”文件夹来开始相同的过程。

这将弹出“添加新屏幕”对话框。从那里，选择“可编辑网格屏幕”。为屏幕命名，并选择屏幕数据为我们的表“TaskTables”。现在点击“确定”继续。

这将把屏幕添加到项目中。屏幕将自动填充正确的网格列。让我们运行项目看看它的效果。这是我们初始屏幕的屏幕截图。

通过在屏幕中的 DataGrid 中输入数据，为表中添加一些默认记录。完成后，单击“保存”将输入记录存储到表中。

这将将输入的值保存在表中。当您稍后返回到此应用程序时，您将在屏幕上看到相同的值。希望这为您提供了屏幕创建的基本理解。

集成步骤

现在，我们将讨论 Telerik Chart 控件在 LightSwitch 应用程序中的集成。这不仅有助于您集成 Telerik 控件，还有助于您将自己的 UserControl 添加到屏幕中。

希望您已经从 Telerik 网站下载了 Telerik RadControl for Silverlight (试用版)。将其安装在您的系统上。我们现在需要这个库。

添加 Telerik 程序集引用

现在我们需要将 Telerik RadControls 的所需程序集添加到我们的项目中。首先，转到解决方案资源管理器，单击小的视图图标，然后选择文件视图。默认视图是逻辑视图，您可以在其中看到屏幕和表。更改为文件视图后，您将看到解决方案中的各种项目，如下图所示。

如上所示，单击“显示所有文件”图标以显示主项目下的隐藏项目。完成此步骤后，将以下三个程序集引用添加到名为“Client”和“ClientGenerated”的项目中。

• Telerik.Windows.Controls.dll
• Telerik.Windows.Controls.Charting.dll
• Telerik.Windows.Data.dll

我们应用程序需要上述 DLL 才能集成我们在此处要演示的 Telerik Chart Controls。

添加图表控件

现在是时候将图表控件添加到 LightSwitch UI 了。为此，我们将采用不同的方法。我们不会直接添加控件，而是将在 Client 项目中创建一个 UserControl ，并将图表添加在该 UserControl 内部。首先，在 Client 项目中创建一个名为“UserControls”的文件夹，并添加 UserControl。

现在我们将在 UserControl XAML 中添加 xmlns 命名空间（为方便起见，我们将 UserControl 命名为“TaskDashboardChart”）并修改 XAML 以在 LayoutRoot 中添加控件。以下是修改后的代码。

<UserControl x:Class="LightSwitchApplication.UserControls.TaskDashboardChart"
    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"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d" Width="300" Height="250">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadChart>
            <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping LegendLabel="Task Dashboard" 
                                       ItemsSource="{Binding Screen.TaskTables}">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:LineSeriesDefinition ShowItemLabels="True" 
                                                      ShowPointMarks="False" 
                                                      ShowItemToolTips="True" />
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping DataPointMember="YValue" 
                                             FieldName="Completed" />
                        <telerik:ItemMapping DataPointMember="XValue"
                                             FieldName="Id" />
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
        </telerik:RadChart>
    </Grid>
</UserControl>

让我们构建项目以查找任何错误，并根据需要解决这些问题。

将 UserControl 添加到 LightSwitch 屏幕

现在，我们的 UserControl 已准备好包含图表控件。现在我们需要将 UserControl 添加到屏幕。在设计视图中打开屏幕。如下图所示，单击“行布局”-> 从“添加布局项”下拉菜单中，选择“自定义控件”菜单项。

这将打开一个名为“添加自定义控件”的对话框。浏览到正确的程序集并选择 UserControl （在我们的例子中是 TaskDashboardChart）。现在点击“确定”继续。

这将按如下所示将控件添加到屏幕中。

这样就完成了 Telerik Chart 集成的结尾。根据您的需要适当地放置控件在 UI 中。

实际演示

构建项目并运行应用程序。如果您按照正确的步骤操作，您将看到如下所示的屏幕。

图表控件的所有数据最初都设置为零，因为我们将其与表的“Completed”列关联，其中所有完成的字段值为零。让我们尝试逐一修改这些值。

您现在会注意到，每当您修改已完成的值时，剩余字段的值都会根据算法自动计算，并且图表控件也会根据列值进行更新。

进行一些修改后，您将看到类似这样的图表。

希望本文能帮助您理解如何在 LightSwitch 屏幕中集成 UserControl ，以及 Telerik 图表控件的集成。别忘了投票以示支持。

历史

• 2011 年 11 月 14 日：初始发布