Mr.Foster
Mr.Foster
CC#
Created by Mr.Foster on 2/12/2024 in #help
WinUI 3 MVVM Trying to bind a command from one ViewModel in a DataTemplate where the DataType is DTO
Hello. I've been struggling to learn how to implement MVVM in WinUI 3, and right now I am facing an issue that I can't quite figure out. Firstly, I have this XAML code in MainViewControl.xaml:
<UserControl
x:Class="Sample.App.MainViewControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dto="using:Sample.DTO">

<ItemsRepeater ItemsSource="{x:Bind MainViewModel.Persons}">
<DataTemplate x:DataType="dto:PersonDTO">
<Grid>
<TextBlock>
<Run Text="{x:Bind LastName}"/>, <Run Text="{x:Bind FirstName}"/>
</TextBlock>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="Edit" Command="{x:Bind }" CommandParameter="{x:Bind}"/>
<Button Content="Delete"/>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsRepeater>

</UserControl>
<UserControl
x:Class="Sample.App.MainViewControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dto="using:Sample.DTO">

<ItemsRepeater ItemsSource="{x:Bind MainViewModel.Persons}">
<DataTemplate x:DataType="dto:PersonDTO">
<Grid>
<TextBlock>
<Run Text="{x:Bind LastName}"/>, <Run Text="{x:Bind FirstName}"/>
</TextBlock>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="Edit" Command="{x:Bind }" CommandParameter="{x:Bind}"/>
<Button Content="Delete"/>
</StackPanel>
</Grid>
</DataTemplate>
</ItemsRepeater>

</UserControl>
This code handles the one and only page that my application has. I want to implement the Edit feature so that I can update a selected person - the Edit button should display a ContentDialog in which I can edit the selected person's FirstName or LastName. This is the command that should create that dialog when the button is pressed:
[RelayCommand]
private async Task ShowEditPersonDialogAsync(PersonDTO personDTO)
{
var vm = new EditPersonViewModel(personDTO);
// Create a ContentDialog for editing the person
var editPersonDialog = new EditPersonDialog(vm);

// Show the ContentDialog and await the user's response
await editPersonDialog.ShowAsync();
LoadPersons();
}
[RelayCommand]
private async Task ShowEditPersonDialogAsync(PersonDTO personDTO)
{
var vm = new EditPersonViewModel(personDTO);
// Create a ContentDialog for editing the person
var editPersonDialog = new EditPersonDialog(vm);

// Show the ContentDialog and await the user's response
await editPersonDialog.ShowAsync();
LoadPersons();
}
The problem arises when I try to bind this command to the Edit button - when I try writing something like Command="{x:Bind ShowEditPersonDialogCommand}", the compiler doesn't recognize it. That's because the Grid that contains the persons and buttons is located within a DataTemplate, which uses my PersonDTO class. I need help figuring out how to bind my ShowEditPersonDialogCommand to the Edit button. I will provide more code as needed. Thank you in advance.
1 replies