UnoPlatoform桌面应用程序DataGrid模板列与使用MVVM的HyperlinkButton命令绑定问题

Question

我们正在使用UnoPlatform开发桌面应用程序，其中我们使用CommunityToolkit.WinUI.UI.Controls中的DataGrid来显示一些数据。

因此，我的要求是为其中一个DataGrid列提供HyperlinkButton，并使用下面代码中所示的DataTemplate来实现该功能。

这里的问题是如何将ViewModel中的命令绑定到HyperlinkButton单击/命令事件？

DataGrid ItemSource绑定到ViewModel中的GridData可观察集合。

我正在尝试将My StorageAccountViewModel中的ChildItemInvokedCommand绑定到HyperlinkButton命令，但这不起作用。

我在这里错过了什么？如有任何帮助，我们将不胜感激。

视图模型：

public partial class StorageAccountViewModel : ObservableObject
{
public ObservableCollection<ChildFolder> GridData { get; } = new ObservableCollection<ChildFolder>();
private IAsyncRelayCommand _childItemInvokedCommand;
public IAsyncRelayCommand ChildItemInvokedCommand => _childItemInvokedCommand ?? (_childItemInvokedCommand = new AsyncRelayCommand<ChildFolder>(OnChildItemInvoked));
private async Task OnChildItemInvoked(ChildFolder item)
{
// get clicked item here for further functionality
}
}

ChildFolder.cs

public class ChildFolder
{
[JsonProperty("folderName")]
public string FolderName { get; set; }
[JsonProperty("folderPath")]
public string FolderPath { get; set; }        
}

页面.xamal:

<Page
x:Class="MDTSStorageExplorer.Views.StorageAccountsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MDTSStorageExplorer.Views"
xmlns:models="using:MDTSStorageExplorer.Models"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<controls:DataGrid
x:Uid="DataTable"
x:Name="detailGrid"
AutoGenerateColumns="False"
GridLinesVisibility="None" 
DataContext="{x:Bind ViewModel}"
ItemsSource="{x:Bind ViewModel.GridData}" >
<controls:DataGrid.Columns>
<controls:DataGridTemplateColumn Header="Name" >
<controls:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<HyperlinkButton Content="{Binding FolderName}" IsDoubleTapEnabled="True" CommandParameter="{Binding}" Command="{Binding Path=ChildItemInvokedCommand}" >

</HyperlinkButton>
</DataTemplate>
</controls:DataGridTemplateColumn.CellTemplate>
</controls:DataGridTemplateColumn>
</controls:DataGrid.Columns>
</controls:DataGrid>
</Grid>
</Page>

Answer 1

问题

您的HyperlinkButton的DataContext属于ChildFolder类型。ChildFolder不具有名为ChildItemInvokedCommand的属性。因此，绑定Command="{Binding Path=ChildItemInvokedCommand}"是无效的。

解决方案

您可以创建ItemViewModels的集合，而不是使用ChildFolder的集合。您可以按如下方式定义项目。

public class ChildFolderItemViewModel
{
public ChildFolder ChildFolder { get; set;}
public StorageAccountViewModel ParentViewModel { get; set; }
}
// Then update your GridData to use the new type.
public ObservableCollection<ChildFolderItemViewModel> GridData { get; } = new ObservableCollection<ChildFolderItemViewModel>();

然后，您可以按如下方式更新绑定。

<HyperlinkButton Content="{Binding ChildFolder.FolderName}"
IsDoubleTapEnabled="True"
CommandParameter="{Binding ChildFolder}"
Command="{Binding ParentViewModel.ChildItemInvokedCommand}" />