[SOLVED] How to disable selected visualstate FlyoutItem in .NET MAUI Shell

Issue

The MAUI Shell displays a blue vertical line to the left of a MenuItem after you click on it. It also changes the background color to be slightly darker. I'd like to disable that visual indication.

I did try overriding the FlyoutContent and that does work but then I am stuck re-inventing the entire FlyoutContentTemplate just to fix this one thing.

Changing the template for FlyoutItems does not work. It seems that the styling for selected items is not part of the FlyoutItemTemplate.

Changing the style of FlyoutItems also does not work.

Per this article, it looks like there is a visual state named Selected that causes this. I'd like to eliminate that visual state altogether so there is no visual indication of a selected item. Is there a way to do that?

Thank you for any pointers or ideas!

Update:

The issue is on the Windows platform only. Looks like MAUI uses the NavigationView to render the Shell and the WinUI NavigationViewItem does have a way to disable selectability.

So maybe the question I am asking is if there is a way to override rendering of the MAUI Shell on the Windows platform such that a MenuItem sets the SelectsOnInvoked property to false of the WinUI NavigationViewItem?

Solution

If you want to remove the blue vertical line to the left of a MenuItem in .NET MAUI Shell, you can override and set NavigationViewSelectionIndicatorForeground to Color="transparent".

Please add below code in Platforms/Windows/App.xaml:

<maui:MauiWinUIApplication
    x:Class="ShellFlyoutSample.WinUI.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui"
    xmlns:local="using:ShellFlyoutSample.WinUI">

    <maui:MauiWinUIApplication.Resources>
        <StaticResource x:Key="NavigationViewSelectionIndicatorForeground" ResourceKey="SystemControlForegroundAccentBrush" />
        <SolidColorBrush x:Key="SystemControlForegroundAccentBrush"  Color="transparent" />

    </maui:MauiWinUIApplication.Resources>

</maui:MauiWinUIApplication>

Output:

Answered By - Alexandar May - MSFT

Answer Checked By - Timothy Miller (WPSolving Admin)