在菜单栏中创建 WinUI3/MVVM 最近使用 (MRU) 列表答案

【问题标题】：Create WinUI3/MVVM Most Recently Used (MRU) List in Menu Bar在菜单栏中创建 WinUI3/MVVM 最近使用 (MRU) 列表
【发布时间】：2023-01-06 22:14:15
【问题描述】：

我想在我的 Windows 应用程序菜单栏中创建一个经典的“最近文件”列表（类似于 Visual Studio's menu bar -> 文件 -> 最近文件 -> 查看最近文件列表）

MRU 列表 (List < string > myMRUList...) 是已知的，不是这个问题的重点。问题是如何根据 MVVM 规则显示和绑定/交互列表。

Microsoft.Toolkit.Uwp.UI.Controls 的Menu class 将在未来的版本中删除，他们建议使用 WinUI 中的 MenuBar 控件。我还没有找到任何使用 WinUI 的 MenuBar 创建“最近文件”列表的示例。

我正在使用 Template Studio 创建一个 WinUI 3 应用程序。在我添加的 ShellPage.xaml 中

<MenuFlyoutSubItem x:Name="mruFlyout" Text="Recent Files"></MenuFlyoutSubItem>

在 ShellPage.xaml.c 中

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        mruFlyout.Items.Insert(mruFlyout.Items.Count, new MenuFlyoutItem(){ Text = "C:\\Test1_" + DateTime.Now.ToString("MMMM dd") } );
        mruFlyout.Items.Insert(mruFlyout.Items.Count, new MenuFlyoutItem(){ Text = "C:\\Test2_" + DateTime.Now.ToString("MMMM dd") } );
        mruFlyout.Items.Insert(mruFlyout.Items.Count, new MenuFlyoutItem(){ Text = "C:\\Test3_" + DateTime.Now.ToString("MMMM dd") } );
    }

知道这不是 MVVM，但即使这种方法也不能正常工作，因为动态生成的 MenuFlyoutItem 只能通过 Button_Click() 事件更新一次。

谁能给我一个例子，如何创建“最近的文件”功能，但任何帮助都会很棒！谢谢

【问题讨论】：

标签： mvvm menubar winui mru

【解决方案1】：

一种解决方案是让您的 ViewModel 提供最近文件的集合（如果我理解正确的话，您已经拥有这些文件），然后使用转换器将您的 VM 映射到 UI 元素：

public class RecentItemsToFlyoutItemsConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if(value is List<Item> list)
        {
            return list.Select(entry =>
                new MenuFlyoutItem()
                {
                    Text = entry.Name
                }
            );
        }
        else
        {
            return null;
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

在您的 XAML 代码中，您可以执行以下操作：

<Page.Resources>
    <local:RecentItemsToFlyoutItemsConverter x:Key="FlyoutConverter"/>
</Page.Resources>

<MenuFlyoutSubItem x:Name="mruFlyout" Text="Recent Files" 
    Items={Binding RecentItems, Converter={StaticResource FlyoutConverter}}>
</MenuFlyoutSubItem>

【讨论】：