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 tried to set this inside my xaml but it doesn't work:

<Button Grid.Row="0" Margin="0" Padding="0" Click="AddtoFavorite_Click" Width="20" Height="20"  VerticalAlignment="Top" HorizontalAlignment="Right">
   <Button.Content>
      <Image Source="/MyNamespace;component/images/star_yellow.png" Margin="0" Width="20" Height="20" />
   </Button.Content>
</Button>

What is wrong?

---

SOLUTION

I found the best solution is:

<Image Source="/MyNamespace;component/images/star_yellow.png" ManipulationStarted="Image_ManipulationStarted" Width="20" Height="20"></Image> 

Thanks to all!

Answer 1

I don't see particular errors in your code but I don't have the tools right now to test it ans see why it fails.

However you can create a VisualBrush with your image and use it as background for your Button:

<Button>
    <Button.Background>
        <ImageBrush ImageSource="xyz.png"/>
    </Button.Background>
</Button>

Most Backgrounds are of type Brush, so you can use SolidColorBrush, LinearGradientBrush, ImageBrush, etc. You are not limited to colors.

Answer 2

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.