How to change the bacground and text color of MenuFlyoutItem?

Dani_S 3,746

Hi,

<FlyoutBase.ContextFlyout >

 <MenuFlyout  >

     <MenuFlyoutItem Text="Load external configurations" 

         Command="{Binding BindingContext.ExternalConfigurationCommand, Source={x:Reference loadExteranlConfigurationButton}}"/>

         <MenuFlyoutItem Text="Load external logo"

         Command="{Binding BindingContext.ExternalLogoCommand, Source={x:Reference loadExteranlConfigurationButton}}"/>

     </MenuFlyout>

</FlyoutBase.ContextFlyout>

Dani_S 3,746 Reputation points

2024-09-25T17:20:28.85+00:00

On windows

1 answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 30,916 Reputation points Microsoft Vendor

2024-09-26T06:00:16.76+00:00
Hello,

There are two ways to modify the text color and the background color.

The first way: Open Styles.xaml in Recourses/Styles folder, then add the FlyoutItemLabelStyle for the Shell, for example

<Style TargetType="Label" Class="FlyoutItemLabelStyle"> <Setter Property="TextColor" Value="Yellow" /> <Setter Property="BackgroundColor" Value="Green"> </Setter> </Style>

The other way is to define the menuitem appearance, then you can set the color, for example

<Shell.MenuItemTemplate> <DataTemplate> <Grid BackgroundColor="Purple" ColumnDefinitions="0.2*,0.8*"> <Image Source="{Binding Icon}" Margin="5" HeightRequest="45" /> <Label Grid.Column="1" Text="{Binding Text}" FontAttributes="Italic" TextColor="Red" VerticalTextAlignment="Center" BackgroundColor="Yellow"/> </Grid> </DataTemplate> </Shell.MenuItemTemplate>

For more details, you can refer to .NET MAUI Shell flyout - .NET MAUI | Microsoft Learn

Best Regards,

Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Dani_S 3,746 Reputation points

2024-09-26T07:02:16.9833333+00:00

I use first approc and added the style to resources of the page and is not work? why ?

Dani_S 3,746 Reputation points

2024-09-26T07:16:23.56+00:00

Your quick answer will be great.

Dani_S 3,746 Reputation points

2024-09-26T07:22:16.1366667+00:00

My full code:

<Button Grid.Row="0" x:Name="loadExteranlConfigurationButton" Source="external_configurations.png"

T BackgroundColor="White" TextColor="Black" WidthRequest="60" HeightRequest="50" > **<FlyoutBase.ContextFlyout >** **<MenuFlyout >** **<MenuFlyoutItem Text="Load external configurations"** **Command="{Binding BindingContext.ExternalConfigurationCommand, Source={x:Reference loadExteranlConfigurationButton}}"/>** **<MenuFlyoutItem Text="Load external logo"** **Command="{Binding BindingContext.ExternalLogoCommand, Source={x:Reference loadExteranlConfigurationButton}}"/>** **</MenuFlyout>** **</FlyoutBase.ContextFlyout>** </Button> Waiting for your answer.

Dani_S 3,746 Reputation points

2024-09-26T07:23:24.8533333+00:00

I have no Styles.xaml in Recourses/Styles folder

Dani_S 3,746 Reputation points

2024-09-26T07:28:52.0766667+00:00

I want to modify the style in content page level.

Dani_S 3,746 Reputation points

2024-09-26T07:31:00.9533333+00:00

.....

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 30,916 Reputation points Microsoft Vendor

2024-09-26T07:37:06.18+00:00

I have no Styles.xaml in Recourses/Styles folder

It's a default file when you create a new empty MAUI project. Please double-check if it was missing.

I want to modify the style in conteant page level.

Please try the second solution to set the appearance. I see the code snippets, what's the telerik:RadButton? Is loadExteranlConfigurationButton on your contentpage?

Dani_S 3,746 Reputation points

