Blogs » Mihail Mateev » Visual Studio LightSwitch Custom Control Extensions Development

Visual Studio LightSwitch Custom Control Extensions Development

Visual Studio LightSwitch proposes a flexible extensibility mechanism to use custom data sources, controls or themes.

This article is related with custom LightSwitch control extension – the powerful approach to make your Silverlight components available in Visual Studio LightSwitch extensions.

The LightSwitch framework leverages the capabilities of the Managed Extensibility Framework (MEF) to expose (and discover) extensibility points. By taking advantage of these extensibility points, developers can create their own components to be consumed from LightSwitch applications. LightSwitch takes advantage of Visual Studio's extensibility mechanisms by allowing LightSwitch extensions to be distributed and installed using VSIX installers.

The article contains a walk through how to create a LightSwitch extension, using XamNumericSlider component from Infragistics Silverlight UI Controls suite.

Requirements to build an application:

Software:

Visual Studio 2010 Professional or better
Visual Studio LightSwitch Beta 1:
Visual Studio 2010 SDK:
NetAdvantage for Silverlight Data Visualization 2010 vol.2
NetAdvantage for Silverlight Line of Business 2010 vol.2
Demo application is based on an application, used for the article: “Creating a Visual Studio LightSwitch Custom Silverlight Control (Using Infragistics Components)”.

Steps to reproduce a sample:

Create a Silverlight 4 Application, named XamNumericSliderControl.Client.
This project contains the implementation of the XamNumericSliderControl
and provides the IControlFactory and IResourceProvider implementation and exports
to make the control available in LightSwitch.
Create a Silverlight 4 Host Application, used to host and test a LightSwitch control extension.
Create a Silverlight 4 Library - XamNumericSliderControl.Common.
This project defines the control as a LightSwitch enabled extension by using metadata files associated to the control. This metadata is provided by exporting an IModuleDefinitionLoader implementation.
Create a CLR4 project, named XamNumericSliderControl.Design.
(Provides support for the Visual Studio Screen designer. It contains the icons and images that will be used to represent the control. These images are provided by exporting an IResourceProvider implementation.)
Create a LightSwicth specific packaging project XamNumericSliderControl.LsPkg
(This project references the assemblies from all aforementioned projects. As well as all assemblies that are necessary for the package to work.)
Create a VSIX Project: XamNumericSliderControl.Vsix
This project creates a Vsix package containing the LsPkg package and provides a consumption mechanism for it as a Visual Studio extension.
Install the Extension and enable it in a project InfraOrders (based on the article “Creating a Visual Studio LightSwitch Custom Silverlight Control (Using Infragistics Components)”.
Add in the project InfraOrders OrderDetails ListView screen and use XamNumericSliderControl to display the Quantity value.
Run the application

Create a Silverlight 4 Application

Create an empty solution, named XamNumericSliderControlExtension.
Add a new Silverlight 4 Application project , named XamNumericSliderControl.Client.
Create a folders, named Controls , ControlImages and Resources:

In the Controls folder add an user control, named XamNumericSlider.xaml.
Add four dependency properties: Value, MinValue, MaxValue and NumberOfTickMarks:

#region MaxValue (DependencyProperty)

  

/// <summary>

/// A description of the property.

/// </summary>

public double MaxValue

{

    get { return (double)GetValue(MaxValueProperty); }

    set { SetValue(MaxValueProperty, value); }

}

public static readonly DependencyProperty MaxValueProperty =

    DependencyProperty.Register("MaxValue", typeof(double), typeof(XamNumericSlider),

      new PropertyMetadata(100.0));

  

#endregion

  

  

#region MinValue (DependencyProperty)

  

/// <summary>

/// A description of the property.

/// </summary>

public double MinValue

{

    get { return (double)GetValue(MinValueProperty); }

    set { SetValue(MinValueProperty, value); }

}

public static readonly DependencyProperty MinValueProperty =

    DependencyProperty.Register("MinValue", typeof(double), typeof(XamNumericSlider),

      new PropertyMetadata(0.0));

  

#endregion

  

  

#region NumberOfTickMarks (DependencyProperty)

  

/// <summary>

/// A description of the property.

/// </summary>

public int NumberOfTickMarks

{

    get { return (int)GetValue(NumberOfTickMarksProperty); }

    set { SetValue(NumberOfTickMarksProperty, value); }

}

public static readonly DependencyProperty NumberOfTickMarksProperty =

    DependencyProperty.Register("NumberOfTickMarks", typeof(int), typeof(XamNumericSlider),

      new PropertyMetadata(10, new PropertyChangedCallback(OnNumberOfTickMarksChanged)));

  

 

private static void OnNumberOfTickMarksChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

    ((XamNumericSlider)d).OnNumberOfTickMarksChanged(e);

}

  

