xaml maui - change the color of a selected item in a flyout menu?

Question

I have the following code block that will display a menu item if tirggered

 <Style  TargetType="FlyoutItem" x:Key="HomeFlyout">
        <Setter Property="FlyoutIcon" Value="home_icon.png" />
        <Style.Triggers>
            <Trigger TargetType="FlyoutItem"
                 Property="IsChecked" Value="False">
            </Trigger>
            <Trigger TargetType="FlyoutItem"
                 Property="IsChecked" Value="False">
                <!-- Code to triger background change -->
            </Trigger>
        </Style.Triggers>
    </Style>

The following code block is used in the following way in a flyout item.

    <Application.MainPage>
        <Shell 
 
            <FlyoutItem Title="Home" Style="{StaticResource HomeFlyout}">
                <ShellContent Title="Home" ContentTemplate="{DataTemplate page:HomePage}" FlyoutItemIsVisible="True" />
            </FlyoutItem>

</Application.MainPage>
   </Shell 
 

The current UI looks like the following.

However, I want it to change if it is selected. For example( with home being the selected tab)

Things I have tried.

Setter Property="BackgroundColor" Value="LightBlue"

BackgroundColor="{Binding BackgroundColor}"

How can I accomplish this ?

Answer 1

You can use the MauiWinUIApplication.Resources to change the flyoutitem for the Windows platform.

Here is the code in the App.xaml at the windows folder.

 <maui:MauiWinUIApplication.Resources>
   
        <StaticResource x:Key="NavigationViewItemBackgroundSelected" ResourceKey="SystemControlHighlightListMediumBrush" />
        <StaticResource x:Key="NavigationViewItemBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightListMediumBrush" />
   
    <SolidColorBrush x:Key="SystemControlHighlightListMediumBrush" Color="red" />
 </maui:MauiWinUIApplication.Resources>