CODEWITHSUNDEEP
c#wpfxamltemplatesstyles
Th1sD0t
Th1sD0t

Reputation: 1119

Bind Button Template Foreground to property of class which derives from Button

I'd like to set individual highlighting colors for my buttons so I created a new class "HighlightButton" which derives from Button and exposes only one additional Property (DP Property) - SolidColorBrush HighlightColor.

public class HighlightButton : Button {
    public SolidColorBrush HighlightColor {
        get { return (SolidColorBrush)GetValue(HighlightColorProperty); }
        set { SetValue(HighlightColorProperty, value); }
    }

    // Using a DependencyProperty as the backing store for HighlightColor.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty HighlightColorProperty =
        DependencyProperty.Register("HighlightColor", typeof(SolidColorBrush), typeof(HighlightButton), new PropertyMetadata(new SolidColorBrush(System.Windows.Media.Color.FromRgb(255,255,255))));
}

-

Now I use this HighlightButton instead of Button inside my XAML:

<con:HighlightButton Style="{StaticResource TransparentButton}"
            x:Name="_backButton"
            CommandParameter="{Binding PreviousPageViewModel}" 
            Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType=Window}}"
            HighlightColor="Yellow"/>

-

The TransparentButton Style is defined inside a Resource Dictionary:

<Style TargetType="con:HighlightButton" x:Name="_transparentButton" x:Key="TransparentButton">
    <Setter Property="Height" Value="50"/>
    <Setter Property="Width" Value="50"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent">
                    <ContentPresenter HorizontalAlignment="Center" 
                                      VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="{Binding HighlightColor}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="Gray"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

As you can see I'd like my buttons to swich to a individually set foreground color when hovering over it. Unfortunately (as you may expect) this solution does not work. WPF is looking inside my ViewModel for the Property HightlightColor (TargetType="Button" does not know anything about HighlightColor). Sadly when I change the TargetType to my HighlightButton the whole Style crashes.

Is it even possible to achive what I'm looking for? What am I doing wrong?

Upvotes: 0

Views: 447

Answers (1)

ASh
ASh

Reputation: 35646

i set concrete target type for template

<ControlTemplate TargetType="con:HighlightButton">

and modified binding like this

<Setter Property="Foreground" Value="{Binding HighlightColor, RelativeSource={RelativeSource Self}}"/>

btw, Foreground and HighlightColor are both White by default. there is no any visible difference with or without trigger (there will be if <Setter Property="Foreground" Value="White"/> is set to some other color, for example)

also I would prefer to use property of Brush type to allow different types of brushes

Upvotes: 1

Related Questions