C
C#•2y ago
Mr.Foster

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.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?