C#•3y 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 . }"/>

<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

YouTubedotnet

.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) ...

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

canton7•11/26/23, 6:21 PM

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

ElementName

ElementName

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

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

TempticaOP•11/26/23, 6:23 PM

it doesn't seem to recognise ElementName

TempticaOP•11/26/23, 6:24 PM

canton7•11/26/23, 6:25 PM

Boo, must be a MAUI thing

TempticaOP•11/26/23, 6:28 PM

I'm afraid so

Subbz•11/27/23, 4:41 AM

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

SSubbz Does setting the AncestorType to CollectionView and the Path to DataContext.SetD...

TempticaOP•11/27/23, 9:17 AM

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

Subbz•11/27/23, 3:58 PM

I just tested it, and it wouldn't work like I've done it in WPF. Are you using the MVVMCommunity Tookit?

Subbz•11/27/23, 4:16 PM

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");
}

Subbz•11/27/23, 4:22 PM

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.

SSubbz I just tested it, and it wouldn't work like I've done it in WPF. Are you using ...

TempticaOP•11/27/23, 4:57 PM

Yeah I am using the toolkit

TempticaOP•11/27/23, 4:58 PM

Let’s try

Subbz•11/27/23, 4:59 PM

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

TempticaOP•11/27/23, 5:01 PM

omfg

TempticaOP•11/27/23, 5:01 PM

yeah so that solved it facepalm

Well Thank you very much for the help!

Subbz•11/27/23, 5:01 PM

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

Similar Threads

Similar Threads

Similar Threads