Dynamically Add Record in GridView in Windows Store App

Introduction

In this article we will learn how to add data to a GridView at run time through the LINQ. Here we will add details of a book such as the name of the author, the book name and its price dynamically using the user's input and this information is added to the GridView. There is no limitation to how many records can be added to the GridView. To create this mini project we will use a generic type List class and an IEnumerable type variable that is necessary to do the LINQ operation.

In the following we are including the entire code of the XAML file and the code behind file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2012
• File -> New -> Project
• Choose Template -> Visual C# -> Metro Style Application
• Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the MainPage.xaml and MainPage.xaml.cs files.

Step 3 : The MainPage.xaml file is as in the following code:

Code :

<Page

    x:Class="App1.MainPage"

    IsTabStop="false"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:App10"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="Green">

        <Grid.RowDefinitions>

            <RowDefinition Height=".333*"></RowDefinition>

            <RowDefinition Height=".333*"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid Grid.Row="0">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width=".333*"></ColumnDefinition>

                <ColumnDefinition Width=".023*"></ColumnDefinition>

                <ColumnDefinition Width=".333*"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height=".333*"></RowDefinition>

                <RowDefinition Height=".333*"></RowDefinition>

                <RowDefinition Height=".333*"></RowDefinition>

                <RowDefinition Height=".333*"></RowDefinition>

            </Grid.RowDefinitions>

            <Button Content="Add Value" Background="Red" Grid.Column="2" Margin="276,37,0,21" Click="Button_Click_1"></Button>

            <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Text="Add Book Detail" FontSize="30" FontWeight="ExtraBold" HorizontalAlignment="Center"></TextBlock>

            <TextBlock Text="Book Name" FontSize="20" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right" FontWeight="Bold"></TextBlock>

            <TextBlock Text="Author Name" FontSize="20" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right" FontWeight="Bold"></TextBlock>

            <TextBlock Text="Book Price" FontSize="20" Grid.Column="0" Grid.Row="3" HorizontalAlignment="Right" FontWeight="Bold"></TextBlock>

            <TextBox x:Name="txt1" Grid.Column="2" Width="200" Height="50" HorizontalAlignment="Left" Margin="0,83,0,59" Grid.RowSpan="2"/>

            <TextBox x:Name="txt2" Grid.Column="2" Grid.Row="1" Width="200" Height="50" HorizontalAlignment="Left" Margin="0,83,0,59" Grid.RowSpan="2"></TextBox>

            <TextBox x:Name="txt3" Grid.Column="2" Grid.Row="2" Width="200" Height="50" HorizontalAlignment="Left" Margin="0,87,0,55" Grid.RowSpan="2"></TextBox>

        </Grid>

        <GridView x:Name="prodView"  Width="600" Height="800" ScrollViewer.VerticalScrollBarVisibility="Visible"

            Canvas.Left="240" ItemsSource="{Binding}" Grid.Row="1" Header="Book Detail in GridView" FontSize="40" FontWeight="ExtraBold"  Visibility="Collapsed">

            <GridView.ItemsPanel>

                <ItemsPanelTemplate>

                </ItemsPanelTemplate>

            </GridView.ItemsPanel>

            <GridView.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Vertical">

                        <TextBlock Text="{Binding _bookname}" Width="600" Height="50"  FontSize="30" FontWeight="Bold"  />

                        <TextBlock Text="{Binding _authorname}" Width="600" Height="50"  FontSize="30" FontWeight="Bold"  />

                        <TextBlock Text="{Binding _bookprice}" Width="600" Height="50"  FontSize="30" FontWeight="Bold" />

                    </StackPanel>

                </DataTemplate>

            </GridView.ItemTemplate>

        </GridView>

    </Grid>

</Page>

 

Step 4 : First of all you will add a class that will be used to access the data using LINQ; the related code of the class is given below:

Code :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

 

namespace App1

{

    class Class1

    {

        string bookname;

        string authorname;

        string bookprice;

        public string _bookname

        {

            get { return bookname; }

            set { bookname = value; }

        }

        public string _authorname

        {

            get { return authorname; }

            set { authorname = value; }

        }

        public string _bookprice

        {

            get { return bookprice; }

            set { bookprice = value; }

        }

 

        public Class1()

        { }

        public Class1(string s, string r, string p)

        {

            bookname = s;

            authorname = r;

            bookprice = p;

        }

 

    }

}

 

Step 5 : The MainPage.xaml.cs file is as in the following code:

Code :

 

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

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;

 

namespace App1

{

 

    public sealed partial class MainPage : Page

    {

        List<Class1> bookDetail = new List<Class1>();

        Class1 obj1;

        public MainPage()

        {

            this.InitializeComponent();

        }

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        }

 

        public void showData()

        {

            IEnumerable<Class1> Books = from obj in bookDetail select new Class1(obj._authorname, obj._bookname,obj._bookprice);

             prodView.DataContext = Books;

             prodView.Visibility = Visibility.Visible;

        }

 

        private void Button_Click_1(object sender, RoutedEventArgs e)

        {

             obj1 = new Class1();

            obj1._authorname="Author Name: "+txt2.Text;

            obj1._bookname="Book Name: "+txt1.Text;

            obj1._bookprice="Price: "+txt3.Text;

            bookDetail.Add(obj1);

            showData();

        }

    }

}

 

Step 6 : After running this code the output looks like this: