Silverlight/WPF: Customizing the DatePicker Control

<< Xaml: Binding to the current DataContext | Home | Speaking at Utah CodeCamp >>

Silverlight/WPF: Customizing the DatePicker Control

I’m working on a Silverlight scheduling application and wanted to make the DatePicker control from the Silverlight Toolkit look like the program icon on my iPod Touch. The calendar looks icon like a day calendar and dynamically displays the current date.

I got the idea when I was looking at the calendar icon on the right-hand side of the DatePicker control. It was actually one of those accidental ideas. The control’s icon looks like a day calendar and displays the number ‘15’ – well the day I was looking at it happened to be the 15th, so I thought it was actually displaying the day of the selected date (in the unselected case the current date).

Of course when I changed the date the icon didn’t update, so I started digging in.

DISCLAIMER: I am not much of an artist so when I say, “like the iPod Touch” I mean, “similar colors and arrangement”. Here is what the end result looks like:

In the original control the icon on the right is a Button control. What we’re going to do here is remove the main TextBox of the control, increase the size of the button on the right and add a TextBlock for the Month/Year in the format “mmm YY” and then the larger portion of the button below will represent the day in the format “DD”. Then we’ll bind each text block to the date of the control.

Editing the DatePicker Template

This section of this post is mostly immaterial to our dicussion. But I added it because I wanted to include a bit of a HowTo on editing an existing template. If you just want the code and an explaination of it skip to the next section and continue reading.

First we need to open a new project and get a copy of the default template for the DatePicker control. If you are using Blend 3 this will be easy. If not, I’ll give you the code here in a minute.

After you create a new project, make sure you have a reference to the System.Windows.Controls library in your project. If you have it installed it will be in one of the following paths:

C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\System.Windows.Controls.dll
C:\Program Files (x86)\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\System.Windows.Controls.dll

Next you can drag the DatePicker control from the Assets tool bar on the left (Blend 3). Just click the search button “>>” or browse the “Controls” category.

Or just add lines 4 and 10 from the following to your Xaml file:

        1: <UserControl

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:     xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

       5:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       6:     x:Class="iTouchDatePicker.MainPage"

       7:     Width="640" Height="480" mc:Ignorable="d">

       8:  

       9:     <Grid x:Name="LayoutRoot" Background="White">

      10:         <controls:DatePicker Width="150" Height="25" />

      11:     </Grid>

      12: </UserControl>

Now, if you are using Blend 3, right-click the control on the design service and select Edit Template > Edit a copy… type in “iTouchDatePickerStyle” and select “Application” for the “Define in” option. This will make a copy of the DatePicker template in your App.Xaml file.

At this point we have an exact copy of the original template. For most templating customizations this is overkill if all you are trying to do is change simple look and feel properties. But what we are trying to do here is actually replace pieces of the template so we can add custom parts to our control and remove other pieces entirely. But when we are done here the cool part is we will have done this entirely in Xaml without any custom code.

The advantage of this technique is we don’t have to define our own custom animation storyboards or gradient colors and design so we save a lot of time developing our custom style. You can skip this if you want to replace the template entirely. However, for a complex control like DatePicker I recommend going thru this step initially to study the template. Specifically, you want to look for any named elements. For example, DatePicker has a Popup element named (surprise) “Popup”:

    <Popup x:Name="Popup"/>

The control’s class implementation looks for this control and modifies it to create the calendar drop down when you click on the control’s button. Custom control development conventions for Silverlight and WPF dictate that when an expected element is missing logic should continue without an error. At best this just means you’re losing functionality from the control. But depending on who developed the control it could conceivably cause errors if the control wasn’t properly developed.

Our Custom Template

