Mr.Foster Posts - Answer Overflow

Mr.Foster

•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

Gaming

Programming