Slider Control in LightSwitch 2011

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.

Step 2 : Create table like as employee.

Step 3 : Now we will add a screen. Right click on screens->Add screen.

Step 4 : Select List and details screen->Select screen data (employee)->Ok.

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.

Step 6 : Stop debugging->Go to menu bar->File->Add->New project.

Step 7 : Select Silverlight->Silverlight Class Library->Write name (SilverlightCustomLibrary)->Ok.

Step 8 : Now select Silverlight 4->Ok.

Step 9 : Right-click on SilverlightCustomLibrary->Add->New item.

Step 10 : Select Silverlight User Control->Write name (SilverlightSliderControl)->Add.

Step 11 : Select slider from the toolbox, then write the following code in the xaml page.

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.

Step 13 : Click on Add Reference->Projects->Select SilverlightCustomLibrary->Ok.

Step 14 : Now expand SilverlightCustomLibrary->Select SilverlightSlidercontrol>Ok.

Step 15 : Run the application (Press F5). You will see there are slider controls available in your application.

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.

Conclusion

So you saw in this article, how to use a Slider Control in a LightSwitch application.

Some Helpful Resources