CODEWITHSUNDEEP
androidxamlmaui
Alyssa K
Alyssa K

Reputation: 11

MAUI .NET Flyout Menu Item Select Default Color

Does anyone know how to change this default MAUI .NET selected purple color? It's showing up anywhere where something is "selected" like the current tab or the flyout menu.

Is it even possible to change this color? I'm more focused on the flyout menu in the image below as it's more apparent here than anywhere else.

enter image description here

I have tried locating the color to try and change it and no luck. I also looked through all of these files to try and add a new field or something to overwrite wherever the purple color is coming from:

AppShell.xaml, colors.xml, colors.xaml, styles.xml, App.xaml, VGSMaui.csproj, MauiProgram.cs and MainPage.xaml. I think this is all I've tried.

I've looked at MAUI .NET docs, StackOverflow and other resources but it doesn't seem like there is a fix for this yet. This is close to what I need but it didn't work:
xaml maui - change the color of a selected item in a flyout menu?
Any help or guidance will be greatly appreciated! I really hope that I'm just missing something.

Upvotes: 0

Views: 128

Answers (2)

Alyssa K
Alyssa K

Reputation: 11

I finally found a fix! I don't know how I didn't think of this before.

MenuPage.xaml:

  <listView:SfListView x:Name="ListViewMenu"
                   Margin="0,0,3,0"
                   AutoFitMode="DynamicHeight"
                       SelectionBackground="#ededed"
                   BackgroundColor="{DynamicResource ColorWindowBackground}">
  <listView:SfListView.ItemTemplate>

listView:SfListView.ItemTemplate

SelectedBackground is where you change the color!

Upvotes: 0

Jianwei Sun - MSFT
Jianwei Sun - MSFT

Reputation: 4332

You use the following code to change the color of selected item:

<Shell.Resources>
   <Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
       <Setter Property="VisualStateManager.VisualStateGroups">
           <VisualStateGroupList>
               <VisualStateGroup x:Name="CommonStates">
                   <VisualState x:Name="Normal">
                       <VisualState.Setters>
                           <Setter Property="BackgroundColor" Value="Transparent" />
                           <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" />
                       </VisualState.Setters>
                   </VisualState>
                   <VisualState x:Name="Selected">
                       <VisualState.Setters>
                           <Setter Property="BackgroundColor" Value="SkyBlue" />
                           <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue" />
                       </VisualState.Setters>
                   </VisualState>
               </VisualStateGroup>
           </VisualStateGroupList>
       </Setter>
   </Style>
</Shell.Resources>

Just add it into your AppShell.xaml

Upvotes: 0

Related Questions