Share via

在LightSwitch屏幕上添加静态图片和文字

  • Article

[原文发表地址] Adding Static Images and Text on a LightSwitch Screen

[原文发表时间] 2011-06-15 08:06

很多时候你会想在数据输入屏幕上显示静态图片或文字，比如公司logo或者标签上的一些帮助文字在屏幕上引导用户。在屏幕按钮上添加图片其实很简单，就和在属性窗口设置一样简单。不过，当你想直接在屏幕上显示图片或者静态文本时，你就得做一系列工作了。查看一下我几周前发布的Contoso构造示例，你会发现“主页”屏幕在完全自定义屏幕布局中显示了很多静态图片和文本。这篇博文中，我会通过演示这个示例，向你展示如何在LightSwitch屏幕上添加静态文本和图片。

屏幕数据项和目录树

默认情况下，你在Visual Studio LightSwitch中创建的屏幕上的所有控件都必须绑定到一个数据项。屏幕设计器把所有的数据项都显示在了左边的视图模型中。在中心的就被叫做“目录树”。目录项组成了这个树——这些是绑定到每一个数据项的空间。

所以当在LightSwitch中建立屏幕时，目录树中的每一个控件都必须绑定一个数据项。这个数据项可以是表中的一个域，一个表的集合，或者任何你添加至视图模型的数据项。屏幕模板会引导你设置布局，以及绑定到特定类型屏幕的所有数据；可能是搜索屏幕，详细信息屏幕，新数据屏幕等等。这些模板只是起步，你可以做进一步的自定义。实际上，这个例子中的主页屏幕就是一个完全自定义的布局。选择了模板之后，我删除了目录树中所有的项，并建立我自己的布局。

数据项可以是像字符串或者整数这样的基本属性，可以是从屏幕代码或者按钮调用的方法，或者可以是来源于查询的表。要手动向屏幕添加一个数据项，点击屏幕设计器上方的“添加数据项”按钮。然后你就能指定此数据项的名称和类型了。主页屏幕就是所有这些数据项类型的结合。

设置数据项

你可以通过添加数据项对话框以本地属性形式添加静态图片和文本至屏幕，然后通过从左边视图模型中拖动它们将它们布局至目录树。因此要向屏幕添加一个静态图片，首先点击“添加数据项”，选择本地属性，将类型设为图片，然后命名属性。

点击确定，它就会在屏幕设计器左边的视图模型中出现。拖动数据项到目录树中你希望的位置（如果不成功，你可以稍后运行（F5）并在屏幕上实时移动它）。最后，在编辑器中把控件改为图片查看器。

重复同样的步骤添加静态文本。要添加静态文本，首先添加数据项，选择本地属性，将类型设置为字符串，然后命名属性。拖动项至目录树，然后将控件变为标签。

初始化静态属性

由于静态屏幕属性并非源于数据表，所以你需要在屏幕显示之前设置属性值。你可以在屏幕的InitializeDataWorkspace方法中完成这步，这个方法会在任何查询执行前运行。你可以通过下拉屏幕设计器右上方的“编写代码”按钮，进入方法。要设置一个图片和一个文本静态属性，你要写这样的代码：

 Private Sub Home_InitializeDataWorkspace(saveChangesTo As List(Of IDataService)) 
  ' Initialize text properties
  Text_Title = "Contoso Construction Project Manager"
  
  ' Initialize image properties
  Image_Logo = MyImageHelper.GetImageByName("logo.png")
  
 End Sub

为了加载你需要的静态图片你需要转换到文件视图，右击Client项目的\Resources文件夹，选择添加–>已有项。浏览图片，然后将构建行为设置为“嵌入源”。

下一步你需要写些代码以加载图片。在Contoso构造示例应用程序中，它在不同的屏幕中使用静态图片，所以我创建一个帮助类，叫做MyImageHelper，它可以在客户端代码任意位置使用。而在文件视图中，右击Client项目中\UserCode文件夹，选择添加–>类。将之命名为MyImageHelper然后创建一个静态（共用的）方法，以加载图像。

 ''' <summary>
 ''' This class makes it easy to load images from the client project.
 ''' Images should be placed in the Client project \Resources folder 
 ''' with Build Action set to "Embedded Resource"
 ''' </summary>
 ''' <remarks></remarks>
 Public Class MyImageHelper 
  Public Shared Function GetImageByName(fileName As String) As Byte() 
  Dim assembly As Reflection.Assembly = Reflection.Assembly.GetExecutingAssembly() 
  Dim stream As Stream = assembly.GetManifestResourceStream(fileName) 
  Return GetStreamAsByteArray(stream) 
  End Function
   
  Private Shared Function GetStreamAsByteArray(
  ByVal stream As System.IO.Stream) As Byte() 
  If stream IsNot Nothing Then 
  Dim streamLength As Integer = Convert.ToInt32(stream.Length) 
  Dim fileData(streamLength - 1) As Byte
  stream.Read(fileData, 0, streamLength)
  stream.Close()
  Return fileData
  Else
  Return Nothing
  End If
  End Function
 End Class

你可以用这种方法向客户端添加任意你需要的自定义代码。你有很大的灵活性向LightSwitch添加你自己的自定义代码和类，这只是一个简单的例子告诉你如何向屏幕添加静态文本和图片。

希望你们喜欢！