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

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>
  开发者_JAVA百科         <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

---

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.

---

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:
http://blogs.msdn.com/b/dohollan/archive/2011/04/22/using-images-as-buttons-on-windows-phone-7.aspx
http://www.silvergeek.net/windows-phone-7/imagebutton-control-for-win-phone-7/
http://blogs.msdn.com/b/priozersk/archive/2010/08/14/creating-round-image-button-for-wp7-part-1.aspx

---

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"/>

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"