Using Custom Controls to Enhance LightSwitch Application UI
Developers of LightSwitch applications are not limited to the set of standard UI controls that come “out of the box.” If your application has specific requirements that are not covered by the standard control set, you can use third-party LightSwitch controls or use regular Silverlight controls (also called “custom controls”) to enhance your UI. In this article I will show you how to get started with custom controls and how to make custom controls and screens work together (interact). LightSwitch client applications use the Silverlight framework as a foundation to build upon. LightSwitch controls that you work with in the IDE are, at the core, just Silverlight controls, but they are enhanced with information and functionality that make it possible for the LightSwitch runtime to relieve the developer from many routine tasks associated with UI data binding, UI layout, and command enablement. A custom control is a regular Silverlight control that is part of the LightSwitch application UI (a screen). The main difference between LightSwitch controls and custom controls is that a custom control does not have LightSwitch-specific information associated with it. Therefore LightSwitch treats it as a “black box” and it is up to the developer to specify what data the control should display (data-bind the control to the screen) and to handle any events the control might raise. So creating custom controls for LightSwitch is as simple as creating Silverlight controls. To get started with Silverlight, see http://www.silverlight.net/getstarted/. In this article I’ll show you how you can use your custom Silverlight controls on LightSwitch screens. | " |
Creating custom controls for LightSwitch is as simple as creating Silverlight controls.
| " |
Screen Content Tree and Custom Controls A screen in a LightSwitch application is built of three elements: - Screen members are what you see on the left in the screen designer inside the LightSwitch IDE. They are the data the screen is operating on. Screen members can include collections of entities, single entities, and scalar values. They can also include commands (both built-in and user-defined).
- The screen content tree defines the visual layout of the screen. It determines what is shown on the screen and how the information is visually arranged. The content tree consists of content items and is shown on the right side of the screen designer. Some content items are used just for layout, but most are there to show a specific piece of screen data. In other words, they are bound to a piece of data, or have a data binding. Content items can also have an associated control (visual) that will be used to visualize the item when the application is running.
- Screens can also have user code, which can be used to customize screen behavior programmatically and implement business logic. Screen code can be shown by clicking the “Write Code” button on the screen designer toolbar.
To add a custom control to a screen, the developer replaces the standard (default) control on a content item with a different (custom) control. Example: Use Rating Control for Shipper Rating Let’s say you are building a database of shippers that are available to ship goods from your manufacturing facility to various parts of the country. For now you will focus only on three pieces of information: the shipper’s name, phone number, and rating. You will use the Rating control from the Silverlight toolkit, so if you do not have the toolkit installed yet, you can get it from http://silverlight.codeplex.com/. Open Visual Studio, create a new LightSwitch application, and then create a Shipper entity (see Figure 1). Next, create a screen for the Shipper entity using the List and Detail templates and make sure you have the details included. In the details section, expand the control dropdown and choose “Custom Control” (see Figure 2). Open the properties window, rename the control to “ShipperRating”, and then click “Change” link next to the Custom Control property to select the custom control (Figure 3). You will need to add a reference to the System.Windows.Controls.Input.Toolkit assembly where the Rating control resides. You’ll find it in the directory where the Silverlight toolkit is installed, e.g., “C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin”. 
Figure 1: Shipper entity schema.
Figure 2: Using a custom control to display the Shipper’s Rating property.
Figure 3: Selecting the Rating control.The final step is to set up data binding between the control and the screen. In the screen designer, click the “Write Code” button in the toolbar and override the screen’s Created method (see Listing 1). In this method, you add an event handler for the ControlAvailable event, which is raised when the LightSwitch runtime instantiates the control. In my example, this happens right after the screen is displayed; however, depending on screen content, the control might not be initially visible and thus Silverlight might not create it immediately, so having an event for that helps. In the event handler, set a couple control properties to give it the familiar 5-star look, and then bind it to the content tree. If you run the application now, you will see that the screen behaves as expected. Just make sure to put a value between zero and one when adding new Shippers via the standard data adding dialog, which does not use the fancy Rating control. A value of 0.2 gives 1 star, a value of 0.4 gives two stars, and so on. Try adding a New Shipper screen to replace the standard dialog and incorporate the Rating control into it-this will round up the experience. | & | | 
By: Karol Zadora-Przylecki <email>karolz@microsoft.com</email>
Karol has been working on several Visual Studio releases for more than 10 years. He is a Senior Development Lead on the Visual Studio LightSwitch Team and works on all things related to LightSwitch application UI.
karolz@microsoft.com |