protected virtual void OnNumberOfTickMarksChanged(DependencyPropertyChangedEventArgs e)

{

    int x = (int) e.NewValue;

    this.xamNumericSliderControl.TickMarks[0].NumberOfTickMarks = x;

}

  

#endregion

  

#region Value (DependencyProperty)

  

/// <summary>

/// A description of the property.

/// </summary>

public double Value

{

    get { return (double)GetValue(ValueProperty); }

    set { SetValue(ValueProperty, value); }

}

public static readonly DependencyProperty ValueProperty =

    DependencyProperty.Register("Value", typeof(double), typeof(XamNumericSlider),

      new PropertyMetadata(0.0));

  

#endregion //Value

Add in the Xaml file add an instance of the Infragistics XamNumericSlider, bound to the properties in the UserControl

<UserControl x:Name="RootPanel" x:Class="XamNumericSliderControl.Client.XamNumericSlider"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:ls="clr-namespace:Microsoft.LightSwitch.Presentation.Framework;assembly=Microsoft.LightSwitch.Client"

    xmlns:ig="http://schemas.infragistics.com/xaml"

    mc:Ignorable="d" HorizontalContentAlignment="Stretch">

  

    <ls:AttachedLabelItemPresenter LabelStyleId="AttachedLabelStyle" HorizontalAlignment="Stretch">

        <ls:ContentSizingControl HorizontalAlignment="Stretch" 

            ContentSizingMode="{Binding Properties[ContentSizingMode]}"

            ContentSize="{Binding Properties[ContentSize]}">

            <ig:XamNumericSlider HorizontalAlignment="Stretch" Width="{Binding ElementName=RootPanel, Path=Width}" 

                                Height="{Binding ElementName=RootPanel, Path=Height}" 

                                 Name="xamNumericSliderControl" VerticalAlignment="Top" 

                                 MinValue="{Binding ElementName=RootPanel, Path=MinValue}" 

                                 MaxValue="{Binding ElementName=RootPanel, Path=MaxValue}"

                                 Value="{Binding ElementName=RootPanel, Path=Value}">

                <ig:XamNumericSlider.Thumb>

                    <ig:XamSliderNumericThumb ToolTipVisibility="Visible" IsDragEnabled="False"/>

                </ig:XamNumericSlider.Thumb>

                <ig:XamNumericSlider.TickMarks>

                    <ig:SliderTickMarks UseFrequency="False"

                                        NumberOfTickMarks="{Binding ElementName=RootPanel, Path=NumberOfTickMarks}"/>

                </ig:XamNumericSlider.TickMarks>

            </ig:XamNumericSlider>

        </ls:ContentSizingControl>

    </ls:AttachedLabelItemPresenter>

</UserControl>

Files in the ControlImages and Resources folder will be implemented in the later stage, when we have a XamNumericSliderControl.Design 

assembly.

Make a XamNumericSliderControl.Client.XamNumericSlider a root visual for this application:

Change in the App.xaml.cs Application_Startup event handler to have the code below:

private void Application_Startup(object sender, StartupEventArgs e)

{

    this.RootVisual = new XamNumericSliderControl.Client.XamNumericSlider();

}

Create a Silverlight 4 Host Application, used to host and test a LightSwitch control extension

Make a reference to XamWebSliderControl.Client assembly and add in instance of a XamWebSliderControl in the MainPage.xaml in the host application:

<StackPanel x:Name="LayoutRoot" Background="White">

     <TextBlock>This Silverlight page hosts the XamNumericSlider Control for testing the control in the usual Silverlight environment.</TextBlock>

     <TextBlock>The Lab will guide you on how to create a LightSwitch Extension to use this control.</TextBlock>

     <TextBlock FontWeight="Bold">XamNumericSlider Control:</TextBlock>

     <Controls:XamNumericSlider Value="20" MaxValue="100" NumberOfTickMarks="9" Width="300"></Controls:XamNumericSlider>

 </StackPanel>

