Introduction
Today I am going to explain how to perform grouping in a GridView in a Windows Store app. Suppose there is a list of data items in various categories and I want to display these data items according to their category. In other words category 1 displays the data items it indicates and so on. To apply this concept I use a ListBox in which all the data items are displayed and when we click on the group data button then all the data items are displayed in the GridView depending on the selected category.
To see how its works just use the following steps.
Step 1
First open the Visual Studio 2012 and then select File -> New -> Project. A window is shown for selecting Windows Store inside the Visual C# from the left side pane and BlankPage from the center pane. Give the name of your application that you want to give and then click ok.
Step 2
Add a class by right-clicking on the Solution Explorer and click on Add -> Class as:
A window is shown for selecting Class from the center pane and give the name of your class that you want to give; I used "ItemSource.cs",
Step 3
In this class add some Data item variables as:
public class ItemSource
{
public string Title { get; set; }
public string Image { get; set; }
public string Category { get; set; }
public string Description { get; set; }
}
Generate one more class in which give the values of these data items as,
public class StoreData
{
public StoreData()
{
ItemSource item;
item = new ItemSource();
item.Title = "C#";
item.Image = "Books/c-sharp.jpg";
item.Category = "Books";
item.Description = "Multi Paradigm Programming Language";
collection.Add(item);
item = new ItemSource();
item.Title = "DotNet Framework";
item.Image = "Books/Dotnet_framework.jpg";
item.Category = "Books";
item.Description = "This Book defines Dotnet Framework";
collection.Add(item);
item = new ItemSource();
item.Title = "Dell-Laptop";
item.Image = "Laptops/Laptop1.jpg";
item.Category = "Laptop";
item.Description = "Windows 7 enabled";
collection.Add(item);
item = new ItemSource();
item.Title = "Comopaq Laptop";
item.Image = "Laptops/Laptop2.jpg";
item.Category = "Laptop";
item.Description = "Windows Vista Enabled";
collection.Add(item);
item = new ItemSource();
item.Title = "Nokia 5555";
item.Image = "Mobile/Mobile1.jpg";
item.Category = "Mobile";
item.Description = "Cheapest Mobile Set";
collection.Add(item);
item = new ItemSource();
item.Title = "Nokia 7677";
item.Image = "Mobile/Mobile2.jpg";
item.Category = "Mobile";
item.Description = "Mostly Used Nokia set";
collection.Add(item);
item = new ItemSource();
item.Title = "DotNet";
item.Image = "Books/net.jpg";
item.Category = "Books";
item.Description = "Very Useful for all beggineer";
collection.Add(item);
item = new ItemSource();
item.Title = "Dotnet Technology";
item.Image = "Books/net_technology.jpg";
item.Category = "Books";
item.Description = "Technology related to dotnet";
collection.Add(item);
item = new ItemSource();
item.Title = "Dell";
item.Image = "Laptops/Laptop3.jpg";
item.Category = "Laptop";
item.Description = "Best Operating System";
collection.Add(item);
item = new ItemSource();
item.Title = "Compaq-HP";
item.Image = "Laptops/Laptop4.jpg";
item.Category = "Laptop";
item.Description = "Most Used and very popular";
collection.Add(item);
item = new ItemSource();
item.Title = "WPF";
item.Image = "Books/wpf.jpg";
item.Category = "Books";
item.Description = "WPF Designing";
collection.Add(item);
}
private ItemCollection collection = new ItemCollection();
}
In the preceding code ItemCollection is an Enumerated type class of which the definition is:
class ItemCollection: IEnumerable<Object>
{
private System.Collections.ObjectModel.ObservableCollection<ItemSource> itemCollection = new System.Collections.ObjectModel.ObservableCollection<ItemSource>();
public IEnumerator<Object> GetEnumerator()
{
return itemCollection.GetEnumerator();
}
System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
{
return GetEnumerator();
}
public void Add(ItemSource item)
{
itemCollection.Add(item);
}
}
Now write the query for the selection of all the items as:
internal List<GroupInfoList<object>> Getalldata()
{
List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>();
var query = from item in collection
group item by (ItemSource)item into g
select new { GroupName = g.Key, Items = g };
foreach (var g in query)
{
GroupInfoList<object> info = new GroupInfoList<object>();
info.Key = g.GroupName;
foreach (var item in g.Items)
{
info.Add(item);
}
groups.Add(info);
}
return groups;
}
Write the query for the selection of Data items according to its category as:
internal List<GroupInfoList<object>> GetGroupsByCategory()
{
List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>();
var query = from item in collection
orderby ((ItemSource)item).Category
group item by ((ItemSource)item).Category into g
select new { GroupName = g.Key, Items = g };
foreach (var g in query)
{
GroupInfoList<object> info = new GroupInfoList<object>();
info.Key = g.GroupName;
foreach (var item in g.Items)
{
info.Add(item);
}
groups.Add(info);
}
return groups;
}
In both of these queries the definition of GroupInfoList<object> is as:
public class GroupInfoList<T> : List<object>
{
public object Key { get; set; }
public new IEnumerator<object> GetEnumerator()
{
return (System.Collections.Generic.IEnumerator<object>)base.GetEnumerator();
}
}
Now our class is ready.
Step 3
Add a BlankPage to the application by right-clicking on the project in Solution Explorer and then click Add -> New Item.as:
A window is shown for selecting BlankPage and click ok.
Step 4
Write the XAML code in the BlankPage1.xaml file as:
<Page
x:Class="SemanticZoom_Example.BlankPage1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SemanticZoom_Example"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
vijaya vilayatkarPosted Jul 24, 2014, 8:47 AM
How to pre select multiple items from grouped gridview?
surya syamalaPosted Mar 6, 2013, 6:35 AM
unable to display images and corresponding descriptions.(which is in StoreData). Can u pls resolve this issue.