如何在Xamarin Shell中实现用户名显示功能？

方法一：自定义侧边栏头部（FlyoutHeader）显示用户名 #

这是最常用的方式，适合在侧边栏顶部展示用户信息：

1. 创建自定义头部视图FlyoutHeaderView.xaml

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Views.FlyoutHeaderView">
    <StackLayout BackgroundColor="#1976D2" Padding="15,30,15,10">
        <Label Text="欢迎回来:" TextColor="White" FontSize="Medium"/>
        <Label x:Name="UserNameLabel" Text="" TextColor="White" FontSize="Large" FontAttributes="Bold"/>
    </StackLayout>
</ContentView>

2. 在视图后台代码添加设置用户名的方法

namespace YourApp.Views
{
    public partial class FlyoutHeaderView : ContentView
    {
        public FlyoutHeaderView()
        {
            InitializeComponent();
        }

        public void UpdateUserName(string userName)
        {
            UserNameLabel.Text = userName;
        }
    }
}

3. 在AppShell.xaml中引用该头部

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourApp.Views"
       x:Class="YourApp.AppShell">

    <Shell.FlyoutHeader>
        <local:FlyoutHeaderView/>
    </Shell.FlyoutHeader>

    <!-- 其他Shell配置 -->
</Shell>

4. 登录成功后更新用户名

// 登录逻辑完成后
var header = Shell.Current.FlyoutHeader as FlyoutHeaderView;
header?.UpdateUserName("登录用户的昵称");

方法二：在导航栏右侧显示用户名 #

如果需要在顶部导航栏展示用户名，可以用TitleView：

<Shell.TitleView>
    <StackLayout Orientation="Horizontal" HorizontalOptions="End" Margin="0,0,15,0">
        <Label Text="{Binding CurrentUserName}" TextColor="White" FontSize="Medium"/>
    </StackLayout>
</Shell.TitleView>

然后在ViewModel中实现属性绑定（需继承INotifyPropertyChanged）：

private string _currentUserName;
public string CurrentUserName
{
    get => _currentUserName;
    set
    {
        _currentUserName = value;
        OnPropertyChanged();
    }
}

// 登录后赋值
CurrentUserName = "登录用户的昵称";

方法三：绑定侧边栏菜单头部 #

如果想把用户名作为侧边栏菜单的主标题，直接绑定到FlyoutItem的Header属性：

<Shell.FlyoutItem Header="{Binding CurrentUserName}" Icon="user_icon.png">
    <ShellContent ContentTemplate="{DataTemplate local:HomePage}"/>
</Shell.FlyoutItem>

同样通过ViewModel的CurrentUserName属性动态更新即可。

内容的提问来源于stack exchange，提问作者Isawa Mac