Skip to content

Commit

Permalink
docs: expanding navigation docs
Browse files Browse the repository at this point in the history
  • Loading branch information
dansiegel committed Sep 19, 2024
1 parent 281e297 commit b0e858c
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 0 deletions.
71 changes: 71 additions & 0 deletions docs/platforms/maui/navigation/tabbed-navigation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
---
uid: Platforms.Maui.Navigation.TabbedNavigation
---

# TabbedPages

## Selecting a Tab at Runtime

Sometimes you may want to programmatically switch between tabs. Keep in mind that this must be done from a ViewModel attached to one of the children of the TabbedPage or the TabbedPage itself.

```cs
var result = await navigationService.SelectTabAsync("TabB");
```

In the event that you have a tab which is nested inside of a NavigationPage you can select the tab:

```cs
var result = await navigationService.SelectTabAsync("NavigationPage|TabB");
```

## Navigating to a TabbedPage

Tabbed Navigation in Prism for .NET MAUI has been significantly enhanced in Prism for Xamarin.Forms. Due to a variety of changes we suggest using a Uri to generate your TabbedPage over using a concrete type like:

```xml
<!-- Not Recommended -->
<TabbedPage>
<view:ViewA />
<view:ViewB />
</TabbedPage>
```

The recommended way to do this would be to use either a Uri:

```csharp
navigationService.NavigateAsync("TabbedPage?createTab=ViewA&createTab=ViewB");
```

Alternatively you can use the [NavigationBuilder](xref:Platforms.Maui.Navigation.NavigationBuilder) to build your TabbedPage on the fly.

```cs
navigationService.CreateBuilder()
.AddTabbedSegment(s => s
.CreateTab(t => t.AddSegment<ViewAViewModel>())
.CreateTab(t => t.AddNavigationPage().AddSegment<ViewBViewModel>())
)
.NavigateAsync();
```

This approach offers you a lot of flexibility when creating the same tabbed page over and over throughout your app as well as you can write an extension method once to consolidate this.

```cs
public static class MyNavigationExtensions
{
public static INavigationBuilder AddMyTabbedPage(this INavigationBuilder builder, string? selectedTab = null)
{
return builder.AddTabbedSegment(s =>
{
s.CreateTab(t => t.AddSegment<ViewAViewModel>())
.CreateTab(t => t.AddNavigationPage().AddSegment<ViewBViewModel>());
if (!string.IsNullOrEmpty(selectedTab))
{
s.SelectedTab(selectedTab);
}
});
}
}
```

> [!NOTE]
> Prism automatically registers the .NET MAUI TabbedPage with the navigation key `TabbedPage`. You do not need to register your own.
2 changes: 2 additions & 0 deletions docs/platforms/maui/navigation/toc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
href: page-navigation.md
- name: NavigationBuilder
href: navigation-builder.md
- name: TabbedPages
href: tabbed-navigation.md
- name: Understanding the INavigationResult
href: navigation-result.md
- name: NavigationExceptions
Expand Down

0 comments on commit b0e858c

Please sign in to comment.