Adding a user control to a Visual Studio LightSwitch Application

Okay.. also as response to offline inquiries on how to change the look of a Visual Studio LightSwitch application and if it is even remotely possible to add your own control to it, here is a blog to show how it is done. If you have been reading the previous parts of my series of blogs for developing a Visual Studio LightSwitch application, you won’t be surprised to hear that VS-LS uses Silverlight OOB(Out Of Browser) technology to create the application. So how do we add a user control? We add a new SILVERLIGHT control to our application.

I don’t really have a need for a user control in the application that I am making so I will just add a new screen that we can mess around with :p

So I add a new screen to my existing project:

But won’t do anything to it, yet. I just need a place to drop the user control.

Now to create a user control I add a new Silverlight Class Library by right-clicking the solution and choosing Add-New-Project and choosing Silverlight Class Library from the selection.

And now we have a place to play J

The next thing we do is to add a Silverlight user control to this Silverlight project. Right-click on the class library, choose add new item and choose Silverlight User Control.

I named mine “lightList” because.. er.. yeah.

Now I have a nifty xaml file that I can edit using either visual studio or expression studio.

I’m not that good with Silverlight and Xaml so I asked a friend Abram Limpin to come up with some xaml that I can bind to a datasource (itemsource in SL Language)

And he guided me towards this:

<Grid x:Name=”LayoutRoot” Background=”White”>


<ComboBox ItemsSource=”{Binding Screen.Full_NameCollection}” SelectedItem=”{Binding Screen.Full_NameCollection.SelectedItem, Mode=TwoWay}”></ComboBox>


</Grid>

 

Okay let’s see what it does..

It is basically a ComboBox that is bound using the ItemsSource property to the Screen with a collection called Full_NameCollection. Where is this screen? This is the one that we made at the start of this blog.

So in effect, what we did was we bound the ComboBox to a screen, and the Full_NameCollection of that screen. Also, what we did was we created a user control that is dedicatedly bound to that ItemsSource. And if the possibility or need of a datacontrol whose ItemsSource would be dynamic comes up, you will create a user control with blank ItemsSource property and set that when you use the control. I might be able to illustrate that later on.

And now we get to the highlight.. adding the user control to the screen that we created earlier.

But before that, let’s take a look at what the screen looks like before we add the user control

Here we have the screen with the names of the patients with their details also in the screen.

And taking a look at the design view of the ViewModel for the Patient’s details..

We see an Add Layout Item button.. and we use that to add our user control. With the Vertical Stack on the Right Column highlighted, we click Add Layout Item and choose Add User Control

 

This should bring up the Add Custom Control Dialog and we add an in-project reference to the Silverlight Project we created earlier.

If successful this will give you the name of the project as part of the controls available to you.

I highlighted the “Specify the data for the new custom control:” to show where you should edit to enable a user control with a blank ItemsSource to get its data.

If you experiment by placing your cursor inside that textbox, you will see your options.

Okay, so we now have a user control, in the form of a combobox, in the screen we added earlier on.

Lets’ give it a try.

And there you have it! A databound user control that wasn’t there before!

 

 

 

Advertisements
This entry was posted in Computers and Internet. Bookmark the permalink.

4 Responses to Adding a user control to a Visual Studio LightSwitch Application

  1. Maria says:

    excellent tutorial but could replace the grid that comes by default from ligtswtch and put one custom

  2. ezlorenzo says:

    hi Maria, thanks for the comment.

    Out of the box, we can’t really “replace” the grid. But since a LightSwitch app is basically a silverlight out of browser application, we can edit the xaml to modify how the grid will look like.

  3. Ray says:

    Where is this XAML in an SL application?

    • ezlorenzo says:

      Hi Ray,

      Would it be possible for you to be more specific? The XAML of an SL Application is visible during design time. And that is for a straightforward SL app, not for a lightswitch app. Lightswitch shows you what your screen will look like through a View Model and not with a designer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s