This application could be used to test the LightSwitch control extension in a Silverlight host to be sure that the extension
works properly.

Create a Silverlight 4 Library - XamNumericSliderControl.Common.

Add the XamNumericSliderControlModule class.

The XamNumericSliderModule class will define the Module and Control’s name. Use the following code to do this:

namespace XamNumericSliderControl.Client

{

    public class XamNumericSliderControlModule

    {

        public const string Name = "XamNumericSliderControl";

        private const string ModulePrefix = Name + ":";

  

        public class XamNumericSliderControl

        {

            private const string Name = "XamNumericSliderControl";

            public const string GlobalName = ModulePrefix + Name;

        }

    }

}

Create a Metadata folder inside the XamNumericSlider.Common project. In this folder you will place all the metadata files that describe the LightSwitch extension. To do this, right click the XamNumericSlider.Common project and select Add | New Folder. Name the folder Metadata.
Create a Resources folder inside the XamNumericSlider.Common project. In this folder you will place a resource file. To do this, right click the XamNumericSlider.Common project and select Add | New Folder. Name the folder Resources.
Inside the Resources folder add a new resource file named XamNumericSliderControlResources.resx.
Inside the Metadata folder create a new class named XamNumericSliderControlModuleLoader.
Add the following references to the XamNumericSliderControl.Common project
System.ComponentModel.Composition
Microsoft.LightSwitch. By default LightSwitch installs this assembly at C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\LightSwitch\1.0\Client\
The XamNumericSliderControlModuleLoader class will load the module definition files by implementing the LightSwitch the IModuleDefinitionLoader interface. Copy the following code to make the XamNumericSliderControlModuleLoader class implement the IModuleDefinitionLoader interface:

[DebuggerNonUserCodeAttribute(), Export(typeof(IModuleDefinitionLoader)), ModuleDefinitionLoader(XamNumericSliderControlModule.Name)]

public class XamNumericSliderControlModuleLoader : IModuleDefinitionLoader

{

  

    #region Member Variables

  

    private static string[] ModelFragments = { "XamNumericSliderControlModule.lsml", "XamNumericSliderControlPresentation.lsml" };

    private static string ResourceNamespace = typeof(XamNumericSliderControlModuleLoader).Namespace;

    private const string ResourcePathFormat = "{0}.{1}";

  

    #endregion //Member Variables

  

    #region IModuleDefinitionLoader

  

    public ResourceManager GetModelResourceManager()

    {

  

        return Resources.XamNumericSliderControlResources.ResourceManager;

    }

  

    public IEnumerable<Stream> LoadModelFragments()

    {

  

        Assembly assem = Assembly.GetExecutingAssembly();

        List<Stream> fragmentList = new List<Stream>();

  

        foreach (string fragment in ModelFragments)

        {

            string fragmentPath = string.Format(ResourcePathFormat, ResourceNamespace, fragment);

  

            Stream fragmentStream = assem.GetManifestResourceStream(fragmentPath);

            Debug.Assert(fragmentStream != null, "Could not obtain fragment stream.", "Looking for {0}", fragmentPath);

  

            fragmentList.Add(fragmentStream);

        }

  

        return fragmentList;

    }

  

    #endregion //IModuleDefinitionLoader

}

LightSwitch uses MEF to compose the different extension parts, and includes some LightSwitch specific attributes to help this purpose. To export the class as an IModuleDefinitionLoader use the following attributes to decorate the class:

[DebuggerNonUserCodeAttribute(), Export(typeof(IModuleDefinitionLoader)), ModuleDefinitionLoader(XamNumericSliderControlModule.Name)]

Add the XamNumericSliderControlModule.lsml metadata file to the Metadata folder. This XML file will define the module's name. To do this, add a new file to the Metadata folder with the lsml extension. You can use the XML File template specifying the name and extension

In the Properties window, set the Build Action of the BingMapControlModule.lsml file to Embedded Resource.

<?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">

  

  <Module Name="XamNumericSliderControl" />

  

