Adding Slider Control in LightSwitch 2012

In this article we will see how to add a Slider Control to our application in LightSwitch 2012 using visual Studio 2012.

In my previous article I described how to create an application without using a slider control in LightSwitch 2012 (see http://www.c-sharpcorner.com/UploadFile/18ddf7/creating-an-application-without-using-slider-control-in-ligh/).

Here we will see how to add a Slider Control to our application in LightSwitch 2012.

I will proceed further from my previous article whose link I have provided above.

Step 1

In the menu bar, first select the "File" then choose "Add" and then finally choose "New Project".

add new project.jpg

Step 2

The Add New Project dialog box appears on screen. From that select Silverlight and then select Silverlight Class Library and provide some name and click the "OK" button.

silverlight class library.jpg

Step 3

Now the Silverlight Class Library dialog box appears, from that choose Silverlight Version 5 and click the "Ok" button.

silver 5.jpg

Step 4

Now in the Solution Explorer, right-click on "Silverlight ClassLibrary1" and go the to the "Add" option and then select "New Item".

add new 1.jpg

Step 5

The Add New Item dialog box appears. From that select Silverlight User Control, provide a name and click on the "Add" button.

sliverlight slider control.jpg

Step 6

Now open the ToolBox. and choose the Slider control and drag it onto the Main Window.

slider toolbox.jpg

Main Window

slider on window.jpg

Step 7

Write the following code in the XAML page:

<UserControl x:Class="SilverlightClassLibrary1.SilverlightSliderControl"

    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"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400" DataContext="{Binding}">

 

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

        <Slider HorizontalAlignment="Left" Margin="57,102,0,0" VerticalAlignment="Top" Width="292" Name="SliderControl" Value="{Binding Path=Screen.Student.SelectedItem.Address}" Background="LightBlue"/>

        

    </Grid>

</UserControl>

Step 8

Now go to the Solution Explorer and open the ListDetailScreen. In that go to "Rows Layout" | "Student Detail" then under that click on the "Add" button and select "New Custom Control".

new custom ctrl.jpg

Step 9

The Add Custom Control designer appears.

add custom.jpg

Click on "Add Reference" and choose project and select the Silverlight Class Library and then click "Ok".

silverlightcustom library.jpg

Now open the Silverlight Class Library and then select SilverLightSlider control and click Ok.

silverlightslider ctrlk.jpg

Step 10

Press F5 to run the application. You will see a slider control in your output screen.

out.jpg