Share via


使用屏幕的技巧: 滚动条和拆分器

[原文发表地址]  LightSwitch Screen Tips: Scrollbars and Splitters

[原文发表时间] 2012-02-09 7:08 AM

很多时候在商务应用程序中,我们需要在屏幕上显示大量的信息,而且根据用户的屏幕分辨率,信息可在页面之外滚动。在这种情况下,Visual Studio LightSwitch屏幕模板添加了自动适用屏幕的垂直滚动条,但是,有时我们更愿意让用户调整屏幕部分大小以设置为他们认为合适的。在屏幕设计中使用拆分器来执行此操作是很常见的。拆分器是一种有用的用户界面功能,通过拆分器屏幕上控件的宽度或高度都可以被调整,以显示更多或更少的信息。在本文中,我将演示在LightSwitch中如何启用拆分器控件显示,以及控制滚动条的行为方式。

创建你的屏幕

首先创建一个屏幕来显示所有信息。在此示例中,我将使用我们在地址簿示例中创建的 ContactDetails 屏幕。这个例子中,联系人有很多地址、电话号码和电子邮件地址。默认情况下,LightSwitch 会将联系人字段放置于屏幕的顶部,三个数据网格的选项卡控件表示子级。

这里是屏幕的外观:

image

这里是屏幕的树形目录:

image

LightSwitch 中的滚动条

想象一下,随着时间的推移,我们的联系人有越来越多的电子邮件地址、电话号码和/或地址。如果用户的屏幕分辨率很低 (或应用程序 shell 的大小没有最大化), 然后默认情况下LightSwitch 将在屏幕上放置一个垂直滚动条,(为清楚起见,我添加了绿色框;-))

image

这是通过选择最上面的行布局来控制的,并且在外观属性中,你将看到"启用垂直滚动"被勾选了。注意,这儿也有"启用水平滚动"属性,必要时你可以使用它来启用水平滚动条。LightSwitch 中的所有组控件都具有这些属性 (即行布局,列布局,表布局)

image

但是,选中此选项意味着用户不能同时看到所有的电子邮件地址以及第一个和最后一个名称字段。在这儿我们可以做几件事。一个是我们可以禁用屏幕的垂直滚动。一旦我们这样做, LightSwitch 将自动放置滚动条到网格自身中。

image

但如果我们在字段列表下面没有使用数据网格(或列表控件)呢?或者,如果我们想让用户选择他们一次查看多少行呢?在这些情况下,使用拆分器可以允许用户调整信息窗格的大小。

添加水平拆分器

为了提供这种功能,我们可以在顶部的字段列表和下面的选项卡控件之间放置一个拆分器。在调试模式下运行应用程序时,单击界面右上角的"设计屏幕"以打开自定义模式。为联系人选择嵌套的行布局控件,这样在调整属性中,你将看到一个"可调整行"的复选框。

image

勾选它,然后单击保存按钮以保存你的变更。现在,你会看到一个拆分器控件,而且可以使用它来调整顶部和底部的窗格。

image

本例中你可能还想要设置行布局窗格的最小和最大高度,那样用户可以不必使用拆分器来完全关闭屏幕网格。现在如果你拖动拆分器离开屏幕,网格将完全消失。为了防止这种情况,你可以设置MinHeight 和 MaxHeight 属性。必要时你也可以通过勾选"启用垂直滚动"来在顶部窗格启用一个滚动条。

image

添加垂直拆分器

你还可以用类似的方式添加垂直拆分器。与其在单独的选项卡中显示数据网格,不如说我们想并排显示它们。再次打开定制模式并将布局选项卡更改为列布局。

image

然后选择每个数据网格,并在调整属性中,勾选"可调整列"。

image

现在你可以调整包含了数据网格的所有列的大小。数据网格会自动在底部放置一个水平滚动条,这样用户可以看到所有想要的字段。

image

另一个例子

当你有信息部分和/或你希望允许用户调整大小的命令时,拆分器和滚动条能真正帮助你。在这里我修改了Contoso 构建实例以允许调整左侧的命令选项卡控件和右侧的信息。

image

总结

你可以用 LightSwitch 屏幕设计器做很多的事情,从而提供完全自定义的布局。控制滚动条和添加拆分器只是获得你所想要的另一种方法。更多关于自定义屏幕的提示和窍门,请参阅:

希望大家喜欢!