</ModelFragment>

Add the XamNumericSliderControlPresentation.lsml metadata file. This file will contain the LightSwitch control definitions. The procedure for this is similar to step to create XamNumericSliderControlModule.lsml file.

<?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="XamNumericSliderControl"

    BaseControl="RootValueControl"

    SupportedContentItemKind="Value"

    DesignerImageResource="XamNumericSliderImages::XamNumericSliderControl" >

    <Control.Attributes>

      <DisplayName Value="$(XamNumericSliderControl_DisplayName)" />

    </Control.Attributes>

    <Control.SupportedDataTypes>

      <SupportedDataType DataType="Decimal"/>

      <SupportedDataType DataType="Int16"/>

      <SupportedDataType DataType="Int32"/>

      <SupportedDataType DataType="Int64"/>

      <SupportedDataType DataType="Double"/>

    </Control.SupportedDataTypes>

  

    <!-- Property overrides -->

    <Control.PropertyOverrides>

  

      <!-- ContentSizingMode override -->

      <ControlPropertyOverride

        Property="Microsoft.LightSwitch:RootControl/Properties[ContentSizingMode]"

        EditorVisibility="NotDisplayed">

        <ControlPropertyOverride.DefaultValueSource>

          <ScreenExpressionTree>

            <ChainExpression>

              <ConstantExpression ResultType="Microsoft.LightSwitch:String" Value="Text" />

            </ChainExpression>

          </ScreenExpressionTree>

        </ControlPropertyOverride.DefaultValueSource>

      </ControlPropertyOverride>

  

      <!-- ContentSize override -->

      <ControlPropertyOverride

        Property="Microsoft.LightSwitch:RootControl/Properties[ContentSize]"

        EditorVisibility="PropertySheet">

        <ControlPropertyOverride.DefaultValueSource>

          <ScreenExpressionTree>

            <ChainExpression>

              <ConstantExpression ResultType="Microsoft.LightSwitch:String" Value="Auto" />

            </ChainExpression>

          </ScreenExpressionTree>

        </ControlPropertyOverride.DefaultValueSource>

      </ControlPropertyOverride>

  

    </Control.PropertyOverrides>

  

    <!-- XamNumericSliderControl Properties -->

    <Control.Properties>

  

      <!-- XamNumericSliderControl MinValue Property -->

      <ControlProperty Name="MinValue"

        PropertyType="Microsoft.LightSwitch:Double"

        IsReadOnly="False"

        CategoryName="XamNumericSlider Properties"

        EditorVisibility="PropertySheet">      

        <ControlProperty.Attributes>

          <DisplayName Value="$(XamNumericSliderControl_MinValue_DisplayName)"/>

          <Description Value="$(XamNumericSliderControl_MinValue_Description)"/>

        </ControlProperty.Attributes>

      </ControlProperty>

  

      <!-- XamNumericSliderControl MaxValue Property -->

      <ControlProperty Name="MaxValue"

        PropertyType="Microsoft.LightSwitch:Double"

        IsReadOnly="False"

        CategoryName="XamNumericSlider Properties"

        EditorVisibility="PropertySheet">

        <ControlProperty.Attributes>

          <DisplayName Value="$(XamNumericSliderControl_MaxValue_DisplayName)"/>

          <Description Value="$(XamNumericSliderControl_MaxValue_Description)"/>

        </ControlProperty.Attributes>

      </ControlProperty>

  

      <!--NumberOfTickMarks-->

      <ControlProperty Name="NumberOfTickMarks"

        PropertyType="Microsoft.LightSwitch:Int32"

        IsReadOnly="False"

        CategoryName="XamNumericSlider Properties"

        EditorVisibility="PropertySheet">

        <ControlProperty.Attributes>

          <DisplayName Value="$(XamNumericSliderControl_NumberOfTickMarks_DisplayName)"/>

          <Description Value="$(XamNumericSliderControl_NumberOfTickMarks_Description)"/>

        </ControlProperty.Attributes>

      </ControlProperty>

  

    </Control.Properties>

  

  </Control>

</ModelFragment>

This file is the most important for design mode settings for LightSwitch custom control extension. It describes witch additional properties to display in design mode ,
size of the control content and and specifies the data types that can be bound to the control.

Open the XamNumericSliderControlResources.resx file inside the Resources folder.
Define the following resource entries and values for design mode support:

Add necessary classes to the Client project
In this task you will work on the project named XamNumericSliderControl.Client. In this project you will implement the functionality for the custom control using the metadata exposed through the XamNumericSliderControl.Common project.

Add a reference to the following assemblies in the XamNumericSliderControl.Common project:
Microsoft.LightSwitch.dll. By default this assembly is located at C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\LightSwitch\1.0\Client\.
Microsoft.LightSwitch.Client.dll. By default this assembly is located in the same directory as Microsoft.LightSwitch.dll.
In the Solution Explorer, right-click the XamNumericSliderControl.Client project and select the option to add an existing item. The Add Existing Item dialog appears.
Select the BingMapControlModule.cs file located under the XamNumericSliderControl.Common folder and add it as a link.
Add images 16x16 and 32x32 (XamNumericSliderControl16.png, XamNumericSliderControl32.png) in the ControlImages folder.
In he Resources folder add XamNumericSliderImageProvider.cs and XamNumericSliderImages.xaml files.

XamNumericSliderImages.xaml

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <BitmapImage x:Key="XamNumericSliderControl16" UriSource="/XamNumericSliderControl.Design;component/ControlImages/XamNumericSliderControl16.png"/>

    <BitmapImage x:Key="XamNumericSliderControl32" UriSource="/XamNumericSliderControl.Design;component/ControlImages/XamNumericSliderControl32.png"/>

  

</ResourceDictionary>

XamNumericSliderImageProvider.cs

[Export(typeof(IResourceProvider)), ResourceProvider("XamNumericSliderImages")]

public class XamNumericSliderImageProvider : IResourceProvider

{

  

    private static ResourceDictionary Resources;

    static XamNumericSliderImageProvider()

    {

        Uri resourceUri = new Uri("/XamNumericSliderControl.Client;component/Resources/XamNumericSliderImages.xaml", UriKind.Relative);

        Resources = new ResourceDictionary();

        Resources.Source = resourceUri;

    }

  

    public object GetResource(string resourceId, CultureInfo cultureInfo)

    {

        //throw new NotImplementedException();

  

        if (!(XamNumericSliderImageProvider.Resources.Contains(resourceId)))

        {

            return null;

        }

        else

        {

            return XamNumericSliderImageProvider.Resources[resourceId];

        }

    }

}

In the Controls folder add DataTemplates.xaml file:

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:s="clr-namespace:XamNumericSliderControl.Client;assembly=XamNumericSliderControl.Client">

    <DataTemplate x:Key="XamNumericSliderTemplate">

        <s:XamNumericSlider Value="{Binding Details.Value, Mode=TwoWay}"            

            MinValue="{Binding Properties[MinValue], Mode=TwoWay}" 

            MaxValue="{Binding Properties[MaxValue],  Mode=TwoWay}" 

            NumberOfTickMarks="{Binding Properties[NumberOfTickMarks], Mode=TwoWay}" 

            ></s:XamNumericSlider>

    </DataTemplate>

</ResourceDictionary>

Build Actions for each of these files could be find in the demo project.

In the XamNumericSliderControl.Client project add also XamNumericSliderControlFactory.cs file.

[Export(typeof(IControlFactory)), Export(typeof(IControlFactory))]

[ControlFactory(XamNumericSliderControlModule.XamNumericSliderControl.GlobalName)]

public class XamNumericSliderControlFactory : IControlFactory

{

    #region Member Variables

    private DataTemplate _dataTemplate;

    private static ResourceDictionary Dictionary;

    #endregion //Member Variables

  

    #region Constructors

  

    static XamNumericSliderControlFactory()

