Question

I am trying to make a custom template for datepickers in my program. I am basically using this template line for line (changing colors and things):

http://msdn.microsoft.com/en-us/library/cc278067(v=vs.95).aspx

I have tried going through it and getting rid of this white box (the one INSIDE the datepicker textbox), but it is evading me. Here is a screenshot of what I am seeing:

Do I have to add something extra? Or change some existing values? There is also a MouseOver event that highlights the whitebox with the blue windows gradient, if that helps..

For future people with this problem, I did what Brian suggested, just thought I would post exactly my code, so other people can use it 😉 I just added this into app.xaml

<Style x:Key="{x:Type DatePickerTextBox}" TargetType="{x:Type DatePickerTextBox}">        
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DatePickerTextBox}">

                <Grid>
                    <Border x:Name="watermark_decorator" BorderBrush="{DynamicResource cControlColor}" BorderThickness="1" 
                                Background="{DynamicResource cControlColor}"/>     
                </Grid>
            </ControlTemplate>
         </Setter.Value>
    </Setter>
</Style>

Answer 1

EDIT: Updating since the clarification points to the white rectangle around the ‘Enter text here’.

For this, you need to create a custom template for the DatePickerTextBox which is defined about 2/3rds of the way down that template, and named TextBox. Your best bet will be to use Blend to create a custom template (since it will generate the default template) and then modify the <Border x:Name="watermark_decorator".../> to change the BorderBrush. For example:

<Style x:Key="MyDatePickerTextBoxStyle" TargetType="{x:Type DatePickerTextBox}">
    <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type DatePickerTextBox}">
           <Grid>                 
           <!-- Visual State Manager stuff -->
             <Border...>
               <!-- other stuff... -->
               <Border x:Name="watermark_decorator" BorderBrush="[THE BRUSH YOU WANT]" BorderThickness="1">
                 <!-- And so on and so forth... -->
               </Border>
             </Border>
           </Grid>
         </ControlTemplate>
    </Setter>
</Style>

Then, in the DatePicker template, modify the DatePickerTextBox to use this style:

<!-- All DatePicker Template stuff -->
<controlsPrimitives:DatePickerTextBox x:Name="TextBox" Style="{DynamicResource MyDatePickerTextBoxStyle}" ... />

Are you talking about the button with the 15 on it? If so, the look and feel of this part of the DatePicker is defined in the “DropDownButtonTemplate” part of the template. This template includes a large VisualStateManager section, but then defines the template for that button. There are comments that define the beginning and end of the button template:

<!--Start UI-->
... this is the Button Template ...
<!-- End UI-->

For example, if you want to change the color of the Blue rectangle at the top of the button, the MSDN example uses this:

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

And you could change it to a solid color simply by changing it to this:

<Rectangle Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1" Stroke="Black" Fill="Green"/>

The “White Box” is actually the Border inside the template with the x:Name="BackgroundGradient", so if you change the Background of that element, you can get rid of the white.