You are here:   Blog
Register   |  Login

LightSwitch News

 

Aug 21

Written by: Michael Washington
8/21/2010 2:34 PM  RssIcon

image

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

I’m sure your greatest fear is having to stand in front of the Chief Technology Officer, and explain why the 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 “can’t perform the new requirements”.

Let’s put aside the fact that in normal business environments, you have several applications running side-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 need Visual Studio Professional (or higher) to create Custom Silverlight Controls.

The LightSwitch Sample Project

image

Make a new LightSwitch project.

image

Select Create a new Table.

image

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

image

Add a new Screen.

image

Add a List and Details Screen.

image

Hit F5 to run the project.

image

Run the application and enter some sample data.

 

Create The Custom Control

image

Add a new Project.

image

Create a Silverlight Class Library. Call it SilverlightCustomControls.

image

Select Silverlight 4.

image

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

image

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

Go to the Scott Logic site, and download Colin Eberhardt’s Radial Gauge Silverlight Control:

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

image

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

image

Add his GagueControl project.

image

Select Add Reference in your Custom Silverlight Controls Project.

image

Add a Project reference to the GagugeControl Project.

image

Right-click on the Custom Silverlight Controls Project and add New Item…

image

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

image

Grab the GaugeControl out of the Toolbox

image

… and drop it on the page designer.

image

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.

image

Change the XAML markup for the Gauge to:

    <Grid x:Name="LayoutRoot" Background="White" Width="200" Height="200">
        <my:GaugeControl HorizontalAlignment="Left" Margin="10,10,10,10" 
        Name="gaugeControl1" Value="{Binding Screen.CustomersSet .SelectedItem.MoneyOwed}" 
        Maximum="1000" Minimum="0" VerticalAlignment="Top"  />
    </Grid>

Save the page and Build the project.

 

Consuming The Silverlight Custom Control

image

Return back to the LightSwitch Screen and click on the Rows Layout | Customers Details row and then click Add Layout Item then Custom Control.

image

Click the Add Reference Button.

image

Create a Project reference to your Custom Silverlight Controls project.

image

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 the data coming from “Screen”, and click OK.

image

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

28 comment(s) so far...


Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Just spotted this page using the gauge control I created last week. Nice one :-)

Regards, Colin E.

By Colin E. on   8/23/2010 8:37 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@Colin E. - Thanks for the code!

By Michael Washington on   8/23/2010 8:37 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Is there a way to define binding in lightSwitch and not in UC? That would give max flexibity making UC more generic!

Regards

By John on   8/24/2010 1:39 PM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@John - there may be. I haven't figured it out yet. Microsoft just released some documentation (at: bit.ly/aBpZPu) and I haven't had a chance to go through it yet.

By Michael Washington on   8/24/2010 1:41 PM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Create timing Michael!

Interested as well in hearing about the binding that @John asked about earlier. Keep the posts coming.

Cheers to @Colin for the control too!

By Paul on   8/25/2010 8:39 AM
Gravatar

Windows Management in Silverlight 4

Hello Michael,
It is my hope that you have deep knowledge on Silverlight and LightSwitch. I am learning silverlight but am not happy yet with Windows Management in Silverlight as Compared to LightSiwtch applications. With lightswitch applications you can have multiple screens open and switching to different forms is easy and even closing a form.

Can we do this in silverlight applications or is there a way we can use lightswitch shell in silverlight applications.

Thanks.

By Amour Rashid on   9/6/2010 5:03 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@Amour Rashid - You can do anything in Silverlight that you can do in LightSwitch because LightSwitch *IS* a Silverlight application.

I have examples at: silverlightdesktop.net and www.codeproject.com/KB/silverlight/RiaTasks2.aspx

By Michael Washington on   9/6/2010 5:06 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Thank you Michel you always taught me new skills
I think Light Switch will be the talk time in all business large and small

By anwar alhasan on   9/16/2010 6:01 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Great, great, great! Simply great your blog and its content. I'm exicted with LightSwitch, thanks for all the information.

By Jhonny López on   9/21/2010 7:38 PM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Isn't there a way to do deferred binding so that the control could be reused? I thought I saw somewhere (CH9 deeper dive video) where you could just do something like Value="{Binding}" and then set the actual binding on the LS page to the property you are actually binding to.

By Bob Baker on   10/7/2010 11:47 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@Bob Baker - I could not get deferred binding to work. Not that it is not possible, I just did not want to get stuck trying to get it to work in Beta1

By Michael Washington on   10/7/2010 12:05 PM
Gravatar

Broken in Beta2- requires a change in the XAML

Michael,

I redid your example using Beta2 and discovered the gauge control example doesn't work.

I checked over the code and references. Compared my Beta2 version to the Beta1 version which is running in a VM and couldn't find an obvious difference. The behavior though was as if the binding was breaking.

Drilling deeper, it appears Beta2 has renamed the customer collection.

While running Beta2 and Beta1 and examining the local variables, I found that CustomerCollection in Beta1 is renamed to Customer in Beta2.

I changed the XAML binding from:

Value="{Binding Screen.CustomersCollection.SelectedItem.MoneyOwed}"

Value="{Binding Screen.Customers.SelectedItem.MoneyOwed}"

With this change in the XAML, the binding worked, the Guage responds to changes in the customer selection.

Dan

By Dan Moyer on   3/27/2011 8:24 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@Dan Moyer - Thanks I will update the article when I get time.

By Michael Washington on   3/27/2011 8:25 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Hi Michael,

Just started playing with using 3rd party controls in LS B2. Do you know what the trick is to get an inserted 3rd party control to act as a container? I want a GroupBox in LS and although I can add the GroupBox from Silverlight Contribs into a LS screen, it will not allow me to add any of the LS screen fields/items into that GroupBox.