    {

        // Get resource

        Uri resourceUri = GetResourceUri();

        StreamResourceInfo streamInfo = System.Windows.Application.GetResourceStream(resourceUri);

        Debug.Assert(streamInfo != null, "ResourceDictionary load failed.", "Stream not found: {0}", resourceUri.ToString());

  

        if (streamInfo != null)

        {

            // Read resource contents

            string contents = string.Empty;

            using (var reader = new StreamReader(streamInfo.Stream))

            {

                contents = reader.ReadToEnd();

            }

  

            // Ensure contents is not empty

            Debug.Assert(!(string.IsNullOrEmpty(contents)), "ResourceDictionary load failed.", "Resource was empty: {0}", resourceUri.ToString());

  

            // Load the contents as resource dictionary

            XamNumericSliderControlFactory.Dictionary = (ResourceDictionary)XamlReader.Load(contents);

            Debug.Assert(XamNumericSliderControlFactory.Dictionary != null, "ResourceDictionary load failed.", "Resource wasn't ResourceDictionary: {0}", resourceUri.ToString());

        }

    }

  

    public XamNumericSliderControlFactory(string templateKey)

    {

        _dataTemplate = XamNumericSliderControlFactory.GetDataTemplate(templateKey);

    }

  

    public XamNumericSliderControlFactory()

        : this("XamNumericSliderTemplate")

    //INSTANT C# TODO TASK: C# does not have an equivalent to VB's 'MyClass' keyword

    //ORIGINAL LINE: MyClass.New("BingMapTemplate")

    {

    }

  

    #endregion //Constructors

  

    #region IControlFactory

  

    #region DataTemplate

    public DataTemplate DataTemplate

    {

        //get { throw new NotImplementedException(); }

        get

        {

            return _dataTemplate;

        }

    }

    #endregion //DataTemplate

  

    #region GetDisplayModeDataTemplate

    public DataTemplate GetDisplayModeDataTemplate(IContentItem contentItem)

    {

        //throw new NotImplementedException();

        return null;

    }

    #endregion //GetDisplayModeDataTemplate

  

    #endregion //IControlFactory

  

    private static DataTemplate GetDataTemplate(string templateKey)

    {

        Debug.Assert(XamNumericSliderControlFactory.Dictionary.Contains(templateKey), "DataTemplate not found.", "Looking for resource key '{0}'", templateKey);

  

        return XamNumericSliderControlFactory.Dictionary[templateKey] as DataTemplate;

    }

  

    private static Uri GetResourceUri()

    {

        Assembly assembly = Assembly.GetExecutingAssembly() as Assembly;

        AssemblyName thisAssemblyName = new AssemblyName(assembly.FullName);

  

        return new Uri(thisAssemblyName.Name + ";component/Controls/DataTemplates.xaml", UriKind.Relative);

    }

}

Create a CLR4 project, named XamNumericSliderControl.Design.

The Design project is a CLR Class Library project that will provide the design time support for the control in Visual Studio Screen Designer, such as images.

Add a new Windows Class Library project to the XamNumericSliderControl solution named XamNumericSliderControl.Design.
Add a new folder named ControlImages to the XamNumericSliderControl.Design project. This folder will contain the images used to show the control in the Screen Designer.
Add a new folder named Resources to the XamNumericSliderControl.Design project. This folder will contain the assets necessary to load the control images.
Place the XamNumericSliderControl16.png and XamNumericSliderControl.32.png images inside the ControlImages folder.
Set the Build Action for these two image files as Resource. To do this, select each file and in the Properties windows set the Build Action property to Resource.
Add a XamNumericSliderImages.xaml file to the Resources folder.

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <BitmapImage x:Key="XamNumericSliderControl16" UriSource="/XamNumericSliderControl.Design;component/ControlImages/XamNumericSliderControl16.png"/>

    <BitmapImage x:Key="XamNumericSliderControl32" UriSource="/XamNumericSliderControl.Design;component/ControlImages/XamNumericSliderControl32.png"/>

  

</ResourceDictionary>

Add the following references to the XamNumericSliderControl.Design project:
System.ComponentModel.Composition
System.Xaml
Microsoft.LightSwitch.

By default LightSwitch installs this assembly at C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\LightSwitch\1.0\Client\

Add the XamNumericSliderImageProvider class

[Export(typeof(IResourceProvider)), ResourceProvider("XamNumericSliderImages")]

public class XamNumericSliderImageProvider : IResourceProvider

{

  

    private static ResourceDictionary Resources;

    static XamNumericSliderImageProvider()

    {

        Uri resourceUri = new Uri("/XamNumericSliderControl.Client;component/Resources/XamNumericSliderImages.xaml", UriKind.Relative);

        Resources = new ResourceDictionary();

        Resources.Source = resourceUri;

    }

  

