演练：设计一个屏幕

本演练演示如何使用 LightSwitch 屏幕设计器来创建屏幕，以显示 Northwind 示例数据库的客户数据。该屏幕设计器是可用于修改屏幕外观的可视化设计画布。

本演练显示如何执行以下任务：

• 创建屏幕

• 更改屏幕的布局

• 从屏幕中删除字段

• 更改项目的顺序

• 更改项目的显示名称

• 更改项目的控件类型

• 在运行的应用程序中自定义屏幕

系统必备

本演练假设 Northwind 示例数据库已安装在计算机上，并且已添加为项目中的数据源。

• 有关如何安装 Northwind 示例数据库的信息，请参见 安装 Northwind 示例数据库。

• 有关如何将 Northwind 示例数据库添加为项目中的数据源的信息，请参见 连接到数据。

创建屏幕

本节演示如何创建屏幕来显示 Northwind 示例数据库的客户服务。此屏幕分为两部分。第一部分显示所有客户的摘要列表；其他部分显示有关选中的客户的详细信息。.

创建屏幕

1. 在**“解决方案资源管理器”中，选择“屏幕”**。

2. 在“项目”菜单上，单击“添加屏幕”。

   此时将出现“添加新屏幕”对话框。

3. 在**“添加新屏幕”对话框中，在“选择屏幕模板”下，选择“列表和详细信息屏幕”**。

4. 在**“屏幕名称”下，键入“客户”**。

5. 在**“屏幕数据”**下方的下拉列表中，选择 <DataSourceName>.Customers。

6. 在**“要包括的其他数据”下，选择“客户详细信息”和“客户订单”**。

   这会将**“客户”**实体的字段以及由此客户安排的顺序列表一起添加到该屏幕的详细信息部分。

   下面的插图显示在此部分执行这些步骤后如何显示对话框。

   

7. 单击“确定”以创建屏幕。

   将出现**“屏幕设计器”**。

更改屏幕的布局

**“列表和详细信息”**屏幕具有两列。左列是客户列表。右列包含两行。顶行包含所选客户的详细信息，底行包含与所选客户相关的订单。该屏幕设计器的屏幕内容树演示如何组成本列表。

本部分显示如何修改的屏幕布局，以便屏幕包含两行，而不是两列。顶行将包含客户列表。底行将包含两列。左列将包含所选客户的详细信息，右列将包含与所选客户相关的订单。

更改列表的布局

1. 在**“屏幕设计器”的“屏幕内容树”中，将“客户”节点的布局从“列布局”更改为“行布局”。为此，单击出现在“客户”节点旁边的向下箭头。然后，从下拉列表中，单击“行布局”**。

2. 将**“详细信息列”的布局由“行布局”更改为“列布局”。为此，单击出现在“详细信息列”节点旁边的向下箭头，然后单击“列布局”**。

从屏幕中删除字段

默认情况下，屏幕上显示客户详细信息的区域（名为**“详细信息列”）会显示数据源的所有字段。如果不希望所有字段都出现，则可以删除不希望出现的字段。例如，下面的步骤演示如何删除“国家/地区”**字段。

从屏幕中删除字段

1. 在**“屏幕内容树”中，展开“客户详细信息”**节点（如果尚未展开）。

2. 单击**“国家/地区”字段，然后在“屏幕设计器”的命令栏中，单击“删除”**。

更改字段的顺序

下面的步骤演示如何更改字段的显示顺序，例如 CustomerID 字段和 Postal Code 字段。

更改字段的顺序

1. 在**“屏幕内容树”中，展开“客户详细信息”**节点（如果尚未展开）。

2. 若要将**“CustomerID”字段移动到详细信息列的底部，将其拖到“传真”**字段下。

3. 若要将**“邮政编码”字段移动到“客户 ID”的正下方，将其拖到“传真”字段和“CustomerID”**字段之间。

更改字段的控件类型

您可以自定义如何向用户显示字段。例如，可以将文本字段设为显示为 TextBox 或 Label。下面的步骤演示如何将显示字段更改为 Label 字段，从而使该用户无法修改该字段的值。

更改字段的控制类型

1. 在**“屏幕内容树”中，展开“客户详细信息”**节点（如果尚未展开）。

2. 选择**“客户 ID”字段，然后在下拉列表中，选择“标签”**。

   您可以重复本步骤以更改其他字段。

3. 若要测试所做的更改，按 F5 运行该应用程序。

在运行的应用程序中自定义屏幕

您还可以在应用程序运行时自定义屏幕。例如，可以删除字段、更改字段的顺序，也可以更改属性，如控件类型或标签对齐。

在运行的应用程序中自定义屏幕

1. 如果应用程序尚未运行，按 F5，以启动该应用程序。

2. 在该屏幕的命令栏中，单击**“设计屏幕”**。

3. 在**“自定义模式”屏幕中，将“客户 ID”字段从详细信息列中删除，具体操作为：在“客户详细信息”**节点中选择该字段，然后单击“删除 ()”按钮。

4. 移动**“邮政编码”下的“传真”字段，具体操作为：在“客户详细信息”**节点中选择该字段，然后单击“下移 ()”按钮。

5. 将**“电话”字段的名称更改为“电话号码”，具体操作为：在“客户详细信息”节点中选择该字段，然后在“属性”窗口中，将“显示名称”属性值更改为“电话号码”**。

6. 将**“电话号码”字段的显示类型更改为 Label，具体操作为：选择“客户详细信息”节点，然后在“属性”窗口，单击“控件类型”属性并选择“标签”**值。

7. 更改该详细信息列中的标签的对齐。选择**“客户详细信息”节点中的第一个字段，在这种情况下，为“公司名称”字段。在“属性”窗口中，单击“标签位置”属性并选择“右对齐”值。对“客户详细信息”**节点中的所有字段重复本步骤。

8. 若要保存更改，请单击**“保存”**。您的应用程序此时会显示您刚做的更改。

后续步骤

默认情况下，当您为屏幕选择数据源时，该源中的所有数据都会显示。如果只希望显示该数据的子集，则可创建查询来定义要显示的数据。有关更多信息，请参见 如何：使用查询设计器设计查询。

请参见

其他资源

屏幕：应用程序的用户界面