- Adding Labels and Descriptive Text
- Adding Static Images to a Screen
- Implementing a Home Screen
- Interacting with LightSwitch Controls at Runtime
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding Static Images to a Screen
LightSwitch supports adding static images to screens. This feature can be useful if you want to display your company logo, for example, or some other image. Actually, adding an image as a logo is supported only in custom shells. (Although you're allowed to specify a logo image with the default shell, we won't discuss that option here.) One alternative is embedding an image file as a resource that can later be retrieved by a well-known technique based on Reflection—something that any .NET developer has faced at least once.
Let's get started.
- Create a new empty screen called Home and make sure that the LightSwitch designer is opened on it. (We're creating a new screen here that we'll use it later in this article to create a home screen.)
- In Solution Explorer, enable the File view.
- Right-click the Client project name, select Add Existing Item, and select an image file to use as a logo.
- Right-click the image file in Solution Explorer and select Properties.
- After the Properties window opens, change the Build Action's property value to Embedded Resource.
- Switch back to the Logical view. In the screen designer, click Add Data Item. Select Local Property, specify the Image type, and name the logo file (see Figure 5). Click OK.
- Following the previous example, drag the new property onto the screen designer's surface and release it under the Screen Command Bar. Replace the default Image Editor with the Image Viewer control, as shown in Figure 6.
)
)
To display the logo correctly, let's set some properties. With the Image property selected, open the Properties window and follow these steps:
- Change the value of the Label Position property to None.
- For both the Width and Height properties, select the Auto value. Then, in the MaxWidth text box, enter 640. In the MaxHeight text box, enter 480. These settings establish fixed dimensions for the logo even when the screen is resized.
Now it's time to assign the image file to the local property. This can be only done in code, so click the Write Code button in the Screen Designer. You need to write a couple of methods: one method that retrieves the image file from the application's resources via Reflection, and another method that converts the resource into a System.Byte() type that can be assigned to a property of type Image. The code is shown in Listing 2.
Listing 2—Retrieving an image from application's resources.
'Get the image file from the app's resources using Reflection
Private 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
'Convert the stream into a System.Byte()
Private Function GetStreamAsByteArray(ByVal stream As System.IO.Stream) As Byte()
Dim streamLength As Integer = Convert.ToInt32(stream.Length)
Dim fileData(streamLength - 1) As Byte
stream.Read(fileData, 0, streamLength)
stream.Close()
Return fileData
End Function
At this point you'll only need to assign the local property with the result of an invocation to the GetImageByName method. The best place to make this assignment is the InitializeDataWorkspace method hook (because we're ensuring that the data is initialized before calling a resource), as shown in Listing 3.
Listing 3—Assigning an image to a property of type Image.
Private Sub Home_InitializeDataWorkspace(saveChangesTo As System.Collections.
Generic.List(Of Microsoft.LightSwitch.IDataService))
Me.CustomLogo = GetImageByName("CompanyLogo.png")
End Sub
If you run the application, you'll see how the logo is added to the screen correctly (look at Figure 7 for a reference).
)
