Silverlight Controls Part - 4 (Slider, Calendar and DatePicker)

Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 9106 red flag

In this article, we are going to explore the other Silverlight controls like Slider, Calendar and DatePicker and their properties.

This article is the continuation of my last article in Silverlight controls series, read last article here.


Slider control helps us to provide option to the user to select numeric value within a range.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.


<Slider x:Name="Slider1" Width="200" Height="50" ValueChanged="Slider_ValueChanged" Maximum="100" Minimum="0" />

<TextBlock x:Name="TextBlock1" Text="The slider value is: "/>

It has a Maximum (the maximum value can be selected by the user) and Minimum (the minimum value can be selected by user) property along with ValueChanged event that occurs when user changes its value.

Code behind

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)


this.TextBlock1.Text = "The slider value is: " + e.NewValue.ToString();



The above method executes when user changes the slider value, that writes the selected value to the TextBlock control.


Calendar & DatePicker

Calendar control is meant for rendering a calendar on the page and by default it shows the current month views. By clicking on the month name heading, one can navigate to months of that year and clicking on Year, user can navigate to last 11 years.

The SelectedDatesChanged event let us execute a server side method when the user selection changes.

DatePicker control provides a PopCalendar with a TextBox where user can write the date as well as select the Date from pop calendar.


<sdk:Calendar x:Name="Calendar1" Margin="35, 30, 10 , 20" SelectedDatesChanged="Calendar1_SelectedDatesChanged_1" />

<sdk:DatePicker x:Name="DatePicker1" Height="25" Width="150" Margin="35, 220, 50, 50" />

<TextBlock x:Name="TextBlock1" Text="Selected Date: " />

Code behind

public CalendarPage()



DatePicker1.SelectedDate = DateTime.Now;


private void Calendar1_SelectedDatesChanged_1(object sender, SelectionChangedEventArgs e)


DateTime selectedDate = Calendar1.SelectedDate.Value;

TextBlock1.Text = "Selected date: " + selectedDate.ToString();

if (DatePicker1.SelectedDate.Value != null)


TextBlock1.Text += Environment.NewLine + "Selected date from DatePicker: " + DatePicker1.SelectedDate.Value.ToString();




In the above code snippet, we have specified Calendar1_SelectedDatesChanged_1 method on SelectedDatesChanged event of the Calendar control. When user changes the Date selection in the calendar, this method executes and writes selected date in the TextBlock control.

In the same event, we are also assigning the selected date from the DatePicker control to the TextBlock.


Hope this article was useful. Thanks for reading, hope you liked it.

Keep a watch on forth coming articles on Silverlight. To read my series of articles,click here.

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan

Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on | |

Login to vote for this post.

Comments or Responses

Posted by: Arefin on: 12/14/2011 | Points: 25

<sdk:Calendar x:Name="Calendar1" Margin="35, 30, 10 , 20"

Here sdk tag is not found in my project, what can I do?

Thanks for sharing such a series of articles.
Posted by: Arefin on: 12/17/2011 | Points: 25
Got my answer.
Posted by: SheoNarayan on: 12/17/2011 | Points: 25
Thanks Arefin,

You basically get it automatically when you drag from toolbar, its a namespace :)


Login to post response

Comment using Facebook(Author doesn't get notification)