C# Equivalent for a XAML Maui Flyout Menu [NavigationPage.HasNavigationBar] is sticking point

106 views Asked by At

I am stuck on a small detail of XAML... Please help if you know the answer.

Environment: dotnet 7

Platform: X Platform Maui

I am trying to create a C# collection equivalent of the Xaml in my App for the Collection of Tabs. The Problem is the one c# equivalent line of the Xaml NavigationPage.HasNavigationBar="True"

FlyoutItems in AppShell.Xaml

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"  >
    
    <Tab Title="Home" Icon="home.png" >
        <ShellContent Title="Disclaimer" 
                      
                      ContentTemplate="{DataTemplate views:DisclaimerPage}" 
                      NavigationPage.HasNavigationBar="True" 
                      Route="MainPage" />
    </Tab>

    <Tab Title="Downloads" Icon="downloads.png">
        <ShellContent Title="Downloads" 
                      ContentTemplate="{DataTemplate views:DisclaimerPage}" 
                      NavigationPage.HasNavigationBar="False" 
                      Route="MainPage" />
    </Tab>

    <Tab Title="Search" Icon="search.png">
        <ShellContent Title="Disclaimer" 
                      ContentTemplate="{DataTemplate views:DisclaimerPage}" 
                      NavigationPage.HasNavigationBar="False" 
                      Route="MainPage" />
    </Tab>
    <Tab Title="About" Icon="info_circle.png">
        <ShellContent Title="About"
                      ContentTemplate="{DataTemplate views:AboutPage}"
                      NavigationPage.HasNavigationBar="False"
                      Route="AboutView"/>

    </Tab>
</FlyoutItem>

The Problem is compiling the NavigationPage.HasNavigationPage lines below!

Hello All: Environment: dotnet 7 Platform: X Platform Maui I am trying to create a C# collection equivalent of the Xaml in my App for the Collection of Tabs.

FlyoutItems in AppShell.Xaml

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"  >
    
    <Tab Title="Home" Icon="home.png" >
        <ShellContent Title="Disclaimer" 
                      
                      ContentTemplate="{DataTemplate views:DisclaimerPage}" 
                      NavigationPage.HasNavigationBar="True" 
                      Route="MainPage" />
    </Tab>

    <Tab Title="Downloads" Icon="downloads.png">
        <ShellContent Title="Downloads" 
                      ContentTemplate="{DataTemplate views:DisclaimerPage}" 
                      Route="MainPage" />
    </Tab>

    <Tab Title="Search" Icon="search.png">
        <ShellContent Title="Disclaimer" 
                      ContentTemplate="{DataTemplate views:DisclaimerPage}" 
                      Route="MainPage" />
    </Tab>
    <Tab Title="About" Icon="info_circle.png">
        <ShellContent Title="About"
                      ContentTemplate="{DataTemplate views:AboutPage}"
                      Route="AboutView"/>

    </Tab>
</FlyoutItem>

The Problem is compiling the NavigationPage.HasNavigationPage lines below!

            _tabs = new ObservableCollection<Tab>()
        {
            new Tab
            {
                Title = "Home",
                Icon = "home.png",
                Items =
                {
                    new ShellContent
                    {
                        ContentTemplate = new DataTemplate(typeof(DisclaimerPage)),
                        Route = nameof(DisclaimerPage),
                        NavigationPage.HasNavigationBar="False"

                    }
                }
            },
            new Tab
            {
                Title = "Search",
                Icon = "search.png",
                Items =
                {
                    new ShellContent
                    {
                        ContentTemplate = new DataTemplate(typeof(DisclaimerPage)),
                        Route = nameof(DisclaimerPage)

                    }
                }
            },
            new Tab
            {
                Title = "About",
                Icon = "info_circle.png",
                Items =
                {
                    new ShellContent
                    {
                        ContentTemplate = new DataTemplate(typeof(AboutPage)),
                        Route = nameof(AboutPage)
                    }
                }
            }
        };
2

There are 2 answers

6
Jason On

This is a XAML attached property

var x = new ShellContent() 
{ 
  ContentTemplate = new DataTemplate(typeof(DisclaimerPage)), 
  Route = nameof(DisclaimerPage) 
}

NavigationPage.SetHasNavigationBar(x, true);
1
Jessie Zhang -MSFT On

You can try to add NavigationPage.SetHasNavigationBar in method OnAppearing of the special ContentPage.

As a test,I created a demo and tried to achieve this function on my side.

You can refer to the following code:

public partial class AboutPage : ContentPage
{
      public AboutPage()
      {
            InitializeComponent();
      }

    protected override void OnAppearing()
    {
        base.OnAppearing();
         // add code here
        Shell.SetNavBarIsVisible(this,false);

        NavigationPage.SetHasNavigationBar(this, false);
    }


    protected override void OnDisappearing()
    {  
        base.OnDisappearing();

        //Shell.SetNavBarHasShadow(this,true);

       // NavigationPage.SetHasNavigationBar(this, true);
    }
}

MyAppShell.cs

public partial class MyAppShell: Shell
    {
        public MyAppShell() {

            //create page DisclaimerPage
            var page1 = new ShellContent
            {
                Title = "Home",
                Route = nameof(DisclaimerPage),
                ContentTemplate = new DataTemplate(typeof(DisclaimerPage)),

            };

            //create page AboutPage
            var page2 = new ShellContent
            {
                Title = "About",
                Route = nameof(AboutPage),
                ContentTemplate = new DataTemplate(typeof(AboutPage)),

           };


            Items.Add(new FlyoutItem
            {
                Title = "Home",
                FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,

                Items =
            {
                new Tab{
                    Title = "Home",
                    Icon = "image1.png",
                    Items = {

                        page1
                    }
                },

                    new Tab{
                    Title = "About",
                     Icon = "image3.png",
                    Items = {

                          page2
                    }
                }
            }

            });;

        }
    }

Note:

With your current code, if you want to hide TitleView, method NavigationPage.SetHasNavigationBar is useless, and it is recommended to use method Shell.SetNavBarIsVisible.