Question

I used this MSDN tutorial to create an eye candy look for all the Button controls of my window, and that worked fine.

To make it even more reusable, I tried to put all in a UserControl: I created a ImageButton UC, then I encapsulated all that <Style> from <Window.Resources> to <UserControl.Resources>.

Then I changed my Button instances in XAML, from:

<Button Tag="Face.jpg" Content="Foo" />

To:

<uc:ImageButton Tag="Face.jpg" Content="Foo" />

And the style stopped being applied.

Here’s the UC code:

<UserControl x:Class="GDTI.UI.Main.View.UserControls.ImageButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">

<UserControl.Resources>
    <Style TargetType="Button">
        <Setter Property="MaxWidth" Value="250" />
        <Setter Property="Margin" Value="5" />
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="Foreground" Value="White" />

        <Setter Property="Background" >
            <Setter.Value>
                <SolidColorBrush Color="Orange" Opacity="0.4" />
            </Setter.Value>
        </Setter>

        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate >
                    <StackPanel>
                        <Image Source="{Binding Tag,
                            RelativeSource={RelativeSource
                                              FindAncestor,
                                              AncestorType='Button'}}" />
                        <TextBlock Margin="10"
            HorizontalAlignment="Center"
            Text="{Binding Content,
                     RelativeSource={RelativeSource
                                       FindAncestor,
                                       AncestorType='Button'}}" />
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</UserControl.Resources>

<Button/>

What am I missing?

Thank you!

Answer 1

The bindings in the button-style target properties on the button, which no longer has the properties set. You need to forward those to the UserControl if you want to retain the style’s integrity:

<!-- Inside UserControl declaration -->
<Button Content="{Binding Caption, RelativeSource={RelativeSource AncestorType=UserControl}}"
        Tag="{Binding ImageSource, RelativeSource={RelativeSource AncestorType=UserControl}}"/>

Where Caption and ImageSource should be new dependency properties defined on the UserControl (in code-behind).

Note that you can never bind to Content in a UserControl (hence the Caption property), here the Button itself is the Content of the UserControl.

Alternatively you could directly change the targeting in the style by changing the AncestorType to UserControl which bypasses the Button. Binding beyond the templated control is not exactly good practice but your are still inside the UserControl so it may be forgivable.

Either way this is a bit hacky and it might be better to inherit from Button instead.