Button Template VisualStateManager and TemplatedBinding don't work...

See more:

templates

Binding

I have a button template as follows that doesn't bring in values from it's templated parent via TemplateBinding apart from Content strangely and the VisualStateManager doesn't do anything at all:

<Style x:Key="CommonButtonStyle" TargetType="Button">
        <setter property="Background" value="Magenta" />
        <setter property="BorderBrush" value="White" />
        <setter property="Content" value="Back" />
        <setter property="Foreground" value="White" />
        <setter property="HorizontalAlignment" value="Stretch" />
        <setter property="MinHeight" value="5" />
        <setter property="MinWidth" value="5" />
        <setter property="VerticalAlignment" value="Stretch" />
        <setter property="Visibility" value="Visible" />
        <setter property="Template">
            <setter.value>
                <controltemplate targettype="Button">
                    <grid>
                        <grid.columndefinitions>
                            <columndefinition width="*" />
                            <columndefinition width="20*" />
                            <columndefinition width="*" />
                        </grid.columndefinitions>
                        <grid.rowdefinitions>
                            <rowdefinition height="*" />
                            <rowdefinition height="18*" />
                            <rowdefinition height="*" />
                        </grid.rowdefinitions>
                        <border grid.column="1" grid.columnspan="2" grid.row="1" grid.rowspan="2" borderbrush="Black" removed="Black" opacity="0.3">
                                    BorderThickness="2" CornerRadius="10" />
                        <border grid.column="0" grid.columnspan="2" grid.row="0" grid.rowspan="2">
                                    BorderThickness="2" CornerRadius="10">
                            <border.background>
                                <solidcolorbrush x:name="ButtonBackground" color="{TemplateBinding Background}" xmlns:x="#unknown" />
                            </border.background>
                            <border.borderbrush>
                                <solidcolorbrush x:name="ButtonBorderBrush" color="{TemplateBinding BorderBrush}" xmlns:x="#unknown" />
                            </border.borderbrush>
                            <visualstatemanager.visualstategroups>
                                <visualstategroup x:name="CommonStates" xmlns:x="#unknown">
                                    <visualstate x:name="Normal" />
                                    <visualstate x:name="Disabled">
                                        <storyboard>
                                            <coloranimation duration="0" storyboard.targetname="ButtonBackground" storyboard.targetproperty="Color" to="DimGray" />
                                            <coloranimation duration="0" storyboard.targetname="ButtonBorderBrush" storyboard.targetproperty="Color" to="Gray" />
                                        </storyboard>
                                    </visualstate>
                                    <visualstate x:name="MouseOver">
                                        <storyboard>
                                            <coloranimation duration="0" storyboard.targetname="ButtonBackground" storyboard.targetproperty="Color" to="Red" />
                                            <coloranimation duration="0" storyboard.targetname="ButtonBorderBrush" storyboard.targetproperty="Color" to="Lime" />
                                        </storyboard>
                                    </visualstate>
                                    <visualstate x:name="Pressed">
                                        <storyboard>
                                            <coloranimation duration="0" storyboard.targetname="ButtonBackground" storyboard.targetproperty="Color" to="Red" />
                                            <coloranimation duration="0" storyboard.targetname="ButtonBorderBrush" storyboard.targetproperty="Color" to="Lime" />
                                        </storyboard>
                                    </visualstate>
                                </visualstategroup>
                                <visualstategroup x:name="FocusStates" xmlns:x="#unknown">
                                    <visualstate x:name="Focused">
                                        <storyboard>
                                            <coloranimation duration="0" storyboard.targetname="ButtonBackground" storyboard.targetproperty="Color" to="Red" />
                                            <coloranimation duration="0" storyboard.targetname="ButtonBorderBrush" storyboard.targetproperty="Color" to="Lime" />
                                        </storyboard>
                                    </visualstate>
                                    <visualstate x:name="Unfocused" />
                                </visualstategroup>
                            </visualstatemanager.visualstategroups>
                            <grid>
                                <grid.columndefinitions>
                                    <columndefinition width="14*" />
                                    <columndefinition width="14*" />
                                    <columndefinition width="*" />
                                </grid.columndefinitions>
                                <grid.rowdefinitions>
                                    <rowdefinition height="*" />
                                    <rowdefinition height="10*" />
                                    <rowdefinition height="10*" />
                                    <rowdefinition height="*" />
                                </grid.rowdefinitions>
                                <Image Grid.Column="1" Grid.Row="1" Source="/Assets/Common/pawprint.png" Margin="0,8,8,0" />
                                <contentpresenter grid.column="0" grid.row="2" grid.columnspan="2">
                                <textblock text="{TemplateBinding Content}" style="{StaticResource CommonButtonTextStyle}">
                                                FontSize="{Binding ConverterParameter={StaticResource CommonButtonFontSize},
                                                Converter={StaticResource SizeConverter}, FallbackValue={StaticResource CommonButtonFontSize}}" />
                                </textblock></contentpresenter>
                        </grid>
                    </border>
                    </border></grid>
                </controltemplate>
            </setter.value>
        </setter>
    </Style>

This style is then implemented as follows on a button:

<Button x:Name="AboutButton" Content="About" Style="{StaticResource CommonButtonStyle}" />

But this results in just a picture of the image, textblock and shadow border.
So the foreground border is missing due to Background and BorderBrush not pulling in values via the binding on SolidColorBrushes.
When running, the MouseOver, Pressed and other events do nothing to the colours either.

Any ideas or suggestions as to why these two aspects don't work?