[WPF] ToolBar control template - only first button is causing trigger to fire

[NickThissen]

Hi,

I am templating a ToolBar control so that it looks like the Windows 7 explorer toolbar. I have a class ToolBar7 that inherits ToolBar and assigns its Style and ItemContainerStyle in the constructor:

public class ToolBar7 : ToolBar
    {
        public ToolBar7()
        {
            ToolBar.SetOverflowMode(this, OverflowMode.Never);
            this.Style = (Style) Themes.ResourceFactory.Dictionary["ToolBarStyle"];
            this.ItemContainerStyle = (Style) Themes.ResourceFactory.Dictionary["ToolBarButtonStyle"];
        }
    }

(The Themes.ResourceFactory class and its Dictionary property basically finds and returns the Generic.xaml resource dictionary in this custom control library).

The styles are this:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Brushes.xaml" />
    </ResourceDictionary.MergedDictionaries>
 
    <Style TargetType="ToolBar" x:Key="ToolBarStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToolBar">
 
                    <Border Name="BottomBorder" BorderThickness="0,0,0,1"
                            BorderBrush="{StaticResource ToolBarBottomBorder}" CornerRadius="0"
                            SnapsToDevicePixels="True"
                            Height="31">
 
                        <Border Name="OuterBorder" BorderThickness="0,1,0,1"
                                BorderBrush="{StaticResource ToolBarOuterBorder}" CornerRadius="0"
                                SnapsToDevicePixels="True">
 
                            <Border Name="InnerBorder" BorderThickness="1" BorderBrush="{StaticResource ToolBarBorder}"
                                    CornerRadius="0" SnapsToDevicePixels="True"
                                    Background="{StaticResource ToolBarBackground}">
 
                                <ToolBarPanel x:Name="PART_ToolBarPanel" IsItemsHost="true" Margin="2" />
 
                            </Border>
 
                        </Border>
                    </Border>
 
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <Style TargetType="Button" x:Key="ToolBarButtonStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
 
                    <Border Name="OuterBorder" BorderThickness="1" CornerRadius="3" SnapsToDevicePixels="True" Height="22">
 
                        <Border Name="InnerBorder" BorderThickness="1" CornerRadius="2" SnapsToDevicePixels="True">
 
                            <ContentPresenter Margin="12,0" />
 
                        </Border>
 
                    </Border>
 
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="OuterBorder" Property="Border.BorderBrush"
                                    Value="{StaticResource ToolBarButtonBorder}" />
                            <Setter TargetName="InnerBorder" Property="Border.BorderBrush"
                                    Value="{StaticResource ToolBarButtonInnerBorder}" />
                            <Setter TargetName="OuterBorder" Property="Border.Background"
                                    Value="{StaticResource ToolBarButtonBackground}" />
 
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
</ResourceDictionary>

When I use a ToolBar7 on a window, I can see two strange behaviors:

1. Only the first button in the ToolBar is highlighted when the mouse hovers over it; the others just remain their default state. I don't see why this happens, I'm simply using a Trigger in the control template for the Button, why is it triggering for one button but not the others?

2. The button is only highlighted when I move the mouse over its text. Due to the margin of 12 on the left and right of the button, if I'm thinking correctly it should trigger as soon as the mouse moves into that '12 unit margin', but it doesn't. The strange this is: when I move the mouse away from the text, it DOES stay highlighted until I leave that '12 unit margin'... Strange

I tried to explain it with these screenshots (yes, I artificially pasted a mouse cursor in there )



Top image: mouse moves inside the button (yet not inside the text) but button is not highlighted.
Middle image: mouse moves over text (button is highlighted)
Bottom image: mouse moves away from text (yet still inside button) and button remains highlighted, even though it was not highlighted in the same position in the top image!

This might seem like a minor issue but it is actually really annoying, it feels as if the highlighting only works half the time and as if there's a slight lag before the highlighting.

Of course the first issue (only first button highlighting) is more important.



Any help with this? Thanks!