x:将 ViewModel RelayCommand 绑定到 DataTemplate 中的命令答案

【问题标题】：x:Bind ViewModel RelayCommand to a command inside DataTemplatex:将 ViewModel RelayCommand 绑定到 DataTemplate 中的命令
【发布时间】：2021-10-25 17:57:11
【问题描述】：

我正在尝试在 DataTemplate 中使用 x:Bind 从我的视图模型中绑定 IAsyncRelayCommand（MVVM 工具包）。

这是我的视图模型：

public class BuildingViewModel : ObservableObject
{
    public ObservableCollection<ObservableProjectItem> ProjectItems { get; } = new ObservableCollection<ObservableProjectItem>();

    public IAsyncRelayCommand AddProjectItemCommand { get; }

    public BuildingViewModel()
    {
        AddProjectItemCommand = new AsyncRelayCommand<ContentDialog>(async (dialog) => await AddProjectItem(dialog));
    }

    private async Task AddProjectItem(ContentDialog dialog)
    {
        // Do something
    }
}

这是我的观点 (XAML)：

<TreeView ItemsSource="{x:Bind ViewModel.ProjectItems}">
    <TreeView.ItemTemplate>
        <DataTemplate x:DataType="model:ObservableProjectItem">
            <TreeViewItem ItemsSource="{x:Bind Children}">
                <TextBlock Text="{x:Bind Name}" />
                <TreeViewItem.ContextFlyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Command="{HERE I WANT BIND THE COMMAND}" />
                        <MenuFlyoutItem Text="Löschen" Icon="Delete" />
                    </MenuFlyout>
                </TreeViewItem.ContextFlyout>
            </TreeViewItem>
        </DataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

视图后面有以下代码：

public sealed partial class BuildingView : Page
{
    public BuildingView()
    {
        this.InitializeComponent();
    }

    internal BuildingViewModel ViewModel = Ioc.Default.GetService<BuildingViewModel>();
}

我的问题是{x:Bind ViewModel.AddProjectItemCommand} 不起作用。在 DataTemplate 中，x:Bind 范围是 ObservableProjectItem。如何导航到我的根 ViewModel 分别绑定我在视图模型中声明的命令？

【问题讨论】：

标签： c# xaml mvvm winui

【解决方案1】：

不幸的是，x:Bind 不能很好地支持这类操作（有关更多上下文，请参阅this WinUI issue）。但是，您可以使用Binding 来解决该问题。为此，您需要在页面上设置 x:Name 并使用 ElementName 属性：

<Page x:Name="MyPage">
    <TreeView ItemsSource="{x:Bind ViewModel.ProjectItems}">
        <TreeView.ItemTemplate>
            <DataTemplate x:DataType="model:ObservableProjectItem">
                <TreeViewItem ItemsSource="{x:Bind Children}">
                    <TextBlock Text="{x:Bind Name}" />
                    <TreeViewItem.ContextFlyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Command="{Binding Path=AddProjectItemCommand, ElementName=MyPage}" />
                            <MenuFlyoutItem Text="Löschen" Icon="Delete" />
                        </MenuFlyout>
                    </TreeViewItem.ContextFlyout>
                </TreeViewItem>
            </DataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</Page>

【讨论】：