Now here’s the template for our custom style:

       1: <Style x:Key="iTouchDatePickerStyle" TargetType="controls:DatePicker">

       2:     <Setter Property="IsTabStop" Value="False"/>

       3:     <Setter Property="Background" Value="#FFFFFFFF"/>

       4:     <Setter Property="Padding" Value="2"/>

       5:     <Setter Property="SelectionBackground" Value="#FF444444"/>

       6:     <Setter Property="BorderBrush">

       7:         <Setter.Value>

       8:             <LinearGradientBrush EndPoint=".5,0" StartPoint=".5,1">

       9:                 <GradientStop Color="#FF617584" Offset="0"/>

                <GradientStop Color="#FF718597" Offset="0.375"/>

                <GradientStop Color="#FF8399A9" Offset="0.375"/>

                <GradientStop Color="#FFA3AEB9" Offset="1"/>

            </LinearGradientBrush>

        </Setter.Value>

    </Setter>

    <Setter Property="BorderThickness" Value="1"/>

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="controls:DatePicker">

                <Grid x:Name="Root">

                    <Grid.Resources>

                        <SolidColorBrush x:Key="DisabledBrush" Color="#8CFFFFFF"/>

                        <ControlTemplate x:Key="DropDownButtonTemplate" TargetType="Button">

                            <Grid>

                                <VisualStateManager.VisualStateGroups>

                                    <VisualStateGroup x:Name="CommonStates">

                                        <VisualStateGroup.Transitions>

                                            <VisualTransition GeneratedDuration="0"/>

                                            <VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>

                                            <VisualTransition GeneratedDuration="0:0:0.1" To="Pressed"/>

                                        </VisualStateGroup.Transitions>

                                        <VisualState x:Name="Normal"/>

                                        <VisualState x:Name="MouseOver">

                                            <Storyboard>

                                                <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FF448DCA"/>

                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">

                                                    <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>

                                                </ColorAnimationUsingKeyFrames>

                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">

                                                    <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>

                                                </ColorAnimationUsingKeyFrames>

                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">

                                                    <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>

                                                </ColorAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </VisualState>

                                        <VisualState x:Name="Pressed">

                                            <Storyboard>

                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">

                                                    <SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/>

                                                </ColorAnimationUsingKeyFrames>

                                                <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)">

                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>

                                                </DoubleAnimationUsingKeyFrames>

                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">

                                                    <SplineColorKeyFrame KeyTime="0" Value="#EAFFFFFF"/>

                                                </ColorAnimationUsingKeyFrames>

                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">

                                                    <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>

                                                </ColorAnimationUsingKeyFrames>

                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">

                                                    <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/>

                                                </ColorAnimationUsingKeyFrames>

                                                <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">

                                                    <SplineColorKeyFrame KeyTime="0" Value="#F4FFFFFF"/>

                                                </ColorAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </VisualState>

                                        <VisualState x:Name="Disabled">

                                            <Storyboard>

                                                <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="(UIElement.Opacity)">

                                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>

                                                </DoubleAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </VisualState>

                                    </VisualStateGroup>

                                </VisualStateManager.VisualStateGroups>

                                <Grid Height="48" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="49" Background="#11FFFFFF">

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="6*"/>

                                        <ColumnDefinition Width="19*"/>

                                        <ColumnDefinition Width="19*"/>

                                        <ColumnDefinition Width="19*"/>

                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="6*"/>

                                        <RowDefinition Height="20*"/>

                                        <RowDefinition Height="20*"/>

                                        <RowDefinition Height="20*"/>

                                    </Grid.RowDefinitions>

                                    <Border x:Name="Highlight" Margin="-1" Opacity="0" Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderBrush="#FF6DBDD1" BorderThickness="1" CornerRadius="0,0,1,1"/>

                                    <Border x:Name="Background" Margin="0,-1,0,0" Opacity="1" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" Background="#FF1F3B53" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius=".5"/>

                                    <Border x:Name="BackgroundGradient" Margin="0,-1,0,0" Opacity="1" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderBrush="#BF000000" BorderThickness="1" CornerRadius=".5">

                                        <Border.Background>

                                            <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">

                                                <GradientStop Color="#FFFFFFFF" Offset="0"/>

                                                <GradientStop Color="#F9FFFFFF" Offset="0.375"/>

                                                <GradientStop Color="#E5FFFFFF" Offset="0.625"/>

                                                <GradientStop Color="#C6FFFFFF" Offset="1"/>

                                            </LinearGradientBrush>

                                        </Border.Background>

                                    </Border>

                                    <Rectangle StrokeThickness="1" Grid.ColumnSpan="4" Grid.RowSpan="2" Margin="0,0,0,2">

                                        <Rectangle.Stroke>

                                            <LinearGradientBrush EndPoint="0.48,-1" StartPoint="0.48,1.25">

                                                <GradientStop Color="#FF494949"/>

                                                <GradientStop Color="#FF9F9F9F" Offset="1"/>

                                            </LinearGradientBrush>

                                        </Rectangle.Stroke>

                                        <Rectangle.Fill>

                                            <LinearGradientBrush EndPoint="0.3,-1.1" StartPoint="0.46,1.6">

                                                <GradientStop Color="#FFBD4A40"/>

                                                <GradientStop Color="#FFEAAFAF" Offset="1"/>

                                            </LinearGradientBrush>

                                        </Rectangle.Fill>

                                    </Rectangle>

                                    <TextBlock

                                        Text="Sept '08"

                                        HorizontalAlignment="Center" 

                                        VerticalAlignment="Center" 

                                        Margin="0,0,0,3"

                                        Grid.Column="0" 

                                        Grid.ColumnSpan="4" 

                                        Grid.Row="0" 

                                        Grid.RowSpan="2" 

                                        />

                                    <TextBlock

                                        Text="04"

                                        HorizontalAlignment="Center" 

                                        VerticalAlignment="Bottom" 

                                        FontSize="26" Margin="0,0,0,-3" 

                                        Grid.Column="0" 

                                        Grid.ColumnSpan="4" 

                                        Grid.Row="2" 

                                        Grid.RowSpan="2" />

                                    

                                    <Border x:Name="DisabledVisual" Opacity="0" Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderBrush="#B2FFFFFF" BorderThickness="1" CornerRadius="0,0,.5,.5"/>

                                </Grid>

                            </Grid>

                        </ControlTemplate>

                    </Grid.Resources>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="*"/>

                        <ColumnDefinition Width="Auto"/>

                    </Grid.ColumnDefinitions>

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal"/>

                            <VisualState x:Name="Disabled">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1"/>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                    <Button 

                        x:Name="Button" 

                        Margin="2,0,2,0" 

                        Width="50" 

                        BorderBrush="{TemplateBinding BorderBrush}" 

                        BorderThickness="{TemplateBinding BorderThickness}" 

                        Foreground="{TemplateBinding Foreground}" 

                        Template="{StaticResource DropDownButtonTemplate}" 

                        Content="{TemplateBinding SelectedDate}"

                        Grid.Column="1" />

                    <Grid x:Name="DisabledVisual" IsHitTestVisible="False" Opacity="0" Grid.ColumnSpan="2">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="*"/>

                            <ColumnDefinition Width="Auto"/>

                        </Grid.ColumnDefinitions>

                        <Rectangle Fill="#8CFFFFFF" RadiusX="1" RadiusY="1"/>

                        <Rectangle Fill="#8CFFFFFF" RadiusX="1" RadiusY="1" Height="18" Margin="2,0,2,0" Width="19" Grid.Column="1"/>

                    </Grid>

                    <Popup x:Name="Popup"/>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

If you followed the steps from the previous section, just replace the style created by those steps with the code here. If you skipped those steps or are following along in Visual Studio, just paste this code into your App.xaml file inside your Application.Resources element. Then make sure to add the following namespace declaration from line 4 below to your App.xaml file as well:

       1: <Application

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:     xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 

       5:     x:Class="iTouchDatePicker.App">

Now our style is complete (mwahaha!). Save App.xaml and return to the xaml file for our User Control so we can apply the changes to our DatePicker control. Change the DatePicker control to look like this:

    <controls:DatePicker Style="{StaticResource iTouchDatePickerStyle}" />

Now we should see our custom style applied in the designer window, but we still need to get binding setup or the user will never be able to see anything other than the values which are hard-coded into our template.

Adding Bindings

I cannot take credit for figuring this part out. I was able to figure out a solution, but it involved a custom implementation which inherited from the original DatePicker control class. The credit for figuring out how to do this entirely in Xaml goes to Shawn Oster, Silverlight Program Manager. He worked out how to get the binding to work with the original developer of the the DatePicker control (I don’t know his name or I’d also credit him). But anyway, to add the bindings you want to modify lines 118 and 128 above as follows:

Line 118 (the month and year):

    DataContext="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"

    Text="{Binding Converter={StaticResource DateTimeFormatter}, ConverterParameter=MMM yy }"

Line 128 (the day):

    DataContext="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"

    Text="{Binding Converter={StaticResource DateTimeFormatter}, ConverterParameter=dd }"

