In this article we will learn how to use DatePicker control in Silverlight 4 using VB.NET.
DatePicker control
The Date Picker control provides a simple way to select a date.
Properties - These are the following properties of DatePicker control.
Figure 1.
Display Date - The DisplayDate property represents the date to display. The default is today.
IsDropDownOpen - The IsDropDownOpen property indicates if the calendar part of the DatePicker control is open or closed.
Text Property - The Text property represents the text that is displayed in the DatePicker.
Selection Date - The SelectedDate property represents the currently selected date. If multiple dates selection is true.
Selection Date Format - the SelectedDates property represents a collection of currently selected dates.
BlackoutDates - The BlackoutDates property of the DatePicker class represents a collection of dates that are not available for selection.
Creating a DatePicker in XAML
<sdk:DatePicker Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="DatePicker1"VerticalAlignment="Top" Width="120" />
The Width and Height attributes of the DatePicker element represent the width and the height of a DatePicker. The Content attribute represents the text of a DatePicker.
The default view of the DatePicker control looks like this.
Figure 2.
BlackoutDates Property of Datepicker
The BlackoutDates property of the DatePicker are used to represents a collection of dates that are not available for selection. All non selection dates are marked by a cross. For example, say in december month of year 2010, we would like to block dates from Dec 1st to Dec 4th the calendar should look like this.
Add the following code.
Public Sub New()
InitializeComponent()
DatePicker1.BlackoutDates.Add(New CalendarDateRange(New DateTime(2010, 12, 1), NewDateTime(2010, 12, 4)))
End Sub
Now run the application.
Figure 3.
DisplayDateStart and DisplayDateEnd
The Datepicker control allows you to set the start and end display dates by using the DisplayDateStart and DisplayDateEnd properties.
Now selecting both the property.
DisplayDateStart - 12/1/2010
DisplayDateEnd - 12/31/2010
The form looks like this.
Figure 4.
FirstDayOfWeek and IsTodayHighlighted
By default, Sunday is the first day of week. If you would like to change it, you use FirstDayOfWeek property. The IsTodayHightlighted property is used to make today highlighted.
Select DatePicker control on the form and press F4 to property window and set these property. such as
Figure 5.
The form looks like this.
Figure 6.
DatePicker by default Event
On the SelectedDateChanged event handler, we set the TextBox. Text property to the SelectedDate property of the DatePicker control.
Private Sub DatePicker1_SelectedDateChanged(ByVal sender As System.Object, ByVal e AsSystem.Windows.Controls.SelectionChangedEventArgs) Handles DatePicker1.SelectedDateChanged
TextBox1.Text = DatePicker1.SelectedDate.ToString()
End Sub
Now run the application and select date from the calendar it will be display on the TextBox control.
Figure 7.
Setting Image as Background of a DatePicker control
To set an image as background of a DatePicker, we can set an image as the Background of the DatePicker.
XAML Code:
<sdk:DatePicker.Background>
<ImageBrush ImageSource="/SilverlightApplication29;component/Images/flowers-image.jpg"Opacity="0.3"/>
</sdk:DatePicker.Background>
The form looks like this.
Figure 8.
Formatting a DatePicker
The Background and Foreground properties of the DatePicker set the background and foreground colors of a DatePicker.
XAML Code:
<sdk:DatePicker.Foreground>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0.301" />
<GradientStop Color="White" Offset="1" />
<GradientStop Color="#FFA2A270" Offset="0.748" />
<GradientStop Color="#FF2D452D" Offset="0.585" />
<GradientStop Color="#FF474747" Offset="0.504" />
<GradientStop Color="#FF292929" Offset="0.423" />
<GradientStop Color="Black" Offset="0.106" />
<GradientStop Color="#FFFCFCFA" Offset="0.992" />
<GradientStop Color="#FFCAFCFA" Offset="0.992" />
</LinearGradientBrush>
</sdk:DatePicker.Foreground>
<sdk:DatePicker.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="0.374" />
<GradientStop Color="#FFFFFFCD" Offset="0.976" />
<GradientStop Color="#FFC17060" Offset="0.618" />
<GradientStop Color="#FFCDFFFF" Offset="0.829" />
</LinearGradientBrush>
</sdk:DatePicker.Background>
The form looks like this.
Figure 9.