> For the complete documentation index, see [llms.txt](https://functionzero.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://functionzero.gitbook.io/docs/libraries/maui.mvvmzero/configuring-your-root-page/root-flyoutpage.md).

# Root FlyoutPage

A `FlyoutPage` has a `Flyout` property that should be set to a `ContentPage` containing the content of the flyout (or a `NavigationPage`, once [this bug](https://github.com/dotnet/maui/issues/14561) has been fixed) and a `Detail` property for the remaining content.

As usual, create and register the following:

* A `ContentPage` and `ViewModel` to be presented in the Flyout's *Flyout*
* Any and all `ContentPage` and `ViewModel` classes that may be presented for the `Flyout.Detail`

Assuming the `Flyout` property is represented using a `FlyoutFlyoutPage` bound to a `FlyoutFlyoutPageVm`, we set our `MainPage` like this:

```csharp
namespace SampleFlyoutApp
{
    public partial class App : Application
    {
        public App(IPageServiceZero pageService)
        {
            InitializeComponent();
            
            // Don't forget to call pageService.Init, or navigation will not work properly!
            pageService.Init(this);

            MainPage = pageService.GetFlyoutPage<FlyoutFlyoutPageVm>();
        }
    }
}
```

Now we need a way to manage the `Detail` property of the `Flyout`. This is achieved using&#x20;

```csharp
_pageService.FlyoutController.SetDetailVm<TViewModel>(bool wrapInNavigation, Action initViewModelAction, object hint=null)
```

Here's an example that sets the default view when the page is first presented, and has `ICommands` to swap between two different detail pages. These pages are wrapped in a `NavigationPage`, so they in turn can push pages onto their own navigation stack

```csharp
namespace SampleFlyoutApp.Mvvm.PageViewModels.Root
{
    public class FlyoutFlyoutPageVm : MvvmZeroBasePageVm
    {
        private readonly IPageServiceZero _pageService;

        public ICommand Test1Command { get; }       
        public ICommand Test2Command { get; }

        public FlyoutFlyoutPageVm(IPageServiceZero pageService)
        {
            _pageService = pageService;

            _pageService.FlyoutController.FlyoutLayoutBehavior = FlyoutLayoutBehavior.Popover;
            
            Test1Command = new CommandBuilder().AddGuard(this).SetName("Test1").SetExecuteAsync(Test1CommandExecuteAsync).Build();
            Test2Command = new CommandBuilder().AddGuard(this).SetName("Test2").SetExecuteAsync(Test2CommandExecuteAsync).Build();
        }
        
        private async Task Test1CommandExecuteAsync()
        {
            _pageService.FlyoutController.SetDetailVm<Test1PageVm>(true, vm => { });
        }        
        private async Task Test2CommandExecuteAsync()
        {
          _pageService.FlyoutController.SetDetailVm<Test2PageVm>(true, vm => { });        }
        }
        
        public override void OnOwnerPageAppearing()
        {
            base.OnOwnerPageAppearing();
            // Set a default Page when the FlyoutFlyoutPage is first presented ...
            _pageService.FlyoutController.SetDetailVm<DefaultFlyoutPageVm>(true, vm => { });
        }
    }
}

```

Now just add two `Buttons` to `FlyoutFlyoutPage.xaml` and bind them to `Test1Command` and `Test2Command` to swap the `Detail` view on button click

Take a look at the [SampleFlyoutApp source code](https://github.com/Keflon/Maui.MvvmZero/tree/master/SampleFlyoutApp) to see an example of a `Flyout` containing a tree-structure of options, each one tied to a different `Detail` page