Ok, I know I said “entirely in xaml”, and I am using a converter here to format the date. But I’m going to declare the use of converters “not cheating” when it comes to creating a solution entirely in xaml. Argue your point with me if you disagree, I’d be interested to hear it and would love to learn something new. But aside from arguing the point, here’s the code for the converter:

    using System;

    using System.Windows.Data;

    using System.Globalization;

    namespace iTouchDatePicker

    {

        public class DateTimeConverter : IValueConverter

        {

            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

            {

                DateTime? selectedDate = value as DateTime?;

                if (selectedDate != null)

                {

                    string dateTimeFormat = parameter as string;

                    return selectedDate.Value.ToString(dateTimeFormat);

                }

                return string.Empty;

            }

            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

            {

                throw new NotImplementedException();

            }

        }

    }

Now just add a static resource (lines 5 and 8) for your converter to your app.xaml as well:

       1: <Application

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:     xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 

       5:     xmlns:iTouch="clr-namespace:iTouchDatePicker"

       6:     x:Class="iTouchDatePicker.App">

       7:     <Application.Resources>

       8:         <iTouch:DateTimeConverter x:Key="DateTimeFormatter" />

But wait! Those of you using Blend 3 are seeing an “Invalid Xaml” error for our bindings! Yes, so do I. I’ve tried getting an answer about this, but I haven’t ever gotten one. It would seem the parsing engine for Blend 3 doesn’t like this binding. However, it actually works. When we’re finished, if you run our project when it loads into a web browser it actually works. When this gets in the way of my design in Blend, I just revert my template back to hard-coded text instead of the bindings so I can use the Blend designer. Not ideal, but I haven’t been able to figure anything out. If you do, let me know.

UPDATE 10/12/2009: Thanks to mitkodi for providing the workaround for the “Invalid Xaml” error in Blend. The problem was using both a converter and a RelativeSource binding in the same Binding expression. By breaking them up and assigning the ReleativeSource to DataContext and the Converter to the Text attribute the issue is fixed and you can now work with the control in Blend.

The last piece is to just bind a value to our DatePicker. So, first lets set our DataContext to the current DateTime:

       1: using System;

       2: using System.Windows;

       3: using System.Windows.Controls;

       4:  

       5: namespace iTouchDatePicker

       6: {

       7:     public partial class MainPage : UserControl

       8:     {

       9:         public MainPage()

      10:         {

      11:             // Required to initialize variables

      12:             InitializeComponent();

      13:  

      14:             this.DataContext = DateTime.Now;

      15:         }

      16:     }

      17: }

Add line 14 above to your UserControl’s code-behind. Then update the DatePicker control (line 10) with SelectedDate=”{Binding}” like below:

       1: <UserControl

       2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:     xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

       5:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       6:     xmlns:sys="clr-namespace:System;assembly=mscorlib"

       7:     x:Class="iTouchDatePicker.MainPage"

       8:     Width="640" Height="480" mc:Ignorable="d">

       9:     <Grid x:Name="LayoutRoot" Background="White">

      10:         <controls:DatePicker HorizontalAlignment="Left" VerticalAlignment="Top" 

      11:         Style="{StaticResource iTouchDatePickerStyle}" SelectedDate="{Binding}" />

      12:     </Grid>

      13: </UserControl>

Now build and run the project and there you have it! I hope you enjoy, I’d love to see any improvements anyone makes.

Source Code

Tags: Silverlight, WPF, Custom Template, DatePicker

Print posted @ Thursday, August 27, 2009 11:33 AM

Feedback

# Silverlight Cream for September 15, 2009 -- #692

Silverlight Cream for September 15, 2009 -- #692 9/24/2009 8:55 AM | Pingback/TrackBack

# re: Silverlight/WPF: Customizing the DatePicker Control

i want to create a custom time picker.. is there any example ot the way i can do it in silverlight 3 9/29/2009 2:12 AM | Blizzer

# re: Silverlight/WPF: Customizing the DatePicker Control

The easiest way is if you have access to Expression Blend. You add an instance of TimePicker to your page and then right-click and select edit template... That'll give you a copy of the xaml template to edit however you like. That's how I got started. As for Silverlight 3, the process is the same in v2 or v3. The process is much like I described in this post, just the control you're modifying is different. 9/29/2009 5:36 PM | MarkJMiller

# re: Silverlight/WPF: Customizing the DatePicker Control

Mark, you can work around the “Invalid XAML” error in Blend if you don’t use Converter and RelativeSource together when defining a binding in a ControlTemplate. You can separate them if you bind TextBoxes’s DataContexts (DataContext={Binding RelativeSource={RelativeSource TemplatedParent}}) and TextBoxes’s Texts (Text={Binding Content, Converter={…}, ConverterParameter=…}). 10/9/2009 4:07 AM | mitkodi

