Showing Data in Gridview Through Linq in Windows Store App

Introduction

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 :

<Page

x:Class="App8.MainPage"

IsTabStop="false"

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

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

xmlns:local="using:App8"

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

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

mc:Ignorable="d">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

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

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

<GridView.ItemsPanel>

</ItemsPanelTemplate>

</GridView.ItemsPanel>

<GridView.ItemTemplate>

</StackPanel>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

</Grid>

</Page>

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()

{

this.InitializeComponent();

_obj = new Class1();

_obj._pname = "Product: Lux";

_obj._Pprice = "Price: 10";

_obj._prodpic = "lux.jpg";

objlist.Add(_obj);

_obj = new Class1();

_obj._pname = "Product: Dettol";

_obj._Pprice = "Price 20";

_obj._prodpic = "Dettol_Soap.jpg";

objlist.Add(_obj);

_obj = new Class1();

_obj._pname = "Product: Tide Powder";

_obj._Pprice = "Price: 20";

_obj._prodpic = "tide.jpg";

objlist.Add(_obj);

_obj = new Class1();

_obj._pname = "Product: Dairy Milk";

_obj._Pprice = "Price: 20";

_obj._prodpic = "Dairymilk.jpg";

objlist.Add(_obj);

_obj = new Class1();

_obj._pname = "Product: Maggie Nuddle";

_obj._Pprice = "Price: 30";

_obj._prodpic = "mggie.jpg";

objlist.Add(_obj);

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.