How to properly implement the button event when tapped or pressed, changing colors?

Question

I am creating an app for windows phone 8 and I want the button control to change colors of borderbrush, background, and foreground when pressed or tapped and when released to change back to its original colors. The problem is the phone uses its accent color when I click on any button in the app after the Tap event has been fired. I notice Tap event is not what I'm looking for since, it changes the color correctly when tapped and doesn't change back when released. I also tried MouseLeftButtonDown (pressed) and MouseLeftButtonUp (released) and it didn't fire whatsoever. Is there a better way to easily change the button's color when pressed and back when released? I looked at MSDN Network - UIElement Events but couldn't find anything else that fits.

XAML:

<Button Name="btnEmail"
        Content="email" 
        HorizontalAlignment="Stretch" 
        Margin="0,10,0,0" 
        Grid.Row="4" 
        VerticalAlignment="Top"
        Background="OrangeRed"
        BorderBrush="OrangeRed"
        Tap="btnEmail_Tap"
        MouseLeftButtonDown="btnEmail_MouseLeftButtonDown"
        MouseLeftButtonUp="btnEmail_MouseLeftButtonUp"
        />

C# Code:

    private void btnEmail_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        btnEmail.BorderBrush = new SolidColorBrush(ColorNames.White.ToColor());
        btnEmail.Background = new SolidColorBrush(ColorNames.White.ToColor());
        btnEmail.Foreground = new SolidColorBrush(ColorNames.OrangeRed.ToColor());
    }

    private void btnEmail_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        btnEmail.BorderBrush = new SolidColorBrush(ColorNames.OrangeRed.ToColor());
        btnEmail.Background = new SolidColorBrush(ColorNames.OrangeRed.ToColor());
        btnEmail.Foreground = new SolidColorBrush(ColorNames.White.ToColor());
    }

    private void btnEmail_Tap(object sender, System.Windows.Input.GestureEventArgs e)
    {
        btnEmail.BorderBrush = new SolidColorBrush(ColorNames.White.ToColor());
        btnEmail.Background = new SolidColorBrush(ColorNames.White.ToColor());
        btnEmail.Foreground = new SolidColorBrush(ColorNames.OrangeRed.ToColor());
    }

score 2 · Accepted Answer · answered May 04 '14 at 09:03

Most correct way of doing that is to edit the template.

In Visual Studio 2013, right click the button, select "Edit Template" and "Edit a Copy".

Then, modify the style that was created for you - and change the Storyboard for the pressed state (I added a ///////// to wrap the relevant change):

    <Style x:Key="ButtonStyle1" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
  ////////////// MODIFICATION START
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Pink"/>
                                        </ObjectAnimationUsingKeyFrames>
   ////////////// MODIFICATION END
                                   </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

How to properly implement the button event when tapped or pressed, changing colors?

1 Answers1