自定义lightswitch主屏幕

最新推荐文章于 2019-08-11 12:51:53 发布

iteye_9104

最新推荐文章于 2019-08-11 12:51:53 发布

阅读量167

点赞数

文章标签：数据库

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

创建一个空白的屏幕

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

设置启动屏幕

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

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

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

设计布局

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

总括而言，我们希望：

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

让我们来绘制一些图片周围的框，看看我们如何创造这种结构。有基本上 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