c# - Create custom binding property for window.resources style

Question

I've created a couple of custom bindings for a custom control before, but since this case is for a window.resources style for a button, (A control template rather), I don't know where to start for the code behind. Where would I create the viewmodel, and what would it inherit from or reference?

XAML:

<Style x:Key="UnifiedButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="{Binding Margin}"/>

        <Setter Property="Background" Value="#FFDDDDDD"/>
        <Setter Property="BorderBrush" Value="#FF707070"/>
        <Setter Property="Foreground" Value="#FF000000"/>

        <Setter Property="BorderThickness" Value="1"/>

        <Setter Property="Content" Value="Button"/>

        <Setter Property="Width" Value="75"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Padding" Value="5"/>

        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid
                        x:Name="ButtonGrid"
                        Background="{TemplateBinding Background}"
                        OpacityMask="{TemplateBinding OpacityMask}">
                        <Border
                            x:Name="ButtonBorder"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            OpacityMask="{TemplateBinding OpacityMask}"

                            BorderThickness="{TemplateBinding BorderThickness}">

                            <Label
                                x:Name="ButtonLabel"
                                Foreground="{TemplateBinding Foreground}"

                                Padding="{TemplateBinding Padding}">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Label>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ButtonGrid" Property="Background" Value="{Binding HoverColorBackground}"/>
                            <Setter TargetName="ButtonBorder" Property="BorderBrush" Value="{Binding HoverColorBorder}"/>
                            <Setter TargetName="ButtonLabel" Property="Foreground" Value="{Binding HoverColorForeground}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Hovercolor setters are the key here

Answer 1

Creating a viewmodel to customize wpf button colors is a wrong approach. Button color scheme is something which belongs strictly to a view. Also many buttons means many view model instances, since each button might want to be unique - too much code for such a simple setting.

Button class doesn't have enough dependency properties to set color representing HoverColorBackground/HoverColorBorder/HoverColorForeground. Alternatives are to create a derived Button class (way to go when DP are of some complex type and/or have associated logic) or use attached properties. I have written a tip, which coveres the second approach.

short version

create an attached DP

public static class Alt
{
    #region Background
    public static readonly DependencyProperty BackgroundProperty =
              DependencyProperty.RegisterAttached("Background", typeof(Brush),
              typeof(Alt), new PropertyMetadata(null));

    public static Brush GetBackground(DependencyObject obj)
    {
        return (Brush)obj.GetValue(Alt.BackgroundProperty);
    }

    public static void SetBackground(DependencyObject obj, Brush value)
    {
        obj.SetValue(Alt.BackgroundProperty, value);
    }
    #endregion
}

set custom value for that property

<Button Content="Blue" Foreground="White" Margin="5"
        Background="Blue" ui:Alt.Background="DarkBlue"/>

make sure that template know how to use that property

<Trigger Property="IsMouseOver" Value="True">
    <Setter TargetName="ButtonGrid" 
            Property="Background" 
            Value="{Binding Path=(ui:Alt.Background),
                            RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>

Works for any control. Many DP can be mixed in any combination.