Windows Phone 7 Image Button

Question

I need to create an Image Button for my application like web-oriented style. I have an image 20x20 pixel and want an image button with the same dimension of the image.

I

Answer 1

You can set your image as the background for the button, or if you want to do it as content, in theory it should work inside a stackpanel.

Answer 2

The Button control can take most controls as its content (not just text), so you don't need an "image button" - instead, you simply need to put an Image control inside your Button like so:

<Button>
    <Image Source="http://www.richmondwiki.org/images/search-button.png"></Image>
</Button>

This approach (as opposed to using an ImageBrush for the Button background) means that you don't have to worry about or hardcode the sizes of the Image/Button - WP7 will handle this for you.

Using the provided Button control instead of hooking into the manipulation events is recommended, so that you won't have to worry about things like having appropriate margins for touch targets, etc.

Answer 3

This is old but I thought I would offer what I thought was a better solution here. Some of these solutions want you to replace the button with an image, or the background with an imagebrush. That's fine except it also surrounds the image with the normal button style, a black or white box (depending on your theme).

This solution lets you use an image as the button itself while maintaining the complete fidelity of a button but without having to subclass an object like the link by SilverGeek.

First, create a new style (either in your App.xaml or your page resources)

<Style x:Key="ImageButtonStyle" TargetType="Button">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Image x:Name="StartButtonImage" Source="/Images/YourImageFile.png"/>
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                    Content=""/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Now, just create a button anywhere using that style:

<Button Style={StaticResource ImageButtonStyle}/>

And add click events or whatever else you want. The button will take on the entire style of the image.

Answer 4

You don't even need to use a Button.

You can hook the MouseLeftButtonUp event on the Image control.

 <Image
            Source='blue02.png'
            Width='26'
            Height='26'
            Margin='5'
            MouseLeftButtonUp='Image_MouseLeftButtonUp' />

Answer 5

I think the best solution is the following:

<Button ...>
    <Button.Template>
         <ControlTemplate>
              <Image .... />
         </ControlTemplate>
     </Button.Template>
</Button>

Using manipulation started will result in subtly non-standard behaviour. On most buttons if you click on it but then drag off, the button click will not fire. However, if you use ManipulationStarted it will fire immediately.

The best way to manage these design time considerations is to use Expression Blend. In blend you can right click on the button and edit the template through the design tools, which makes knowing how to edit the xaml less important. It's really worth the effort to learn to use Blend.

Answer 6

Maybe you will be interested in this article:

http://silvergeek.net/2011/01/14/imagebutton-control-for-win-phone-7/