Visual Studio LightSwitch is a Microsoft tool for building business applications. There are many controls available in LightSwitch through Silverlight. In this article I will show how you can use a slider in a LightSwitch application. The biggest advantage of a slider is that you are not concerned about the validation of the input value's range since it is fixed and the user can't input a value outside the range.
Step 1 : First of all open Visual Studio LightSwitch->Click on create new table.
![image1.png]()
Step 2 : Create table like as employee.
![image2.png]()
Step 3 : Now we will add a screen. Right click on screens->Add screen.
![image3.png]()
Step 4 : Select List and details screen->Select screen data (employee)->Ok.
![image4.png]()
Step 5 : Run the application (Press F5). Click on + sign ->Fill data->Ok->Save.
You will see there are no slider controls in your application.
![image5.png]()
Step 6 : Stop debugging->Go to menu bar->File->Add->New project.
![image6.png]()
Step 7 : Select Silverlight->Silverlight Class Library->Write name (SilverlightCustomLibrary)->Ok.
![image7.png]()
Step 8 : Now select Silverlight 4->Ok.
![image8.png]()
Step 9 : Right-click on SilverlightCustomLibrary->Add->New item.
![image9.png]()
Step 10 : Select Silverlight User Control->Write name (SilverlightSliderControl)->Add.
![image10.png]()
Step 11 : Select slider from the toolbox, then write the following code in the xaml page.
![image11.png]()
Code
<UserControl x:Class="SilverlightCustomLibrary.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
Height="23"
HorizontalAlignment="Left"
Margin="13,115,0,0"
Name="mySliderCtrl"
VerticalAlignment="Top"
Width="375"
Value="{Binding Path=Screen.Employee.SelectedItem.Salary, Mode=TwoWay}"
Background="DarkGreen"
/>
</Grid>
</UserControl>
Step 12: Now expand RowsLayout->Add->New Custom Control.
![image12.png]()
Step 13 : Click on Add Reference->Projects->Select SilverlightCustomLibrary->Ok.
![image13.png]()
Step 14 : Now expand SilverlightCustomLibrary->Select SilverlightSlidercontrol>Ok.
![image14.png]()
Step 15 : Run the application (Press F5). You will see there are slider controls available in your application.
![image15.png]()
Step 16 : When you change the value of the salary field then also change the position of the slider control. Like as in the following image.
![image16.png]()
Conclusion
So you saw in this article, how to use a Slider Control in a LightSwitch application.
Some Helpful Resources