Change gridViewItem's background color after first and second click on it

Question

My point is to change gridViewItem's background color to Blue after first click and to Red after second click on it, then Blue, then Red ...

Here is my c# code but it threw an exception 'System.NullReferenceException' on "gvi.Background = new SolidColorBrush(Windows.UI.Colors.Blue);":

   private void GridViewItem_Click (Object sender, ItemClickEventArgs e)
    {
        if(e!=null)
        {

            for (int numberOfClick= 1; numberOfClick <100; ++numberOfClick)
            {
                GridViewItem gvi = (GridViewItem)NameOf_ItemClick.ContainerFromItem(e);

                if (numberOfClick % 2 == 0)
                {

                    gvi.Background = new SolidColorBrush(Windows.UI.Colors.Red);

                }
                else
                {
                    gvi.Background = new SolidColorBrush(Windows.UI.Colors.Blue);
                }
            }

        }
    }

Here is my Xaml code:

<Page
x:Class="HNT_listView2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HNT_listView2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:HNT_listView2.Models"
mc:Ignorable="d">

<Grid Background= "Salmon" Margin="0,0,10,0"  >

    <GridView ItemsSource="{x:Bind MyContactList}" 
              ItemClick="GridViewItem_Click" Name="NameOf_ItemClick"
              IsItemClickEnabled="True" >


        <GridView.ItemTemplate>
            <DataTemplate x:DataType="data:Contact">
                <StackPanel >
                    <FlyoutBase.AttachedFlyout>
                        <MenuFlyout Placement="Top">
                            <MenuFlyoutItem Text="Call"/>
                            <MenuFlyoutItem Text="Send a message"/>
                            <MenuFlyoutItem Text="Delete"/>
                        </MenuFlyout>
                    </FlyoutBase.AttachedFlyout>

                    <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">


                    <Image Width="100" Height="120" Source="{x:Bind Photo}" HorizontalAlignment="Center" Stretch="UniformToFill"/>
                    <StackPanel Orientation="Vertical">
                        <TextBlock FontSize="30" Text="{x:Bind Name}" HorizontalAlignment="Center"/>
                        <TextBlock FontSize="30" Text="{x:Bind Phone}" HorizontalAlignment="Center"/>
                    </StackPanel>
                </StackPanel>
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>

    </GridView>


</Grid>

My Contact.cs in Models:

public class Contact
{
    public string Name { get; set; }
    public string Photo { get; set; }
    public string Phone { get; set; }
}


public class ContactManager
{
    public static List<Contact> GetContacts()
    {
        var contact1 = new List<Contact>();
        contact1.Add(new Contact { Name = "Nguyen Van A", Phone = "0168111222", Photo = "Assets/1.jpg" });
        contact1.Add(new Contact { Name = "Tran Van B", Phone = " 0168333444", Photo = "Assets/2.jpg" });
        contact1.Add(new Contact { Name = "Le Van C", Phone = "0166555666", Photo = "Assets/3.jpg" });

        return contact1;
    }
}

Any help will be appreciated, thank you !

Answer 1

Why not use a boolean as the counter?

   private byte GridViewSwitch = 0;
   private void GridViewItem_Click (Object sender, ItemClickEventArgs e)
    {
        if(e!=null)
        {
            var item = (GridViewItem)NameOf_ItemClick.ContainerFromItem(e);
            switch(GridViewSwitch)
            case 0 : item.Background = new SolidColorBrush(Windows.UI.Colors.Red); GridViewSwitch++;  break ;
           case 1 : item.Background = new SolidColorBrush(Windows.UI.Colors.Blue); GridViewSwitch++;   break ;

            case 2: item.Background = new SolidColorBrush(Windows.UI.Colors.Green); GridViewSwitch=0;   break ;

        }
    }

If you think this answer is correct and helpful, click the tick mark on the left to approve it!