wpfxamlmahapps.metroexpander

Using MahApps, how can we change MouseOver style of Expander's ToggleButton?


My WPF is using MahApps metro framework. As shown in figure 2 below, a mouseover on the header of any Expander control of the app makes the ToggleButton of the header almost invisible.

Question: How can we make this toggle button stand out more?

XAML:

<!-- ... -->
<Expander Header="Test expander" Width="145" Padding="0">
     <StackPanel>
          <Button Content="Button 1" Foreground="White"/>
          <Button Content="Button 2" Foreground="White"/>
     </StackPanel>
</Expander>
<!-- ... -->

Display of the above Expander without mouseover on the Header:

Expander toggle button in normal state, the arrow and circle are white, the background is blue.

Display of the above Expander when mouseover on the Header:

As you can see the ToggleButton on the left is almost invisible.

Expander toggle button in mouse-over state, the arrow and circle are gray and hardly visible on the blue background.


Solution

  • There are 4 different styles for the Expander control, for up, down, left and right orientation. They all define the Mouse Over state the same way using triggers in the repective control templates.

    <ControlTemplate.Triggers>
        <!-- ... -->
        <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="Arrow" Property="Stroke" Value="{DynamicResource MahApps.Brushes.Gray2}" />
            <Setter TargetName="Circle" Property="Stroke" Value="{DynamicResource MahApps.Brushes.Gray2}" />
        </Trigger>
        <!-- ... -->
    </ControlTemplate.Triggers>
    

    As you can see, the setters directly assign the MahApps.Brushes.Gray2 using DynamicResource. They are not bound to any property or set in a style, so there are few options to change that, like: