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:
Display of the above Expander when mouseover on the Header:
As you can see the ToggleButton
on the left is almost invisible.
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:
Create a custom style for MahApps.Styles.ToggleButton.ExpanderHeader.Down
(and any diverse oriented Expander
by copying the default style and adapting the Mouse Over trigger.
Override the MahApps.Brushes.Gray2
with a different brush or create a custom theme.
<SolidColorBrush x:Key="MahApps.Brushes.Gray2" Color="Black"/>
You can override this brush in the application resource dictionary. However, this will impact not only the Expander
control, but all controls that use this brush. If you redefine the brush in the Expander
resources, it will apply to all of its children likewise.