Feb 11

Written by: Michael Washington
2/11/2012 2:33 PM 

Visual Studio LightSwitch allows you to create Collection Control extensions. A Collection Control extension allows you to specify the control that will display a Entity collection in LightSwitch. At the time this article is written, there is no official documentation on creating Collection Control extensions. The only example of a Collection Control that Microsoft provides is the Many-To-Many control (see: Using The Many-To-Many Control).

First note that the following are required in order to create LightSwitch extensions:

• Visual Studio 2010 SP1 (Professional, Premium, or Ultimate edition)

• Visual Studio 2010 SP1 SDK

• Visual Studio LightSwitch 2011

• Visual Studio LightSwitch 2011 Extensibility Toolkit

Create The Project

First, we create an extension project in Visual Studio.

We add a New Item to the .Lspkg project.

We add a Control to the project.

A number of files are created in the various projects in the solution, including a SimpleDataGrid.lsml file in the Metadata/Controls folder in the .Common project.

Change the code in the SimpleDataGrid.lsml file to the following code:

 

<?xml version="1.0" encoding="utf-8" ?>
<ModelFragment
  xmlns="http://schemas.microsoft.com/LightSwitch/2010/xaml/model"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <Control Name="SimpleDataGrid"
    SupportedContentItemKind="Collection"
    DesignerImageResource="SimpleDataGridExtension.SimpleDataGrid::ControlImage"
    AttachedLabelSupport="DisplayedByContainer"
    ChildView=":Summary">
    <Control.Attributes>
      <DisplayName Value="SimpleDataGrid" />
    </Control.Attributes>
  </Control>
</ModelFragment>

 

The key thing to note is that the SupportedContentItemKind is set to Collection.

 

Create The Control

Open the SimpleDataGrid.xaml file in the Presentation/Controls folder in the .Client project.

Remove the TextBox control.

Drag and drop the DataGrid control on the page (this will automatically add the required references to the project).

Set the DataGrid name to dgItems.

Open the SimpleDataGrid.xaml.cs file in the Presentation/Controls folder in the .Client project.

Change the using statements to the following:

 

using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Collections;
using System.Windows.Data;
using System.Windows.Markup;
using System.ComponentModel.Composition;
using Microsoft.LightSwitch.Details;
using Microsoft.LightSwitch.Model;
using Microsoft.LightSwitch.Presentation;
using Microsoft.LightSwitch.Details.Client;

Note: in the following code, you will see wavy red lines when a code section does not have it’s remaining code inserted yet.

 

Add the following line to the constructor of the class:

 

this.SetBinding(ContentItemProperty, new Binding());

 

 

Add the following Dependency property:

 

        /// <summary>
        /// ContentItem property is bound to the IContentItem inside the 
        /// LightSwitch screen layout tree. 
        /// This is created to monitor if the DataContext of the control is changed.
        /// </summary>
        public IContentItem ContentItem
        {
            get { return (IContentItem)GetValue(ContentItemProperty); }
            set { SetValue(ContentItemProperty, value); }
        }
        public static readonly DependencyProperty ContentItemProperty =
            DependencyProperty.Register("ContentItem",
            typeof(IContentItem), typeof(SimpleDataGrid),
            new PropertyMetadata(OnContentItemChanged));
        private static void OnContentItemChanged(DependencyObject d,
            DependencyPropertyChangedEventArgs e)
        {
            // When the ContentItem is changed, we reset the internal data binding
            ((SimpleDataGrid)d).SetContentDataBinding();
        }

 

 

Finally insert the following code to fill the DataGrid:

 

    private void SetContentDataBinding()
    {
        if (ContentItem != null)
        {
            // Get the collection that was passed to the control
            IScreenCollectionProperty boundCollection = 
                (IScreenCollectionProperty)ContentItem.Screen.Details.Properties[ContentItem.BindingPath];
            // Get the Model Members of the collection
            var ModelMembers = 
                ContentItem.ChildItems[0].ResultingDataType.Members.OfType<IDataTypeMemberDefinition>();
            // Loop thru each Model Members
            foreach (var item in ModelMembers)
            {
                // Only use the properties that are EntityProperties
                if (item.GetType().FullName == "Microsoft.LightSwitch.Model.Storage.EntityProperty")
                {
                    // Create a DataGrid column
                    DataGridTextColumn objDataGridTextColumn = new DataGridTextColumn();
                    objDataGridTextColumn.Header = item.Name.ToString();
                    objDataGridTextColumn.Binding = new Binding(item.Name.ToString());
                    dgItems.Columns.Add(objDataGridTextColumn);
                }
            }
            // Turns off Auto Generate Columns on the DastaGrid
            dgItems.AutoGenerateColumns = false;
            // Bind the DataGrid
            dgItems.ItemsSource = (IEnumerable)boundCollection.Value; 
        }
    }

 

Run The Project

We click on the .Vsix project…

We then Start Debugging. This will open another instance of Visual Studio.

We create or open a LightSwitch project and go into Properties.

We click on the Extensions tab and enable the extension.

When laying out a Screen we now have the option to select the SimpleDataGrid control for any collection.

When we run the application, we see the control.

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

Also See:

• How to: Debug or Test a LightSwitch Extension

Microsoft Tutorials:

• 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