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.