Skip to content

Files

Latest commit

788443c · Jan 8, 2022

History

History
216 lines (119 loc) · 9.45 KB

File metadata and controls

216 lines (119 loc) · 9.45 KB

五、屏幕编辑器

为我们的查询创建搜索数据屏幕

添加新屏幕向导中,选择搜索数据屏幕模板。命名屏幕我的紧急任务,选择我的紧急任务作为屏幕数据。

图 44:创建搜索数据屏幕

屏幕编辑器的模型和视图模型部分

屏幕编辑器的左侧,LightSwitch 添加了两个查询参数,但是每个参数都添加了两次。左侧被认为是 LightSwitch MVVM 实现中屏幕的视图模型和模型层。第一次识别这些参数时,它们实际上代表查询参数,因此是模型的一部分,第二次列出时,它们代表作为视图模型一部分的屏幕属性。

图 45:屏幕设计器的左侧显示了视图模型和模型层

如图 45 所示,在相应的查询参数和本地屏幕属性之间显示一个箭头,表明它们是数据绑定的。这也可以在属性窗口中通过选择一个查询参数来观察。

图 46:绑定属性

将屏幕属性转换为所需的屏幕参数

选择任务分配人员屏幕属性,并在属性窗口中,确保选中了为参数为必填项复选框。

图 47:将屏幕属性转换为所需的屏幕参数

同时确认任务最小值百分比完成任务最大值百分比完成本地屏幕属性的两个复选框都已清除。

屏幕属性验证

屏幕属性窗口也允许您设置一些验证逻辑。将百分比小数位数改为 0 ,将两个百分比完成属性的最小值最大值分别设置为 0100

图 48:屏幕属性也可以有验证

您会注意到,这些本地屏幕属性的工作方式与实体设计器的工作方式有一些相似之处。在仍然选择任务最大百分比完成本地屏幕属性的情况下,单击属性窗口中的自定义验证链接。

我们将使用它来编写一些简单的代码,检查输入的最小值是否小于输入的最大值。

        public partial class MyUrgentTasks
        {
            partial void TaskMaximumPercentageComplete_Validate(ScreenValidationResultsBuilder results)
            {
                if (this.TaskMinimumPercentageComplete > this.TaskMaximumPercentageComplete) {
                    results.AddPropertyError("Minimum cannot exceed the maximum");          
                }
            }
        }

初始化屏幕属性

顺便说一下,当我们编写代码时,初始化本地屏幕属性可能是个好主意。为此,请找到位于屏幕设计器顶部的编写代码按钮,并单击下拉箭头。点击链接myurgentasks _ Created—这将把你带到代码可扩展性点,一旦屏幕被创建,代码可扩展性点将在客户端上运行。

图 49:找到一级可扩展性点来初始化屏幕属性

初始化两个本地屏幕属性的代码并不令人惊讶:

            partial void MyUrgentTasks_Created()
            {
                this.TaskMinimumPercentageComplete = 0;
                this.TaskMaximumPercentageComplete = 1;
            }

屏幕去哪里了?

如果您按 F5 调试您的应用,您会注意到导航菜单不包括我们的新屏幕。

图 50:新屏幕似乎没有包含在导航菜单中

原因是我们的新屏幕有一个本地屏幕属性,任务分配人员,为此我们选择了是必需的是参数扩展属性。这意味着打开此屏幕的代码必须传递一个整数参数( TaskAssignedPerson ),导航菜单不知道如何为其解析一个值。

我们将不得不手动添加我们的新屏幕,这将只是我们在本教程中第五次必须编码——这对我们已经在这个应用中构建了多少功能来说还不错。

向屏幕添加新命令

一个合适的地方来打开这个屏幕与紧急任务从一个特定的人是所有人屏幕。打开屏幕编辑器中的所有人屏幕,找到屏幕命令栏元素,该元素位于屏幕视觉树的顶部,即屏幕编辑器的中心部分。

图 51:向屏幕添加新按钮

选择新建按钮选项。在出现的弹出窗口中,选择新方法选项并将其命名为显示紧急任务

图 52:在屏幕上创建新命令

