One Step to Create an Image Button for Silverlight Applications

I had to create a trivial image button for my Silverlight web site. I Googled the web and got tons of tips and suggestions. However, most of them involve several editing steps through resources, template or style. Some require additional tools, such as Expression Blend.

In my implementation, I was able to create an image button by adding one line to the XAML code. What I post here isn't really a trick, but a tip about a simple way of doing simple things.

Here is the starting-point XAML code for my minimal Silverlight page that contains a button in the centre:

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
    <Button x:Name="MyButton" Height="32" Width="32">
    </Button>
  </Grid>
</UserControl>

If you add one line of code as follows, you will overlay "someimage.png" on the button immediately:

<Button x:Name="MyButton" Height="32" Width="32">
      <Image Source="someimage.png" Height="32" Width="32"></Image>
</Button>

In fact, the code above is equivalent to:

<Button x:Name="MyButton" Height="32" Width="32">
      <Button.Content>
            <Image Source="someimage.png" Height="32" Width="32"></Image>
      </Button.Content>
</Button>