自定义lightswitch主屏幕

26 篇文章 0 订阅
20 篇文章 0 订阅

 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 酷的东西。我为这一结论的课程管理器系列的延迟道歉。如果你错过了,这里是以前的文章:

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

主屏幕

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

创建一个空白的屏幕

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

clip_image001

设置启动屏幕

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

clip_image002

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

clip_image004

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

clip_image006

设计布局

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

clip_image007

总括而言,我们希望:

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

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

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

clip_image008

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

clip_image010

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

clip_image011

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

clip_image012

添加静态图像

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

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

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

clip_image013

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

clip_image014

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

clip_image015

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

clip_image016

在属性 (与选定的徽标图像节点),将标签位置设置为"无"。

clip_image017

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

clip_image018

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

clip_image019

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

提供一个图像文件

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

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

clip_image020

在方法的正文中,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)。在解决方案资源管理器中,从逻辑视图切换到文件视图。

clip_image021

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

clip_image022

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

clip_image023

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

clip_image024

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

clip_image025

添加静态文本

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

clip_image026

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

clip_image027

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

clip_image028

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

clip_image029

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

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

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

clip_image030

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

创建表布局

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

clip_image031

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

clip_image032

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

clip_image033

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

clip_image034

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

clip_image035

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

clip_image036

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

clip_image037

将链接添加到屏幕

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

clip_image038

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

clip_image039

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

clip_image040

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

       void SearchStudents_Execute(){

            Application.ShowSearchStudents()

       }

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

clip_image041

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值