Home > Net >  RelativeSource in MAUI control not bound
RelativeSource in MAUI control not bound

Time:08-20

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?

CodePudding user response:

try this

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

where myPage is your page's name

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

CodePudding user response:

Resolved,

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

  • Related