Need help styling items in a MenuFlyout

[astroman133]

Can someone please point me at an example of how to set the text color and font size of a FlyoutMenuItem that will work with Avalonia version 12?

I have been trying to follow suggestions provided by search engine hits, but without any success. I can set the background color of the menu, but not the foreground color or text size.

Thanks,

Rick B

[timunie]

I tend to lookup original style in source and use DevTools. Could be a Dynamic Resource to override.

[astroman133]

Thanks!

I am not used to looking at the package source code to try to figure out how to implement something. It is kind of looking at how to make a new cylinder when my car won't start.

I learn best by looking at API documentation and targeted examples. That is why I asked for an example.

Also, I have never been able to use DevTools due to install errors. I tried months ago and gave up. Now I get the following error:

dotnet tool install --global AvaloniaUI.DeveloperTools
Tool 'avaloniaui.developertools' failed to update due to the following:
Failed to create shell shim for tool 'avaloniaui.developertools': Command 'avdt' conflicts with an existing command from another tool.
Tool 'avaloniaui.developertools' failed to install.

I also tried the update verb instead of install.

The list verb shows no tools installed.

[Matubil]

You can style the MenuItem directly. In the Fluent theme, the menu header uses the Foreground from the MenuItem, so you don't necessarily need to replace the whole template.

For example:

<MenuFlyout>
    <MenuItem Header="Open"
              Foreground="Red"
              FontSize="18" />

    <MenuItem Header="Save"
              Foreground="Red"
              FontSize="18" />
</MenuFlyout>

If you want to apply it to all items in the flyout:

<MenuFlyout>
    <MenuFlyout.Styles>
        <Style Selector="MenuItem">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="FontSize" Value="18"/>
        </Style>
    </MenuFlyout.Styles>

    <MenuItem Header="Open"/>
    <MenuItem Header="Save"/>
</MenuFlyout>

If Foreground is still being overridden by the theme, another option is to override the Fluent resource used by menu items:

<SolidColorBrush x:Key="MenuFlyoutItemForeground">
    Red
</SolidColorBrush>

The Fluent theme currently defines MenuItem.Foreground using the MenuFlyoutItemForeground dynamic resource, so overriding that resource is usually the most reliable way if you want the whole menu to change.

[astroman133]

Thank you for your suggestions.

Applying the Foreground and FontSize attributes directly to each MenuItem appears to work. However, I also want to have styles to prevent onmouseover color changes. So I also tried defining the style for the MenuItem objects in the Styles section at the top of the file. Here is what I have:

	<Style Selector="MenuItem">
		<Setter Property="Background" Value="Blue" />
		<Setter Property="Foreground" Value="White" />
		<Setter Property="FontSize" Value="18" />
		<Setter Property="CornerRadius" Value="10" />

		<Style Selector="^:pointerover">
			<Setter Property="Background" Value="Blue" />
			<Setter Property="Foreground" Value="White" />
			<Setter Property="FontWeight" Value="Bold" />
		</Style>
	</Style>

The pointerover style selector does not prevent the color change, but does change the font weight.

I can provide an example solution if that would help.

Thanks!

Rick

[Matubil]

That behavior makes sense with the Fluent theme.

Your :pointerover selector is being hit — the fact that FontWeight changes confirms that — but the menu template applies its own hover resources to the internal border and header presenter.

So instead of styling only MenuItem.Background / Foreground, try overriding the Fluent hover resources:

<SolidColorBrush x:Key="MenuFlyoutItemBackgroundPointerOver">
    Blue
</SolidColorBrush>

<SolidColorBrush x:Key="MenuFlyoutItemForegroundPointerOver">
    White
</SolidColorBrush>

You may also want to keep the normal resources aligned:

<SolidColorBrush x:Key="MenuFlyoutItemBackground">
    Blue
</SolidColorBrush>

<SolidColorBrush x:Key="MenuFlyoutItemForeground">
    White
</SolidColorBrush>

That way the normal and pointer-over states use the same colors.

Alternatively, you can target the template parts directly, but overriding the dynamic resources is cleaner and less coupled to the control template.

[astroman133]

Thanks again. With your help I finally have the flyout menu styled as I want. Here is what I ended up with:

<Design.DataContext>
    <!-- This only sets the DataContext for the previewer in an IDE,
         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
    <vm:MainViewModel />
</Design.DataContext>

<Window.Styles>
	<Style Selector="Button.nomouseover">
		<!-- Style the button so it doesn't change color when moused over -->
		<!-- The selector comes from the Button.xaml definition on Github -->
		<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="Blue" />
			<Setter Property="Foreground" Value="Gray" />
		</Style>
	</Style>

	<Style Selector="MenuItem">
		<Setter Property="FontSize" Value="18" />
		<Setter Property="CornerRadius" Value="8" />
	</Style>
</Window.Styles>

<Window.Resources>
	<SolidColorBrush x:Key="MenuFlyoutItemBackground" Color="Blue" />
	<SolidColorBrush x:Key="MenuFlyoutItemForeground" Color="White" />

	<SolidColorBrush x:Key="MenuFlyoutItemBackgroundPointerOver" Color="Blue" />
	<SolidColorBrush x:Key="MenuFlyoutItemForegroundPointerOver" Color="White" />
</Window.Resources>


<Grid Grid.RowDefinitions="Auto, *"	Grid.ColumnDefinitions="*" 
	HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

    <TextBlock Grid.Row="0" Grid.Column="0" Margin="30"
        HorizontalAlignment="Center" VerticalAlignment="Center" 
        Text="{Binding Greeting}" />

	<Button Grid.Row="1" Grid.Column="0" Classes="nomouseover"
			Background="Blue" Foreground="White"	CornerRadius="20" Margin="0, 0, 6, 6" FontSize="18" Padding="10"
			HorizontalAlignment="Right" VerticalAlignment="Bottom" 
			Content="+ Add">
		<Button.Flyout>
			<MenuFlyout ShowMode="Standard" Placement="TopEdgeAlignedRight">
				<!-- Styles for the menu items are set in the UserControl.Styles section above. -->
				<MenuItem Header="Add a new item to this list" Margin="0,0,0,6" />
				<MenuItem Header="Select an item from the Catalog" />
			</MenuFlyout>
		</Button.Flyout>
	</Button>
</Grid>

Hopefully this will help someone else with a similar need.

[Matubil]

Glad it worked!
Thanks for sharing the final solution as well — it will probably help others with the same issue.

If this solved your problem, feel free to mark the answer as accepted so the discussion is easier to find as resolved.

Cheers!

[astroman133]

Sorry, but I don't see a way to mark your post as the answer. I am logged into the same account that created the original post.

[Matubil]

No worries — the reason is that this discussion is under General, not a Q&A category.

GitHub only shows the “Mark as answer” option for discussions created in a category configured as Question and Answer.

If the discussion can be moved to a Q&A category, then the Mark as answer option should appear under the replies.

Either way, I’m glad the styling is working now. Thanks for following up!