2024-09-26T07:39:12.58+00:00

I use button, I fixed the xaml.

Dani_S 3,746 Reputation points

2024-09-26T07:43:01.5733333+00:00

I want you use button and inside you have this:

<FlyoutBase.ContextFlyout >

Copy

<MenuFlyout > <MenuFlyoutItem Text="Load external configurations" Command="{Binding BindingContext.ExternalConfigurationCommand, Source={x:Reference loadExteranlConfigurationButton}}"/> <MenuFlyoutItem Text="Load external logo" Command="{Binding BindingContext.ExternalLogoCommand, Source={x:Reference loadExteranlConfigurationButton}}"/> </MenuFlyout>

</FlyoutBase.ContextFlyout>

and style text and background of the MenuFlyoutItem

Thanks

Dani_S 3,746 Reputation points

2024-09-26T07:44:03.82+00:00

......

Dani_S 3,746 Reputation points

2024-09-26T07:47:02.2533333+00:00

Please see :https://app.screencast.com/d0nAkgKqkKt1O

Dani_S 3,746 Reputation points

2024-09-26T07:53:32.7+00:00

Second solution not complied.

Can you supply full solution?

Dani_S 3,746 Reputation points

2024-09-26T08:04:24.44+00:00

Your quick answer will be appreciated.

Dani_S 3,746 Reputation points

2024-09-26T08:35:12.3633333+00:00

Is there solution?

Your quick answer will be appreciated.

Dani_S 3,746 Reputation points

2024-09-26T10:05:14.77+00:00

Your quick answer will be appreciated.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 30,916 Reputation points Microsoft Vendor

2024-09-27T07:43:18.78+00:00

Please open App.xaml in Platforms/Windows folder, then add the following:

<maui:MauiWinUIApplication.Resources> <SolidColorBrush x:Key="MenuFlyoutItemBackground">Blue</SolidColorBrush> </maui:MauiWinUIApplication.Resources>

And check if the background has been changed. I still try to find the style for the TextColor on Windows platform.

Dani_S 3,746 Reputation points

2024-09-27T10:11:23.3333333+00:00

If i have this structure also see the results in this case:

https://app.screencast.com/cY2H9qEeNbJ5l

<DataTemplate>

<Label Text="{Binding Name}" VerticalTextAlignment="Center" ToolTipProperties.Text="{Binding}" > <FlyoutBase.ContextFlyout> <MenuFlyout> <MenuFlyoutSubItem Text="Format Operations on USB"> <MenuFlyoutItem Text="Format USB in format NTFS" Command="{Binding BindingContext.NTFSFormatCommand, Source={x:Reference treeViewSource}}"/> <MenuFlyoutItem Text="Format USB in format FAT32" Command="{Binding BindingContext.FAT32FormatCommand, Source={x:Reference treeViewSource}}" /> </MenuFlyoutSubItem> <MenuFlyoutItem Text="Delete All Files and Folders in USB" Command="{Binding BindingContext.DeleteAllFilesCommand, Source={x:Reference treeViewSource}}"/> <MenuFlyoutSubItem Text="Operations on Folders in USB"> <MenuFlyoutItem Text="New Folder in USB" Command="{Binding BindingContext.NewFolderCommand, Source={x:Reference treeViewSource}}"/> <MenuFlyoutItem Text="Rename Folder in USB" Command="{Binding BindingContext.RenameFolderCommand, Source={x:Reference treeViewSource}}" CommandParameter="{Binding .}"/> <MenuFlyoutItem Text="Delete Folder in USB" Command="{Binding BindingContext.DeleteFolderCommand, Source={x:Reference treeViewSource}}" CommandParameter="{Binding .}"/> </MenuFlyoutSubItem> </MenuFlyout> </FlyoutBase.ContextFlyout> </Label> ``` </DataTemplate>
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to change the bacground and text color of MenuFlyoutItem?

1 answer

Your answer