Sidemenu questions

[Enat0]

Hello!

I'm trying to use the sidemenu but I have a few problems.
Is there a "ExpandMode" where if I select one group the others collapse but if I click on the same group again it collapse itself??

Also how can I change the hover style? I have a blue background and it looks ugly with the default template (Dark mode looks fine):

[Yopler]

hi🖐,

If you want to correctly change the background of your SideMenu, I suggest you to change it via the RegionBrush and SecondaryRegionBrush, in your App.xaml (will impact all your App) or in the hc:SideMenu.Ressources .
Here an example :

MainWindow.xaml

<Window x:Class="Wpf_Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Wpf_Test" 
        xmlns:hc="https://handyorg.github.io/handycontrol"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        Background="#25262D">
    <DockPanel>
        <hc:SideMenu DockPanel.Dock="Left" Width="200">
            <hc:SideMenu.Resources>


               <!--Region Brush for main Background-->
                <SolidColorBrush x:Key="RegionBrush" Color="#044487"/>
               <!--Secondary Region Brush for hover Background-->
                <SolidColorBrush x:Key="SecondaryRegionBrush" Color="#012347"/>



            </hc:SideMenu.Resources>
            <hc:SideMenuItem Header="System Problem">
                <hc:SideMenuItem.Icon>
                    <Path Data="{StaticResource icon_desktop}" Fill="White"/>
                </hc:SideMenuItem.Icon>
            </hc:SideMenuItem>
            <hc:SideMenuItem Header="Support">
                <hc:SideMenuItem.Icon>
                    <Path Data="{StaticResource icon_comment_upload}" Fill="White"/>
                </hc:SideMenuItem.Icon>
                <hc:SideMenuItem Header="Case">
                    <hc:SideMenuItem.Icon>
                        <Path Data="{StaticResource icon_file}" Fill="White"/>
                    </hc:SideMenuItem.Icon>
                </hc:SideMenuItem>
                <hc:SideMenuItem Header="Publish">
                    <hc:SideMenuItem.Icon>
                        <Path Data="{StaticResource icon_rocket}" Fill="White"/>
                    </hc:SideMenuItem.Icon>
                </hc:SideMenuItem>
            </hc:SideMenuItem>
            <hc:SideMenuItem Header="Handling">
                <hc:SideMenuItem.Icon>
                    <Path Data="{StaticResource icon_analysis}" Fill="White"/>
                </hc:SideMenuItem.Icon>
            </hc:SideMenuItem>
        </hc:SideMenu>
        <DockPanel>
            
        </DockPanel>
    </DockPanel>
</Window>

App.xaml

<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
                <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDark.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <Geometry x:Key="icon_desktop">F1 M24,24z M0,0z M19,3L5,3A3,3,0,0,0,2,6L2,14A3,3,0,0,0,5,17L11,17 11,19 7,19A1,1,0,0,0,7,21L17,21A1,1,0,0,0,17,19L13,19 13,17 19,17A3,3,0,0,0,22,14L22,6A3,3,0,0,0,19,3z M20,14A1,1,0,0,1,19,15L5,15A1,1,0,0,1,4,14L4,6A1,1,0,0,1,5,5L19,5A1,1,0,0,1,20,6z</Geometry>
            <Geometry x:Key="icon_comment_upload">F1 M24,24z M0,0z M5.5,11A1,1,0,0,0,7.5,11L7.5,5.41 8.79,6.71A1,1,0,0,0,10.21,6.71A1,1,0,0,0,10.21,5.29L7.21,2.29A1,1,0,0,0,6.88,2.08A1,1,0,0,0,6.12,2.08A1,1,0,0,0,5.79,2.29L2.79,5.29A1,1,0,0,0,4.21,6.71L5.5,5.41z M18.5,6L13.5,6A1,1,0,0,0,13.5,8L18.5,8A1,1,0,0,1,19.5,9L19.5,18.72 17.93,17.27A1,1,0,0,0,17.25,17L8.5,17A1,1,0,0,1,7.5,16L7.5,15A1,1,0,0,0,5.5,15L5.5,16A3,3,0,0,0,8.5,19L16.86,19 19.86,21.73A1,1,0,0,0,20.54,22A1.1,1.1,0,0,0,20.94,21.92A1,1,0,0,0,21.54,21L21.54,9A3,3,0,0,0,18.5,6z</Geometry>
            <Geometry x:Key="icon_analysis">F1 M24,24z M0,0z M21.71,7.29A1,1,0,0,0,20.29,7.29L14,13.59 9.71,9.29A1,1,0,0,0,8.29,9.29L2.29,15.29A1,1,0,0,0,2.29,16.71A1,1,0,0,0,3.71,16.71L9,11.41 13.29,15.71A1,1,0,0,0,14.71,15.71L21.71,8.71A1,1,0,0,0,21.71,7.29z</Geometry>
            <Geometry x:Key="icon_rocket">F1 M24,24z M0,0z M22.60107,2.062A1.00088,1.00088,0,0,0,21.88818,1.34911A11.25224,11.25224,0,0,0,10.46924,4.97217L9.35431,6.296 6.74951,5.66752A2.77733,2.77733,0,0,0,3.36279,7.0249L1.1626,10.9248A0.99989,0.99989,0,0,0,1.82422,12.394L4.89697,13.05269A13.41952,13.41952,0,0,0,4.3418,15.48678A1.00031,1.00031,0,0,0,4.62646,16.3232L7.72656,19.4233A0.99941,0.99941,0,0,0,8.43356,19.7163C8.46237,19.7163,8.49118,19.71483,8.52048,19.71239A12.16892,12.16892,0,0,0,11.01205,19.22239L11.65573,22.22557A1.0003,1.0003,0,0,0,13.12497,22.88719L17.03024,20.68455A3.03526,3.03526,0,0,0,18.40524,17.38084L17.73654,14.62184 18.9736,13.48433A11.20387,11.20387,0,0,0,22.60107,2.062z M3.57227,10.72314L5.12842,7.96338A0.82552,0.82552,0,0,1,6.19824,7.58789L7.91565,8.00409 7.26565,8.77588A13.09523,13.09523,0,0,0,5.67633,11.174z M16.04248,18.94531L13.32666,20.477 12.89716,18.47236A11.33992,11.33992,0,0,0,15.31055,16.85249L16.05408,16.16883 16.45752,17.83345A1.041,1.041,0,0,1,16.04248,18.94531z M17.65674,11.98L13.97217,15.36623A9.77348,9.77348,0,0,1,8.80176,17.67043L6.39746,15.26613A10.932,10.932,0,0,1,8.79834,10.06013L10.47668,8.06745A0.9635,0.9635,0,0,0,10.55481,7.97468L11.98975,6.271A9.27757,9.27757,0,0,1,20.79932,3.15088A9.21808,9.21808,0,0,1,17.65674,11.98z M16.73374,5.81624A1.5,1.5,0,1,0,18.23374,7.31624A1.49992,1.49992,0,0,0,16.7337,5.81622z</Geometry>
            <Geometry x:Key="icon_file">F1 M24,24z M0,0z M9,10L10,10A1,1,0,0,0,10,8L9,8A1,1,0,0,0,9,10z M9,12A1,1,0,0,0,9,14L15,14A1,1,0,0,0,15,12z M20,8.94A1.31,1.31,0,0,0,19.94,8.67L19.94,8.58A1.07,1.07,0,0,0,19.75,8.3L19.75,8.3 13.75,2.3 13.75,2.3A1.07,1.07,0,0,0,13.47,2.11A0.32,0.32,0,0,0,13.38,2.11A0.88,0.88,0,0,0,13.05,2L7,2A3,3,0,0,0,4,5L4,19A3,3,0,0,0,7,22L17,22A3,3,0,0,0,20,19L20,9C20,9,20,9,20,8.94z M14,5.41L16.59,8 15,8A1,1,0,0,1,14,7z M18,19A1,1,0,0,1,17,20L7,20A1,1,0,0,1,6,19L6,5A1,1,0,0,1,7,4L12,4 12,7A3,3,0,0,0,15,10L18,10z M15,16L9,16A1,1,0,0,0,9,18L15,18A1,1,0,0,0,15,16z</Geometry>
        </ResourceDictionary>
    </Application.Resources>

