Home/ Questions/Q 500733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T06:07:03+00:00

I downloaded and installed the WPF Toolkit (which provides controls that could not be

  • 0

I downloaded and installed the WPF Toolkit (which provides controls that could not be shipped in time with VS2008).

However, the DatePicker control does not look like its WinForms cousin.
alt text http://www.angryhacker.com/toys/datepicker.png

First, the dropdown button is not a dropdown, but a small picture of the calendar. Secondly, the calendar opens to the right on the control rather than underneath it. How can I make the control look like a normal date picker? Or should I be using something else?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can download the source code from CodePlex and retrieve the current ControlTemplate from the generic.xaml. You can then copy this into your application resources and modify the control template from there.

    No different than redefining the ControlTemplates of controls that shipped with .NET 3.5, they are all binary as well. I just actually did this today and sorry to include a giant blob of XAML but here is what I did to restyle the “15” button into a more “grid” calendar look. You’ll either have to put this in your App.Xaml or include it as a merged dictionary.

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit"
xmlns:primitives="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit"
xmlns:vsm="clr-namespace:System.Windows;assembly=WPFToolkit">


<Style TargetType="{x:Type local:DatePicker}">
    <Setter Property="Foreground" Value="#FF333333" />
    <Setter Property="IsTodayHighlighted" Value="True" />
    <Setter Property="SelectedDateFormat" Value="Short" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Padding" Value="2"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint=".5,0" StartPoint=".5,1">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:DatePicker}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}" 
                        Padding="{TemplateBinding Padding}">

                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="PART_DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Border.Child>
                        <Grid x:Name="PART_Root"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid.Resources>
                                <!-- Main DatePicker Brushes -->
                                <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF" />

                                <!-- Button Template -->
                                <ControlTemplate x:Key="DropDownButtonTemplate" TargetType="Button">
                                    <Grid>
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="CommonStates">
                                                <vsm:VisualStateGroup.Transitions>
                                                    <vsm:VisualTransition GeneratedDuration="0" />
                                                    <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
                                                    <vsm:VisualTransition To="Pressed" GeneratedDuration="0:0:0.1" />
                                                </vsm:VisualStateGroup.Transitions>
                                                <vsm:VisualState x:Name="Normal" />
                                                <vsm: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>
                                                </vsm:VisualState>
                                                <vsm: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>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Disabled" />
                                            </vsm:VisualStateGroup>
                                        </vsm:VisualStateManager.VisualStateGroups>

                                        <!--Start UI-->
                                        <Grid Height="18" Width="19" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" Background="#11FFFFFF" FlowDirection="LeftToRight">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="20*"/>
                                                <ColumnDefinition Width="20*"/>
                                                <ColumnDefinition Width="20*"/>
                                                <ColumnDefinition Width="20*"/>
                                            </Grid.ColumnDefinitions>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="23*"/>
                                                <RowDefinition Height="19*"/>
                                                <RowDefinition Height="19*"/>
                                                <RowDefinition Height="19*"/>
                                            </Grid.RowDefinitions>
                                            <Border Margin="-1" Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderThickness="1" BorderBrush="#FF45D6FA" Opacity="0" CornerRadius="0,0,1,1" x:Name="Highlight"/>
                                            <Border x:Name="Background" Margin="0,-1,0,0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderThickness="1" BorderBrush="#FFFFFFFF" Opacity="1" CornerRadius=".5" Background="#FF1F3B53"/>
                                            <Border x:Name="BackgroundGradient" Margin="0,-1,0,0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderThickness="1" BorderBrush="#BF000000" Opacity="1" CornerRadius=".5">
                                                <Border.Background>
                                                    <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1">
                                                        <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 Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1">
                                                <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="#FF4084BD"/>
                                                        <GradientStop Color="#FFAFCFEA" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Rectangle.Fill>
                                            </Rectangle>
                                            <Canvas Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3">
                                                <Line StrokeThickness="1" X1="5" X2="5"  Y1="0" Y2="13" Stroke="Black" RenderTransformOrigin="0.5,0.5" />
                                                <Line StrokeThickness="1" X1="10" X2="10"  Y1="0" Y2="13" Stroke="Black" RenderTransformOrigin="0.5,0.5" />
                                                <Line StrokeThickness="1" X1="15" X2="15"  Y1="0" Y2="13" Stroke="Black" RenderTransformOrigin="0.5,0.5" />
                                                <Line StrokeThickness="1" X1="0" X2="18"  Y1="3" Y2="3" Stroke="Black" RenderTransformOrigin="0.5,0.5" />
                                                <Line StrokeThickness="1" X1="0" X2="18"  Y1="8" Y2="8" Stroke="Black" RenderTransformOrigin="0.5,0.5" />
                                            </Canvas>


                                            <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Fill="#FFFFFFFF" StrokeThickness="0" Grid.ColumnSpan="4" Width="3" Height="3"/>
                                            <Border Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="4" BorderThickness="1" BorderBrush="#B2FFFFFF" Opacity="0" CornerRadius="0,0,.5,.5" x:Name="DisabledVisual"/>
                                        </Grid>
                                        <!--End UI-->
                                    </Grid>
                                </ControlTemplate>
                            </Grid.Resources>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Button x:Name="PART_Button" Grid.Row="0" Grid.Column="1"
                                    Template="{StaticResource DropDownButtonTemplate}"
                                    Foreground="{TemplateBinding Foreground}" 
                                    Width="20"
                                    Margin="3,0,3,0" 
                                    Focusable="False" 
                                    VerticalAlignment="Top"
                                    HorizontalAlignment="Left" />
                            <primitives:DatePickerTextBox x:Name="PART_TextBox" 
                                Grid.Row="0" Grid.Column="0" 
                                Foreground="{TemplateBinding Foreground}" 
                                HorizontalContentAlignment="Stretch"
                                VerticalContentAlignment="Stretch" />
                            <Grid x:Name="PART_DisabledVisual" 
                                  Opacity="0" 
                                  IsHitTestVisible="False" 
                                  Grid.Row="0" Grid.Column="0"
                                  Grid.ColumnSpan="2">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle Grid.Row="0" Grid.Column="0" RadiusX="1" RadiusY="1" Fill="#A5FFFFFF"/>
                                <Rectangle Grid.Row="0" Grid.Column="1" RadiusX="1" RadiusY="1" Fill="#A5FFFFFF" Height="18" Width="19" Margin="3,0,3,0" />
                                <Popup x:Name="PART_Popup" 
                                       PlacementTarget="{Binding ElementName=PART_Button}"
                                       Placement="Bottom" 
                                       StaysOpen="False"
                                       AllowsTransparency="True" />
                            </Grid>
                        </Grid>
                    </Border.Child>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

    • 0