WinUI 3.0自定义NavigationViewItem内容：绑定后按钮消失问题

问题根源 #

你同时用了两种添加导航项的方式：手动在NavigationView.MenuItems里加NavigationViewItem，又通过MenuItemsSource绑定数据源。这两种方式互斥，设置MenuItemsSource后，手动添加的项会被数据源自动生成的NavigationViewItem覆盖，而且手动项的绑定上下文没关联到数据源里的Item对象，最终导致你定义的按钮无法显示。

解决方法 #

用MenuItemTemplate定义数据源生成的每个NavigationViewItem的内容布局，替代手动添加项的方式。

修改后的XAML代码：

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <NavigationView x:Name="TestNavigationView" 
                   PaneDisplayMode="LeftMinimal" 
                   IsSettingsVisible="False" 
                   IsBackButtonVisible="Collapsed">
        <!-- 定义每个导航项的模板 -->
        <NavigationView.MenuItemTemplate>
            <DataTemplate x:DataType="local:Item">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
                    <Button Margin="8, 0, 0, 0" Content="Btn" />
                </StackPanel>
            </DataTemplate>
        </NavigationView.MenuItemTemplate>
    </NavigationView>
</Window>

修改后的C#代码：

namespace Test
{
    public class Item
    {
        public string Name { get; set; }
    }

    public sealed partial class MainWindow : Window
    {
        public ObservableCollection<Item> Items { get; } = new ObservableCollection<Item>();
        
        public MainWindow()
        {
            this.InitializeComponent();
            this.DataContext = this;
            TestNavigationView.MenuItemsSource = Items;

            Items.Add(new Item { Name = "Test1" });
            Items.Add(new Item { Name = "Test2" });
        }
    }
}

关键说明 #

• MenuItemTemplate指定了数据源中每个Item对应的UI布局，每个生成的NavigationViewItem会自动套用这个模板
• x:DataType="local:Item"启用编译时绑定检查，避免属性名拼写错误
• 将数据源设为公共属性，确保绑定系统能正确访问

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