Adding Slider Control in LightSwitch 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".



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.



Step 3

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



Step 4

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



Step 5

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



Step 6

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



Main Window



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



Step 9

The Add Custom Control designer appears.



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



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



Step 10

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