How to dynamically add items to a variable-sized grid in Windows store apps

Question

I have created a variable-sized grid and added some sample data. Now want to add items on click of a button. I don't know how to do this, as grid.items.add() is not working.

Here is my code:

    <Page.Resources>
        <common:TVSeriesTemplateSelector x:Key="TVSeriesTemplateSelector"
                                         TVSeriesLargeSizeTemplate="{StaticResource               TVSeriesLargeSizeTemplate}"
                                         TVSeriesMediumSizeTemplate="{StaticResource   TVSeriesMediumSizeTemplate}"
                                         TVSeriesSmallSizeTemplate="{StaticResource TVSeriesSmallSizeTemplate}"/>

    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <local:VariableSizedGridView x:Name="TVSeriesGridView" Margin="0,110,0,0"    ItemTemplateSelector="{StaticResource TVSeriesTemplateSelector}" >
     <GridView.ItemsPanel>
     <ItemsPanelTemplate>
     <VariableSizedWrapGrid Orientation="Vertical" ItemHeight="200" ItemWidth="200" Tapped="gotopage" />
     </ItemsPanelTemplate>
            </GridView.ItemsPanel>
     </local:VariableSizedGridView>
     <Grid Margin="0,0,0,0">
     <Button x:Name="PostButton" Content="Post" HorizontalAlignment="Right" VerticalAlignment="Top">
                <Button.Flyout>
                    <Flyout ScrollViewer.ZoomMode="Enabled">
                        <StackPanel Width="400">
                            <TextBlock Style="{StaticResource BaseTextBlockStyle}">
                    Write Your Post
                            </TextBlock>
                            <TextBox TextWrapping="Wrap" Text="TextBox" Width="400" />
                            <Button  Margin="0,5,0,0" HorizontalAlignment="Center" Click="Button_Click_1">
                                Share
                            </Button>

                            <ComboBox HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" IsDropDownOpen="True" x:Name="colorselection" >
                                <ComboBoxItem Content="Green" IsSelected="True" />
                            </ComboBox>

                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>

        </Grid>

    </Grid>

</Page>

behind in cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace TemplateSelector_App
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        List<TVSeries> tvSeriesList = new List<TVSeries>();
        List<TVSeries> tvSeriesList1 = new List<TVSeries>();
        public MainPage()
        {
            this.InitializeComponent();
            this.Loaded += MainPage_Loaded;
        }

      public void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            tvSeriesList.Add(new TVSeries() { Name = "Supernatural", Seasons = "9 Seasons", Genre = "Supernatural Drama", Width = 2, Height = 2, Image = "http://images2.fanpop.com/images/photos/2700000/Supernatural-supernatural-2784812-1280-960.jpg", Description = "Supernatural is an American supernatural drama television series, created by Eric Kripke, which was first broadcast on September 13, 2005, on The WB, and is now part of The CW's lineup. Starring Jared Padalecki as Sam Winchester, and Jensen Ackles as Dean Winchester, the series follows these two brothers as they hunt demons, ghosts, monsters and other supernatural beings in the world. The series is produced by Warner Bros. Television, in association with Wonderland Sound and Vision. The current executive producers are Eric Kripke, McG, and Robert Singer." });
            tvSeriesList.Add(new TVSeries() { Name = "Fringe", Seasons = "5 Seasons", Genre = "Science Fiction", Width = 2, Height = 1, Image = "http://tvafterdarkonline.com/wp-content/uploads/2012/06/FRINGE-Sunday-Hall-H-WBSDCC-2012.jpg" });
            tvSeriesList.Add(new TVSeries() { Name = "Chuck", Seasons = "5 Seasons", Genre = "Action Comedy", Width = 2, Height = 1, Image = "http://zinemaniacos.files.wordpress.com/2012/06/chuck.jpg" });
            tvSeriesList.Add(new TVSeries() { Name = "Falling Skies", Width = 1, Height = 1, Image = "http://2.bp.blogspot.com/-cVgdAr1EFQA/TgJpY5cciTI/AAAAAAAABDg/f4MetFkSeAo/s1600/tv_falling_skies04.jpg" });
            tvSeriesList.Add(new TVSeries() { Name = "Revolution", Width = 1, Height = 1, Seasons = "2 Seasons", Image = "http://www.hdwallpapers.in/walls/revolution_tv_series-wide.jpg" });
            tvSeriesList.Add(new TVSeries() { Name = "Battlestar Galactica", Seasons = "4 Seasons", Genre = "Science Fiction", Width = 2, Height = 1, Image = "http://image.allmusic.com/00/agg/cov200/drg200/g283/g28358peyd2.jpg" });
            tvSeriesList.Add(new TVSeries() { Name = "House MD", Seasons = "8 Seasons", Genre = "Dramedy, Mystery", Width = 2, Height = 2, Image = "http://www.kotusozluk.com/img/2011/04/house-md_18373.jpg", Description = "House (also known as House, M.D.) was an American television medical drama that originally ran on the Fox network for eight seasons, from November 16, 2004 to May 21, 2012. The show's main character is Dr. Gregory House (Hugh Laurie), a drug-addicted, unconventional, misanthropic medical genius who leads a team of diagnosticians at the fictional Princeton–Plainsboro Teaching Hospital (PPTH) in New Jersey." });
            tvSeriesList.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/2012/02/us-sherlock-dvd-cmyk.jpg", color1 = "red" });
            tvSeriesList.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/20enter code here12/02/us-sherlock-dvd-cmyk.jpg", color1 = "red" });
            tvSeriesList.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/2012/02/us-sherlock-dvd-cmyk.jpg", color1 = "red" });
            tvSeriesList.Add(new TVSeries() { Name = "Revolution", Width = 1, Height = 1, Seasons = "2 Seasons", Image = "http://www.hdwallpapers.in/walls/revolution_tv_series-wide.jpg" });
            tvSeriesList.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/2012/02/us-sherlock-dvd-cmyk.jpg", color1 = "#FF355991" });
            tvSeriesList.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/2012/02/us-sherlock-dvd-cmyk.jpg", color1 = "#FF355991" });
            tvSeriesList.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/2012/02/us-sherlock-dvd-cmyk.jpg", color1 = "#FF355991" });
            tvSeriesList.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/2012/02/us-sherlock-dvd-cmyk.jpg", color1 = "#FF355991" });
            tvSeriesList.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/2012/02/us-sherlock-dvd-cmyk.jpg", color1 = "red" });
            tvSeriesList.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/2012/02/us-sherlock-dvd-cmyk.jpg", color1 = "red" });
            tvSeriesList.Add(new TVSeries() { Name = "Supernatural", Seasons = "9 Seasons", Genre = "Supernatural Drama", Width = 2, Height = 2, Image = "", Description = "Supernatural is an American supernatural drama television series, created by Eric Kripke, which was first broadcast on September 13, 2005, on The WB, and is now part of The CW's lineup. Starring Jared Padalecki as Sam Winchester, and Jensen Ackles as Dean Winchester, the series follows these two brothers as they hunt demons, ghosts, monsters and other supernatural beings in the world. The series is produced by Warner Bros. Television, in association with Wonderland Sound and Vision. The current executive producers are Eric Kripke, McG, and Robert Singer." });



            TVSeriesGridView.ItemsSource = tvSeriesList;
        }

        private void gotopage(object sender, TappedRoutedEventArgs e)
        {
            Frame.Navigate(typeof(ItemDetailPage1));
        }



        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            string colorselected = colorselection.SelectedIndex.ToString();
            string colorselected1 = null;
            if (colorselected.Equals("0"))
            {
                colorselected1 = "green";


            }
            tvSeriesList1.Add(new TVSeries() { Name = "Sherlock", Seasons = "2 Seasons", Genre = "Crime Drama", Width = 2, Height = 1, Image = "http://skyethelimit.files.wordpress.com/2012/02/us-sherlock-dvd-cmyk.jpg", color1 = colorselected1 });

            TVSeriesGridView.Items.Add("item");
            PostButton.Flyout.Hide();
        }
    }
    public class TVSeries
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string Genre { get; set; }
        public string Image { get; set; }
        public string Seasons { get; set; }
        public int Width { get; set; } 
        public int Height { get; set; }
        public string color1 { get; set; }
    }
}

Answer 1

Replace:

List<TVSeries> tvSeriesList = new List<TVSeries>();
List<TVSeries> tvSeriesList1 = new List<TVSeries>();

With:

ObservableCollection<TVSeries> tvSeriesList = new ObservableCollection<TVSeries>();
ObservableCollection<TVSeries> tvSeriesList1 = new ObservableCollection<TVSeries>();

This line of code will work well after that:

tvSeriesList1.Add(new TVSeries() { Name = "Sherlock",  ...);

and you do not need this line at all:

TVSeriesGridView.Items.Add("item");

This happens because ObservableCollection is watching changes and will notify your Grid about them, List colleciton have no such ability.