How can I get stop the button control in Windows Phone from making that ugly white flash when clicked?

Question

So I have a few items in a list that I display on my MainPage. I have a button that looks like this:

<Button Grid.Column="1" Click="Button_Click" BorderThickness="0" Height="40">
     <Button.Background>
           <ImageBrush ImageSource="/WindowsPhonePanoramaApplication2;component/Images/appbar.feature.email.rest.png" Stretch="None" />
     </Button.Background>
</Button>

Every time I click on it, the image disappears under this bright white rectangle. I'd rather have it display another image instead. How can I achieve this?

Thanks for looking

possible duplicate of [Silverlight/WP7: programmatically change the button background image](http://stackoverflow.com/questions/3797304/silverlight-wp7-programmatically-change-the-button-background-image) — Matt Lacey, Jun 06 '11 at 09:55
Try an invisible button: http://stackoverflow.com/a/13366713/1821686 — YarsRevenge13, Nov 13 '12 at 18:49

score 2 · Answer 1 · answered Jun 06 '11 at 09:51

You need to change the button template. You can find the template within the file here:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design\System.Windows.xaml

The ButtonBase template is as follows:

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

Note how the Pressed VisualState changes the background of the ButtonBackground element (i.e. the Border) to PhoneForegroundBrush. This is what makes your button turn white.

You can create your own button template, changing the image within the Pressed state. Search the web if you are not sure how to create your own control template.

score 1 · Accepted Answer · edited Apr 26 '23 at 18:12

To do this you'll need to retemplate the button to use a different visual state when clicked.

See also these following image button controls/alternatives:

score 0 · Answer 3 · answered Jul 11 '12 at 19:52

This Question is a year old. However, here is the perfect way to achieve what you want. I see that you want to simulate the same experience similar when you press the appbar icon.

The Coding4fun toolkit has the exact ailment you need.

Here is how the code would look like,

<c4fControls:RoundButton Grid.Column="1" Click="Button_Click" 
    ImageSource="/Myapp;component/Images/appbar.img.png"/>

enter image description here

Ofcourse, you would have to include the coding4fun library to your project. Add this line to the top of the page as well.

xmlns:c4fControls="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

How can I get stop the button control in Windows Phone from making that ugly white flash when clicked?

3 Answers3