How to theme menu on hover?

[Shadowblitz16]

How do I theme a menu and menu item?

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:v="clr-namespace:Quest.Editor.Views">
    <Design.PreviewWith>
        <StackPanel Width = "320" Height="240">
            <Menu>
                <MenuItem Header="File">
                    <MenuItem Header="New"/>
                    <MenuItem Header="Open"/>
                </MenuItem>
            </Menu>
        </StackPanel>
    </Design.PreviewWith>

    <Style Selector="Menu">
        <Setter Property="Background" Value="{DynamicResource PrimaryBackground}"/>
    </Style>
    <Style Selector="MenuItem">
        <Setter Property="Background" Value="{DynamicResource PrimaryBackground}"/>
    </Style>
    <Style Selector="MenuItem:selected">
        <Setter Property="Background" Value="{DynamicResource PrimaryBackground}"/>
    </Style>    
    <Style Selector="MenuItem:hovered">
        <Setter Property="Background" Value="{DynamicResource PrimaryBackground}"/>
    </Style>
    
</Styles>

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:editor="clr-namespace:Quest.Editor"
             x:Class="Quest.Editor.App"
             RequestedThemeVariant="Default">
             <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->
  
    <Application.Styles>
        <FluentTheme />
        <StyleInclude Source="Styles/DefaultStyle.axaml"></StyleInclude>
    </Application.Styles>
             
             
     <Application.Resources>
         <SolidColorBrush x:Key="PrimaryForeground">#FFFFFF</SolidColorBrush>
         <SolidColorBrush x:Key="PrimaryBackground">#3b3b3b</SolidColorBrush>
         <SolidColorBrush x:Key="MenuSelected">#354f85</SolidColorBrush>
     </Application.Resources>
</Application>

[Shadowblitz16]

The font color isn't even changing...

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:v="clr-namespace:Quest.Editor.Views">
    <Design.PreviewWith>
        <StackPanel Width = "320" Height="240">
            <Menu>
                <MenuItem Header="File">
                    <MenuItem Header="New"/>
                    <MenuItem Header="Open"/>
                </MenuItem>
            </Menu>
        </StackPanel>
    </Design.PreviewWith>

    <Style Selector="Menu">
        <Setter Property="Margin" Value = "0"></Setter>
        <Setter Property="Background" Value="{DynamicResource PrimaryBackground}"/>
    </Style>
    <Style Selector="MenuItem">
        <Setter Property="Padding" Value = "1"/>
        <Setter Property="Foreground" Value = "{DynamicResource PrimaryForeground}"/>
        <Setter Property="Background" Value = "{DynamicResource PrimaryBackground}"/>
    </Style>
    <!-- <Style Selector="MenuItem:selected"> -->
    <!--     <Setter Property="Background" Value="{DynamicResource PrimaryBackground}"/> -->
    <!-- </Style>     -->
    <!-- <Style Selector="MenuItem:hovered"> -->
    <!--     <Setter Property="Background" Value="{DynamicResource PrimaryBackground}"/> -->
    <!-- </Style> -->
    
</Styles>

This space around the text isn't either.

[thevortexcloud]

MenuItem does not seem to have a hover pseudo selector:

Avalonia/src/Avalonia.Controls/MenuItem.cs

Line 24 in f42af48

[PseudoClasses(":separator", ":radio", ":toggle", ":checked", ":icon", ":open", ":pressed", ":selected")]

So my guess is you can't. As for things not changing, it really depends on what you are using as your base theme. The theme is responsible for setting up the template bindings, EG

Avalonia/src/Avalonia.Themes.Fluent/Controls/Menu.xaml

Lines 16 to 28 in f42af48

	<ControlTheme x:Key="FluentTopLevelMenuItem" TargetType="MenuItem">
	<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
	<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
	<!-- Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future. -->
	<Setter Property="Padding" Value="{DynamicResource MenuBarItemPadding}" />
	<Setter Property="Template">
	<ControlTemplate>
	<Border Name="PART_LayoutRoot"
	Background="{TemplateBinding Background}"
	BorderBrush="{TemplateBinding BorderBrush}"
	BorderThickness="{TemplateBinding BorderThickness}"
	CornerRadius="{TemplateBinding CornerRadius}">
	<Panel>

[Shadowblitz16]

MenuItem does not seem to have a hover pseudo selector:

Avalonia/src/Avalonia.Controls/MenuItem.cs

Line 24 in f42af48

[PseudoClasses(":separator", ":radio", ":toggle", ":checked", ":icon", ":open", ":pressed", ":selected")]

So my guess is you can't. As for things not changing, it really depends on what you are using as your base theme. The theme is responsible for setting up the template bindings, EG

Avalonia/src/Avalonia.Themes.Fluent/Controls/Menu.xaml

Lines 16 to 28 in f42af48

	<ControlTheme x:Key="FluentTopLevelMenuItem" TargetType="MenuItem">
	<Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
	<Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
	<!-- Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future. -->
	<Setter Property="Padding" Value="{DynamicResource MenuBarItemPadding}" />
	<Setter Property="Template">
	<ControlTemplate>
	<Border Name="PART_LayoutRoot"
	Background="{TemplateBinding Background}"
	BorderBrush="{TemplateBinding BorderBrush}"
	BorderThickness="{TemplateBinding BorderThickness}"
	CornerRadius="{TemplateBinding CornerRadius}">
	<Panel>

that's too bad then, everytime I come back to this library it's too much hassle to work with.

[thevortexcloud]

If you are using the Fluent theme, you can override the dynamic resources which will probably do what you want.

https://docs.avaloniaui.net/docs/guides/styles-and-resources/resources#resource-priority

You can also override the control template as well. But you will need to copy the theme from somewhere to modify it (as the entire control template will be overridden, not just part of it).

You can also subclass the MenuItem to add a hover selector, but you will need to add the functionality to trigger it yourself.

that's too bad then, everytime I come back to this library it's too much hassle to work with.

It certainly has a higher learning curve compared to something like Winforms, but I disagree on it being a hassle. Once you learn it, you can make very custom UIs, very quickly. Much like how websites can look completely different from each other thanks to different styles. EG the Suki theme looks completely different from the Fluent and Simple themes.

https://github.com/kikipoulet/SukiUI

[stevemonaco]

:selected is the design here for menus. Menu items are selected when the pointer is above them though this applies to the parent item when submenus are involved.

If you want the parents to have the :selected style and current level to have a different one, then you should select based on [IsMouseOver=True]. There's no :pointerover pseudoclass for Menu and MenuItem. There's also not a single use of :hovered in Avalonia, AFAIK.

You simply cannot do deep custom styling in Avalonia without reading any ControlThemes for the specific theme you're using. If your goal is to replace a color in a particular state in a way the control already works, then overriding keyed resources is probably a better option for you than writing selectors. DevTools can often specify the key name, but I always recommend reading ControlThemes first.