Remove background color of button pressed and replace with image in Windows Phone 8.1

Question

I got a Windows Phone 8.1 RT app.

I have a button with image like so:

<Button BorderThickness="0" Name="btn1" Grid.Row="1" Grid.Column="0" Width="75" Height="75" HorizontalAlignment="Center" FontFamily="Global User Interface" >
    <Button.Background >
        <ImageBrush ImageSource="ms-appx:///Images/1.png" Stretch="Uniform"/>
    </Button.Background>
</Button>

When this button is pressed a horrible blue background color manifests itself.

I would like to remove this colour completely (and any other color) and change the pressed image of this button.

All the samples I have seen refers to SilverLight. Does anyone know how or where I can look to change this for RT apps?

Answer 1

This 'horrible' blue background comes with default button style. If you take a look at it:

<Style x:Key="ButtonStyle1" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="{ThemeResource PhoneForegroundBrush}"/>
    <Setter Property="Foreground" Value="{ThemeResource PhoneForegroundBrush}"/>
    <Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}"/>
    <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
    <Setter Property="FontWeight" Value="{ThemeResource PhoneButtonFontWeight}"/>
    <Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
    <Setter Property="Padding" Value="{ThemeResource PhoneButtonContentPadding}"/>
    <Setter Property="MinHeight" Value="{ThemeResource PhoneButtonMinHeight}"/>
    <Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="Grid" Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition From="Pressed" To="PointerOver">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition From="PointerOver" To="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                    </Storyboard>
                                </VisualTransition>
                                <VisualTransition From="Pressed" To="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="Grid"/>
                                    </Storyboard>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{ThemeResource PhoneTouchTargetOverhang}">
                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

you will find those lines, which produce this unwanted effect:

<VisualState x:Name="Pressed">
    <Storyboard>
        <PointerDownThemeAnimation Storyboard.TargetName="Grid"/> <!-- leave this -->
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

disable them (apart PointerDownThemeAnimation, which produces nice animation when button is pressed) and the VisualStateMenager won't change the background anymore.