CODEWITHSUNDEEP
xamlmauimaui-community-toolkitcommunity-toolkit-mvvm
Andrija
Andrija

Reputation: 14483

RelativeSource in MAUI control not bound

I'm going through simple example explained in video:

https://youtu.be/5Qga2pniN78?t=961

At 16. minute (timestamp in link above), he implements the Delete Command on SwipeItem.

In my local project, everything worked so far, but Delete Command is never triggered. I checked source generators, DeleteCommand exists.

My 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="MauiApp1.MainPage"
             xmlns:viewmodel="clr-namespace:MauiApp1.ViewModel"
             x:DataType="viewmodel:MainViewModel">

    <Grid RowDefinitions="100, Auto, *"
          ColumnDefinitions=".75*, .25*"
          Padding="10"
          RowSpacing="10"
          ColumnSpacing="10">

        <Image Grid.ColumnSpan="2" Source="tom.jpg"
               BackgroundColor="Transparent"></Image>

        <Entry Placeholder="Enter task" Grid.Row="1" Text="{Binding Text}"></Entry>

        <Button Text="Add" Grid.Row="1" Grid.Column="1" Command="{Binding AddCommand}"></Button>

        <CollectionView Grid.Row="2" Grid.ColumnSpan="2" ItemsSource="{Binding Items}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type x:String}">
                    <SwipeView>
                        <SwipeView.RightItems>
                            <SwipeItem Text="Delete" BackgroundColor="Red"
                                Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}}, Path=DeleteCommand}"
                                CommandParameter="{Binding .}">
                            </SwipeItem>
                        </SwipeView.RightItems>
                        <Grid Padding="0,5">
                            <Frame>
                                <Label Text="{Binding .}" FontSize="24"></Label>
                            </Frame>
                        </Grid>
                    </SwipeView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

View Model:

using System.Collections.ObjectModel;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace MauiApp1.ViewModel
{
    public partial class MainViewModel : ObservableObject
    {
        public MainViewModel()
        {
            Items = new();
            Items.Add("test");
        }

        [ObservableProperty]
        private ObservableCollection<string> items;

        [ObservableProperty]
        private string text;

        [RelayCommand]
        private void Add()
        {
            if (string.IsNullOrWhiteSpace(text))
            {
                return;
            }

            Items.Add(Text);

            Text = string.Empty;
        }

        [RelayCommand]
        private void Delete(string s)
        {
            if (Items.Contains(s))
            {
                Items.Remove(s);
            }
        }
    }
}

Why is DeleteCommand not triggering?

Upvotes: 3

Views: 3771

Answers (3)

o_w
o_w

Reputation: 683

AncestorType={x:Type viewmodel:MainViewModel}

Your viewmodel is not part of the visual tree, so you can't bind to it with relative source anyway.

You can use your CollectionView's Binding Context and then the specific property you need:

Command="{Binding BindingContext.DeleteCommand, Source={RelativeSource AncestorType={x:Type CollectionView}}}

Upvotes: 0

Andrija
Andrija

Reputation: 14483

Resolved,

I forgot to add <SwipeItems> element after <SwipeView.RightItems>.

Upvotes: 1

Jason
Jason

Reputation: 89154

try this

Command="{Binding BindingContext.DeleteCommand,
      Source={x:Reference myPage}}"

where myPage is your page's name

<ContentPage x:Name="myPage" ...

Upvotes: 7

Related Questions