# re: Silverlight/WPF: Customizing the DatePicker Control

mitkodi - awesome. I'll give it a shot and then update my post with your tip (with credit). Thank you. 10/9/2009 11:59 AM | MarkJMiller

# re: Silverlight/WPF: Customizing the DatePicker Control

When loading the demo I first saw two text field flash, then I see the drop down slide down and then back up. Eh?
This widget is nice, but I agree about the animations and also ask myself where this widget would be useful. Why not just simply two text fields with a simple calendar icon next to them? 12/12/2009 1:28 AM | http://www.pokerstarsroom.com

# re: Silverlight/WPF: Customizing the DatePicker Control

Not sure about the 2 text fields. I've never seen what you're referring to.

Usefulness maybe an opinion. If you don't like it this may not be for you. However, I've been using the application I designed this for and I find it enjoyable and simple. In my application the date is a primary piece of the interface, I wanted it to stand out. Also I find entering dates a pain - you either require multiple text boxes, multiple drop downs or you have to work with "punctuation" in the date (slashes, spacing whatever). My users are heavy mouse users - as most users are. I myself use the keyboard as much as possible. I don't like having to go back to my mouse all the time. But regardless of the interface I always find entering dates frustrating. I kinda like doing it this way.

However, don't judge the usefulness by the implementation. I chose to implement it as a representation of a "day calendar" type interface. But that doesn't limit the application of the technique. I see the current version of the Toolkit's datepicker as flawed and I'm not the only one (timheuer.com/.../...-to-show-current-day-text.aspx). My original reason (as I stated in my introduction) for this was because the icon on to the right of the textbox was confusing - it always displayed the number "15", regardless of the value of the control. If you still want a text box next to the calendar or only wish to change the original control to display the correct day number you still can using the techniques described in this post. 12/14/2009 10:56 AM | MarkJMiller

# re: Silverlight/WPF: Customizing the DatePicker Control

A use that I can think of for a socket listener (and I would use SilverLight if it could support it) is that of implementing a pattern where a stream needs to be pre-processed before passing it onto a MediaElement. A good candidate for this is a media stream that contains both meta-data and mp3. The meta-data needs to be filtered out before passing on the mp3 content to the MediaElement. 12/18/2009 5:33 AM | backgammon

# re: Silverlight/WPF: Customizing the DatePicker Control

So far, I managed to go though only some of posts you discuss here, but I find them very interesting and informative. Just want say thank you for the information you have shared. Regards 12/28/2009 5:33 AM | flash messenger

# re: Silverlight/WPF: Customizing the DatePicker Control

I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it and I have you bookmarked to check out new stuff you post. 12/29/2009 10:58 AM | call center services

# re: Silverlight/WPF: Customizing the DatePicker Control

Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It's always nice when you can not only be informed, but also entertained! 12/29/2009 10:59 AM | California Mesothelioma Attorney

# re: Silverlight/WPF: Customizing the DatePicker Control

Never knew that. Thanks for the info. I think your blog is going to do well. People will always return to read this kind of content. Great job. 12/29/2009 11:00 AM | dallas car accident lawyer

# re: Silverlight/WPF: Customizing the DatePicker Control

I must say, great tips! 1/4/2010 11:53 AM | Custom website design

# web development

That was me who asked the question, so it's funny I didn't see this until now. The training was excellent and it really helped jump start Silverlight development for me. Shortly after the training, I gave you a shout out in a blog post on SharePoint / Silverlight integration as you had also answered a question about that. 3/7/2010 6:04 PM | web development

# office chairs

Executive range of high quality Office Chairs for your home and office. Leather office chairs on sale. 6/29/2010 2:05 AM | office chairs

# re: Silverlight/WPF: Customizing the DatePicker Control

What is the difference between these two silverlight & datepicker? 7/6/2010 12:59 AM | online degree

# Cheap Nike Shoes

This is a nice blog. Good clean UI and nice informative blog. I will be coming back soon, thanks for the great blog. I put a link to your blog at my site, hope you don't mind?
7/9/2010 3:17 AM | Cheap Nike Shoes

# re: Silverlight/WPF: Customizing the DatePicker Control

What a fabulous post this has been. I am also working on a Silverlight scheduling application. And I am grateful to you and expect more number of posts like these. T7hank you very much. 7/12/2010 2:41 AM | daily interest calculator

