Question

I have a style for button. That style contains the ControlTemplate for Button. The ControlTemplate contains an Image with name “ImgButton”.

I want to make this style as base style for other Buttons and want to override the “Source” property of Image control for different buttons.

Any ideas?

Answer 1

You may create attached behavior that will offer a property to assign Source. You should bind your image to this property in a template using TemplatedParent as RelativeSource. In derived styles you can simply use Setter(s) to specify a different Source.

Attached behavoir:

public static class ImageSourceBehavior
{
    public static readonly DependencyProperty SourceProperty = DependencyProperty.RegisterAttached(
        "Source", typeof(ImageSource), typeof(ImageSourceBehavior),
        new FrameworkPropertyMetadata(null));

    public static ImageSource GetSource(DependencyObject dependencyObject)
    {
        return (ImageSource)dependencyObject.GetValue(SourceProperty);
    }

    public static void SetSource(DependencyObject dependencyObject, ImageSource value)
    {
        dependencyObject.SetValue(SourceProperty, value);
    }
}

Styles:

<Style x:Key="Style1"
        TargetType="Button">
    <Setter Property="local:ImageSourceBehavior.Source"
            Value="..."/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Image Source="{Binding Path=(local:ImageSourceBehavior.Source),RelativeSource={RelativeSource TemplatedParent}}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="Style2"
        BasedOn="{StaticResource Style1}"
        TargetType="Button">
    <Setter Property="local:ImageSourceBehavior.Source"
            Value="..."/>
</Style>