CODEWITHSUNDEEP
wpfxamlmahapps.metro
WSC
WSC

Reputation: 992

Overwrite Expander ToggleButton style with MahApps.Metro theming

I'm using MahApps.Metro for styling my WPF application. In a few places I'm using an <Expander> for flyout menus.

However, the default orientation for the toggle arrow is logically backwards (it shows current state, not what clicking the button will do).

So currently, this is not expanded:

not expanded

And this is expanded:

expanded

I'd like to swap these so the expanded points to the left, and not expanded to the right. I cannot use ExpandDirection="Right" because then the header is on the wrong side.

The default style is here: https://github.com/MahApps/MahApps.Metro/blob/develop/src/MahApps.Metro/Styles/Controls.Expander.xaml - I don't want to paste it all here because it's quite long.

My understanding is that all I need to do reverse the arrow directions is change the RotateTransform Angle in MahApps.Styles.ToggleButton.ExpanderHeader.Left and MahApps.Styles.ToggleButton.ExpanderHeader.Right from 90 to -90 or visa-versa.

Can I overwrite just this specific bit of that style, without affecting everything else?

At the moment if I create a new style in App.xaml I can reverse the arrow direction but I lose all of the theming (colours etc), which I'd like to retain.

Upvotes: 0

Views: 1114

Answers (1)

punker76
punker76

Reputation: 14611

You can use the ExpanderHelper to set the right header style for the left expand direction:

<Expander IsExpanded="False"
          ExpandDirection="Left"
          Height="200"
          mah:ExpanderHelper.HeaderLeftStyle="{DynamicResource MahApps.Styles.ToggleButton.ExpanderHeader.Right}">
</Expander>

Namespace is xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls".

Upvotes: 2

Related Questions