XAML Template for the WPF DatePicker Control

Here it is in all its glory: the WPF DatePicker control’s XAML template. This was generated using the method found HERE.

My mission: to customize it, placing a time picker control below the calendar within the popup. Wish me luck! I’m going down the rabbit hole…

<?xml version="1.0" encoding="utf-8"?>
<ControlTemplate TargetType="assembly:DatePicker" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:assembly="http://schemas.microsoft.com/wpf/2008/toolkit" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Border BorderThickness="{TemplateBinding Border.BorderThickness}" Padding="{TemplateBinding Control.Padding}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}">
    <Grid Name="PART_Root" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>
      <Grid.Resources>
        <SolidColorBrush x:Key="DisabledBrush">#A5FFFFFF</SolidColorBrush>
        <ControlTemplate TargetType="Button" x:Key="DropDownButtonTemplate">
          <Grid>
            <Grid Background="#11FFFFFF" Width="19" Height="18" FlowDirection="LeftToRight" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
              <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 BorderThickness="1,1,1,1" CornerRadius="0,0,1,1" BorderBrush="#FF45D6FA" Name="Highlight" Margin="-1,-1,-1,-1" Opacity="0" Grid.Row="0" Grid.ColumnSpan="4" Grid.RowSpan="4" />
              <Border BorderThickness="1,1,1,1" CornerRadius="0.5,0.5,0.5,0.5" BorderBrush="#FFFFFFFF" Background="#FF1F3B53" Name="Background" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3" />
              <Border BorderThickness="1,1,1,1" CornerRadius="0.5,0.5,0.5,0.5" BorderBrush="#BF000000" Name="BackgroundGradient" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3">
                <Border.Background>
                  <LinearGradientBrush StartPoint="0.7,0" EndPoint="0.7,1">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="#FFFFFFFF" Offset="0" />
                      <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                      <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                      <GradientStop Color="#C6FFFFFF" Offset="1" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Border.Background>
              </Border>
              <Rectangle StrokeThickness="1" Grid.ColumnSpan="4" Grid.RowSpan="1">
                <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0.46,1.6" EndPoint="0.3,-1.1">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="#FF4084BD" />
                      <GradientStop Color="#FFAFCFEA" Offset="1" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.Stroke>
                  <LinearGradientBrush StartPoint="0.48,1.25" EndPoint="0.48,-1">
                    <LinearGradientBrush.GradientStops>
                      <GradientStop Color="#FF494949" />
                      <GradientStop Color="#FF9F9F9F" Offset="1" />
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Rectangle.Stroke>
              </Rectangle>
              <Path Data="M11.426758,8.4305077L11.749023,8.4305077 11.749023,16.331387 10.674805,16.331387 10.674805,10.299648 9.0742188,11.298672 9.0742188,10.294277C9.4788408,10.090176 9.9094238,9.8090878 10.365967,9.4510155 10.82251,9.0929432 11.176106,8.7527733 11.426758,8.4305077z M14.65086,8.4305077L18.566387,8.4305077 18.566387,9.3435936 15.671368,9.3435936 15.671368,11.255703C15.936341,11.058764 16.27293,10.960293 16.681133,10.960293 17.411602,10.960293 17.969301,11.178717 18.354229,11.615566 18.739157,12.052416 18.931622,12.673672 18.931622,13.479336 18.931622,15.452317 18.052553,16.438808 16.294415,16.438808 15.560365,16.438808 14.951641,16.234707 14.468243,15.826504L14.881817,14.929531C15.368796,15.326992 15.837872,15.525723 16.289043,15.525723 17.298809,15.525723 17.803692,14.895514 17.803692,13.635098 17.803692,12.460618 17.305971,11.873379 16.310528,11.873379 15.83071,11.873379 15.399232,12.079271 15.016094,12.491055L14.65086,12.238613z" Stretch="Fill" Fill="#FF2F2F2F" Margin="4,3,4,3" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3" />
              <Ellipse Fill="#FFFFFFFF" StrokeThickness="0" Width="3" Height="3" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="4" />
              <Border BorderThickness="1,1,1,1" CornerRadius="0,0,0.5,0.5" BorderBrush="#B2FFFFFF" Name="DisabledVisual" Opacity="0" Grid.Row="0" Grid.ColumnSpan="4" Grid.RowSpan="4" />
            </Grid>
          </Grid>
        </ControlTemplate>
      </Grid.Resources>
      <Button Foreground="{TemplateBinding TextElement.Foreground}" Name="PART_Button" Width="20" Margin="3,0,3,0" HorizontalAlignment="Left" VerticalAlignment="Top" Focusable="False" Grid.Column="1" Grid.Row="0">
        <Button.Template>
          <ControlTemplate TargetType="Button">
            <Grid>
              <Grid Background="#11FFFFFF" Width="19" Height="18" FlowDirection="LeftToRight" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
                <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 BorderThickness="1,1,1,1" CornerRadius="0,0,1,1" BorderBrush="#FF45D6FA" Name="Highlight" Margin="-1,-1,-1,-1" Opacity="0" Grid.Row="0" Grid.ColumnSpan="4" Grid.RowSpan="4" />
                <Border BorderThickness="1,1,1,1" CornerRadius="0.5,0.5,0.5,0.5" BorderBrush="#FFFFFFFF" Background="#FF1F3B53" Name="Background" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3" />
                <Border BorderThickness="1,1,1,1" CornerRadius="0.5,0.5,0.5,0.5" BorderBrush="#BF000000" Name="BackgroundGradient" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3">
                  <Border.Background>
                    <LinearGradientBrush StartPoint="0.7,0" EndPoint="0.7,1">
                      <LinearGradientBrush.GradientStops>
                        <GradientStop Color="#FFFFFFFF" Offset="0" />
                        <GradientStop Color="#F9FFFFFF" Offset="0.375" />
                        <GradientStop Color="#E5FFFFFF" Offset="0.625" />
                        <GradientStop Color="#C6FFFFFF" Offset="1" />
                      </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                  </Border.Background>
                </Border>
                <Rectangle StrokeThickness="1" Grid.ColumnSpan="4" Grid.RowSpan="1">
                  <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0.46,1.6" EndPoint="0.3,-1.1">
                      <LinearGradientBrush.GradientStops>
                        <GradientStop Color="#FF4084BD" />
                        <GradientStop Color="#FFAFCFEA" Offset="1" />
                      </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                  </Rectangle.Fill>
                  <Rectangle.Stroke>
                    <LinearGradientBrush StartPoint="0.48,1.25" EndPoint="0.48,-1">
                      <LinearGradientBrush.GradientStops>
                        <GradientStop Color="#FF494949" />
                        <GradientStop Color="#FF9F9F9F" Offset="1" />
                      </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                  </Rectangle.Stroke>
                </Rectangle>
                <Path Data="M11.426758,8.4305077L11.749023,8.4305077 11.749023,16.331387 10.674805,16.331387 10.674805,10.299648 9.0742188,11.298672 9.0742188,10.294277C9.4788408,10.090176 9.9094238,9.8090878 10.365967,9.4510155 10.82251,9.0929432 11.176106,8.7527733 11.426758,8.4305077z M14.65086,8.4305077L18.566387,8.4305077 18.566387,9.3435936 15.671368,9.3435936 15.671368,11.255703C15.936341,11.058764 16.27293,10.960293 16.681133,10.960293 17.411602,10.960293 17.969301,11.178717 18.354229,11.615566 18.739157,12.052416 18.931622,12.673672 18.931622,13.479336 18.931622,15.452317 18.052553,16.438808 16.294415,16.438808 15.560365,16.438808 14.951641,16.234707 14.468243,15.826504L14.881817,14.929531C15.368796,15.326992 15.837872,15.525723 16.289043,15.525723 17.298809,15.525723 17.803692,14.895514 17.803692,13.635098 17.803692,12.460618 17.305971,11.873379 16.310528,11.873379 15.83071,11.873379 15.399232,12.079271 15.016094,12.491055L14.65086,12.238613z" Stretch="Fill" Fill="#FF2F2F2F" Margin="4,3,4,3" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="4" Grid.RowSpan="3" />
                <Ellipse Fill="#FFFFFFFF" StrokeThickness="0" Width="3" Height="3" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="4" />
                <Border BorderThickness="1,1,1,1" CornerRadius="0,0,0.5,0.5" BorderBrush="#B2FFFFFF" Name="DisabledVisual" Opacity="0" Grid.Row="0" Grid.ColumnSpan="4" Grid.RowSpan="4" />
              </Grid>
            </Grid>
          </ControlTemplate>
        </Button.Template>
      </Button>
      <assembly:DatePickerTextBox Foreground="{TemplateBinding TextElement.Foreground}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Name="PART_TextBox" Grid.Column="0" Grid.Row="0" xml:space="preserve"></assembly:DatePickerTextBox>
      <Grid Name="PART_DisabledVisual" Opacity="0" IsHitTestVisible="False" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Rectangle RadiusX="1" RadiusY="1" Fill="#A5FFFFFF" Grid.Column="0" Grid.Row="0" />
        <Rectangle RadiusX="1" RadiusY="1" Fill="#A5FFFFFF" Width="19" Height="18" Margin="3,0,3,0" Grid.Column="1" Grid.Row="0" />
        <Popup Placement="Bottom" StaysOpen="False" AllowsTransparency="True" Name="PART_Popup" />
      </Grid>
    </Grid>
  </Border>
</ControlTemplate>

Leave a Reply