Unless the the answer lies in creating a control extension (as per the LS Ext Cookbook) and specify SupportedContentItemKind="Group", but I was hoping to avoid going that far that for now.

Thanks in advance

By Xander on   3/28/2011 8:26 PM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@Xander - I am not positive, but for what you describe I think you need to make a full extension.

By Michael Washington on   3/28/2011 8:27 PM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

This article has been updated for LightSwitch Beta 2.

By Michael Washington on   4/3/2011 3:28 PM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

If you want an use control that is used in different screens you can solve the binding issue listed in the comments above by changing the binding to change the binding to:

{ Binding Screen.Value }

Next create a Data Item, choose 'Local Property' and call it 'Value'
Last step is to set the property in the 'Created' event.

It is bit of work and it's dirty, but that is the only way to solve this binding issue I got working.

By Shivern on   4/7/2011 6:50 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Lightswitch makes available a few properties of a field for binding, the most obvious being 'Value'.

Example -
I am using Sharepoint 2010 as a datasource and I have a picture column that Sharepoint formats the Url as 'urltoresource, resourcedescription' (thisurl.com/thisfolder/thisimage.png, thisisadescriptionforthehyperlink)

I created a simple Silverlight Control with an image on it using the binding -
Source="{Binding Path=Value, Mode=TwoWay,Converter={StaticResource SUrl}}"

The converter strips out the description and loads the url into the image control -

public class SharepointUrl : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string s1 = "";
BitmapImage MyImage=null;

if (value != null)
{
string sval = (string)value;
var surl = Regex.Split(sval, ", ");

if (surl.Length > 0)
{
s1 = surl[0];
MyImage = new BitmapImage(new Uri(s1));
}

}
return MyImage;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}



This can now be used on any Sharepoint picture field (or any url, description formated image field).

By Paul Ruston on   4/20/2011 5:22 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Very nice step by step tutorial !!!
Good Job.

By Juanlu, elGuerre on   5/4/2011 3:22 PM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

good article, worked from the first time :D

Could you tell me if/how I can add warning messeges instead of error messeges ?
For ex :
if (MoneyOwed 800)
{
..MessegeBox("You are close to the limit!");
}

By Misi Moisei on   5/12/2011 4:46 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@Misi Moisei - It can be done, however, it is too much to explain in the comments of this bog post. please post any questions to the forums. thanks.

By Michael Washington on   5/12/2011 4:47 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

In this article you cover binding the control to the selected item. How do I bind a custom control to ‘running’ data - namely the data as it comes from the collection when the initial screen is being rendered?
Say I have a collection of 1000 People objects. The People class has an item which is a birthdate and I want to display it as some visualization of age – so I have a custom control that calculate the age based on today’s date and displays it as a progress bar or a pie chart – but I want it to show next to each person when the screen is rendered not when I select a specific person. I have a Dependency Property called Birtdate that takes [DateTime?] but I do not know how to bind it.

By dfurshpan on   9/8/2011 5:02 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@dfurshpan - Please post questions to the forums. Thanks.

By Michael Washington on   9/8/2011 5:05 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

I also thought that creating a custom control could some how get around the issue of not being able to browse outside of the users My Documents folder. I downloaded an addon through the Extension Manager called Document Toolkit for LightSwitch that seems to have no problem showing an OpenFileDialog then getting binarydata stream to store a file into a binary field in your database.

Example of this addon:

Private Function SelectFile()
Dim result As FileInfo = Nothing
Dispatchers.Main.Invoke(
Sub()
Dim dlg = New OpenFileDialog()
If dlg.ShowDialog = True Then
result = dlg.File
End If
End Sub)

SelectFile = result
End Function
Private Sub AssetFilesAddNew_Execute()

Dim sfile = SelectFile()
If Not sfile Is Nothing Then
Dim reader = DocumentReader.Create(sfile)
Using reader
Dim document = Me.AssetFiles.AddNew
document.FileName = sfile.Name
document.File = reader.ToBinary
document.AddedBy = Me.Application.User.FullName
document.DateAdded = Date.Now
End Using
End If

You notice the document.File = reader.ToBinary? It lets you select a file from anywhere, getting around the security exceptions that LightSwitch/SilverLight has. So how did they write this extension? I want to write a simple extension with one function, that reads file data into a byte() array then return it to LightSwitch to store in a binary field... why does it have to be this complicated?

By Joseph Stackhouse on   11/10/2011 12:44 PM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@Joseph Stackhouse - Please post technical questions to the forums. Thanks

By Michael Washington on   11/10/2011 12:44 PM
Gravatar

Re: Creating A LightSwitch exten shell navigation

hi i create a shell in that i will add hyperlink button when click that it open webpage any body knows pls post ....

By kartheek nadendla on   5/1/2012 7:41 PM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

Dear Michael Washington:
I have read one of your famous article named "An Advanced Visual Studio LightSwitch Application",on Code Project.I have one question ,you tell us how to bound a button from silverlight to Lightswitch,however,what i need now is i do not know how to bound a textbox to a LightSwitch property.
For example the search textbox on the silverlight screen,with what method that i can bound to the lightswitch screen property.
you are really good at this !excellent!

By Jerry on   8/21/2014 1:24 AM
Gravatar

Re: Creating A LightSwitch Custom Silverlight Control

@Jerry - See: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/24/This-Is-How-LightSwitch-Does-MVVM.aspx
and
http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/63/Silverlight-RichTextBox-Integrating-A-Control-That-Does-Not-Have-a-Dependency-Property-In-LightSwitch.aspx

By Michael Washington on   8/21/2014 3:55 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation