[WinUI] Cannot customize FlyoutView easily

[mhrastegari]

Summary

I wanted to use MAUI's NavigationView but I've got a few challenges:

• Cannot (or I don't know how to) change the SelectedItem color from blue(AccentColor)

• Items have a bit extra padding (not match with WinUI's style) and when I set NavigationViewPaneDisplayMode.Auto they do not have a good looking!

• The PaneToggleButton size is not match with WinUI's style and also when I resize the window it tries to be its default size

• I'm not sure it should be handled in MAUI or WinAppSDK but when I open and close the menu I can see the background behind the ContentPage on the right side of the window!

2024-03-14.03-54-43.mp4

• When I use PaneToggleButton to open and close the FlyoutView, FlyoutMenuItems won't get resized

2024-03-14.17-13-14.-.Trim.mp4

Code to Repro

Xaml

<Shell
    x:Class="AdvancedNavigationView.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AdvancedNavigationView"
    x:Name="flyout"
    FlyoutBackgroundColor="Transparent"
    FlyoutBehavior="{OnPlatform WinUI=Locked, Default=Flyout}">
    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage">
        <ShellContent.Icon>
            <FontImageSource FontFamily="Segoe Fluent Icons" Glyph="&#xe80f;" />
        </ShellContent.Icon>
    </ShellContent>
</Shell>

C#

    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();

            SetupNavigationView();
        }

        private void SetupNavigationView()
        {
#if WINDOWS
            Loaded += async delegate
            {
                var navigationView = (Microsoft.UI.Xaml.Controls.NavigationView)flyout.Handler!.PlatformView!;
                navigationView.IsPaneToggleButtonVisible = true;
                navigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Auto;
            };
#endif
        }
    }

Suggestion

I think it's better to styling Native controls like Flyout with public properties (Like you guys did beautifully in App.xaml 💖) instead of doing it internally in MAUI :)
This saves a lot of time from both sides!

[PureWeen]

To style at that level I would recommend modifying the resource keys in your WinUI App.Xaml file

/Platform/Windows/App.Xaml

For example, to style that indicator you'd add this key

https://stackoverflow.com/a/49089606

[mhrastegari]

Thanks! is there a way to reset the size and paddings of FlyoutItem too? I didn't find any 💔