-
Notifications
You must be signed in to change notification settings - Fork 112
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
73 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters