Change button background color when mouse over Windows phone 8

Question

I am using a custom style for my buttons in a windows 8 application like this:

    <Style x:Key="ButtonDefaultStyle" TargetType="Button">
        <Setter Property="Foreground" Value="Red"/>
        <Setter Property="Background" Value="Green"/>
        <Setter Property="MinWidth" Value="0"/>
        <Setter Property="MinHeight" Value="0" />
    </Style>

What's the best way to change the background color when the mouse is over the button, without adding custom images for backgrounds?

Answer 1

This was my solution the change the background color when mouse over:

 <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="grid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" >
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource GreenAppleColorBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
                                    Storyboard.TargetName="FocusVisualWhite" />
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
                                    Storyboard.TargetName="FocusVisualBlack" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Border"
                    Background="{TemplateBinding Background}" Margin="3">
                            <ContentPresenter x:Name="ContentPresenter"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        Content="{TemplateBinding Content}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Margin="{TemplateBinding Padding}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0"
                    StrokeDashOffset="1.5" StrokeEndLineCap="Square"
                    Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" />
                        <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0"
                    StrokeDashOffset="0.5" StrokeEndLineCap="Square"
                    Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>