Add Hover and Selected Brushes for the HamburgerMenuButtonItems to the theme.

[Kevin-Seiden]

Describe the feature

I would like to be able to modify the Hover and Selected background brush of the hamburger menu button items through a custom theme.

Additional context

It appears they are currently bound to Accent and Accent3, but as far as I can tell the only options for changing this is either

• Restyle the control which would affect other themes
• Change the accents in the theme, which would affect other controls utilizing those accents.

Neither of those is an ideal solution for what I'm trying to create.

[timunie]

Hi @Kevin-Seiden

I am not sure if I understood you correctly, but I think this is already quite easy to solve:

<!-- Create your own ListBoxItem-Style as the HamburgerMenu is internally a ListBox -->
<Style x:Key="My.Styles.ListBoxItem.Hamburger" TargetType="ListBoxItem" BasedOn="{StaticResource MahApps.Styles.ListBoxItem.HamburgerMenuItem}">
    <Setter Property="mah:ItemHelper.ActiveSelectionBackgroundBrush" Value="LightGreen" />
    <Setter Property="mah:ItemHelper.SelectedBackgroundBrush" Value="Green" />
    <Setter Property="mah:ItemHelper.HoverBackgroundBrush" Value="Pink" />
    <Setter Property="mah:ItemHelper.HoverSelectedBackgroundBrush" Value="HotPink" />
</Style>

<!-- Then set this Style as your ItemContainerStyle -->
<mah:HamburgerMenu ItemContainerStyle="{StaticResource My.Styles.ListBoxItem.Hamburger}"
                   ... >
   <!-- YOUR STUFF GOES HERE -->
</mah:HamburgerMenu>

Here is the preview:

Happy coding Tim

[Kevin-Seiden]

Hi @timunie,

Yes, that would be restyling the control. However, using that, if the theme were to change, the buttons would remain pink and green, rather than following the theme. I'm not trying to make a custom hamburger menu, I'm trying to make a custom Theme.

For example, In Theme.Template.xaml there exists the following three items which can be altered in a custom theme to change the view of the Hamburger menu.

`

`

`

<!--  HamburgerMenu  -->

<SolidColorBrush x:Key="MahApps.HamburgerMenu.Pane.Background" Color="#FF444444" options:Freeze="True" />
<SolidColorBrush x:Key="MahApps.HamburgerMenu.Pane.Foreground" Color="#FFFFFFFF" options:Freeze="True" />

`

However, if I were to change MahApps.Brushes.Selected.Foreground to White, I would want the backgrounds to be a darker color, without breaking other themes. In order to do that I would need something similar to "MahApps.HamburgerMenu.Buttons.HoverBackgroundColor" and "MahApps.HamburgerMenu.Buttons.SelectedBackgroundColor" (or whatever key name would be appropriate) brushes added into the theme template and of course, bound in the control. By default they would just be bound to Accent and Accent3, similar to how the DataGrid items are in the theme template, but I could change that just for my theme.

Thanks, Kevin

[timunie]

@Kevin-Seiden then just use DynamicResource in your setter.

[Kevin-Seiden]

@Kevin-Seiden then just use DynamicResource in your setter.

But, once again, that would only work if they were using my theme and only my theme. Other themes, such as the stock ones, would not have that resource.

[timunie]

Please read this carefully https://www.github.com/ControlzEx/ControlzEx/tree/develop/Wiki%2FThemeManager.md

I have descriped there how you can extend any build in theme with custom brushes.

[timunie]

[Kevin-Seiden]

So, you are saying I would have to loop through every theme in the Theme manager and add that resource key/brush every time my program starts up?

[timunie]

Not every theme. Just the one in use.

[Kevin-Seiden]

The plan was to have the user able to choose the theme, so that's potentially all of them.

[timunie]

Can you please create a short sample? I really think I you will love my solution as soon as you understand it in depth.

[timunie]

Okay, so here is my very last try:

Please select your base theme and accent and then hit apply theme. Notice that my custom brush "Complemetary" changes accordingly.

Please find the source here:

• https://github.com/timunie/Tims.Wpf.Examples#custom-themes-examaple
• https://github.com/timunie/Tims.Wpf.Examples/tree/master/src/Tims.Wpf-Examples/CustomThemesExample

Happy coding Tim

[Kevin-Seiden]

@timunie I appreciate your efforts. Sadly, I just got out of a meeting where my boss said he didn't like the Hamburger menu design, so my needs have changed. Sorry, I feel like I wasted your time.

[timunie]

At least take a look as this helps also for other styling.

[timunie]

@punker76 can you move this to Q&A as I think this may be interesting for other people too? Thanks