How to change the bacground and text color of MenuFlyoutItem?

Dani_S 3,766

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,766 Reputation points

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

On windows
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 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.
Dani_S 3,766 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,766 Reputation points

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

Your quick answer will be great.

Dani_S 3,766

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,766 Reputation points

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

I have no Styles.xaml in Recourses/Styles folder
Dani_S 3,766 Reputation points

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

I want to modify the style in content page level.
Dani_S 3,766 Reputation points

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

.....
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 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,766 Reputation points

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

I use button, I fixed the xaml.

Dani_S 3,766

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,766 Reputation points

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

......
Dani_S 3,766 Reputation points

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

Please see :https://app.screencast.com/d0nAkgKqkKt1O
Dani_S 3,766 Reputation points

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

Second solution not complied.

Can you supply full solution?
Dani_S 3,766 Reputation points

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

Your quick answer will be appreciated.
Dani_S 3,766 Reputation points

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

Is there solution?

Your quick answer will be appreciated.
Dani_S 3,766 Reputation points

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

Your quick answer will be appreciated.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 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,766

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

https://app.screencast.com/cY2H9qEeNbJ5l

   <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>

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 Reputation points Microsoft Vendor

2024-09-30T05:14:40.71+00:00

The link you provided cannot be opened on my side. Could you please the current behavior in detail? Or upload the video in other ways?
Dani_S 3,766 Reputation points

2024-10-01T14:45:21.4833333+00:00

I forgot to style the MenuFlyoutSubItem as:

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

what about text color?

Accepted answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,161 Reputation points Microsoft Vendor

2024-10-02T06:50:06.4333333+00:00
Hello,

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

XML

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

About the TextColor, you are not able to set it for now, because there is a known issue on WinUI3. Please refer to Setting Foreground on MenuBarItem doesn't work #7070 and menuflyout background incorrect after live color mode change #9241 and wait for their updates.

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.

1 person found this answer helpful.

0 comments No comments
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?

0 additional answers

Your answer