I am not able to select a grid item populated using a list

Question

I am populating a grid using a list of data from view model. But I'm not able to select an item from the grid. Can you guys please help.

<StackPanel Margin="0,69,0,0">
    <GridView ItemsSource="{Binding GamesList}" x:Name="gameGrid" >
        <GridView.ItemTemplate>
            <DataTemplate>
                <Button Tag="{Binding Source}" Command="{Binding Path=DataContext.GameSelectionMethod, ElementName=gameGrid}" 
                        CommandParameter="{Binding SelectedValue}" >
                    <StackPanel Width="202" VerticalAlignment="Top">
                        <Image Source="{Binding imageurl}" Height="324"/>
                        <StackPanel Background="Black" Padding="19,9,0,0">
                            <TextBlock FontWeight="Semibold" TextTrimming="CharacterEllipsis" FontFamily="Segoe Pro" 
                                        Foreground="White" TextAlignment="Left" FontSize="24" Text="{Binding title}" 
                                        TextWrapping="Wrap" Height="65"/>
                            <TextBlock FontFamily="Segoe Pro" Foreground="White" TextAlignment="Left" 
                                        FontSize="16" Text="{Binding price}" Margin="0,48,0,0"/>
                        </StackPanel> 
                    </StackPanel>
                </Button>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</StackPanel>

I need a click event in this button and need to know which one is selected. I have tried many methods but everything is actually complex solution. I have added a command and its not triggering. its working on mouse click but not on gamepad of xbox

My view model

public List<GameModel> GamesList
{
    get
    {
        return gamesList;
    }
    set
    {
        gamesList = value;
        OnPropertyChanged("GamesList");
    }
}
public void GetSampleData()
{

    var data = new GameModel { gameId = 1, title = "Call Of Duty: Black Ops 4", price = "$59.99", imageurl = "/Assets/Product Image-7.png" };
    GamesList.Add(data);
    var data1 = new GameModel { gameId = 2, title = "Forza Horizon 4", price = "$59.99", imageurl = "/Assets/Product Image-8.png" };
    GamesList.Add(data1);
    var data2 = new GameModel { gameId = 3, title = "Halo 5: Guardians", price = "$59.99", imageurl = "/Assets/Product Image-9.png" };
    GamesList.Add(data2);
    var data3 = new GameModel { gameId = 4, title = "Sea of Thieves", price = "$59.99", imageurl = "/Assets/Product Image-10.png" };
    GamesList.Add(data3);
    var data4 = new GameModel { gameId = 5, title = "Assassin's Creed : Origins", price = "$59.99", imageurl = "/Assets/Product Image-11.png" };
    GamesList.Add(data4);
    var data5 = new GameModel { gameId = 6, title = "Shadow of War", price = "$59.99", imageurl = "/Assets/Product Image-12.png" };
    GamesList.Add(data5);

    GamesList.Add(data10);

}

public ICommand GameSelectionMethod
{
    get
    {
        return new DelegateCommand(GameSelection);
    }
}

private void GameSelection()
{
    string tag = "1";
    var parameters = new GameModel();
    parameters.gameId = Convert.ToInt16(tag);
    _navigationService.Navigate(typeof(HomeView), parameters);
}

what are you doing in GameSelection() method, why is tag always "1" and if you always want it as int, why initialize it as a string? — Muhammad Touseef, Sep 13 '18 at 13:53
I was able to find a solution by making my grid view click enabled to true.Thanks for your help. — Sanjeev S, Sep 13 '18 at 14:18

score 0 · Answer 1 · answered Sep 13 '18 at 14:08

It seems that this is what you're trying to do:

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:App1"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    d:DesignHeight="450" d:DesignWidth="800" >
    <Page.DataContext>
        <local:ViewModel1/>
    </Page.DataContext>
    <StackPanel Margin="0,69,0,0">
        <GridView ItemsSource="{Binding GamesList}" x:Name="gameGrid" SelectionChanged="GameGrid_OnSelectionChanged" >
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Width="202" VerticalAlignment="Top">
                        <Image Source="{Binding imageurl}" Height="324"/>
                        <StackPanel Background="Black" Padding="19,9,0,0">
                            <TextBlock FontWeight="Semibold" TextTrimming="CharacterEllipsis" FontFamily="Segoe Pro" 
                                       Foreground="White" TextAlignment="Left" FontSize="24" Text="{Binding title}" 
                                       TextWrapping="Wrap" Height="65"/>
                            <TextBlock FontFamily="Segoe Pro" Foreground="White" TextAlignment="Left" 
                                       FontSize="16" Text="{Binding price}" Margin="0,48,0,0"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </StackPanel>
</Page>

You can just use the SelectionChanged event of the grid instead of wrapping your controls inside the button.

ViewModel and Code-behind

using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Runtime.CompilerServices;
using Windows.UI.Xaml.Controls;

namespace App1
{
    public sealed partial class MainPage
    {
        public ViewModel1 VM => (ViewModel1) DataContext;

        public MainPage()
        {
            this.InitializeComponent();
        }

        private void GameGrid_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            GridView grid = sender as GridView;

            if (grid != null)
            {
                var selectedGame = grid.SelectedItem;
                VM.SelectedGame = (GameModel)selectedGame;
                VM.GameSelection();
                grid.SelectedItem = null;
            }
        }
    }

    #region ViewModel

    public class ViewModel1 : INotifyPropertyChanged
    {
        public ViewModel1()
        {
            GetSampleData();
        }

        private GameModel _selectedGame;

        public GameModel SelectedGame
        {
            get
            {
                return _selectedGame;
            }
            set
            {
                _selectedGame = value;
                OnPropertyChanged();
            }
        }


        private List<GameModel> gamesList;
        public List<GameModel> GamesList
        {
            get
            {
                return gamesList;
            }
            set
            {
                gamesList = value;
                OnPropertyChanged("GamesList");
            }
        }

        #region Test data

        public void GetSampleData()
        {
            GamesList = new List<GameModel>();
            var data = new GameModel { gameId = 1, title = "Call Of Duty: Black Ops 4", price = "$59.99", imageurl = "/Assets/Product Image-7.png" };
            GamesList.Add(data);
            var data1 = new GameModel { gameId = 2, title = "Forza Horizon 4", price = "$59.99", imageurl = "/Assets/Product Image-8.png" };
            GamesList.Add(data1);
            var data2 = new GameModel { gameId = 3, title = "Halo 5: Guardians", price = "$59.99", imageurl = "/Assets/Product Image-9.png" };
            GamesList.Add(data2);
            var data3 = new GameModel { gameId = 4, title = "Sea of Thieves", price = "$59.99", imageurl = "/Assets/Product Image-10.png" };
            GamesList.Add(data3);
            var data4 = new GameModel { gameId = 5, title = "Assassin's Creed : Origins", price = "$59.99", imageurl = "/Assets/Product Image-11.png" };
            GamesList.Add(data4);
            var data5 = new GameModel { gameId = 6, title = "Shadow of War", price = "$59.99", imageurl = "/Assets/Product Image-12.png" };
            GamesList.Add(data5);

        }

    #endregion

        public void GameSelection()
        {
            Debug.WriteLine(SelectedGame?.title);
            // Do things here. See output window.
        }

        public event PropertyChangedEventHandler PropertyChanged;

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

    public class GameModel
    {
        public int gameId { get; set; }
        public string title { get; set; }
        public string price { get; set; }

        public string imageurl { get; set; }
    }

    #endregion
}

I am not able to select a grid item populated using a list

1 Answers1