How to: Create a LightSwitch Control

LightSwitch controls are the most common way to customize the appearance and functionality of a LightSwitch application. A LightSwitch control is just a Silverlight control with additional functionality of the LightSwitch model built in. Controls can be added to LightSwitch in two ways: as a custom control, or as a control extension. For more information about how to use custom controls, see How to: Add a Custom Control to a Silverlight Screen.

Although most any Silverlight control can be used directly as a custom control in LightSwitch, there are several reasons to create a control extension instead. A control extension can be more easily shared between applications and developers, and an extension can provide LightSwitch-specific capabilities that a Silverlight control cannot. In addition, some types of controls, such as group controls, can only be created as an extension because they must implement the LightSwitch SupportedContentItemKind property.

The following table shows the five kinds of control extensions that you can create:

Control Type

Description

Value

Represents a content item for a specific scalar simple data type; visualized by using a single control.

Details

Represents a content item for an entity or complex type; visualized by using a single control or as individual fields using the node's children.

Command

Represents a content item for initiating an action; for example, a Button or Hyperlink.

Collection

Represents a collection content item; for example a Grid or ListBox.

Group

Represents a group content item; for example a TableLayout or RowsLayout.

The steps that you must follow to create a control extension vary somewhat for the different kinds of controls, but the overall process is the same. This document provides a list of required and optional steps for creating a control extension with the LightSwitch Extensibility Toolkit, with links to supporting documentation.

Required steps for creating a control extension

  1. Create an extension project, and then add the Control template. For more information, see How to: Create a LightSwitch Extension Project.

  2. Update the SupportedContentItemKind and DisplayName metadata. For more information, see “To update the control metadata” in Walkthrough: Creating a Smart Layout Control Extension.

    You can also specify the DisplayName as a String resource. For more information, see “To update the control metadata” and “To add resource strings” in Walkthrough: Creating a Detail Control Extension.

  3. For value and collection controls, update the SupportedDataType metadata. For more information, see “To specify the supported data types” in Walkthrough: Creating a Value Control Extension

  4. Replace the icons for the control. For more information, see “Update the Control Icon” in Walkthrough: Creating a Detail Control Extension.

  5. Define the implementation and user interface for the control.

    The details are different for each control type. For more information, see Walkthrough: Creating a Value Control Extension, Walkthrough: Creating a Detail Control Extension, Walkthrough: Creating a Smart Layout Control Extension, or Walkthrough: Creating a Stack Panel Control Extension.

  6. Test and debug the control. For more information, see How to: Debug or Test a LightSwitch Extension.

  7. Set package properties for the control. For more information, see How to: Set VSIX Package Properties.

  8. Distribute the control. For more information, see How to: Distribute a LightSwitch Extension.

Optional steps for creating a control extension

  1. Add properties to the control. For more information, see Defining, Overriding, and Using LightSwitch Control Properties.

  2. Create custom property editors for the control. For more information, see”Create a Custom Editor for the DisplayProperty” in Walkthrough: Creating a Detail Control Extension.

  3. Enable developers to access the control programmatically. For more information, see “Make the Control Programmable” in Walkthrough: Creating a Detail Control Extension.

  4. Add support for computed fields. For more information, see “Handle IsComputed Status in the Control” in Walkthrough: Creating a Detail Control Extension.

  5. Add support for the KeyUp event. For more information, see “Prevent an Item From Being Deleted” in Walkthrough: Creating a Detail Control Extension.

  6. Add support for keyboard navigation. For more information, see “Handle Keyboard Navigation in a DataGrid” in Walkthrough: Creating a Detail Control Extension.

  7. Add support for read-only mode. For more information, see “Add Read-Only Support” in Walkthrough: Creating a Value Control Extension.

  8. Add display mode support to the control. For more information, see Additional LightSwitch Control Concepts.

  9. Create a control that is always read-only. For more information, see Additional LightSwitch Control Concepts.

  10. Provide both an editor and a viewer control. For more information, see Additional LightSwitch Control Concepts.

See Also

Tasks

Walkthrough: Creating a Value Control Extension

Walkthrough: Creating a Detail Control Extension

Walkthrough: Creating a Smart Layout Control Extension

Walkthrough: Creating a Stack Panel Control Extension

How to: Create a LightSwitch Extension Project

How to: Debug or Test a LightSwitch Extension

How to: Set VSIX Package Properties

How to: Distribute a LightSwitch Extension

Concepts

Defining, Overriding, and Using LightSwitch Control Properties

Additional LightSwitch Control Concepts

LightSwitch Extensibility Toolkit for Visual Studio 2013