creatcustomcontrolforlswithsl

7/31/2019 CreatCustomControlforLSwithSL

1/14

With Visual Studio LightSwitch, you have a get out of jail free card in the use ofCustomSilverlight Controls. With a Custom Silverlight Control, you can implement functionality that isoutside the normal abilities of LightSwitch.

Im sure your greatest fear is having to stand in front of the Chief Technology Officer, and explain whythe LightSwitch application, that the company invested so much time and energy into, has to now be re-written as a regular Silverlight application because it cant perform the new requirements.

Lets put aside the fact that in normal business environments, you have several applications runningside-by-side, and that would also work with LightSwitch. However, you may find that in most cases,you just need to create Silverlight Custom Controls, and plug them into LightSwitch.

Note:you needVisual Studio Professional(or higher) to create Custom Silverlight Controls.

The LightSwitch Sample Project

Creating A LightSwitch CustomSilverlight Control

Written by:Michael Washington8/21/2010 3:34:00 PM

Page 1 of 14Creating A LightSwitch Custom Silverlight Control (Print Friendly View)

7/5/2011http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/2/Creating-A-LightSwitch-Custom ...


2/14

Make a new LightSwitch project.

Select Create a new Table.

Call it Customers and add a Name and a MoneyOwed column.




3/14

Add a new Screen.

Add a List and Details Screen.

Hit F5 to run the project.




4/14

Run the application and enter some sample data.

Create The Custom Control

Add a new Project.




5/14

Create a Silverlight Class Library. Call it SilverlightCustomControls.

Select Silverlight 4.




6/14

The Project will show in the Solution Explorer, right-clickon the Class1.cs file and Delete it.

You can put anything on a Silverlight Custom Control, so we will put a Silverlight Gauge on the pageust to make a point.

Go to the Scott Logic site, and download Colin Eberhardts Radial Gauge Silverlight Control:

http://www.scottlogic.co.uk/blog/colin/2010/08/developing-a-very-lookless-silverlight-radial- gauge-control/

Unzip his download, and then select Add, then Existing Project




7/14

Add his GagueControl project.

Select Add Reference in your Custom Silverlight Controls Project.




8/14

Add a Project reference to the GagugeControl Project.

Right-clickon the Custom Silverlight Controls Project and add New Item




9/14

Create a Silverlight User Control. Call it RadialGuage.xaml.

Grab the GaugeControl out of the Toolbox

and drop it on the page designer.




10/14

Now, lets go back and open the Screen we created in the LightSwitch Project.

Notice that the collection is called CustomersSet and the field is called MoneyOwed.

Change the XAML markup for the Gauge to:


11/14

Save the page and Build the project.

Consuming The Silverlight Custom Control

Return back to the LightSwitch Screen and click on the Rows Layout | Customers Details row and

then clickAdd Layout Item then Custom Control.

Click the Add Reference Button.

Name="gaugeControl1"Value="{Binding Screen.CustomersSet .SelectedItem.MoneyOwed}"

Maximum="1000"Minimum="0"VerticalAlignment="Top" />




12/14

Create a Project reference to your Custom Silverlight Controls project.




13/14

You will now be able to select the Custom Control you created.

Leave Screen in the data Text Box, because we programmed the binding in the Control to use thedata coming from Screen, and clickOK.




14/14

Now when we run the application, the Gauge reflects the money owed.

Special Thanks

A special thanks to Sheel Shah for explaining how to create the binding code.

Download code:

http://silverlight.adefwebserver.com/files/lightSwitch/CustomSilverlightControl.zip


creatcustomcontrolforlswithsl

Documents