# re: Silverlight/WPF: Customizing the DatePicker Control

This is a great note. It is very rare these days to find blogs that provide information someone is looking for. I am glad that yours is one of blogs that do share valued information that can help to many readers. In fact, this tool can run on my iPod Touch. Hence, I like this. 7/12/2010 2:44 AM | personal loans

# re: Silverlight/WPF: Customizing the DatePicker Control

This article gives the light in which we can observe the reality. This is very nice one and gives in depth information. Thanks for this nice article. Good post.....Valuable information for all. 7/15/2010 2:02 AM | simulation assurance auto

# I very much enjoyed your website.

I very much enjoyed your website. Excellent content.Your favorite team’s Silverlight Cream for September 15, 2009.
7/21/2010 7:32 PM | online casino

# re: Silverlight/WPF: Customizing the DatePicker Control

Thanks for taking the time to discuss this,would you mind updating your blog with more information? It is extremely helpful for me to work on a Silverlight. 7/22/2010 7:59 PM | investing in halton

# re: Silverlight/WPF: Customizing the DatePicker Control

Wow... excellent information... thats alot to absorb! 7/26/2010 9:09 PM | Columbus DJ

# re: Silverlight/WPF: Customizing the DatePicker Control

hello mate
after read your article i think i should post it in my face book
i want 2 share with my friends
do u mind if i do that??
any way many thanks for great source u provide us
regards 7/29/2010 3:26 AM | injury lawyer

# re: Silverlight/WPF: Customizing the DatePicker Control

The Items collection of TreeView only contains the data objects represented by the root-level nodes. You must use a recursive technique to walk through the items and set the IsSelected property to true on the TreeViewItem which you want to select..... 7/31/2010 6:35 AM | casino en ligne

# re: Silverlight/WPF: Customizing the DatePicker Control

thanks mark very helpful post, cheers 8/2/2010 5:18 PM | treat angular cheilitis

# re: Silverlight/WPF: Customizing the DatePicker Control

I find them very interesting and informative. Just want say thank you for the information you have shared.
8/5/2010 7:40 PM | wholesale military goods

# re: Silverlight/WPF: Customizing the DatePicker Control

This is a nice blog. Good clean UI and nice informative blog. I will be coming back soon, Thanks for posting some great ideas 8/5/2010 9:49 PM | placement argent

# re: Silverlight/WPF: Customizing the DatePicker Control

The post is very nicely written and it contains many useful facts. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement. Thanks for sharing with us 8/6/2010 4:31 AM | itunes gift card online

# re: Silverlight/WPF: Customizing the DatePicker Control

Wow... excellent information... thats alot to absorb! 8/6/2010 6:21 AM | dating agencies

# re: Silverlight/WPF: Customizing the DatePicker Control

A bit off topic perhaps, but I really need to know - which template are you using? I especially like the sidebar style 8/8/2010 10:36 PM | WoW Accounts

# re: Silverlight/WPF: Customizing the DatePicker Control

That's perfect that people can take the personal loans and that opens completely new opportunities. 8/9/2010 12:28 AM | BarlowCASSIE21

# I cant make it works

Hello,

I cant make it works.

I have a PathListBox with a Template with an image. When i set de Source of the image as "{Binding Converter={StaticResource MyConverterFunction}"

i have an "invalid xaml" error, but if i run de the website ir works fine, my problem is that i cant design because the error doesnt allow me to see the design.

Can anybody helps me? Thanks a lot 8/9/2010 2:02 AM | Alex

# Moroccan furniture

Your blog article is very intersting and fanstic,at the same time the blog theme is unique and perfect,great job.To your success. 8/12/2010 2:15 AM | Moroccan furniture

# re: Silverlight/WPF: Customizing the DatePicker Control

Hey i want to display the date in Silverlight Datepicker control in the format DD-MMM-YYYY...

How can I show it? 8/12/2010 11:35 PM | Swapnil

# re: Silverlight/WPF: Customizing the DatePicker Control

I was doing a bit of research looking at some other essay writing service. and this is the fifth link to the search essay about this good topic as relayed by Google… so you are acceptable that you are afford a free service for them and enhancing their traffic. So if you morally support this then you should take the money but if your conclusion has dispose at all and you’re against it then you should probably drag down them. But it's still yours to choose. 8/13/2010 3:51 AM | ConstanceROBERTS30

# re: Silverlight/WPF: Customizing the DatePicker Control

