Silverlight DatePicker Control using VB.NET

In this article we will learn how to use DatePicker control in Silverlight 4.
  • 2405


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

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.

dp2.gif
 

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. 
 


 

dp3.gif 

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.

dp4.gif
 

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 
 

dp5.gif
 

Figure 5.

The form looks like this.

dp6.gif
 

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.ObjectByVal e AsSystem.Windows.Controls.SelectionChangedEventArgsHandles 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.


 

dp7.gif 

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.


 

dp8.gif 

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.


 

dp9.gif 

Figure 9.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.