如何修改SideMenu左边的颜色

[LickBag]

大佬，你好，我只想要一级菜单，但是一级菜单左边的颜色框是灰色的，不是蓝色的。如何变成蓝色？

[Yopler]

Hi 🖐,

There is many way to do so ! But first, the border is define on the style SideMenuBaseStyle - line 54 and the color change in the Style.Triggers in the same style. We can see that the color choose by default is the BorderBrush Color and that it chance to PrimaryBrush color.

The easiest way but maybe also the ugliest way to modify the selected color is to change the PrimaryBrush color in the SideMenu.Resources :

<hc:SideMenu>
        <hc:SideMenu.Resources>
            <SolidColorBrush x:Key="PrimaryBrush" Color="{DynamicResource BorderColor}"/>
        </hc:SideMenu.Resources>
        <hc:SideMenuItem Header="Item">
            <hc:SideMenuItem Header="Item"/>
            <hc:SideMenuItem Header="Item"/>
        </hc:SideMenuItem>
        <hc:SideMenuItem Header="Item">
            <hc:SideMenuItem Header="Item"/>
            <hc:SideMenuItem Header="Item"/>
        </hc:SideMenuItem>
        <hc:SideMenuItem Header="Item">
            <hc:SideMenuItem Header="Item"/>
            <hc:SideMenuItem Header="Item"/>
        </hc:SideMenuItem>
</hc:SideMenu>

However, you must be careful with this way because it change the primary color of every childrens of the SideMenu.

The better way to do so, is to create a custom style that base on the current one that just modify the behavior of the selected SideMenuItem. However, this one is more difficult to use because the selected Trigger is in the ControlTemplate and not in the Style.

Hope it can help 😊

[LickBag]

<hc:TransitioningContentControl>
    <hc:SideMenu BorderThickness="1" Width="200" Margin="32" ItemContainerStyle="{StaticResource SideMenuItemBaseStyle}">
        <hc:SideMenuItem Header="Overview1">
        </hc:SideMenuItem>
        <hc:SideMenuItem Header="Overview2">
        </hc:SideMenuItem>
    </hc:SideMenu>
</hc:TransitioningContentControl>