自定义lightswitch主屏幕

 http://blogs.msdn.com/b/lightswitch/archive/2011/09/06/course-manager-sample-part-6-home-screen-andy-kung.aspx

 

最近安装了LS,初步学习中，不过体验下来，真的很方便。但学习同样是痛苦。  LS工具同样还有不少小BUG。

 

请注意，screen的命名为"HOME"时，无法切换到“编写代码”状态。这种情况出现了好多次，应该是LS工具的问题。  

LightSwitchers 你好 ！我希望你所有的乐趣和建筑用 RTM 酷的东西。我为这一结论的课程管理器系列的延迟道歉。如果你错过了，这里是以前的文章：

• 第 1 部分： 简介
• 第 2 部分： 设置数据
• 第 3 部分： 用户权限和管理屏幕
• 第 4 部分： 执行工作流
• 第 5 部分： 详细信息屏幕

在这篇文章中，我们将会如何设计一个"Home"的屏幕。

主屏幕

在 LightSwitch，您可以指示将应用程序的"启动屏幕"屏幕。这意味着，屏幕会自动启动时启动应用程序。在我们的例子中，我们要创建一个主屏幕，当用户第一次启动该应用程序时提供不同的工作流切入点。

创建一个空白的屏幕

让我们首先创建要我们的主屏幕空白屏幕。若要创建一个空白屏幕，您可以在添加新的屏幕对话框中选择任何屏幕模板并离开屏幕数据，"(无)"。在我们的例子中，我们将选择列表-详细信息屏幕模板，屏幕"家"的名称和离开屏幕数据"(无)"。

设置启动屏幕

双击解决方案探索以打开应用程序设计器中的属性节点。

在应用程序设计器中选择"屏幕导航"选项卡。在菜单结构树中，选择"主页"和底部单击"设置"。这将作为应用程序的启动屏幕设置"主页"屏幕。最后，使用向上/向下箭头按钮右侧移动到顶部的菜单中的"家"屏幕。

如果你现在按下 f5 键，您将看到您启动该应用程序时自动打开"主页"屏幕。在左侧菜单也反映了您在应用程序设计器中指定的排序。

设计布局

我们有一个空白画布上启动。它是使用一些创造性汁设计我们的主屏幕中的时间。我们开始之前，让我们画出我们想事情和这是我们所：

总括而言，我们希望：

• 顶部漂亮徽标
• （应用程序） 的标题
• 副标题 （用于欢迎邮件）
• 说明 （用于说明、 新闻等）
• 我们的 4 主要工作流 （在我以前的文章中介绍） 的每个入口点 （链接）
  • 搜索学生
  • 创建学生
  • 课程注册
  • 课程目录

让我们来绘制一些图片周围的框，看看我们如何创造这种结构。有基本上 2 大层次垂直堆叠在彼此的顶部：

1. 顶组： 包含图像和文本组。他们是水平方向堆叠。
2. 底部组： 包含包围 4 x 2 的表的选项卡组

让我们回到 IDE。双击"Home"在解决方案资源管理器打开屏幕设计器中。首先，我们将创建的顶部和底部的组。由于他们将是垂直堆叠，更改"列布局"到"行布局"。这样的事情不会垂直拉伸在属性窗口中，设置为"最高"的垂直对齐方式。

使用"添加"下拉列表中添加 2 组主页屏幕节点下。

为顶部组水平堆积徽标和文本组，因为更改行布局中的顶级组列布局。底部集团是一个选项卡组，因此，我们将使用布局选项卡。

添加静态图像

接下来，我们要将徽标添加到顶部的组。此标志将静态图像。这意味着，是您提供的图像文件。

LightSwitch，在您的屏幕内容的树找到的每个视觉元素需要绑定到的一些数据。在大多数情况下，它们 （例如，学生列表或网格），数据库中的数据或在我们的例子，一个静态数据的属性。

若要创建静态数据，我们需要添加本地属性。要添加一段数据的命令栏上单击"添加数据项目"。在我们的例子中，我们希望本地图像类型的属性。名称"Image_Logo"属性，然后单击确定。

在屏幕设计器中，拖动并将新创建的 Image_Logo 到屏幕内容树。让我们把它放在我们刚才创建的顶级组下。

如果现在应用程序运行时，您将在屏幕上看到图像字段：

这是很大，但并不是我们想要。首先，我们不需要一个标签为"形象标志"。第二，这是一个静态图像，因此我们不希望用户能更新图像。我们可以轻松地照顾这些。在屏幕设计器中，更改图像控件从"图像编辑器"到"图像查看器"。

在属性 （与选定的徽标图像节点），将标签位置设置为"无"。

当我们在它时，我们还可以更改图像大小。

如果您再次运行应用程序，现在您将看到一个空白图像在屏幕上:

这是更像是 it…，但没有图像。

提供一个图像文件

现在，我们需要去到一个图像文件在计算机上安装我们创建的 Image_Logo 属性。

此过程要求有点编码。在屏幕设计器中，单击命令栏中的"写入代码"按钮并选择 Home_InitializeDataWorkspace。

