如何在Xamarin.Forms Shell页面的导航栏中显示视图？

方法一：页面级自定义TitleView #

直接在目标ContentPage的XAML中设置TitleView属性，就能把任意视图嵌入导航栏：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.YourPage">
    <!-- 导航栏自定义视图 -->
    <ContentPage.TitleView>
        <StackLayout Orientation="Horizontal" HorizontalOptions="End" Spacing="15" Padding="0,0,10,0">
            <Label Text="自定义标签" TextColor="White" FontSize="Medium" />
            <Button Text="点击操作" TextColor="White" BackgroundColor="Transparent" />
        </StackLayout>
    </ContentPage.TitleView>

    <!-- 页面主体内容 -->
    <StackLayout Padding="20">
        <!-- 这里放页面的其他控件 -->
    </StackLayout>
</ContentPage>

方法二：全局统一配置导航栏视图 #

如果多个页面需要相同的导航栏视图，可在AppShell.xaml中全局设置，页面级的TitleView会自动覆盖全局配置：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="YourApp.AppShell">
    <!-- 全局导航栏视图 -->
    <Shell.TitleView>
        <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="10">
            <Label Text="全局导航标题" TextColor="White" HorizontalOptions="Start" />
            <Button Text="设置" HorizontalOptions="End" TextColor="White" BackgroundColor="Transparent" />
        </StackLayout>
    </Shell.TitleView>

    <!-- Shell的导航结构 -->
    <FlyoutItem Title="首页">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
    </FlyoutItem>
</Shell>

方法三：平台级自定义（高级场景） #

如果需要更深度的平台定制，比如适配Android Toolbar或iOS NavigationBar的特殊样式，可以用自定义渲染器。以Android为例，创建Toolbar的渲染器来添加视图：

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace YourApp.Droid.Renderers
{
    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
        {
            return new CustomToolbarAppearanceTracker();
        }
    }

    public class CustomToolbarAppearanceTracker : IShellToolbarAppearanceTracker
    {
        public void Dispose() { }

        public void ResetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
        {
            // 重置样式
        }

        public void SetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
        {
            // 在这里给Toolbar添加自定义视图
            var customView = new TextView(MainActivity.Instance)
            {
                Text = "自定义平台视图",
                TextColor = Android.Graphics.Color.White
            };
            toolbar.AddView(customView);
        }
    }
}

你的初始化代码MainPage = new AppShell();无需修改，所有导航栏的视图配置都通过上述方式完成。

内容的提问来源于stack exchange，提问作者rara rarara