.NET MAUI Shell自定义ItemTemplate绑定失效，菜单无显示项

我在MAUI项目中尝试为Shell对象创建自定义ItemTemplate，但设置完成后菜单中的项完全不显示，呈现空菜单：

以下是我的相关代码：

AppShell.xaml.cs #

using AppStockAndOrdersMAUI.Views.Orders;
using CommunityToolkit.Maui.Markup;

namespace AppStockAndOrdersMAUI;

public partial class AppShell : Shell
{
    public AppShell()
    {
        Items.Add(new ShellContent()
        {
            Title = "Home",
            ContentTemplate = new DataTemplate(() => new MainPage()),
            Route = nameof(MainPage)
        });
        
        Items.Add(new ShellContent()
        {
            Title = "Orders",
            ContentTemplate = new DataTemplate(() => new OrdersListPage()),
            Route = nameof(OrdersListPage)
        });

        ItemTemplate = new DataTemplate(() => new Label().Bind(Label.TextProperty, "Title"));
        
        Routing.RegisterRoute(nameof(OrdersListPage), typeof(OrdersListPage));
    }
}

AppShell.xaml #

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="AppStockAndOrdersMAUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AppStockAndOrdersMAUI"
    Title="AppStockAndOrdersMAUI">
        

</Shell>

我还尝试过绑定nameof(ShellContent.Title)，但结果依然是空白菜单：

ItemTemplate = new DataTemplate(() => new Label().Bind(Label.TextProperty, nameof(ShellContent.Title)));

解决方案 #

问题核心是：Shell菜单渲染时的绑定上下文是ShellItem，而非直接的ShellContent，而ShellItem不会自动继承ShellContent的Title属性，直接绑定Title会因找不到对应属性导致菜单空白。

以下是几种可行的解决方式：

方式1：绑定到Route属性

如果可以接受用路由名称作为菜单文本，直接绑定Route即可：

ItemTemplate = new DataTemplate(() => new Label().Bind(Label.TextProperty, "Route"));

方式2：显式创建ShellItem并设置Title

将ShellContent包裹在ShellItem中，显式为ShellItem设置Title，再绑定该属性：

public AppShell()
{
    // 创建Home项
    var homeShellItem = new ShellItem
    {
        Title = "Home",
        Items = 
        {
            new ShellContent()
            {
                ContentTemplate = new DataTemplate(() => new MainPage()),
                Route = nameof(MainPage)
            }
        }
    };

    // 创建Orders项
    var ordersShellItem = new ShellItem
    {
        Title = "Orders",
        Items = 
        {
            new ShellContent()
            {
                ContentTemplate = new DataTemplate(() => new OrdersListPage()),
                Route = nameof(OrdersListPage)
            }
        }
    };

    Items.Add(homeShellItem);
    Items.Add(ordersShellItem);

    // 绑定ShellItem的Title
    ItemTemplate = new DataTemplate(() => new Label().Bind(Label.TextProperty, "Title"));

    Routing.RegisterRoute(nameof(OrdersListPage), typeof(OrdersListPage));
}

方式3：使用XAML定义ItemTemplate（推荐）

直接在XAML中配置Shell的内容和ItemTemplate，MAUI会自动处理ShellContent到ShellItem的属性传递，代码更简洁易维护：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="AppStockAndOrdersMAUI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:AppStockAndOrdersMAUI"
    xmlns:orders="clr-namespace:AppStockAndOrdersMAUI.Views.Orders"
    Title="AppStockAndOrdersMAUI">

    <!-- 自定义ItemTemplate -->
    <Shell.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding Title}" />
        </DataTemplate>
    </Shell.ItemTemplate>

    <!-- 定义Shell内容 -->
    <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
    <ShellContent Title="Orders" ContentTemplate="{DataTemplate orders:OrdersListPage}" Route="OrdersListPage" />
</Shell>

这种方式下，无需在后台代码中手动添加Items和设置ItemTemplate，XAML会自动完成绑定，菜单文本正常显示。

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