Simple Image Button in Silverlight

Introduction

In this article we'll see how to create an custom image button by adding an image and textblock to the existing button control to derive our new ImageButton control

Using the Code

Create a new silverlight application. and add an folder called "Themes". Right click the created "Themes" Folder and Select "New item" and choose resource dictionary and name it as generic.xaml Set the Build Action of the file to Page - which is the default one.

 ....
<Style TargetType="Custom:MyButton">
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="Custom:MyButton">
            <Grid x:Name="Root" Background="AliceBlue">
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width=".30*"/>
                  <ColumnDefinition Width=".70*"/>
               </Grid.ColumnDefinitions>
               <Image 
                  Source="/SilverlightApplication1;component/Images/exclamation1.png" 
                  Width="30"
                  Height="30" Grid.Column="0"></Image>
               <TextBlock Text="My Button" Grid.Column="1"
                  VerticalAlignment="Center"></TextBlock>
            </Grid>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>
.....

Add a new class to the project which extends the Button In the constructor you have to assign the type of your class to DefaultStylekey. Which is more important otherwise your button won't show up the style declared in generic.xaml.

MyButton.cs:

public class MyButton : Button
    {
        public MyButton()
        {
            this.DefaultStyleKey = typeof(MyButton);
        }
    }

Just add reference to our control and we can use it like any other silverlight control

MainPage.xaml:

...
  <Grid x:Name="LayoutRoot" Background="White">
        <Custom:MyButton  Width="100" Height="30" Click="MyButton_Click">
        </Custom:MyButton>
  </Grid>
...

Points of Interest

We can control the visual state of the control by adding visual state manager to our generic.xaml