Silverlight/WPF: Customizing the DatePicker Control

Windows Phone 7 Developer Launch - Learn More

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

Comments have been closed on this topic.

DevelopMENTAL Madness

Silverlight/WPF: Customizing the DatePicker Control

Editing the DatePicker Template

Our Custom Template

Adding Bindings

Feedback

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

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# re: Silverlight/WPF: Customizing the DatePicker Control

# web development

Mark J. Miller

Tag Cloud

Hosted by