在方法的正文中，Image_Logo 属性指定图像文件 （我有一个称为"logo.png"文件）：

Image_Logo = GetImageByName ("LightSwitchApplication.logo.png") //资源的全名称空间，LightSwitchApplication这个好象不能改，暂时还没发现。

GetImageByName 是一个 helper 函数，图像文件转换为字节数组。复制并粘贴以下的 helper 函数，屏幕的代码。

      

namespace LightSwitchApplication
{
    public partial class MyHome
    {
        partial void MyHome_InitializeDataWorkspace(List<IDataService> saveChangesTo)
        {
            // 在此编写您的代码。
            Image_Logo = GetImageByName("LightSwitchApplication.Logo.png");
            Txt_Title = "学校的美术-书记官长办公室";
                   }

        byte[] GetImageByName(string fileName)
        {
            System.Reflection.Assembly ass = System.Reflection.Assembly.GetExecutingAssembly();
            System.IO.Stream s = ass.GetManifestResourceStream(fileName);
            return GetStreamAsByteArray(s);
        }

        private byte[] GetStreamAsByteArray(Stream s)
        {
            int len = Convert.ToInt32(s.Length);
            byte[] bs = new byte[len];
            s.Read(bs, 0, len);
            s.Close();
            return bs;
        }
    }
}

现在，我们需要将图像文件添加到项目 （logo.png）。在解决方案资源管理器中，从逻辑视图切换到文件视图。

右键单击客户端节点。选择"添加"再"现有项目"。这将启动一个对话框，您可以浏览并选择您的图像文件。

在此对话框中，我会选择我的"logo.png"文件，并单击添加。图像文件将显示在客户端节点下。

与选定的图像文件，将生成操作设置为"嵌入的资源"在属性窗口中。

如果我们再次运行应用程序，现在您将看到您提供在屏幕上的图像文件。

添加静态文本

现在我们想添加一些文本徽标的旁边。首先，我们将创建新的组来容纳此文本 （标题、 副标题和说明）。在屏幕设计器中，添加新组徽标节点下面。

将静态文本添加遵循同样的概念添加静态图像。首先，我们将创建一张静态数据，在这种情况下，字符串 （而不是图像）。单击命令栏中的"添加数据项目"按钮，添加本地字符串类型的属性。名称 Text_Title 属性，然后单击确定。

拖放式的内容树 （在文本组中） 下的新创建的属性。

将控件从文本框中更改标签。设置为"无"在属性窗口中的标签的位置。LightSwitch 为基于文本的控件提供了一组预定义的文本样式。让我们也来设置字体样式属性为"Heading1"。

我们现在需要将 Text_Title 属性分配给某个值。单击命令栏上的按钮编写代码。在屏幕代码中，添加以下在 Home_InitializeDataWorkspace 方法中：

Text_Title = "学校的美术-书记官长办公室"

如果我们运行现在应用程序，您将看到较大并以粗体显示的字体在屏幕上显示的标题。

您可以按照同样的步骤，向屏幕中添加字幕和说明 （具有不同的字体样式）。

创建表布局

现在，我们准备将上移动到底部组。在我们开始之前，创建一些静态图像和文本数据的底部组使用。如果你看看该课程管理器示例，我已经添加了 4 个额外图像和 4 附加文本。

现在，如果你回来看看我们的绘图，我们需要下面的选项卡控件的表格。表 2 行和 4 列组成。为什么我们使用一个表布局，而不是行和列布局在这里？嗯，您当然可以。表布局，不过，在这种情况下线东西更好的表现。例如，如果您需要更大的边距之间和图像和文本，您可以调整它的整列次 。另外，我需要一个借口来向您展示表布局 J

添加新的组选项卡组根据。更改该控件以表格布局。在属性窗口中设置为"左"的水平对齐方式。

添加表布局下的 4 组。这些组将自动使用 TableColumn 布局。他们代表了我们的表中的 4 列。

第一列包含 2 图像。所以我们会拖，拖放到内容树 2 图像数据。

同样，拖放式 2 2^nd列、 2 到 3^路列，图像和 2 到 4^日列文文本。将控件从图像编辑器更改为图像查看器和文本框标签。将其标签位置属性设置为"无"。如果您也可以设置为"自动"标签的高度属性，文本将很好地换行表格单元格中。

让我们运行该应用程序，看看我们在哪里。

将链接添加到屏幕

我们几乎没有 ！我们只需要添加一个链接，每个工作流。我们通过将导航的命令添加到工作流的屏幕可以做到这一点。右键单击文本搜索节点并选择添加按钮。

在该对话框中，SearchStudents 的方法的名称，然后单击确定。

将添加一个命令。将控件从按钮更改链接。

双击要转到的代码的命令。编写以下操作来启动 SearchStudent 屏幕，当用户单击该命令。

       void SearchStudents_Execute(){

            Application.ShowSearchStudents()

       }

按照同样的步骤，添加链接的其余部分。让我们来运行该应用程序以查看主屏幕 ！