.NET MAUI中如何通过底部栏按钮切换主页面ContentView内容

实现思路 #

要实现底部栏按钮切换主页面内容，核心是让BottomBar的点击事件能通知到主页面，由主页面负责替换显示的ContentView。具体步骤：

• 给BottomBar添加事件，传递点击的页面标识
• 主页面提前创建好所有页面实例，避免重复初始化
• 主页面监听BottomBar的点击事件，根据标识切换MainPageView的Content

代码修改步骤 #

1. 更新BottomBar.xaml.cs，添加事件通知 #

修改BottomBar后台代码，将内部点击事件转为对外暴露的事件，让主页面可以订阅：

namespace MauiTodoApp.Views.Contents;

public partial class BottomBar : ContentView
{
    // 定义自定义事件，传递页面索引
    public event EventHandler<int>? PageTapped;

    public BottomBar()
    {
        InitializeComponent();
    }

    private void Page1Clicked(object sender, TappedEventArgs e)
    {
        PageTapped?.Invoke(this, 0);
    }

    private void Page2Clicked(object sender, TappedEventArgs e)
    {
        PageTapped?.Invoke(this, 1);
    }

    private void Page3Clicked(object sender, TappedEventArgs e)
    {
        PageTapped?.Invoke(this, 2);
    }

    private void Page4Clicked(object sender, TappedEventArgs e)
    {
        PageTapped?.Invoke(this, 3);
    }
}

2. 给主页面的BottomBar添加命名 #

修改TodoMainPage.xaml，给BottomBar控件添加x:Name，方便后台代码引用：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiTodoApp.Views.TodoMainPage"
             xmlns:Pages="clr-namespace:MauiTodoApp.Views.Pages"
             xmlns:contents="clr-namespace:MauiTodoApp.Views.Contents"
             Title="TodoMainPage">
    <Grid IgnoreSafeArea="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="80"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Grid.RowSpan="2" ZIndex="0" x:Name="MainPageView">
            <Pages:FirstPage Grid.Row="0" Grid.RowSpan="2" ZIndex="0"/>
        </Grid>
        <Grid  Grid.Row="1" ZIndex="1">
            <!-- 添加x:Name用于后台引用 -->
            <contents:BottomBar x:Name="MainBottomBar"/>
        </Grid>
    </Grid>
</ContentPage>

3. 实现主页面的页面切换逻辑 #

修改TodoMainPage.xaml.cs，初始化四个页面实例，订阅BottomBar的事件完成切换：

namespace MauiTodoApp.Views;

public partial class TodoMainPage : ContentPage
{
    // 提前创建四个页面实例，避免重复初始化
    private readonly List<ContentView> _pages;

    public TodoMainPage()
    {
        InitializeComponent();
        // 初始化页面列表，需自行创建SecondPage、ThirdPage、FourthPage
        _pages = new List<ContentView>
        {
            new Pages.FirstPage(),
            new Pages.SecondPage(),
            new Pages.ThirdPage(),
            new Pages.FourthPage()
        };
        // 订阅BottomBar的点击事件
        MainBottomBar.PageTapped += OnPageTapped;
    }

    private void OnPageTapped(object? sender, int pageIndex)
    {
        // 替换MainPageView的Content为对应页面
        MainPageView.Content = _pages[pageIndex];
    }
}

4. 创建其他页面（示例） #

需补充另外三个页面的ContentView，比如SecondPage.xaml：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiTodoApp.Views.Pages.SecondPage">
    <Grid Background="#e5e7eb">
        <Label Text="第二个页面" 
               FontSize="30" 
               HorizontalOptions="Center" 
               VerticalOptions="Center"/>
    </Grid>
</ContentView>

补充说明 #

• 提前创建页面实例可提升切换性能，避免重复初始化
• 如需添加切换动画，可通过VisualStateManager或Animation类实现
• 可根据需求修改事件传递参数，比如传递页面类型而非索引，提升灵活性

内容的提问来源于stack exchange，提问作者Sean Wang