Xamarin Forms Handling Itemtapped And Selectionchanged Complete Guide

Step-by-Step Guide

Step 1: Create a New Xamarin.Forms Project

1. Open Visual Studio.
2. Create a new Xamarin.Forms project.
3. Choose the appropriate project template (e.g., Blank App).

Step 2: Create a Model

We will use a simple model to represent the items in the list.

// Models/Item.cs
public class Item
{
    public string Name { get; set; }
}

Step 3: Create a ViewModel

The ViewModel will hold the collection of items and manage the selected item.

// ViewModels/MainViewModel.cs
using System.Collections.ObjectModel;
using System.Windows.Input;
using Xamarin.Forms;

public class MainViewModel
{
    public ObservableCollection<Item> Items { get; set; }

    public MainViewModel()
    {
        Items = new ObservableCollection<Item>
        {
            new Item { Name = "Item 1" },
            new Item { Name = "Item 2" },
            new Item { Name = "Item 3" },
            new Item { Name = "Item 4" }
        };
    }

    private Item _selectedItem;
    public Item SelectedItem
    {
        get => _selectedItem;
        set
        {
            _selectedItem = value;
            SelectedItemChanged?.Invoke(this, value);
        }
    }

    public event EventHandler<Item> SelectedItemChanged;
}

Step 4: Set Up the XAML Page

Add a ListView to your main XAML page and bind its ItemsSource to the Items collection in the ViewModel. Also, bind the SelectedItem property in the ViewModel to handle SelectionChanged.

<!-- 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"
             xmlns:local="clr-namespace:YourNamespace.Models"
             x:Class="YourNamespace.MainPage"
             Title="ListView Example">
    <ContentPage.BindingContext>
        <local:MainViewModel />
    </ContentPage.BindingContext>
    <StackLayout Padding="10">
        <Label Text="Select an Item" FontSize="Medium" />

        <ListView x:Name="ItemsListView"
                  ItemsSource="{Binding Items}"
                  SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                  ItemTapped="ItemsListView_ItemTapped">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Name}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
                
        <Button Text="Clear Selection"
                Clicked="ClearSelectionButton_Clicked"
                IsEnabled="{Binding SelectedItem, Converter={StaticResource NullToBooleanConverter}}" />

        <Label x:Name="SelectedItemLabel"
               Text="Selected Item: "
               FontSize="Medium"
               Margin="0,20,0,0" />
    </StackLayout>
</ContentPage>

Step 5: Handle Events in the Code-Behind

Write the event handlers for ItemTapped and handle the SelectedItemChanged event in the code-behind.

// MainPage.xaml.cs
using System;
using YourNamespace.ViewModels;
using Xamarin.Forms;

namespace YourNamespace
{
    public partial class MainPage : ContentPage
    {
        private readonly MainViewModel _viewModel;

        public MainPage()
        {
            InitializeComponent();
            _viewModel = (MainViewModel)BindingContext;
            _viewModel.SelectedItemChanged += ViewModel_SelectedItemChanged;
        }

        private void ItemsListView_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            ((ListView)sender).SelectedItem = null; // Clear selection after tapped
        }

        private void ClearSelectionButton_Clicked(object sender, EventArgs e)
        {
            _viewModel.SelectedItem = null;
        }

        private void ViewModel_SelectedItemChanged(object sender, YourNamespace.Models.Item item)
        {
            if (item != null)
            {
                SelectedItemLabel.Text = $"Selected Item: {item.Name}";
            }
            else
            {
                SelectedItemLabel.Text = "Selected Item: ";
            }
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
            _viewModel.SelectedItemChanged -= ViewModel_SelectedItemChanged;
        }
    }
}

Step 6: Handle Null to Boolean Conversion (Optional)

If you want to enable or disable the "Clear Selection" button based on the selection, you can create a value converter.

// Converters/NullToBooleanConverter.cs
using System;
using System.Globalization;
using Xamarin.Forms;

public class NullToBooleanConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value != null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Register this converter in your XAML resources: