Working with Hub Section in Windows Store Apps


In this article you will learn to build Windows Store Apps by utilizing Hub and HubSections. This article also covers an insight into the use of many controls including the Hub, Image, TextBlock, and ListView. It talks about using Page Resources, Static Resources, Data Templates and Item Templates in Windows Store Apps. The article walks you through the complete implementation of the code in a step by step manner.

Hub – Hub controls can be dragged and dropped onto the Windows Store App page designer view. The main intention of using Hub is that it aids in creating multiple hub sections with the xaml tag- "HubSection".

We can place the controls inside each of the hub sections by making use of DataTemplate. This is because the main role of the DataTemplate is to display collection of data in an arranged and customized manner.

• Setting up the static page resource.
Page Resource XAML Code

In the XAML, the purpose of setting the resource is to reuse the resource in different places. Here, in this example program, "CollectionViewSource" is used as the resource. Here it is a "Page Resource" i.e. "CollectionViewSource" is the resource set on the root element of the Page. In this XAML code, CollectionViewSource represents the CollectionView class. The CollectionView class represents a data collection. Things such as sorting of data, grouping of data, and navigating to a particular page; upon clicking the data can be made possible with the help of CollectionView class and hence the CollectionViewSource will also serve the same purpose.


Value of static resource property has to be set to already delineate resource.
XAML Syntax for static resource

The above line is the basic syntax for using static resource in your XAML code.
ListView representation in XAML

Compare the above line with the previous one which is highlighted. It indicates that "ListView" is the Object here. "ItemSource" is the property and "itemsViewSource" is the key. If you observe carefully, the name of the "CollectionViewSource" is itemsViewSource.

code

Here itemsViewSource resource points out to the lstAllCars ListView. So, binding to the itemsViewSource resource would result in the display of this bound data within the lstAllCars ListView.

Hub code


Here "ListView.ItemTemplate" property is used to set the data item inside ListView control. In order to display the collection of data including car image, car name, and the car model, a DataTemplate is being placed inside a ListView Item Template.

Depicting the structure of the controls included in the ListView
Figure 1: Depicting the structure of the controls included in the ListView.

In this scenario, the ListView is taken to display a list of cars along with their Photographs, Names, and Models. In fact, ListView helps in displaying the list of items vertically. Here, in this example, I have considered a class named "Car" which acts as an entity. The purpose of putting Image control along with two TextBlock controls inside a Stack Panel is to arrange car image, its name, and model vertically and horizontally as shown in Figure 1.

Class diagram of "Car" class.
Figure 2: Class diagram of "Car" class.

As shown in the proceeding class diagram; ImageFile, Model, and Name are the properties. What exactly these properties will contain are explained briefly as shown below.

Image File – Represents BitMapImage format of the original stored image.
Model – It contains Car's model.
Name – It contains Car's name.

The main objective here is to display objects of the "Car" class. Each of the different objects contains different information about different cars. The information that each object of the car contains are listed above. We need to bind list of "Car" objects to the ListView so that all information about each car (including image, name, and model) will get listed vertically one after another. BitMapImage class is used for effective loading of images in XAML. BitMapImage class is present in the namespace System.Windows.Media.Imaging.


Code snippet inside Car class is expressed as shown below:


namespace HubDemo
{
public class Car
{

//Type "propfull" and press "tab" key twice to get a code snippet for property and backing
field.

public Car(string name, string model, BitmapImage path)
{
Name = name;
Model = model;
ImageFile = path;
}

private string name;

public string Name
{
get { return name; }
set { name = value; }
}

private string model;

public string Model
{
get { return model; }
set { model = value; }
}

private BitmapImage imageFile;

public BitmapImage ImageFile
{
get { return imageFile; }
set { imageFile = value; }
}

}
}


HubDemo project details.
Figure 3: HubDemo project details.

The utility class contains the single static variable declaration of type list of "Car" variables. The declarations inside the Utilities class are as shown below:

namespace HubDemo
{
public class Utilities
{
public static List listOfCars { get; set; }
public static List listOfPaths { get; set; }
public static List listOfImageFiles { get; set; }

}
}