    public object GetResource(string resourceId, CultureInfo cultureInfo)

    {

        //throw new NotImplementedException();

  

        if (!(XamNumericSliderImageProvider.Resources.Contains(resourceId)))

        {

            return null;

        }

        else

        {

            return XamNumericSliderImageProvider.Resources[resourceId];

        }

    }

}

Create a LightSwicth specific packaging project XamNumericSliderControl.LsPkg

You need to add the XamNumericSliderControl.LsPkg project that generates a LightSwitch package, an .lspkg file that contains all the resources created in previous steps.

Add the XamNumericSliderControl.LsPkg class library project to the XamNumericSliderControl solution.
Change the content of the XamNumericSliderControl.LsPkg.csproj project file to add a references as a links:

<?xml version="1.0" encoding="utf-8"?>

<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

  <!-- This project creates a LSPKG package for the XamNumericSliderControl extension -->

  <PropertyGroup>

    <ProjectGuid>{224E0EAF-CCF6-4197-8FE3-EB08124B194C}</ProjectGuid>

    <OutputPath>..\XamNumericSliderControl.Vsix\</OutputPath>

    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>

    <Platform Condition=" '$(Platform)' == '' ">x86</Platform>

    <LightSwitchVersion>v1.0</LightSwitchVersion>

  </PropertyGroup>

  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|x86' ">

    <PlatformTarget>x86</PlatformTarget>

    <DebugSymbols>true</DebugSymbols>

    <DebugType>full</DebugType>

    <Optimize>false</Optimize>

    <ProjectPath>bin\Debug\</ProjectPath>

    <DefineConstants>DEBUG;TRACE</DefineConstants>

    <ErrorReport>prompt</ErrorReport>

    <WarningLevel>4</WarningLevel>

  </PropertyGroup>

  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|x86' ">

    <PlatformTarget>x86</PlatformTarget>

    <DebugType>pdbonly</DebugType>

    <Optimize>true</Optimize>

    <ProjectPath>bin\Release\</ProjectPath>

    <DefineConstants>TRACE</DefineConstants>

    <ErrorReport>prompt</ErrorReport>

    <WarningLevel>4</WarningLevel>

  </PropertyGroup>

  <PropertyGroup>

    <CreateLSPKG>true</CreateLSPKG>

    <LSPKGPackageName>LightSwitch XamNumericSlider Control</LSPKGPackageName>

    <PackageOutputFilename>$(OutputPath)\XamNumericSliderControl.LsPkg</PackageOutputFilename>

    <Author>DPE</Author>

    <PackageVersion>1.0</PackageVersion>

    <PackageID>XamNumericSliderControl</PackageID>

  </PropertyGroup>

  <PropertyGroup>

    <AssemblyName>XamNumericSliderControl.LsPkg</AssemblyName>

  </PropertyGroup>

  <ItemGroup>

    <ClientGeneratedReference Include="..\XamNumericSliderControl.Client\Bin\$(Configuration)\XamNumericSliderControl.Client.dll" />

    <ClientGeneratedReference Include="..\Lib\InfragisticsSL4.v10.2.dll" />

    <ClientGeneratedReference Include="..\Lib\InfragisticsSL4.Controls.Editors.XamSlider.v10.2.dll" />

    <ClientGeneratedReference Include="..\XamNumericSliderControl.Common\Bin\$(Configuration)\XamNumericSliderControl.Common.dll" />

    <IDEReference Include="..\XamNumericSliderControl.Common\Bin\$(Configuration)\XamNumericSliderControl.Common.dll" />

    <IDEReference Include="..\XamNumericSliderControl.Design\Bin\$(Configuration)\XamNumericSliderControl.Design.dll" />    

    <ServerGeneratedReference Include="..\XamNumericSliderControl.Design\Bin\$(Configuration)\XamNumericSliderControl.Design.dll" />

  </ItemGroup>

  <ItemGroup>

    <Folder Include="My Project\" />

  </ItemGroup>

  <ItemGroup>

    <ProjectReference Include="..\XamNumericSliderControl.Client\XamNumericSliderControl.Client.csproj">

      <Project>{AE03E032-7583-4410-9824-D1BE1718DA08}</Project>

      <Name>XamNumericSliderControl.Client</Name>

    </ProjectReference>

    <ProjectReference Include="..\XamNumericSliderControl.Common\XamNumericSliderControl.Common.csproj">

      <Project>{0E41E89D-7478-4BCB-818E-79AEB4650818}</Project>

      <Name>XamNumericSliderControl.Common</Name>

    </ProjectReference>

  </ItemGroup>

  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />

  <!-- Override these targets because we're not building an assembly in this project file like in the traditional sense -->

  <Target Name="Compile" Condition="'$(BuildingInsideVisualStudio)' != 'true'" />

  <Target Name="CopyFilesToOutputDirectory" Condition="'$(BuildingInsideVisualStudio)' != 'true'" />

  <Import Project="$(MSBuildExtensionsPath)\Microsoft\VisualStudio\LightSwitch\$(LightSwitchVersion)\Microsoft.LightSwitch.SDK.targets" />

