VS LightSwitch界面控制界面(Screen)布局的技巧和窍门


[原文发表地址] Tips and Tricks on Controlling Screen Layouts in Visual Studio LightSwitch

[原文发表时间] Thu, Jan 20 2011 3:52 PM

 

注:这些内容只适用于LightSwitch Beta 1

 

Visual Studio LightSwitch有一系列可以用来快速生成界面(Screen)的界面模板。它们给您提供了可更深入定制的起点。当向项目中添加新界面时您会看到一系列界面模板供您选择。您选择好要放在界面上的相关数据后,这些模板自动为您排版。不要低估它们,它们以聪明的方法编排控件,并且做得很好。例如,当您选择不止一个相关数据集显示在界面上时,模板会会用一个选项卡控件。当然您也不会被自动布局所限制。实际上,界面设计器是非常灵活的,允许您在各种不同的配置中创建一组控件。您只需将界面可视化为一系列能在行和列中布局的容器。然后将控件或一组控件放到这些区域,把界面精确对齐成您想要的样子。

 

让我们从一个简单的例子开始吧。针对一个简单的订单追踪系统,我已经设计了我的数据表,它和Northwind 数据库比较相像。我也添加了一个搜索数据界面来搜索我的Products。现在我将要为Products添加一个新的详细信息界面,并通过“添加新界面”对话框把它设置为默认界面:

 

Description: image

 

在本例Product中,界面设计器根据我选择的单个表,为我选择了一个简单的布局。点击F5运行应用程序,在搜索界面上选择一个Product来打开Product 详细信息界面。注意这是非常简单的,因为我的表很简单。在界面右上角点击“自定义”按钮,这样我们就可以开始调整它了。

 

Description: image

 

 

界面左边显示了控件和数据绑定的包含关系(称为内容树),右边显示了数据的即时预览。注意我们的布局虽然有两行,但仅有一行是被填充的(这一行包含垂直堆栈的控件)。底部那一行是空的。您的界面可能是这样:

Description: image

 

每个容器将会展示您选择的一组数据。例如在上面的界面中,顶端那行设置为垂直堆栈控件,要显示的数据来自于Product。因此当布局界面时,您需要考虑的容器包含一组控件,而这些控件绑定到多组数据。要修改容器绑定的数据,选择紧邻容器的数据项。

 

 Description: image

 

为了在当前容器中创建更多容器(或控件),您可以选择“新组(New Group)”。例如要完全控制布局,选择顶部那一行的Product,点击删除键。这将会删除垂直堆栈以及界面上的所有控件。内容树仍然会有两行,但是现在两行都是空的。

 

Description: image

如果您想要四个容器的布局(两行两列),那么为数据项选择“新组”,然后对这两行将垂直堆栈控件都更改为“两列”,如下所示:

Description: image

 

通过选择新组,选择行或列,您可以这样一直继续下去。这是一个具有八个容器,四行,两列的布局:

 

Description: image

 

这儿是一个含有七个容器区域的布局;一行穿过界面顶部,在它的下方是三行两列:

 

Description: image

 

当选择了选择内容,并选择了数据项如Product,它将会填充容器中(竖直堆栈中的行或列)的所有控件,然而您仍然有充分的自由,选择每组的显示内容。您可以删除一些您不想显示的字段并/或更改它们的控件。您也可以通过修改属性窗口的设置来更改控件的大小和显示样式。如果您在界面设计器(而不是我们这里的自定义模式)您也可以从界面左边将数据项拖到内容树中。但是请注意,如果已经有一个配置到另一个不同的数据项的绑定,那么不是树状图的所有地方都允许您在上面投放数据。比如,如果Customer IDProduct来自于不同的表,您不能将Customer ID作为一个Product拖到同一个组里。要解决这个问题,您所需要做的是如上面所示创建一个新组和内容区域。

 

现在就举个更复杂的例子,它涉及到的不仅仅是Products。我想设计一个显示Products和它们的Category的复杂界面,同时还显示所有包含这个ProductOrderDetails。这次我将创建一个新的界面,选择列表(List)及详细信息(Details,也选择Products界面数据,包括相关的OrderDetails。然而我打算完全更改布局,使得Product框在左上角,而下面是已选的Product详细信息。它下面的两列分别是Category文本字段和图片。在右边,我想让OrderDetails网格占据界面的整个右边区域。当您在调试应用程序时,所有这些都可以在自定义模式下完成。

 

要这样做,我首先删除了树中的所有内容项,然后重新创建内容树,如下图所示。我在即时预览下用属性窗口把图设置得更大些,并把描述文本框设为五行。我添加了绿色线条来指明容器,并显示它是如何映射到内容树的:

Description: image

 

我希望这个能够揭开界面设计器的一点神秘面纱。谨记界面模板是很棒的起点——您可以原样采用——或作深入自定义。想随心所欲设计自定义界面,可能需要一些旁门左路,但是一旦您找到它的窍门就会有很多可能性。请继续关注更多关于如何创建您自己的界面模板的信息,这会显示在“添加新界面”对话框中。

 

用的开心!

 

 

 

Skip to main content