C#•12mo ago

✅ Binding a RelayCommand in a CollectionView DataTemplate with an other object as DataType

So I have following setup: ViewModel as ObservableObject containing an ObservableCollection of an Object Called ToDo The VM also has 3 RelayCommands being Add, Remove and SetDone. The Add one works fine as it's a simple button outside of my viewcollection On my SwipeItems, I want the have the SetDone command from my VM and the Remove of my VM as binding.

<SwipeItem Text="Check" BackgroundColor="Green"
           Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:ToDoViewModel}}, Path=SetDone }" 
           CommandParameter="{Binding .}"/>
<SwipeItem Text="Delete"  BackgroundColor="Red"
           Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:ToDoViewModel}}, Path=Remove }"
           CommandParameter="{Binding . }"/>

<SwipeItem Text="Check" BackgroundColor="Green"
           Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:ToDoViewModel}}, Path=SetDone }" 
           CommandParameter="{Binding .}"/>
<SwipeItem Text="Delete"  BackgroundColor="Red"
           Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:ToDoViewModel}}, Path=Remove }"
           CommandParameter="{Binding . }"/>

This code is based on .Net's own video https://www.youtube.com/watch?v=5Qga2pniN78

dotnet

YouTube

.NET MAUI Data Binding with MVVM & XAML [5 of 8] | .NET MAUI for Be...

Learn more ➡️ https://learn.microsoft.com/training/paths/build-apps-with-dotnet-maui/ Welcome to the .NET MAUI for Beginners Series where you will learn the basics of building multi-platform apps with .NET MAUI for iOS, Android, macOS, and Windows from a shared C# code base. In this video, James introduces us to the MVVM (Model-View-ViewModel) ...

12 Replies

canton7•12mo ago

I've never liked RelativeSource for that. I tend to give the root view a name, then use ElementName:

<UserControl ... x:Name="root">
...
    <SwipeItem ... Command="{Binding DataContext.SetDone, ElementName=root}"/>

<UserControl ... x:Name="root">
...
    <SwipeItem ... Command="{Binding DataContext.SetDone, ElementName=root}"/>

TempticaOP•12mo ago

it doesn't seem to recognise ElementName

TempticaOP•12mo ago

canton7•12mo ago

Boo, must be a MAUI thing

TempticaOP•12mo ago

I'm afraid so

Subbz•12mo ago

Does setting the AncestorType to CollectionView and the Path to DataContext.SetDone work? I’ve used that in WPF but not sure on Maui

TempticaOP•12mo ago

I'm sorry I don't understand what you mean

Subbz•12mo ago

I just tested it, and it wouldn't work like I've done it in WPF. Are you using the MVVMCommunity Tookit? Either way, using [RelayCommand] from the toolkit wouldn't execute the command, using your binding code, but manually declaring the command did:

public IRelayCommand SetDone => new RelayCommand<TodoViewModel>(ExecuteSetDone);
public void ExecuteSetDone(TodoViewModel model)
{
    Application.Current.MainPage.DisplayAlert(model.Name, model.Name, "Cancel");
}

public IRelayCommand SetDone => new RelayCommand<TodoViewModel>(ExecuteSetDone);
public void ExecuteSetDone(TodoViewModel model)
{
    Application.Current.MainPage.DisplayAlert(model.Name, model.Name, "Cancel");
}

Actually I looked at it again just after posting that, and it will work with [RelayCommand], I forgot you have to bind it in XAML to SetDoneCommand and RemoveCommand respectively as that's what the commands are called when code is generated by the toolkit. If you change those in your XAML all should work.

TempticaOP•12mo ago

Yeah I am using the toolkit Let’s try

Subbz•12mo ago

Yeah so changing the Path from Path=SetDone to Path=SetDoneCommand should work

TempticaOP•12mo ago

omfg yeah so that solved it facepalm

Well Thank you very much for the help!

Subbz•12mo ago

Gaming

Programming

✅ Binding a RelayCommand in a CollectionView DataTemplate with an other object as DataType