WPF : Re-usable template for image buttons?

Question

My WPF project uses a lot of image buttons, but since I haven\'t found a way to do it properly (I have to write the same triggers and style each time, only difference is the

Answer 1

The easiest way is to create a specific control with an Image property:

public class ImageButton : Button
{
    static ImageButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof (ImageButton),
            new FrameworkPropertyMetadata(typeof (ImageButton)));
    }


    public ImageSource Image
    {
        get { return (ImageSource)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }

    public static readonly DependencyProperty ImageProperty =
        DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(default(ImageSource)));

}

Then you just create a style for it in generic.xaml, and bind to the Image property instead of setting the image explicitly:

<Style x:Key="{x:Type my:ImageButton}" TargetType="{x:Type my:ImageButton}">
    <!-- Some setters -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type my:ImageButton}">
                <Grid>
                    <Image Source="{TemplateBinding Image}" Stretch="Fill"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <!-- Some triggers ( IsFocused, IsMouseOver, etc.) -->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Then you can just use it like this:

<my:ImageButton Image="Image.png" />

If you need more images for different states of the button, you can add more dependency properties to the control.

Another possible approach is to use what I call a "parameterized style", to avoid creating a specific control; see this blog post for details.

Answer 2

You could try to create a custom control that inherits from Button, and use it as TargetType in your template. Then you can use TemplateBinding in the Image Source.

<Image Source="{TemplateBinding ImageSource}" Stretch="Fill"/>

You will need to create the ImageSource property in your custom control. That way you can set the source in xaml, but you need only one resource template.

Answer 3

You can use the BasedOn Attribute like this:

<Style x:Key="BlueHighlightedButtonStyle"  BasedOn="{StaticResource ButtonStyle}" TargetType="Button">
    <Setter Property="Background" Value="DeepSkyBlue"/>
</Style>

This will make a Button Style with the same attributes as your ButtonStyle, but with a DeepSkyBlue Background.