Change windows DatePicker's pressed state style - xaml

Question

I am developing an application for Windows Phone 8.1. I am trying to edit the windows default DatePicker style. I have succeeded in adding an image in place of the DatePicker using this style
<Style x:Key="DatePickerStyle" TargetType="DatePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}"/>
<Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Margin="0,0,0,-3" Style="{StaticResource HeaderContentPresenterStyle}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
<Button x:Name="FlyoutButton" BorderThickness="2.5" HorizontalAlignment="Stretch" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsEnabled="{TemplateBinding IsEnabled}" Padding="6.5,0,0,3" BorderBrush="{x:Null}" Foreground="{x:Null}" Height="100" Width="100" Content=" ">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="/Assets/calendaricon.png"/>
</Button.Background>
</Button>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But when the DatePicker is pressed, it still shows the old DatePicker style instead of the new style that I have set. I tried to figure out how to set the pressed state style of the date picker but I couldn't figure it out. I want the same normal state style to be used for the datepicker for all its states. How can I achieve this?

Answer 1

Instead of setting the background of the button(FlyoutButton) set the content template of the button(FlyoutButton).
Here is the code:
<Style x:Key="DatePickerStyle" TargetType="DatePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}"/>
<Setter Property="Foreground" Value="{ThemeResource DatePickerForegroundThemeBrush}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePicker">
<StackPanel x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Margin="0,0,0,-3" Style="{StaticResource HeaderContentPresenterStyle}" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
<Button x:Name="FlyoutButton"
BorderThickness="2.5"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsEnabled="{TemplateBinding IsEnabled}"
Padding="6.5,0,0,3"
BorderBrush="{x:Null}"
Foreground="{x:Null}"
Height="100"
Width="100"
>
<Button.ContentTemplate>
<DataTemplate>
<Grid >
<Image Stretch="Uniform"
Source="/Assets/calendaricon.png"/>
</Grid>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>