However, I don't think there is a way to have the behavior (double click on the group to collapse it) you want using hc:SideMenu (at least I didn't find it).
You can try to use a TreeView as a sidemenu to have this.

hope it can help 😊

[Enat0]

Thanks for the reply.
I can edit fine with "hc:SideMenu.Resources" but if I do it like you (StaticResource) then when I switch to the darktheme it stays with the blue background and doesn't switch :s

[Yopler]

Yes, because I override directly the RegionBrush and SecondaryRegionBrush of HandyControl for the SideMenu.
If I understand well, you want to have blue background when in light mode and keep default color when in dark mode ?
In that case you can try to create a Custom Light and Dark mode RessourceDictionnary that have the theme of HandyControl in Meged Dictionnary and then create a custom color for your sideMenu.

<Color x:Key="SideMenuBackground">#044487</Color>

<hc:SideMenu.Resources>
               <!--Region Brush for main Background-->
                <SolidColorBrush x:Key="RegionBrush" Color="{DynamicResource SideMenuBackground}"/>
              
               ...

</hc:SideMenu.Resources>

or you can use Binding to your color and manage the changes in your code behind or ViewModel.
In your c# code, you can use the Application.Current.FindResource(string ressourceName)

<Color x:Key="SideMenuLightBackground">#044487</Color>

if (darkMode)
                MySideMenyBackground = Application.Current.FindResource("RegionColor");
else
                MySideMenyBackground = Application.Current.FindResource("SideMenuLightBackground");

<hc:SideMenu.Resources>
               <!--Region Brush for main Background-->
                <SolidColorBrush x:Key="RegionBrush" Color="{Binding MySideMenyBackground}"/>
              
               ...

</hc:SideMenu.Resources>

If you can show me a part of your code or a template, It will be easier to help you!

[Enat0]

Hello again.
Sorry I was just being dumb :)
I already have my app.xaml like this:

<ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Themes/LightTheme.xaml"/>
                <hc:ThemeResources/>
                <hc:Theme/>
</ResourceDictionary.MergedDictionaries>

and change themes like this (with my Custom Dark/Light added colors):

ChangeTheme(new Uri($"Themes/{themeName}.xaml", UriKind.Relative));
ThemeManager.Current.ApplicationTheme = themeName == "DarkTheme" ? ApplicationTheme.Dark : ApplicationTheme.Light;

My error was I was trying to change <SolidColorBrush x:Key="RegionBrush" Color="#044487"/> like this <SolidColorBrush x:Key="RegionBrush" Color="{DynamicResource MenuLateral}"/> but "MenuLateral" was a solidcolorbrush in xaml instead of color property

Thanks for the help!

[Yopler]

with pleasure !
Glad you found your problem !