TemplateBinding fails when the target is an ImageBrush.ImageSource

Question

Why does TemplateBinding seems to fail in this specific case?

Take a basic extended button:

public class IconButton : Button
{
    public ImageSource Icon
    {
        get { return (ImageSource)GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }
    public static readonly DependencyProperty ImageProperty =
        DependencyProperty.Register("Icon", typeof(ImageSource), typeof(IconButton), new PropertyMetadata(null));

    public IconButton()
    {
        DefaultStyleKey = typeof(IconButton);
    }
}

The control template shows the icon using an OpacityMask:

<Style TargetType="controls:IconButton">
    <Setter Property="Width" Value="30" />
    <Setter Property="Height" Value="30" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:IconButton">
                <Grid>
                    <Rectangle Fill="{StaticResource PhoneForegroundBrush}"
                               Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                        <Rectangle.OpacityMask>
                            <ImageBrush ImageSource="{TemplateBinding Icon}" />
                        </Rectangle.OpacityMask>
                    </Rectangle>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This fails silently -- the control appears as a solid rectangle. If I use a regular image, instead of the ImageBrush, then the binding is successful:

            <ControlTemplate TargetType="controls:IconButton">
                <Grid>
                    <Image Source="{TemplateBinding Icon}" />
                </Grid>
            </ControlTemplate>

It also works correctly if I hard-code the image source path:

            <ControlTemplate TargetType="controls:IconButton">
                <Grid>
                    <Rectangle Fill="{StaticResource PhoneForegroundBrush}"
                               Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                        <Rectangle.OpacityMask>
                            <ImageBrush ImageSource="/Images/appbar.next.rest.png" />
                        </Rectangle.OpacityMask>
                    </Rectangle>
                </Grid>
            </ControlTemplate>

So, why does TemplateBinding fail inside an ImageBrush?

Update

By deduction (and thanks to the answer from Chris), possible factors are:

ImageBrush inherits from DependencyObject rather than from FrameworkElement
TemplateBinding does not support implicit type conversion in the way that a normal binding does (ie, string-to-ImageSource)

I still don't see how the dots connect, though ...

score 4 · Answer 1 · answered Mar 02 '14 at 22:23

Here's a workaround. Bizarrely, using the RelativeSource TemplatedParent binding instead of TemplateBinding fixes the issue.

<ImageBrush ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Icon}" />

Theoretically that is the exact same binding ... so, who knows? Whatever works.

score 1 · Accepted Answer · edited May 23 '17 at 12:10

Interesting, I managed to replicate that behaviour from your example, and although I can't be entirely sure, I think I might understand what's going on.

Based on the answers to this question: WPF TemplateBinding vs RelativeSource TemplatedParent it seems that although two methods achieve the almost same thing, they differ in some key behaviours. The most relevant one being mentioned by Miroslav Nedyalkov -

"TemplateBindings don't allow value converting. They don't allow you to pass a Converter and don't automatically convert int to string for example (which is normal for a Binding)."

I would guess that in the second case, thebinding will use the built in WPF convertor to convert the bound string/URI to an ImageSource (usual behaviour when specifying an ImageSource - it's why you don't usually need to specify a binding convertor).

In the first case, you won't get the default value converting, so you won't see the mask. Interesting to see if it would work if a convertor was specified.

Edit: It looks there might be some additional complications from ImageBrush not inheriting from FrameworkElement: Bind an ImageBrush to a template with a DependencyProperty

nice find -- that issue of type conversion would seem to explain it. The only thing that still has me scratching my head, is why `` is able to bind. You'd think `Image.Source` would fail, for the same reason that `ImageBrush.ImageSource` fails -- seems to be an anomaly. — McGarnagle, Mar 03 '14 at 00:00
Hmm, you're right - I've added an edit, looks like there might be something else going on. — Chris, Mar 03 '14 at 08:48

TemplateBinding fails when the target is an ImageBrush.ImageSource

2 Answers2

Linked