Search code examples
c#uwpuwp-xamluwp-navigationuwp-c#

How to check which string resource of a ListItem in a ListView was clicked?


Is there a way to check the string resource of ListView item click rather than index of the ListView (which is often demonstrated in tutorials)? e.g. I have a ListView with 3 items: "Item A", "Item B" and "Item C". If the string resource of the clicked ListView item is "Item A", do something.

MainPage class

public sealed partial class MainPage : Page
{
    private List<ListItemMain> mainItems;

    public MainPage()
    {
        this.InitializeComponent();

        gridItemMains = MainItemManger.GetGridItems();
    }

    private void ListView_ItemClick(object sender, ItemClickEventArgs e)
    {

    }
}

Item class

public class ListItem
    {
        public string Name { get; set; }
    }

    public class BookManger
    {
        public static List<Book> GetListItems()
        {
            var resourceLoader = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView();

            var items = new List<Book>
            {
                new Book { Name = resourceLoader.GetString("ItemA") },
                new Book { Name = resourceLoader.GetString("ItemB") },
                new Book { Name = resourceLoader.GetString("ItemC") }
            };

            return items;
        }
    }

XAML

<Page
    x:Class="My_App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:My_App.Models"
    mc:Ignorable="d">

        <ListView ItemsSource="{x:Bind listItems}" ItemClick="ListView_ItemClick">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="data:ListItem">
                    <StackPanel>
                        <TextBlock Text="{Binding Book}" />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
</Page>

Solution

  • You need to set IsItemClickEnabled property to true to get ItemClick event from the ListView.

    Refer to docs page for ItemClick Event.

    Here is the updated XAML would look like:

    <ListView ItemsSource="{x:Bind listItems}" ItemClick="ListView_ItemClick" IsItemClickEnabled="True">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:ListItem">
                <StackPanel>
                    <TextBlock Text="{Binding Book}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    

    And the event handler code:

    void ListView_ItemClick(object sender, ItemClickEventArgs e)
    {
        // TODO: Add your code by accessing e.ClickedItem here
    }