在UWP C#中基于字符串列表运行时动态构建WinUI NavigationViewItem元素

没问题，在WinUI 3里实现动态构建NavigationViewItem子项其实很简单，我给你两种常用的方案，你可以根据自己的项目情况选择：

这种方式直接在C#代码里创建所有元素，适合快速实现或者不需要复杂数据逻辑的场景。

你可以在页面的构造函数、Loaded事件或者其他合适的地方编写以下代码：

using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml;

private void BuildAnimeNavigationItems()
{
    // 你的数据源集合
    List<string> animeList = new() { "Current", "Planning", "Paused", "Dropped", "Custom List" };

    // 创建父级NavigationViewItem
    var parentNavItem = new NavigationViewItem
    {
        Content = "Anime List",
        Name = "animeList"
    };

    // 设置父项的图标，和你硬编码的XAML保持一致
    parentNavItem.Icon = new FontIcon
    {
        Glyph = "\uE29B",
        Style = (Style)Application.Current.Resources["FontIconStyle"]
    };

    // 遍历集合，逐个创建子NavigationViewItem并添加到父项的MenuItems中
    foreach (var listName in animeList)
    {
        var childItem = new NavigationViewItem
        {
            Content = listName
        };
        parentNavItem.MenuItems.Add(childItem);
    }

    // 最后把父项添加到你的NavigationView的MenuItems集合里
    // 假设你的NavigationView控件的Name是MainNavView
    MainNavView.MenuItems.Add(parentNavItem);
}

如果你的项目遵循MVVM设计模式，或者希望UI和数据逻辑分离，那数据绑定的方式会更优雅，也更易于维护。

第一步：准备数据源（ViewModel） #

你可以创建一个简单的实体类（或者直接用List<string>，实体类方便后续扩展）：

using System.Collections.ObjectModel;

// 可选：如果需要扩展更多属性（比如图标、导航路径），可以用这个类
public class AnimeListEntry
{
    public string DisplayName { get; set; }
}

// 在你的页面ViewModel中定义可观察集合（用ObservableCollection可以自动更新UI）
public class YourPageViewModel
{
    public ObservableCollection<AnimeListEntry> AnimeLists { get; } = new()
    {
        new AnimeListEntry { DisplayName = "Current" },
        new AnimeListEntry { DisplayName = "Planning" },
        new AnimeListEntry { DisplayName = "Paused" },
        new AnimeListEntry { DisplayName = "Dropped" },
        new AnimeListEntry { DisplayName = "Custom List" }
    };
}

第二步：在XAML中绑定数据 #

先确保页面的DataContext已经设置为你的ViewModel，比如在页面构造函数里：

public MainPage()
{
    this.InitializeComponent();
    this.DataContext = new YourPageViewModel();
}

然后修改XAML，给父级NavigationViewItem设置MenuItemsSource和ItemTemplate：

<winui:NavigationView x:Name="MainNavView">
    <!-- 父级NavigationViewItem，和硬编码结构一致 -->
    <winui:NavigationViewItem Content="Anime List" x:Name="animeList">
        <winui:NavigationViewItem.Icon>
            <FontIcon Glyph="&#xE29B;" Style="{StaticResource FontIconStyle}"/>
        </winui:NavigationViewItem.Icon>
        <!-- 绑定子项数据源 -->
        <winui:NavigationViewItem.MenuItemsSource>
            <Binding Path="AnimeLists"/>
        </winui:NavigationViewItem.MenuItemsSource>
        <!-- 指定子项的UI模板 -->
        <winui:NavigationViewItem.ItemTemplate>
            <DataTemplate x:DataType="local:AnimeListEntry">
                <winui:NavigationViewItem Content="{x:Bind DisplayName}"/>
            </DataTemplate>
        </winui:NavigationViewItem.ItemTemplate>
    </winui:NavigationViewItem>
</winui:NavigationView>

补充说明 #

• 如果不需要扩展属性，直接绑定List<string>也是可以的，此时ItemTemplate里的绑定路径可以写成{x:Bind}（因为字符串本身就是绑定值）。
• 使用ObservableCollection而不是普通List的好处是，当集合中的数据发生变化时（比如新增、删除项），UI会自动更新。

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