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 image source), my resource dictionary became very long for nothing. Is there a better way of doing this?

Here's a sample of the style I'm using for my buttons :

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

Thank you :)

Answer 1

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 2

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.

Answer 3

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.