Add Button in DataTemplate in CollectionView .netMaui

Question

I want to add a Button in my CollectionView for each Item. I work with MVVM and want also pass the CommandParameter of the Item. My idea solution is this one:

 <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid HeightRequest="30" WidthRequest="1000" HorizontalOptions="FillAndExpand" x:DataType="model:Schueler" Margin="10,5,10,5">
                            <Button Text="Edit" Command="{Binding Source={Binding Source={RelativeSource AncestorType={x:Type viewmodels:ManagePeopleViewModel}}, Path=EditCommand}}" CommandParameter="{Binding .}"/>
                            <Button Text="Löschen" Command="{Binding Source={Binding Source={RelativeSource AncestorType={x:Type viewmodels:ManagePeopleViewModel}}, Path=DeleteCommand}}" CommandParameter="{Binding .}"/>
                        </Grid>
                    </DataTemplate>
 </CollectionView.ItemTemplate>

My ViewModel

public Command LoadCommand { get; set; }
public Command EditCommand { get; set; }
this.EditCommand = new Command((value) =>
{
     OnEditClicked((Schueler)value);
     });
 this.DeleteCommand = new Command((value) =>
 {
      OnDeleteClicked((Schueler)value);
      });

Thanks for helping me.

We have no idea what your VM looks like. But “Binding Source={Binding Source…” is obviously invalid syntax — Jason, Dec 27 '22 at 20:55
https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/data-binding/relative-bindings?view=net-maui-7.0 — Jason, Dec 27 '22 at 21:18

score 1 · Answer 1 · answered Dec 28 '22 at 02:30

Yes,you can use Relative bindings to achieve this.

There is a sample, you can refer to the following code:

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiCollectionApp.MainPage"
             xmlns:local="clr-namespace:MauiCollectionApp"
             x:Name="myPage"
             >
    <ContentPage.BindingContext>
        <local:MyViewModel></local:MyViewModel>
    </ContentPage.BindingContext>

    <StackLayout Orientation="Vertical">

        <CollectionView  ItemsSource="{ Binding Data}" x:Name="mCollectionView"   VerticalOptions="FillAndExpand"
                    SelectionMode="Single"
                    >
            <CollectionView.ItemTemplate>
                <DataTemplate>

                    <HorizontalStackLayout  Margin="3"  HeightRequest="60">
                        <Label Text="{Binding Name}" BackgroundColor="Gray" WidthRequest="100"/>
                        <Label Text="{Binding Car.Make}" Margin="5,0,5,0"  WidthRequest="120"/>

                        <Button Text="delete"  Margin="10,0,0,0"
                                BackgroundColor="Red"
                                Command="{Binding  Path= BindingContext.RemoveEquipmentCommand,Source={Reference mCollectionView }}"  CommandParameter="{Binding .}"  
                                 />
                    </HorizontalStackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

MyViewModel.cs

public class MyViewModel: INotifyPropertyChanged 
{
    public  ObservableCollection<MyModel> Data { get; set; }

    public ICommand RemoveEquipmentCommand => new Command<MyModel>(ReMoveItem);

    public ICommand AddItemCommand => new Command(AddItems);

    private void AddItems()
    {
        Data.Add(new MyModel { Name = "model_9", Car = new Vehicle { Make = "Make9" } });
        Data.Add(new MyModel { Name = "model_10", Car = new Vehicle { Make = "Make10" } });
        Data.Add(new MyModel { Name = "model_11", Car = new Vehicle { Make = "Make11" } });
        Data.Add(new MyModel { Name = "model_12", Car = new Vehicle { Make = "Make12" } });
    }

    private void ReMoveItem(MyModel obj)
    {
        System.Diagnostics.Debug.WriteLine(" the selected item's name  is:  " + obj.Name   );

        Data.Remove(obj);
    }

    public MyViewModel() {
        Data = new ObservableCollection<MyModel>();

        Data.Add(new MyModel { Name ="model_1", Car= new Vehicle {Make="Make1" } });
        Data.Add(new MyModel { Name = "model_2", Car = new Vehicle { Make = "Make2" } });
        Data.Add(new MyModel { Name = "model_3", Car = new Vehicle { Make = "Make3" } });
        Data.Add(new MyModel { Name = "model_4", Car = new Vehicle { Make = "Make4" } });
        Data.Add(new MyModel { Name = "model_5", Car = new Vehicle { Make = "Make5" } });
        Data.Add(new MyModel { Name = "model_6", Car = new Vehicle { Make = "Make6" } });
        Data.Add(new MyModel { Name = "model_7", Car = new Vehicle { Make = "Make7" } });
        Data.Add(new MyModel { Name = "model_8", Car = new Vehicle { Make = "Make8" } });

    }

    bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
    {
        if (Object.Equals(storage, value))
            return false;

        storage = value;
        OnPropertyChanged(propertyName);
        return true;
    }

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

it's perfect answer – hamid reza shahshahani Aug 25 '23 at 23:13 — hamid reza shahshahani, Aug 25 '23 at 23:13

Add Button in DataTemplate in CollectionView .netMaui

1 Answers1