Creating Image Button in Silverlight

In the default list of controls comes with Silverlight 4 or 5, there is no such control like Image Button. But the creation of this control is very easy. Lets start to create Image Button.

Steps: -
1) Create a Silverlight User Control in your Silverlight project. Change its type to Button. I have given the XAML and C# code below.
XAML Code:

<Button x:Class="KnowledgeWeb.Assets.ImageButton"
    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:DesignHeight="80" d:DesignWidth="80">
    
    <Grid x:Name="LayoutRoot" Background="White">
 
    </Grid>
</Button>

C# Code:

namespace KnowledgeWeb.Assets
{
    public partial class ImageButton : Button
    {
        public ImageButton()
        {
            InitializeComponent();
        }
    }
}

2) Now to show an image on the button we have to edit the default template of the button class and then inserts the Image control in it.

For this purpose open the project in Expression Blend and open the XAML code of Image Button file. Right click on the root node in the Objects and Timeline panel and select Edit a template --> Edit a Copy from the context menu. (See the following image)

A dialog opens. Press OK button to accept the default values.

3) In the Objects and Timeline panel selects the root Grid control and insert an Image control in it. Name the image control.

4) To set the source property of an image, we have to create a Dependency property of type ImageSource and apply as a TemplateBinding to Source of image control. The code for Dependency property (I have named it as ImageSource) is : -

public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }
 
        public static readonly DependencyProperty ImageSourceProperty =
           DependencyProperty.Register("ImageSource",
                                        typeof(ImageSource),
                                        typeof(ImageButton),
                                        new PropertyMetadata(null));
  
  public static ImageSource GetSource(UIElement element)
  {
   return (ImageSource)element.GetValue(ImageSourceProperty);
  }
  public static void SetSource(UIElement element, ImageSource value)
  {
   element.SetValue(ImageSourceProperty,value);
  }

And the XAML code for TemplateBinding is

<Image x:Name="PART_img" Stretch="None" Margin="1"  HorizontalAlignment="Left" VerticalAlignment="Top" Source="{TemplateBinding MyControls:ImageButton.ImageSource}" /> 

See how TemplateBinding is used to register the Dependency Property "ImageSource" with Source of an image control. But for the successful registration of this Dependency Property, you have to register the namespace of it at the top of the XAML code.

<Button x:Class="KnowledgeWeb.Assets.ImageButton"
 xmlns:MyControls="clr-namespace:KnowledgeWeb.Assets"
...
/>

I have named the namespace as MyControls and used it in the TemplateBinding as MyControls:ImageButton.ImageSource.

5) Now compile the project and use this custom control in your silverlight form or navigation page. ImageSource property is now available in the Properties panel. Assign an image.

Happy Coding!