.NET MAUI 03T - Shell Navigation: Tabs

.NET MAUI 03T - Shell Navigation: Tabs
The App Shell of .NET MAUI lends itself to a TabBar navigation or Flyout Menu navigation system. In this lesson, Professor Hustedde demonstrates how to set up the Tab navigation to multiple pages using the AppShell.xaml page.
.NET MAUI Practicum video with Professor Stephen F. Hustedde

Пікірлер: 18

  • @khansigh6742
    @khansigh67425 ай бұрын

    Please continue this series. Don't worry if it's not watched enough. KZread will promote you after an average of 27 videos.

  • @lukepadiachy
    @lukepadiachy4 ай бұрын

    Hi Stephen thank you so much for this !!!!! I was looking to solve this problem of navigating through pages with a tab bar lol, i was wreck my head over it , but this put me at ease , awesome stuff !

  • @user-bz2wy2zc4e
    @user-bz2wy2zc4e5 ай бұрын

    Is there any way to place the tab title in center if there is no icon? without icon I looks odd as placed in bottom.

  • @user-bz2wy2zc4e
    @user-bz2wy2zc4e5 ай бұрын

    Is there any way to place my Text center aligned in the Tab if there is no icon? I

  • @qa2002
    @qa20023 ай бұрын

    Hi Stephen, thanks for the video. I am having issue with TabbedPage layouts... iPhone simulator is not rendering the pages, all I get is a black screen with the iPhone time and signal strength and battery level. Any thoughts?

  • @StephenHustedde

    @StephenHustedde

    3 ай бұрын

    Not without looking at your code - and I have no time to do private consulting. Sorry. Check the VS logs for errors. If you are using VS4Mac (which is being retired in August and lacking support now from Microsoft), I'd recommend switching to JetBrains Rider for MAUI production the Mac (just making htat transition myself).

  • @mahmoudyehia4397
    @mahmoudyehia43973 ай бұрын

    Welcome, How to change font family for tab bar. Thank you sou much for help

  • @StephenHustedde

    @StephenHustedde

    3 ай бұрын

    I don't know of an easy solution - you'd likely need to create a custom renderer, perhaps at the platform code level (for each platform).

  • @gpsmagic
    @gpsmagicАй бұрын

    Hi thank you for the video, how can we make the icons have multiple colors?

  • @StephenHustedde

    @StephenHustedde

    Ай бұрын

    Shell does not support multiple color icons. Sorry. One solution may be to create a custom navigation class that displays thumbnail images rather than icons or perhaps extend Shell. Depending on your purposes, you could also just use a title/home page with navigation images as 32bit png images with a back button to it from other pages.

  • @SayconX2
    @SayconX22 ай бұрын

    Nice!

  • @emilywatsonld
    @emilywatsonld6 ай бұрын

    Hey. Is there a way to use back button so that the bottom tabs are respected ? So wed go yellow page, red page. And then click back and get back to the yellow ?

  • @StephenHustedde

    @StephenHustedde

    5 ай бұрын

    I don’t believe the navigational Tabs in the Shell create a hierarchical stack. You could perhaps try the following: Create a Back button at the top of your pages. Create a static shared Stack (or List) to track/push your navigation and pop items from it to navigate to. (However, this seems rather redundant and mixes navigational metaphors - the user should be able to just click the Yellow tab to return to the Yellow page)

  • @postnoaut430
    @postnoaut4304 ай бұрын

    How to handle back button, ie., when in Red tab, on pressing back button in Android, app should go to home tab. App is closing now..

  • @enriqueleon4806
    @enriqueleon48067 ай бұрын

    Hello Stephen I have a question, How to only make the tabbar available only for one page

  • @StephenHustedde

    @StephenHustedde

    5 ай бұрын

    You can use Shell.SetTabBarIsVisible(this, false); in the C# code behind for the page. You would then need some navigation feature (button) to navigate away from the page. The purpose of the Tabbar is to provide navigation between multiple pages. Mixed metaphor navigation may not be viewed well by user or the app store reviewers.

  • @SyedTassaduq
    @SyedTassaduq5 ай бұрын

    how do I display the icons as an orignal PNG

  • @StephenHustedde

    @StephenHustedde

    5 ай бұрын

    Place the PNG in the Resources > images folder (filename should be all lowercase). Then in the AppShell .xaml page you can reference the PNG file in the tab creation code with 'Icon="imagename" ':