将添加一个新的命令,并且像您的 LightSwitch 应用的几乎任何元素一样,您可以使用设计器来设置几个扩展属性。我们肯定要设置的一个属性是所使用的图像。就我个人而言,我真的成为了 Syncfusion 免费定制图标工具 Metro Studio(http://www.syncfusion.com/downloads/metrostudio)的粉丝。我几乎只为 LightSwitch 命令使用图标,因为它们非常适合 LightSwitch 的世界性主题(参见第 6 章)。

图 53:向命令添加图像

完成后,在可视化树编辑器中右键单击您的按钮,并从上下文菜单中选择编辑执行代码选项。

图 54:编辑命令后面的代码

从代码打开屏幕

LightSwitch 会生成几个类,如果您选择这样做,您可以使用这些类进行编码。例如,LightSwitch 为每个屏幕在Application类上生成一个名为Show<ScreenName>的方法。在我们的例子中,这使得打开屏幕的代码非常简单:

        public partial class AllPeople
        {
            partial void ShowUrgentTasks_Execute()
            {
                Application.ShowMyUrgentTasks(this.People.SelectedItem.Id);
            }
        }

这一次,按 F5 摘下我们劳动的果实。所有人屏幕现在有一个额外的命令,如下图所示。

图 55:显示紧急任务命令现在在应用中可见

点击显示紧急任务命令,我们新的搜索屏幕我的紧急任务打开。

图 56:我的紧急任务屏幕

运行时屏幕编辑器

虽然我们的新屏幕很有用,但你可能想对它进行一些图形修改,比如隐藏任务分配人标签和文本框。Visual Studio LightSwitch 最令人瞠目结舌的功能之一是,如果您不想或者不熟悉 Silverlight XAML,您不必编写自定义 XAML 来修改用户界面。更好的是,如果你想改变屏幕上的布局或控件,你甚至不必停止运行你的应用并重新编译它。

如果您从 Visual Studio IDE 启动 LightSwitch 应用(即附带调试器),该应用将有一个名为设计屏幕的命令,该命令使您能够在运行时进行这些修改并将其保留回您的 Visual Studio 解决方案!老实说,这可能是个人缺乏经验,但我不知道有任何其他技术允许你这样做,我喜欢它。在运行时设计应用的图形部分,而不必构建来测试每个修改,并且能够用实际的测试数据而不是“Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,consectetur,adipissi velit”进行设计—此功能绝对节省时间!

图 57:设计屏幕命令

单击应用命令栏中的设计屏幕命令。这将打开运行时版本的屏幕编辑器

图 58:在运行时使用屏幕设计器

隐藏任务分配人员控制

在左侧可视化树编辑器中,选择任务分配人元素,并确保可见复选框已清除。

图 59:在运行时设计屏幕

单击屏幕右上角的保存按钮后,屏幕将会更新,您所做的更改将会保存回 Visual Studio 解决方案。

图 60:在运行时编辑搜索数据屏幕后

创建新的项目模板

这个运行时版本的屏幕设计器可以做的不仅仅是在现有的视觉元素上设置属性。它可以给你的屏幕添加新的元素,或者用一个完全不同的元素替换现有的元素。例如在全民画面的运行时画面设计器中,选择人物视觉元素。

当前使用的控件是摘要查看器,其结果如下所示。

图 61:当前所有人屏幕

通过单击向下箭头,您可以为此列表的项目数据模板选择完全不同的布局。

通过从下拉菜单中选择,将用于表示人物的控件更改为图片和文本

图 62:在运行时更改项目模板

在此图文编辑器中,使用头像属性作为图片,使用全名计算属性作为标题

一次修改整组控件

运行时屏幕编辑器也可以更改整个组的属性。选择细节栏—这是视觉树中的第二个行布局视觉元素。

图 63:一次设计整个屏幕

属性窗口中,选择如下图所示的使用只读控件复选框,然后点击保存

图 64:在运行时设置整个控件集合的只读状态

这些更改被保存回 Visual Studio 解决方案,屏幕被刷新,现在看起来在图形上更有吸引力。

图 65:在运行时设计后的所有人屏幕

正如您可以编写自定义代码来响应应用中的许多预定义事件一样,您也可以完全控制用户界面,并为可视化树设计器中的任何元素编写自定义 Silverlight XAML。

然而,因为这需要重建来编译 XAML,所以它不能从运行时版本的屏幕设计器中完成。