🎨 UI with MAUI
Navigation & Shell
TabBar, flyout menus, route-based navigation with Shell.

Shell Navigation

xml
<!-- AppShell.xaml -->
<Shell>
  <TabBar>
    <Tab Title="Tasks" Icon="tasks.png">
      <ShellContent ContentTemplate="{DataTemplate views:TasksPage}"
                    Route="tasks" />
    </Tab>
    <Tab Title="Profile" Icon="profile.png">
      <ShellContent ContentTemplate="{DataTemplate views:ProfilePage}"
                    Route="profile" />
    </Tab>
  </TabBar>
</Shell>

Route-Based Navigation

csharp
// Register routes in MauiProgram.cs
Routing.RegisterRoute("taskdetail", typeof(TaskDetailPage));

// Navigate with query parameters
await Shell.Current.GoToAsync($"taskdetail?taskId={task.Id}");

// Receive param in destination page
[QueryProperty(nameof(TaskId), "taskId")]
public partial class TaskDetailPage : ContentPage
{
    public string TaskId { get; set; }
}

// Go back one level
await Shell.Current.GoToAsync("..");

Key Takeaways

Shell provides tabs, flyout menus, and URL routing in one model
Register named routes in MauiProgram.cs with Routing.RegisterRoute
Pass data via query strings; receive with [QueryProperty]
GoToAsync("..") navigates back — works like browser history
Lesson 14 of 30UI with MAUI
← Previous Next Lesson →