WP7 How do I change the image of a button when clicked

Right now I have a grid of six buttons, all with different images in开发者_JS百科side them. I have another set of six images, that are the original just with a gray tint to represent you selecting it. How do I change the image to the button to the new "selected image" when I select the button.

I am assuming you do it in the method:

private void button1_click(object sender, RoutedEventArgs e)
{

}

I'm having trouble figuring out what to put inside here. Normally I would think it would be something like:

button1.image = "image path";

However when making a WP7 application you cannot use the image keyword. Any advice on how to change the image of a button when clicked?

Write where you want to change the image

var brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri("/Images/YourImage.png", 
                                            UriKind.Relative));
btn.Background = brush;

In Silverlight (upon which the Windows Phone 7 framework is built) the Button control does not have an Image property. I presume that you have created your original buttons by placing an Image element as the child of the Button. On the assumption that you want the same behavior for a whole set of buttons, then it might make sense to use visual states instead. You coudl achieve a consistent look-and-feel by changing the opacity of the ContentPresenter, e.g. An Opacity of 0.75 for the "Normal" state and and Opacity of 1.0 for the "Selected" state.

Determing which button is the selected one would be the trickier part, but if you wrap your buttons in a ListBox then you can use the "Selected" visual state in the ItemContainerStyle.

If you want to continue with the approach that you've already taken, then given that you know that the content of the button is an Image, you could do something like the following:

private void button1_click(object sender, RoutedEventArgs e)
{
    Button source = (Button)sender;
    Image content = source.Content as Image;
    if (null != content)
    {
        content.Source = new BitmapImage(new Uri("image path"));
    }
}

In this approach you would, of course, also need to handle reverting the other buttons back to their "Normal" state, which the ListBox approach would handle for you.

What you're doing is a really good learning exercise - you'll learn lots about Silverlight by experimenting like this.

In addition to manually adjusting the image to match the button press state, I believe you can also achieve the effect you are looking for - that the button image becomes "gray" when pressed - you can do this using "Styles" and using "Behaviors". Take a look at posts like:

• http://mstechno.wordpress.com/2009/08/28/silverlight-3-how-to-customize-a-button-with-expression-blend-3/
• Windows Phone 7 (WP7) Change a button's background color on click

Some of the XAML in this might look daunting - and using Expression Blend takes some time to get used to - but you will get there. Good luck!