reuse control template with multiple controls defined

Question

I am little stuck for scenario: I have one style defined in resources.xaml for button. This style contains control template in which I have stackpanel, button, grid, etc. The button has image. I want to reuse this style with other buttons as well. But the only difference is that the image Url will differ.

Can anyone give me tips for this. Thanks in advance.

Mike Strobel Mike Strobel · Accepted Answer · 2018-01-22T15:57:38

This could be done by declaring an attached property for the image source:

public static class ButtonExtensions
{
    #region ImageSource Attached Property

    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.RegisterAttached(
            "ImageSource",
            typeof(ImageSource),
            typeof(ButtonExtensions),
            new PropertyMetadata(default(ImageSource)));

    public static void SetImageSource(ButtonBase element, ImageSource value)
    {
        element.SetValue(ImageSourceProperty, value);
    }

    [TypeConverter(typeof(ImageSourceConverter))]
    public static ImageSource GetImageSource(DependencyObject element)
    {
        return (ImageSource)element.GetValue(ImageSourceProperty);
    }

    #endregion
}

Then, inside your template, you should include an Image with its ImageSource bound to this property.

<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(l:ButtonExtensions.ImageSource)}" />

To use it, just set the attached property on each Button that should include an image:

<Button Content="Test Button"
        l:ButtonExtensions.ImageSource="Path/To/Image.png" />

Make sure to import your CLR namespace into your Xaml:

xmlns:l="clr-namespace:Your.Namespace"

Ideally, you should design your template so it collapses the image when an image source is not provided via your new property. That way all buttons will look correct, regardless of whether they include an image or not.

reuse control template with multiple controls defined

1 Answers