TemplateBinding with IValueConverter

Question

I want to generate a custom button in a WPF-project. I want the button to change its background color in such a way, that the opacity is reduced.

Therefore I have a resource dictionary with a default button style:

<Style x:Key="DefaultStyle" TargetType="{x:Type Button}">
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="{Binding Path=Background, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource OpacityConverter}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="GreenButton" TargetType="{x:Type Button}" BasedOn="{StaticResource DefaultStyle}">
        <Setter Property="Background" Value="{StaticResource Green}"/>
        <Setter Property="Foreground" Value="Black"/>
</Style>

with my custom converter:

<conv:OpacityConverter x:Key="OpacityConverter"/>

implemented in xmlns:conv="clr-namespace:ProjectNamespace.Converter":

public class OpacityConverter : IValueConverter
{

    public OpacityConverter()
    {

    }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        SolidColorBrush brush = ((SolidColorBrush)value).Clone();
        brush.Opacity = 0.5;
        return brush;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        SolidColorBrush brush = ((SolidColorBrush)value).Clone();
        brush.Opacity = 1;
        return brush;
    }
}

In my Window I use the button like this:

<Button Grid.Row="1" Grid.Column="2" 
        Style="{StaticResource GreenButton}">
   <TextBlock Text="neues Projekt anlegen" TextWrapping="Wrap" TextAlignment="Center"/>
</Button>

The button looks like this:

and I want to have a look like this (if IsMouseOver == True):

However in the moment, with IsMouseOver == True starts, the background gets totally white and the button looks like this:

What am I missing?

Answer 1

Since you haven't specify TargetName for Setter in Trigger, it implicitly refers to the Button and causes a circular reference. To fix it, name the Border and specify that name in Setter.

<ControlTemplate TargetType="Button">
    <Border x:Name="border"
            Background="{TemplateBinding Background}">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="border"
                    Property="Background"
                    Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource OpacityConverter}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>