</Project>

Set a specific output path for the generated LsPkg : ..\XamNumericSliderControl.Vsix\

Create a VSIX Project: XamNumericSliderControl.Vsix

In Visual Studio, add a new VSIX project named XamNumericSliderControl.Vsix. To do this, you can use the VSIX Project template.

In the VSIX Manifest Editor, complete the Author field with the author you want to appear for the installer.

Build the XamNumericSliderControlsolution.
Add the XamNumericSliderControl.lsPkg to the VSIX project. To do this, perform the following steps:
In Content section of the VSIX Manifest Editor, click Add Content.
In the Select a source section, check the File option.
In the Choose File dialog, select the XamNumericSliderControl.LsPkg file located under LsPkg build output folder.

Rebuild the XamNumericSliderControlsolution. When the XamNumericSliderControl.Vsix project is built, it generates the XamNumericSliderControl.Vsix installer under the output folder.

Install the Extension and enable it in a project InfraOrders

Look at the installed extensions Tools->Extensions Manager in Visual Studio 2010

There is no XamNumericSliderControl extension

Run the Vsix installer

Look at the installed extensions Tools->Extensions Manager in Visual Studio 2010 (there must be XamNumericSliderControl)

Open the InfraOrders solution from the article “Creating a Visual Studio LightSwitch Custom Silverlight Control (Using Infragistics Components)” and enable XamNumericSliderControl extension:

Add in the project InfraOrders OrderDetails ListView screen and use XamNumericSliderControl to display the Quantity value.

Add a new List and Detail Screen named OrderListListDetail using data from OrderList

In the details column change the control, used for Quantity to XamNumericSliderControl

In the property sheet set MaxValue=100, NumberOfTickMarks=9

Check that OrderListListDetail screen is added to the screen navigation.

Run the application

Select the OrderListListDetail screen

Quantity value is represented via XamNumericSliderControl LightSwitch extension.

Summary:

This example demonstrates the advantages of LightSwitch custom control extensions.
It is possible in the same way to create LightSwitch extensions based on Silverlight components and add functionalities to your LightSwitch application.
Article is based on the Visual Studio LightSwitch Beta 1. Probably in the future creating of LightSwitch extensions will be easier and faster, including project
templates for LsPkg projects and some specific items.

Source code of the control extension you could download here:XamNumericSliderControlExtension.zip

Source code of the demo application you could find here:InfraOrdersCustomExtension.zip

Posted 10-05-2010 9:53 AM by [Infragistics] Mihail Mateev

Filed under: Silverlight, VS2010, Multi-tier Applications, XamMap, Visual Studio LightSwitch, Spatial Data, LightSwitch Extensibility, Silverlight Components, LightSwitch Custom Control Extensions, LightSwitch Extensions, XamNumericSlider, Visual Studio Extensions, C#, LightSwitch Components, XamSlider, LightSwitch Applications, MEF

Comments

fedison72 wrote re: Visual Studio LightSwitch Custom Control Extensions Development

on 03-27-2011 9:01 PM

hello you have plans to create extensions for launch LightSwitch as news about

Add a Comment

Mihail Mateev

Visual Studio LightSwitch Custom Control Extensions Development

Comments

Add a Comment

Syndication

Recent Posts

Tags

Archives