Click here to Skip to main content
15,903,175 members
Articles / Desktop Programming / WPF

WPF ImageButton

Rate me:
Please Sign up or sign in to vote.
4.55/5 (7 votes)
14 May 2014CPOL3 min read 62.7K   2.9K   2   7
Creating WPF Image Button with WPF Custom Control

Image 1


This tip is about how to create WPF ImageButton simply and effectively. I used a WPF Custom Control for this tip.

To create this, we need to add an Image Control to the button content. We also want to be able to easily change that image and size from Code or XAML.

First Step: Create WPF Custom Control

For those unfamiliar with custom controls I must say, it's like making a new control, but we need to use a control as a Base Control. This way, we keep all Base Control features and then add new options to it or even change some features to make more comfortable controls for our usage. Create a new WPF Custom control library. Name it ExtendedButton (as an example). Your project contains the following parts:

  • CustomControl class: Contains code and inheritance from Control
  • Generic.xaml: Contain CustomControl Template. It is in Themes SubFolder

Second Step: CustomControl Class Code

After creating your project, you have the CustomControl1.cs class. Rename the class to ImageButton. Then rename your constructor and other CustomControl1, like the below code. Now we need to change base class from Control to Button. This inheritance defines our Base Control. I choose Button as the Base Control because it has all the features we need and also requires the minimum amount of work to became ImageButton. Although you can use any object as Base control which was inherited from Control Class.

public class ImageButton : Button
    static ImageButton()
            new FrameworkPropertyMetadata(typeof(ImageButton)));

For setting the image we need a property, which I named Image, but in the WPF Custom Control, we used Dependency Property (for more information, look at

Also, we need two properties to set Image Size, for our new Control (ImageWidth and ImageHeight).

public ImageSource Image
    get { return (ImageSource)GetValue(ImageProperty); }
    set { SetValue(ImageProperty, value); }
public static readonly DependencyProperty ImageProperty =
    typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
public double ImageHeight
    get { return (double)GetValue(ImageHeightProperty); }
    set { SetValue(ImageHeightProperty, value); }
public static readonly DependencyProperty ImageHeightProperty =
    typeof(double), typeof(ImageButton), new PropertyMetadata(Double.NaN));
public double ImageWidth
    get { return (double)GetValue(ImageWidthProperty); }
    set { SetValue(ImageWidthProperty, value); }
public static readonly DependencyProperty ImageWidthProperty =
    typeof(double), typeof(ImageButton), new PropertyMetadata(Double.NaN));


  • Pay attention to the parameter which we use in the PropertyMetadata constructor. This parameter uses Default Value for property. So for some types we need set the correct value, like Image Property.
  • Dependency Property must register for custom Control. This done by the Register method and attaches to the Custom Control by the third parameter (in this overload) with type of CustomControl.

OK. We did everything we want to do with this class.

Third Step: Image Space Issue

Before we go for our Control Appearance, we need to do something about that image issue. Our control has an image and text so then if the control doesn't have any image, then we have an image control without any image (Blank Space). To prevent this issue, I created a simple convertor to check image value. If the image value is null, the image box will go invisible.

WPF has provided a feature for this solution and calls it Convertor. (For more information, look at It's simple, just add a class to your project (name it VisibilityConvertor) then inherit your class from IValueConverter and, finally, implement it.

Now add a simple code for value checking to get this code:

public class VisibilityConvertor : IValueConverter
    public object Convert(object value, Type targetType, 
    object parameter, System.Globalization.CultureInfo culture)
        if (value == null)
            return Visibility.Collapsed;
        return Visibility.Visible;
    public object ConvertBack(object value, Type targetType, 
    object parameter, System.Globalization.CultureInfo culture)
        return null;

Fourth Step: Generic Class

Now we must define our new control appearance. To do this, we must go to Generic.xml in the theme directory. After creating a project, our Generic.xml will be like the code below:

<resourcedictionary xmlns=""
<local:visibilityconvertor x:key="VisibilityConvertor" />
 <style targettype="{x:Type local:ImageButton}">
    <Setter Property="Template" > 
     <Setter.Value >
      <ControlTemplate TargetType="{x:Type local:ImageButton}" > 
        <Button >
            <StackPanel Orientation="Horizontal" > 
                <Image Margin="2 0" Source="{TemplateBinding Image}" 
                                       Width="{TemplateBinding ImageWidth}" 
                                       Height="{TemplateBinding ImageHeight}" 
                                       Visibility="{TemplateBinding Image,
                                       Converter={StaticResource VisibilityConvertor}}" 
                                       VerticalAlignment="Center"/ >
                <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center"/ > 
            </StackPanel > 
        </Button > 
      </ControlTemplate > 
     </Setter.Value > 
    </Setter >

Well done. Our custom control is ready and you can use it.

Points of Interest

As you see in custom control template, I use a button with a stack panel. But if you want to use the default button template, you can use the template I put in OtherTemplate file in sample. I produced that template with Microsoft Blend from a button and changed the content to stack panel. The difference between these templates is, you can access all the button appearances in the second template (like background and foreground).

So if you want to change it, you must only copy all styles and lines in OtherTemplate and replace the current template in Generic.Xaml.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

QuestionUsing ImageButton in a DataGrid - using FrameworkElementFactory Pin
Member 153530169-Sep-21 21:32
Member 153530169-Sep-21 21:32 
AnswerRe: Using ImageButton in a DataGrid - using FrameworkElementFactory Pin
Member 153530169-Sep-21 22:33
Member 153530169-Sep-21 22:33 
Questionmagebutton.Backgrounddoenst work Pin
djramc3-Dec-18 9:08
djramc3-Dec-18 9:08 
GeneralMy vote of 5 Pin
D4rth B4n33-Feb-15 1:37
D4rth B4n33-Feb-15 1:37 
GeneralThanks a lots. Very nice place to start. I learned a lots. Pin
Eric Ouellet9-Sep-14 5:27
professionalEric Ouellet9-Sep-14 5:27 
GeneralRe: Thanks a lots. Very nice place to start. I learned a lots. Pin
Soroosh Davaee2-Apr-15 6:05
Soroosh Davaee2-Apr-15 6:05 
Questionvery through, well done! Pin
adfgdafga6-Sep-14 5:44
adfgdafga6-Sep-14 5:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.