Showing Data in Gridview Through Linq in Windows Store App


In this article we will show a list of a company's products with product images. To show these product details in a XAML page we will use a GridView with the help of LINQ. In this project we will add a class that will contain three properties product name, product price and product images. The data source of the GridView is an instance of a generic List class of class1 type that we have added to our project.

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 : As we require we will add a class to our project first that will be used to make a query in LINQ. The related code in the class is sown below:

Code :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;


namespace App8


    class Class1


        string Pname;

        string Pprice;

        string prodpic;

        public string _pname


            get { return Pname; }

            set { Pname = value; }



        public string _Pprice


            get { return Pprice; }

            set { Pprice = value; }


        public string _prodpic


            get { return prodpic; }

            set { prodpic = value; }


        public Class1(string pn, string pp, string pic)


            Pname = pn;

            Pprice = pp;

            prodpic = pic;


        public Class1()

        { }



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

Code :











    <Grid Background="Black">


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

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


        <TextBlock Grid.Row="0" Text="Product Detail List" FontSize="35" FontWeight="ExtraBold" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="520,22,518,5" Width="328"/>

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

            Canvas.Left="240" ItemsSource="{Binding}" Grid.Row="1">







                    <StackPanel Orientation="Vertical">

                        <Image Source="{Binding _prodpic}" Width="300" Height="200" Grid.Column="0"  Stretch="UniformToFill" />

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

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








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 System.Xml.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 App8


    public sealed partial class MainPage : Page


        Class1 _obj;

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


        public MainPage()



            _obj = new Class1();

            _obj._pname = "Product: Lux";

            _obj._Pprice = "Price: 10";

            _obj._prodpic = "lux.jpg";


            _obj = new Class1();

            _obj._pname = "Product: Dettol";

            _obj._Pprice = "Price 20";

            _obj._prodpic = "Dettol_Soap.jpg";


            _obj = new Class1();

            _obj._pname = "Product: Tide Powder";

            _obj._Pprice = "Price: 20";

            _obj._prodpic = "tide.jpg";


            _obj = new Class1();

            _obj._pname = "Product: Dairy Milk";

            _obj._Pprice = "Price: 20";

            _obj._prodpic = "Dairymilk.jpg";


            _obj = new Class1();

            _obj._pname = "Product: Maggie Nuddle";

            _obj._Pprice = "Price: 30";

            _obj._prodpic = "mggie.jpg";



             IEnumerable<Class1> product = from obj in objlist select new Class1(obj._pname,obj._Pprice,obj._prodpic);

             prodView.DataContext = product;



         protected override void OnNavigatedTo(NavigationEventArgs e)





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


You will see more items to scroll using the mouse or arrow buttons.


Up Next
    Ebook Download
    View all
    View all