views:

777

answers:

1

I'm trying to override the default DatePicker template in Silverlight. I want to remove the DatePickerTextBox and replace the content of the "calendar" icon to the right of the DatePickerTextBox with just the Month and Day as the content. Here's where I'm at, there are two ContentPresenter controls each with a different way of trying to bind to the DatePicker's SelectedDate property. But neither works. What am I missing?

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
         xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
   xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         x:Class="YouthSports.Client.Coach.App"
         mc:Ignorable="d"
         >
<Application.Resources>

    <Style x:Key="DateTimePickerStyle" TargetType="controls:DatePicker">
     <Setter Property="IsTabStop" Value="False"/>
     <Setter Property="Background" Value="#FFFFFFFF"/>
     <Setter Property="Padding" Value="2"/>
     <Setter Property="SelectionBackground" Value="#FF444444"/>
     <Setter Property="BorderBrush">
      <Setter.Value>
       <LinearGradientBrush EndPoint=".5,0" StartPoint=".5,1">
        <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="18" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="19" Background="#11FFFFFF">
             <Grid.RowDefinitions>
              <RowDefinition Height="23*"/>
              <RowDefinition Height="19*"/>
              <RowDefinition Height="19*"/>
              <RowDefinition Height="19*"/>
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
              <ColumnDefinition Width="20*"/>
              <ColumnDefinition Width="20*"/>
              <ColumnDefinition Width="20*"/>
              <ColumnDefinition Width="20*"/>
             </Grid.ColumnDefinitions>
             <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>
          <ContentPresenter Content="{TemplateBinding DataContext}" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="4"  />
             <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="4" Content="{Binding SelectedDate.Day}" 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>
         <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>
         <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
         <primitives:DatePickerTextBox Visibility="Collapsed" x:Name="TextBox" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Column="0" SelectionBackground="{TemplateBinding SelectionBackground}"/>
         <Button x:Name="Button" Margin="2,0,2,0" Width="20" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{TemplateBinding Foreground}" Template="{StaticResource DropDownButtonTemplate}" 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>

</Application.Resources>

A: 

I finally figured it out a while back, here's the final answer to my question: http://www.developmentalmadness.com/archive/2009/08/27/silverlightwpf-customizing-the-datepicker-control.aspx

Mark J Miller