Question

I’ve created a WPF UserControl which contains a Button and a ComboBox. I’d like to change the style of both, depending on the position of the mouse, so the UIElement with the mouse over is coloured Black and the other is coloured Red. If neither are styled then the default styling will apply.

Don’t worry, this nightmarish colour scheme is just to illustrate the concept!

Thanks in advance for your help.

XAML

<UserControl x:Class="WpfUserControlSample.ToolbarButtonCombo"
             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" 
             xmlns:local="clr-namespace:WpfUserControlSample"
             x:Name="Control"
             mc:Ignorable="d" 
             d:DesignHeight="30">    
    <UserControl.Resources>
        <Style TargetType="{x:Type local:ToolbarButtonCombo}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsButtonMouseOver}" Value="True">
                    <Setter Property="ButtonStyle" Value="Black"/>
                    <Setter Property="ComboStyle" Value="Red"/>                    
                </DataTrigger>
                <!--
                <DataTrigger Binding="{Binding IsComboMouseOver}" Value="True">
                    <Setter Property="ButtonStyle" Value="Red"/>
                    <Setter Property="ComboStyle" Value="Black"/>
                </DataTrigger>
                -->
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <StackPanel Orientation="Horizontal" Height="30">
        <Button Name="btn" Background="{Binding ButtonStyle,ElementName=Control,Mode=OneWay}">
            Test
        </Button>
        <ComboBox Name="cmb" Background="{Binding ComboStyle,ElementName=Control,Mode=OneWay}"></ComboBox>
    </StackPanel>
</UserControl>

Codebehind:

namespace WpfUserControlSample
{
    public partial class ToolbarButtonCombo : UserControl, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

        }  
        public ToolbarButtonCombo()
        {
            InitializeComponent();
            btn.MouseEnter += new MouseEventHandler(btn_MouseChanged);
            btn.MouseLeave += new MouseEventHandler(btn_MouseChanged);
        }
        void btn_MouseChanged(object sender, MouseEventArgs e)
        {
            OnPropertyChanged("IsButtonMouseOver");
        }


        public bool IsButtonMouseOver
        {
            get { return btn.IsMouseOver; }

        }
        public static readonly DependencyProperty IsButtonMouseOverProperty =
            DependencyProperty.Register("IsButtonMouseOver", typeof(string), typeof(ToolbarButtonCombo), new PropertyMetadata("false"));

        public string ButtonStyle { get; set; }
        public static readonly DependencyProperty ButtonStyleProperty =
            DependencyProperty.Register("ButtonStyle", typeof(string), typeof(ToolbarButtonCombo));

        public string ComboStyle { get; set; }
        public static readonly DependencyProperty ComboStyleProperty =
            DependencyProperty.Register("ComboStyle", typeof(string), typeof(ToolbarButtonCombo));    
    }
}

Answer 1

There are a two problems.

First your DataTrigger bindings do not look correct. They are looking for the IsButtonMouseOver on the DataContext, not the associated control. You’d need to use:

<DataTrigger Binding="{Binding IsButtonMouseOver, RelativeSource={RelativeSource Self}}" Value="True">
    <Setter Property="ButtonStyle" Value="Black"/>
    <Setter Property="ComboStyle" Value="Red"/>                    
</DataTrigger>

Or:

<Trigger Property="IsButtonMouseOver" Value="True">
    <Setter Property="ButtonStyle" Value="Black"/>
    <Setter Property="ComboStyle" Value="Red"/>                    
</Trigger>

The other is your IsButtonMouseOver is not implemented correctly. You should do something like:

public static readonly DependencyProperty IsButtonMouseOverProperty = DependencyProperty.Register("IsButtonMouseOver",
    typeof(bool), typeof(ToolbarButtonCombo), new PropertyMetadata(false));

    public bool IsButtonMouseOver
    {
        get { return (bool)this.GetValue(IsButtonMouseOverProperty); }
        set { this.SetValue(IsButtonMouseOverProperty, value); }
    }

    void btn_MouseChanged(object sender, MouseEventArgs e)
    {
        this.IsButtonMouseOver = this.btn.IsMouseOver;
    }

Or even more correctly, make the IsButtonMouseOver a read-only dependency property like so:

private static readonly DependencyPropertyKey IsButtonMouseOverPropertyKey = DependencyProperty.RegisterReadOnly("IsButtonMouseOver",
    typeof(bool), typeof(ToolbarButtonCombo), new FrameworkPropertyMetadata(false));

public static readonly DependencyProperty IsButtonMouseOverProperty = ToolbarButtonCombo.IsButtonMouseOverPropertyKey.DependencyProperty;

public bool IsButtonMouseOver {
    get { return (bool)this.GetValue(IsButtonMouseOverProperty); }
    private set { this.SetValue(IsButtonMouseOverPropertyKey, value); }
}

Your other properties (ButtonStyle and ComboStyle) would need to be properly implemented also, and their get/set methods are not backed by the dependency property.