Wednesday, October 27, 2010

Changing DatePicker Label

To change the label of the date picker control in WPF is very easy. When you drag and drop the date picker control from the toolbox then it will show 15 as default, It will be nice to show current day is comfortable to show the current date.Image 1 shows the default date picker control when you drag and drop it from the toolbox here you can see that it display 15 which we want to change to show the current date.

Image 1

Here are the steps which are used to change the default 15 to the current date in the date picker control in style. First you have to open the project in the expression blend and then follow the step as describe below.
Step 1:
In the first step select the date picker control from the object and time line as we can see in the Image 1. and then right click on the control and from the Edit Template select the edit current. A dialog will open which will ask you for the name of the style or apply to the all the control of date picker in this case. I have used the default style name "DatePickerStyle1".
Image 2
Step 2:
Now the style is generated using the step 1. Now from the Resource Right click on the "DatePickerStyle1" as shown in the Image 3 and you can see the style in the Object and time line.
Image 3
Step 3 :
Now in object and time line right click on the style and select Edit Current from the edit Template option as you can see in the Image 4.
Image 4
Step 4 :
Now in the PART_ROOT select the PART_BUTTON by right clicking on the PART_BUTTON Select the Edit Current from the Edit Template and you will have the PART_Button Template as you can see in the Image 6.
Image 5
Step 5:
In last step locate the path which is show to display the 15 in the date picker as I have highlighted in the Image 6. The highlighted path is used to display 15 in the date picker control.
Image 6
Now replace the xaml of the select path with the xaml of the text block as show in the list 1 and add the mscorlib reference in the xaml as I have used the system namespace to get the current date and assign it to the text property of the text block control.

xmlns:System="clr-namespace:System;assembly=mscorlib" <TextBlock Margin="2,0" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="4" Grid.Column="0" Text="{Binding Source={x:Static System:DateTime.Now}, StringFormat=dd}" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="10.667" FontFamily="Arial Bold" />
List 1

And final outpout of all the above steps are shown in the Image 7 which shows the current date on the date picker control.You can download the source code from here

Image 7


All and any comments / bugs / suggestions are welcomed!

3 comments:

Bilal Hashmi said...

Good work Asim.

Asim Sajjad said...

@Bilal Hashmi: thanks :)

Thomas G. said...

was very helpful, thanks.