remember flyout choice.

Eduardo Gomez 3,426

I have a shell and a viewModel

<Shell
    Title="DemyAI"
    FlyoutIsPresented="{Binding Status}"
    x:DataType="vm:AppShellViewModel"
    Shell.TabBarIsVisible="False">
    <ShellContent
        ContentTemplate="{DataTemplate pages:StartupPage}"
        Route="StartupPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <ShellContent
        ContentTemplate="{DataTemplate pages:LoginPage}"
        Route="LoginPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <ShellContent
        ContentTemplate="{DataTemplate pages:NoInternetPage}"
        Route="NoInternetPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <ShellContent
        ContentTemplate="{DataTemplate pages:RoleSelectionPage}"
        Route="RoleSelectionPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False"
        Shell.NavBarIsVisible="False" />

FlyoutIsPresented="{Binding Status}"

is bound to my viewModel

public partial class AppShellViewModel(IAppService appService) : BaseViewModel {
    [ObservableProperty]
    bool status;
   partial void OnStatusChanged(bool value) {
       if (DeviceInfo.Current.Idiom == DeviceIdiom.Desktop) {
           Preferences.Default.Set(Constants.FLYOUT_STATUS, value);
       }
   }

public partial class AppShell : Shell {
    public AppShell(AppShellViewModel appShellViewModel) {
        InitializeComponent();
        BindingContext = appShellViewModel;
        RegisterPages();
    }
    private void RegisterPages() {
        Routing.RegisterRoute(nameof(JoinMeetingPage), typeof(JoinMeetingPage));
        Routing.RegisterRoute(nameof(RoleSelectionPage), typeof(RoleSelectionPage));
        Routing.RegisterRoute(nameof(LoginPage), typeof(LoginPage));
        Routing.RegisterRoute(nameof(NoInternetPage), typeof(NoInternetPage));
        Routing.RegisterRoute(nameof(ManageCoursePage), typeof(ManageCoursePage));
        Routing.RegisterRoute(nameof(NewLecturePage), typeof(NewLecturePage));
        Routing.RegisterRoute(nameof(NewTestPage), typeof(NewTestPage));
        Routing.RegisterRoute(nameof(NotificationsPage), typeof(NotificationsPage));
        Routing.RegisterRoute(nameof(RegisterStudentPage), typeof(RegisterStudentPage));
        Routing.RegisterRoute(nameof(ScheduleLecturePage), typeof(ScheduleLecturePage));
        Routing.RegisterRoute(nameof(ScheduleTestPage), typeof(ScheduleTestPage));
        Routing.RegisterRoute(nameof(WelcomePage), typeof(WelcomePage));
    }
   protected override void OnNavigating(ShellNavigatingEventArgs args) {
    if(DeviceInfo.Current.Idiom == DeviceIdiom.Desktop) {
        Preferences.Default.Get(Constants.FLYOUT_STATUS, false);
    }
    base.OnNavigating(args);
}

the problem is when I click the button for the first time, the status variable gets trigger, but when I click on a page, it will get trigger again.

what I want to do, is to remember my value when I navigate

for example, if I click the flyout button and the status be set to true I want the flyout to maintain open

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Reputation points Microsoft Vendor

2024-03-11T09:44:10.5933333+00:00

On which platform(iOS/Android/Windows)? With .NET8, right?
Eduardo Gomez 3,426 Reputation points

2024-03-11T09:55:31.5033333+00:00

Yes Net 8.

Well, I want this functionality only on desktop. For example, if I open the flyout I want it to be until the user hides it. if I open the flyout and navigate to any page, the flyout should remain open until I click on the button to close it.

Example https://reccloud.com/u/92ug474

In this example, I use the WinUI3 Gallery, to show you what I am trying to achieve. When I open the flyout, see how it will remain open until I click to hide it.

That is why I tried to save the status, a loaded it when navigating.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Reputation points Microsoft Vendor

2024-03-12T09:06:15.64+00:00

I watched the video you provide. It looks like default appearance when using Shell flyout. I'm not sure why you set Shell.FlyoutBehavior="Disabled" Shell.FlyoutItemIsVisible="False". do you try setting FlyoutBehavior="Flyout"? And are there any other issues?
Eduardo Gomez 3,426 Reputation points

2024-03-12T09:41:19.1866667+00:00

Yes, my flyout behavior is flyout.

I just want the flyout to stays open or close until I say so, but If I put it disabled, there is no more button
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Reputation points Microsoft Vendor

2024-03-13T09:55:45.0833333+00:00

Currently, the flyout retracts when the little button in the upper left corner is clicked, you mean the flyout stays expanded even after clicking it, right?
Eduardo Gomez 3,426 Reputation points

2024-03-13T23:25:34.73+00:00

When I click the button the flyout hides, I want it to stay open and if I hide it, I want it to stay hiden

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Microsoft Vendor

You could try adding a delay when presenting the flyout.

protected override async void OnNavigating(ShellNavigatingEventArgs args)
{
     if (DeviceInfo.Current.Idiom == DeviceIdiom.Desktop)
     {
         //  Preferences.Default.Get("", false);
         if (FlyoutIsPresented == false)
         {
             if (Shell.Current != null)
             {
                 await Task.Delay(100);
                 Shell.Current.FlyoutIsPresented = true;
             }


        }
     }


}

And I double-check the video you provided, you may want the NavigationViewPaneDisplayMode.Auto appearance on WinUI3, please try the following:

    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.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Auto;
            };
#endif
        }
    }

Please test and tell me if it works for you.

Eduardo Gomez 3,426 Reputation points

2024-03-18T07:04:01.1566667+00:00

Yes, it works but this is not the behavior I am looking for hahahaha

I am looking for this for example

I open my app with the flyouts open and I start navigating and the flyout remain open.

If I collapse it with your code and I navigate, the flout will remain hidden.

but the behavior I got is the I start with the flyout open, when a navigate it will collapse and navigate again and open

Eduardo Gomez 3,426

I think I found something.

I went to the WnUI3 repo (https://github.com/microsoft/WinUI-Gallery/blob/main/WinUIGallery/Navigation/NavigationRootPage.xaml.cs), and they are doing something like

  private void OnPaneDisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
        {
            if (sender.PaneDisplayMode == NavigationViewPaneDisplayMode.Top)
            {
                VisualStateManager.GoToState(this, "Top", true);
            }
            else
            {
                if (args.DisplayMode == NavigationViewDisplayMode.Minimal)
                {
                    VisualStateManager.GoToState(this, "Compact", true);
                }
                else
                {
                    VisualStateManager.GoToState(this, "Default", true);
                }
            }

how Do i translate this to Maui?

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Reputation points Microsoft Vendor

2024-03-19T09:53:04.3733333+00:00
but the behavior I got is the I start with the flyout open, when a navigate it will collapse and navigate again and open

Yes, you have to open it again.

I checked the source code you mentioned, it's Winui navigation page. And it changes the PaneDisplayMode when clicking the left-top Humberger button. We can set the NavigationViewPaneDisplayMode and the only thing is how to detect the click action on Windows platform. I will investigate further.

var navigationView = (Microsoft.UI.Xaml.Controls.NavigationView)flyout.Handler!.PlatformView!; navigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Auto;
Eduardo Gomez 3,426 Reputation points

2024-03-19T12:03:41.1633333+00:00

I will do that. As well
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Reputation points Microsoft Vendor

2024-03-22T08:58:27.9633333+00:00

I tested and cannot achieve this function for now. And there is a feature request at GitHub- [Feature Request] New Navigation Bar to Mimic win ui Behavour In Shell · Issue #7345 · dotnet/maui · GitHub, please follow the progress.
Eduardo Gomez Romero 245 Reputation points

2024-03-22T09:12:45.4366667+00:00

Thanks, I have another question, I will try to post it, but I am having problems posting. Forn some reason the said that I violate the code of conduct.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Reputation points Microsoft Vendor

2024-03-22T09:35:29.9833333+00:00

We have a quick look, your account is available. Are there any code snippets in your post? You could try to remove the code snippets and add the code snippets in a comment or attach a txt file.
Eduardo Gomez Romero 245 Reputation points

2024-03-22T09:39:55.18+00:00

yes, I out yesterday I posted and a link with a video and they remove it.

They told me that my primary account (egomezr@outlook.com) violated the code of conduct.
Eduardo Gomez Romero 245 Reputation points

2024-03-22T09:44:48.4233333+00:00

I will not post again, until I am sure, I can post without any errors.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Reputation points Microsoft Vendor

2024-03-25T05:36:04.1933333+00:00

You can refer to How to write a quality question

Share via

remember flyout choice.