Question

How do I change a button’s background image in a Metro Style app using VS 2012?
In Windows Forms, a button has a BackgroundImage property that you can set.
Is this feature available for Metro Style apps?

In Windows Forms, I can do the following in C#:

btnImage.BackgroundImage = System.Drawing.Image.FromFile(“…\Pictures\flower.png”);

How can you programmatically change the button’s background image in Metro Style apps ?

Answer 1

Pretty straightforward, actually, just modify the Button’s XAML to include a closing tag, and drop an image control in between, like so:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Button HorizontalAlignment="Left" Margin="532,285,0,0" VerticalAlignment="Top" Height="135" Width="283">
        <Image Source="Assets/Logo.png" />
    </Button>
</Grid>

In the snippet above, I’m pointing the image source to the Logo.png file that is part of the built-in templates for C#/XAML apps.

Another way to do it is to open the project in Blend for Visual Studio, drag the image from the Assets tab onto the design surface (making sure you have the desired container selected in the Objects and Timeline pane), and then right-click the image and select Make into Control…, and choose the Button control.

The only downside to this technique is that you don’t get the default VisualStates that the built-in Button control has. Instead, Blend defines a style for you with empty VisualStates which you can style as desired.

Hope that helps.