[WPF] UserControl - change appearance on mouse-over

[NickThissen]

Hi,

I am creating a simple Calendar control (such as the Outlook calendar in Month view) where I can place appointments on days.
The control consists of a UserControl called Calendar with a Grid. During run-time, when the control knows which month to show, this Grid is filled with a number of DayControls. Each DayControl is another UserControl with a header (showing the day) and a ListBox (where the appointments should be shown, this is not implemented yet).

At the moment it looks like this:



What I want is pretty simple: when the mouse is over a certain DayControl, I want the header (this is a StackPanel), the ListBox and the Border around them to both get a different appearance (a golden selected appearance).

I am certain I need to use styles and triggers, but I haven't figured it out properly yet after trying for at least 3 hours...


The code for my DayControl UserControl is this:

<UserControl x:Class="CalendarControlLibrary.Controls.DayControl"
             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:Controls="clr-namespace:CalendarControlLibrary.Controls" mc:Ignorable="d" 
             d:DesignHeight="150" d:DesignWidth="150">
 
    <UserControl.Resources>
        <!-- Colors -->
        <Color x:Key="BlueGradientTop">#A5BFE1</Color>
        <Color x:Key="BlueGradientBottom">#E6EDF7</Color>
        <Color x:Key="GoldGradientTop">#FFB86D</Color>
        <Color x:Key="GoldGradientBottom">#FFE876</Color>
        <Color x:Key="LightBlueGradientTop">#FFFFFF</Color>
        <Color x:Key="LightBlueGradientBottom">#AAE6EDF7</Color>
        <Color x:Key="DarkBlueBorder">#8DAED9</Color>
 
        <!-- Brushes -->
        <LinearGradientBrush x:Key="HeaderBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="{StaticResource BlueGradientTop}" />
            <GradientStop Offset="1" Color="{StaticResource BlueGradientBottom}" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HeaderSelectedBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="{StaticResource GoldGradientTop}" />
            <GradientStop Offset="1" Color="{StaticResource GoldGradientBottom}" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ContentBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="{StaticResource LightBlueGradientTop}" />
            <GradientStop Offset="1" Color="{StaticResource LightBlueGradientBottom}" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ContentSelectedBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="{StaticResource GoldGradientTop}" />
            <GradientStop Offset="1" Color="{StaticResource GoldGradientBottom}" />
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlBorderBrush" Color="{StaticResource DarkBlueBorder}" />
        <SolidColorBrush x:Key="ControlSelectedBorderBrush" Color="{StaticResource GoldGradientBottom}" />
    </UserControl.Resources>
 
    <!-- The border around the Header and Listbox -->
    <Border CornerRadius="2" BorderThickness="2">
    
        <!-- The border style -->
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="BorderBrush" Value="{DynamicResource ControlBorderBrush}" />
                <Style.Triggers>
                    <Trigger Property="Controls:DayControl.IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" Value="{DynamicResource ControlSelectedBorderBrush}" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
 
        <!-- The Grid that contains the Header StackPanel and Content ListBox -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
 
            <!-- The Header StackPanel -->
            <StackPanel x:Name="headerPanel" Grid.Row="0">
                <TextBlock x:Name="dayLabel" Text="{Binding Path=DayNumber, UpdateSourceTrigger=PropertyChanged}" FontWeight="Bold" 
                           Margin="3, 0, 0, 2"/>
 
                <StackPanel.Style>
                    <Style TargetType="StackPanel">
                        <Setter Property="Background" Value="{DynamicResource HeaderBackgroundBrush}" />
                        <Style.Triggers>
                            <Trigger Property="Controls:DayControl.IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{DynamicResource HeaderSelectedBackgroundBrush}" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </StackPanel.Style>
            </StackPanel>
 
            <!-- The Content ListBox -->
            <ListBox Grid.Row="1" x:Name="contentPanel">
                <ListBox.Style>
                    <Style TargetType="ListBox">
                        <Setter Property="BorderBrush" Value="Transparent" />
                        <Setter Property="Background" Value="{DynamicResource ContentBackgroundBrush}" />
                        <Style.Triggers>
                            <Trigger Property="Controls:DayControl.IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{DynamicResource ContentSelectedBackgroundBrush}" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.Style>
            </ListBox>
        </Grid>
    </Border>
 
</UserControl>

There is a couple of brushes and colors in the Resources, and my goal is to simply swap the normal brushes out for the selected ones when the mouse enters the DayControl.

In detail:

1. The StackPanel (header) should go from HeaderBackgroundBrush to HeaderSelectedBackgroundBrush
2. The ListBox Background should go from ContentBackgroundBrush to ContentSelectedBackgroundBrush
3. The BorderBrush of the Border (root control) should go from ControlBorderBrush to ControlSelectedBorderBrush

I am trying to do this using a Style for each of these three controls with a Trigger that should run when the mouse is over the current DayControl, so I am testing for the property ControlsayControl.IsMouseOver. (The "Controls:" part is because it is in the Controls namespace).


It doesn't work completely right. For some reason, the Border seems to swap out fine; when my mouse is anywhere over a certain DayControl, the border turns gold.

The header and ListBox don't work though; they only swap out their backgrounds when the mouse is over THEMSELVES. When the mouse is over the header StackPanel, the header becomes gold, but the ListBox remains the default (right image). In the same way, when the mouse is over the ListBox, the ListBox becomes gold, but the header StackPanel now is the default blue again (left image)...


I don't get it; as far as I can see I am using the exact same method on all three controls, but only the border works correctly.

Is it a flaw in my design (is the IsMouseOver property false when the mouse is over a StackPanel, but not when it is over a Border??? ), a typo somewhere, or something completely different...?

Also, is there no way to put the three setters into a single trigger, so that I don't have to create a style for each control? The trigger is the same for all styles so that sounds more logical, but I couldn't figure it out...

Thanks!