To get know information just about this good topic, the students should buy essays at the essays writers. 8/13/2010 5:59 AM | NunezLenore35

# re: Silverlight/WPF: Customizing the DatePicker Control

You have got professional composing ability and you theme seems to be supreme. I think that students would like to write the term paper of the same quality and the business writing service can do it for them. 8/14/2010 8:00 PM | AddieBlack35

# re: Silverlight/WPF: Customizing the DatePicker Control

Experience can make premium qaulity and distinguished custom term paper writing companies will write the essay papers of superb quality. That's a right movement to success. 8/15/2010 3:00 AM | ELOISEButler22

# re: Silverlight/WPF: Customizing the DatePicker Control

That is Ok that not all college students do not have writing experience. However, it is not a problem because various completing companies propose to buy essays and that is good benefit. 8/17/2010 3:18 PM | Berger20Kirsten

# re: Silverlight/WPF: Customizing the DatePicker Control

It is very easy now to work on date picker. Thanks for your help. 8/17/2010 10:34 PM | Carpet Cleaning

# re: Silverlight/WPF: Customizing the DatePicker Control

Great blog. There's a lots good data in this blog, though I would like tell you something. I can understand the content, but the navigation doesn't work so good. I never usually post on blogs but I have found this is very useful work. I high appreciate this post. It’s hard to find the good from the bad sometimes, but I think you’ve nailed it! would you mind updating your blog with more information?
8/18/2010 7:59 PM | 0-60

# Inward investment netherlands

I read more reviews
but this is real and more informative 8/19/2010 5:34 AM | Doing Business in the netherland

# re: Silverlight/WPF: Customizing the DatePicker Control

Thank you for the work you have put into this post, it helps clear up some questions I had.I will bookmark your blog because your posts are very informative.We appreciate your posts and look forward to coming back... 8/20/2010 6:23 AM | online slots

# re: Silverlight/WPF: Customizing the DatePicker Control

Some time before I faced a lot of complications with academic papers writing. Nevertheles, my friend proposed to buy custom essay papers. Therefore, now I got the highest grades. 8/20/2010 2:02 PM | LeEsperanza24

# re: Silverlight/WPF: Customizing the DatePicker Control

There are some very great sources here and thank you for being so kind to post them here. So we can read them and give our opinion on subject.
8/21/2010 11:59 PM | bwin free bet

# Company expansion

Wonderful post
Its great to have such icons in ipod which makes navigation much more easier 8/23/2010 12:24 AM | Company expansion

# NFL youth jerseys

phillies jersey
R4 ds
jade jewellery
evisu jeans
Nfl football jerseys

football jerseys
8/25/2010 12:23 AM | NFL youth jerseys

# re: Silverlight/WPF: Customizing the DatePicker Control

Thanks for your information about DatePicker control and how to edit it. Your tutorial was useful and interesting too. Thanks for sharing.
free stuff 8/25/2010 4:18 AM | free stuff

# re: Silverlight/WPF: Customizing the DatePicker Control

Thanks for the info on the DatePicker control and how to edit it. Your guide has been useful and interesting. Thanks for sharing.
8/28/2010 1:37 PM | SEO Services

# re: Silverlight/WPF: Customizing the DatePicker Control

The global economy is at risk of a prolonged recession after U.S. home sales plunged & Japan’s export growth slowed.
8/29/2010 3:23 AM | seo minnesota

# unsecured small business loan

If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information? 8/31/2010 8:53 PM | robseller81

# re: Silverlight/WPF: Customizing the DatePicker Control

Nice Coding . I was looking for such coding for three hours. but get it just here. This example gives the light in which we can observe the reality. This is very nice one and gives in depth information. Thanks for this nice article. Good post.....Valuable information for all.
9/1/2010 3:20 PM | carpet cleaner Monterey

# re: Silverlight/WPF: Customizing the DatePicker Control

So far, I managed to go though only some of posts you discuss here, but I find them very interesting and informative. Just want say thank you for the information you have shared.
Thanks
9/2/2010 1:17 AM | best weight loss patch

# re: Silverlight/WPF: Customizing the DatePicker Control

Admiring the time and effort you put into your blog and detailed information you offer. keep posting 9/3/2010 1:05 AM | seo cheltenham

# SEO resellers

Seo Reseller is gaining its ground same as well established business of reseller hosting. that is domain reseller 9/3/2010 2:50 AM | SEO resellers

DevelopMENTAL Madness