listOfCars property is used to store details of cars in the form of car objects. listOfPaths which is a list of strings are used to store file paths of the images of these cars in order to display them in the ListView, on the screen.

• Add images to embellish the app.
Add images to embellish the app by displaying them on screen.
Also image addition ensures that the user gets pertinent data and images with respect to cars.

A screen showing added images into "Assets" folder.
Figure 4: A screen showing added images into "Assets" folder.

• Writing a function to store all the data in a list of car objects. Thereafter, biding the same to the CollectionViewSource which in turn points out to the ListView within which all data would ultimately get displayed. Below function FillAllData() has all the necessary code.


//A function which has code to bind a list of Car data to ListView present in the hub section of the hub.
private async void FillAllData()
{
try
{

//List of strings to store image paths.
Utilities.listOfImageFiles = new List();
var localFolder = Windows.ApplicationModel.Package.Current.InstalledLocation;
Utilities.listOfPaths =new List();
Utilities.listOfPaths.Add(@"Assets\audi.jpg");
Utilities.listOfPaths.Add(@"Assets\banz.jpg");
Utilities.listOfPaths.Add(@"Assets\lamb.jpg");

for (int i = 0; i < 3; i++)
{
string fileName = Utilities.listOfPaths[i];
StorageFile file = await localFolder.GetFileAsync(fileName);
IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
bitmapImage = new BitmapImage();
bitmapImage.DecodePixelWidth = 100;
await bitmapImage.SetSourceAsync(fileStream);
Utilities.listOfImageFiles.Add(bitmapImage);
}

//Storing Car details into the list.
Utilities.listOfCars = new List()
{
new Car("Benz", "Benz", Utilities.listOfImageFiles[0]),
new Car("Audi", "Audi", Utilities.listOfImageFiles[1]),
new Car("Lamborgini", "Asterion LPI 910-4", Utilities.listOfImageFiles[2])
};

//Binding to the source.
itemsViewSource.Source = Utilities.listOfCars;
}
catch (Exception ex)
{

throw ex;
}


}


As shown in the preceding code, bitmapImage which is an object of type BitmapImage is declared at the class level but is defined within the implemented "for loop".


itemsViewSource.Source = Utilities.listOfCars;

The above line specifies the binding of the data present in Utilities.listOfCars to the source. Here, the source item is itemsViewSource which is a CollectionViewSource page resource which points out to the lstAllCars ListView.


var localFolder = Windows.ApplicationModel.Package.Current.InstalledLocation;


The localFolder contains the directory path of the app installed location. In fact, this is the location where we can find the Assets folder which contain all the images that we need.


StorageFile file = await localFolder.GetFileAsync(fileName);


In the above line of code, "file" variable is a variable of type StorageFile class. fileName is the string which contains a path of the specified file that we use. GetFileAsync( ) method gets the single file specified with the help of the string passed as input, i.e. fileName. In fact "file" variable helps to provide information and contents about the file passed as string to GetFileAsync( ).


IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);


As shown in the above line of code, IRandomAccessStream interface helps in random access of data in input streams. OpenAsync( ) randomly access the specified file. Here, the operation is targeted to the "file" variable which is of type StorageFile class. In fact, this is the one which has all information about the image file.


bitmapImage = new BitmapImage();
await bitmapImage.SetSourceAsync(fileStream);


As shown here, SetSourceAsync( ) function takes a variable of type IRandomAccessStream as input. Here, this method sets the source image for BitMapSource by accessing a stream and processing the result.

Call the above function after initialization i.e. after the line this.InitializeComponent() as shown below.

public MainPage()
{
this.InitializeComponent();
FillAllData();
}



The output screen of the sample app created.
Figure 5: The output screen of the sample app created.

Figure 6: The output screen of the sample app being labeled.
Figure 6: The output screen of the sample app being labeled.


Download the sample HubSection Sample Application from: Application


HubSection Sample Application

  • Application (45983-95037-Application.zip)
  • Comments

    Author: Kumar21 Dec 2014 Member Level: Bronze   Points : 0

    A very good article Chetan. Good one.

    Author: Raju21 Dec 2014 Member Level: Bronze   Points : 0

    Really a nice articles. Hub Section is well explained.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: