system.windows.datepicker change header background color - wpf

Question

I have been trying to change the background color of wpf's default datepicker. Right now it is dark blue with black text and client wants it changed to white. I have been coding a lot and nothing seems to work.
Pls help. thanks
<Style x:Key="DateStyle" TargetType="{x:Type DatePcker}" BasedOn="{x:Null}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Yellow" />
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="White" />
</Trigger>
</Style.Triggers>
<Setter Property="Background" Value="Transparent" />
<Setter Property="CharacterCasing" Value="Upper"/>
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="11" />
</Style>
here's my datepicker
<DatePicker Grid.Column="2" Grid.ColumnSpan="2" Grid.Row="4" Height="25" HorizontalAlignment="Left" TabIndex="3"
Name="dpFillingDateFrom" VerticalAlignment="Center" Width="97" Text="12/12/2011" SelectedDateFormat="Short"/>

Answer 1

Just go through http://msdn.microsoft.com/en-us/magazine/dd882520.aspx.
Its not straight forward to change the background color of wpf's default datepicker but you can follow below steps
1) Date picker has a CalenderStye Property so override Calender Default ControlTemplate
2) In Calender control template, there is CalenderItemStyle where you can override CalenderItemStyle defaulttemplate. In this you can customize the background colors as well as header buttons.
<Style x:Key="ItemStyle" TargetType="primitives:CalendarItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:CalendarItem">
<ControlTemplate.Resources>
<DataTemplate x:Key="DayTitleTemplate">
<TextBlock Text="{Binding}"
HorizontalAlignment="Center" />
</DataTemplate>
</ControlTemplate.Resources>
<DockPanel Name="PART_Root"
LastChildFill="True">
<Button x:Name="PART_PreviousButton"
DockPanel.Dock="Left"
Content="<"
Focusable="False" />
<Button x:Name="PART_NextButton"
DockPanel.Dock="Right"
Content=">"
Focusable="False" />
<Button x:Name="PART_HeaderButton"
DockPanel.Dock="Top"
FontWeight="Bold"
Focusable="False" />
<Grid>
<Grid x:Name="PART_MonthView"
Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>
<Grid x:Name="PART_YearView"
Visibility="Hidden">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>
</Grid>
<Rectangle x:Name="PART_DisabledVisual" Opacity="0" Visibility="Collapsed" Fill="#A5FFFFFF"/>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type toolkit:Calendar}}, Path=DisplayMode}" Value="Year">
<Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
<Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type toolkit:Calendar}}, Path=DisplayMode}" Value="Decade">
<Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
<Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="pp" TargetType="toolkit:Calendar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:Calendar">
<StackPanel Name="PART_Root"
Orientation="Horizontal">
<primitives:CalendarItem
Name="PART_CalendarItem"
Style="{StaticResource ItemStyle}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
VerticalAlignment="Center" />
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="4 4 0 4">
<ScrollViewer
VerticalScrollBarVisibility="Auto"
Height="{Binding ElementName=PART_CalendarItem,
Path=ActualHeight}"
Width="100">
<ItemsControl
ItemsSource=
"{Binding RelativeSource={RelativeSource
AncestorType=toolkit:Calendar},
Path=SelectedDates}" />
</ScrollViewer>
</Border>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<toolkit:DatePicker CalendarStyle="{StaticResource pp}" Margin="0,0,0,242"></toolkit:DatePicker>