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. 

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()


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



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:


<ImageBrush ImageSource="/SilverlightApplication29;component/Images/flowers-image.jpg"Opacity="0.3"/>



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:


                <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 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" />




The form looks like this.



Figure 9.


More Articles

© 2020 DotNetHeaven. All rights reserved.