如何为Xamarin.Forms所有页面集成自定义导航标题栏并解决动态改标题失效问题

问题根源梳理 #

• App构造函数的逻辑仅在应用启动时执行1次，后续页面切换不会触发标题更新，且初始导航栈只有登录页，switch分支完全无法匹配
• 全局资源中定义的Label不能直接通过x:Name在App.xaml.cs中访问，且单个视觉元素不能被多个页面同时作为TitleView使用，会导致父级冲突
• page.ToString()返回的是类的完整命名空间名（如SmartEntry.DashBoard），不是你写的xxx.xaml，所有case匹配失败
• XAML中混用C#语法设置Shell.TitleView，且拼写错误Lable应为Label，同时你用了NavigationPage作为根容器，Shell附加属性默认不生效

解决方案 #

方案1：用Shell全局统一配置（推荐，符合你用Shell的需求） #

1. 首先添加AppShell类作为应用根页面，全局定义TitleView：

<!-- AppShell.xaml -->
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:SmartEntry"
       x:Class="SmartEntry.AppShell">
    <Shell.TitleView>
        <Label x:Name="TitleLabel" TextColor="White" 
               HorizontalOptions="Start" VerticalOptions="Center"/>
    </Shell.TitleView>
    <!-- 配置你的页面路由 -->
    <ShellContent ContentTemplate="{DataTemplate local:LoginPage1}" Route="Login"/>
    <ShellContent ContentTemplate="{DataTemplate local:DashBoard}" Route="DashBoard"/>
    <ShellContent ContentTemplate="{DataTemplate local:WifiSettings1}" Route="WifiSettings"/>
    <!-- 其他页面依次添加即可 -->
</Shell>

2. 修正App.xaml.cs的根页面配置，监听页面切换事件更新标题：

public App()
{
    InitializeComponent();
    // 替换为Shell作为根页面
    MainPage = new AppShell();
    // 监听全局页面切换事件
    Shell.Current.Navigated += (s, e) =>
    {
        var currentPage = Shell.Current.CurrentPage;
        var pageName = currentPage.GetType().Name;
        var titleLabel = (Shell.Current as AppShell).TitleLabel;
        switch(pageName)
        {
            case nameof(DashBoard):
                titleLabel.Text = "DASHBOARD";
                break;
            case nameof(GenerateBarcode):
                titleLabel.Text = "WIFI SETTINGS";
                break;
            case nameof(ManageDevice):
                titleLabel.Text = "ADD DEVICE";
                break;
            case nameof(MyProfile):
                titleLabel.Text = "MY PROFILE";
                break;
            case nameof(RegistrationUser):
                titleLabel.Text = "MEMBER REGISTRATION";
                break;
            case nameof(WifiSettings1):
                titleLabel.Text = "WIFI SETTINGS";
                break;
            default:
                titleLabel.Text = "";
                break;
        }
    };
}

3. 删掉各个页面里自行编写的Shell.TitleView赋值逻辑，同时删掉App.xaml里全局资源的Label定义即可。

方案2：保留NavigationPage的兼容方案 #

如果你不想改动现有NavigationPage结构，可以直接用系统自带的Title属性实现：

1. 在每个页面的构造函数里直接赋值Title：

// DashBoard.xaml.cs 构造函数示例
public DashBoard()
{
    InitializeComponent();
    Title = "DASHBOARD";
}

2. 在App.xaml里全局配置导航栏样式：

<Application.Resources>
    <Style TargetType="NavigationPage">
        <Setter Property="BarBackgroundColor" Value="#你需要的导航栏颜色"/>
        <Setter Property="BarTextColor" Value="White"/>
    </Style>
</Application.Resources>

无需自定义TitleView即可实现需求，逻辑更简洁。

内容的提问来源于stack exchange，提问作者Gajjar Shalin