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

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

Slider

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.

Code

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

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.

Output

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.

Code

<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()
{
InitializeComponent();
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.

Output

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.