HUB

When looking at the apps that are in the Windows Store at the moment you might notice a certain pattern. A lot of apps start by showing some various types of content separated in sections, often with the possibility to navigate to more content. Sometimes semantic zoom is also added to make navigating between different sections more easy. In Windows 8.0 you needed to do quite a lot of work to get this done. In Windows 8.1 a new control is added that makes the process of building apps using this hub pattern a piece of cake. Speaking of cake, a great sample of the hub pattern is implemented in the food & drink app that came with the Windows 8.1 preview. If you like to read a little more about the Hub control, have a look over at MSDN.

Getting started

Although there is a template in Blend that starts with a page containing a Hub control, we’re going to start with the Blank app template. This will give us an empty app containing a mainpage which has only an empty grid. We are going to add a Hub control to this grid. The easiest way to find controls in Blend is though the search option on the Assets panel. Just type “hub” in the search box and drag the Hub control from the results to the designer.

The Hub control is visible on the designer, but it doesn’t fill the whole area. To make the control resize, right-click it in the objects and timeline panel, go to Layout and select Reset all. This will reset a whole bunch of properties making the Hub control filling the entire grid.

Now it is time to have a look at the XAML.

<HubSection Header="HubSection 0">

By default your Hub control contains two sections. Each section contains a header and a DataTemplate. These templates contain an empty grid. To get anything in the sections of the Hub control you’ll have to add something more useful to the data templates.

For example. To add a couple of images to the section in a nice grid layout you’ll first need a source for the collection of images. I’ve added two CollectionViewSource controls to the Page.Resources section of the XAML page. I named both so they could be used from the code behind, because that’s where the data will be loaded.

<CollectionViewSource x:Name="patterns" />

To create a list inside the HubSection using Blend, first delete the existing data template by just selecting the XAML and deleting it. To add a new template right-click on the HubSection in objects and timeline panel, go to Edit Additional Templates –> Edit ContentTemplate –> Create Empty…

I named the template PatternTemplate in the dialog that appears. After hitting OK you’ll end up with pretty much the same construction as you started: a DataTemplate with a Grid. Only this time it is editable in Blend.

To continue, replace the Grid control with a GridView control. First delete the Grid in the objects and timeline panel. Than add the new GridView. You can do this in the same way as you added the Hub control earlier. Just search for GridView this time. Don’t forget to reset the layout for this control too.

To get some items displayed in the GridView you’ll have to bind the ItemsSource to one of the collections added earlier. To do this, make sure the GridView is selected. Than go over to the properties panel and look for the ItemsSource property. Click on the little square next to the property and select the Create Data Binding option. In the dialog select StaticResource in the Binding Type dropdownbox. This will show you a list of available static resources. Select the patterns resource and hit OK to finish creating the binding.

To add a template for showing images inside the GridView I had to stop editing this current template, building the project and start editing the template again. I haven’t pinpointed the cause yet, but it seems to be a little bug.

Select the GridView again and create a new ItemTemplate for it. I named this one ImageTemplate. Remove the Grid and add an Image control. Go to the properties panel and find the Source property. You need to bind this to a property of the data that will be retrieved from a web service later. Again, click on the little square next to the Source property and hit Create Data Binding… In the dialog check the Custom checkbox and type “imageUrl”  into the Path textbox.

The final properties that need to be set are: Width to 300, Height to 250, Stretch to UniformToFill and the Margins to 5.

To fill the second section you can just redo the previous steps. You don’t have to create a new template for the image though, you can reuse the ImageTemplate as a ItemTemplate of the second GridView. The binding that GridView needs to be set to the other CollectionViewSource.

Last but not least there are two pieces of code that you’ll need to get it to work. The first is for the codebehind. I opened the solution in Visual Studio at this point and added a Nuget package. You’ll need to look for Newtonsoft JSON. The service I’ve used is from http://colourlovers.com, a site with a lot of colors, patterns and palettes. It has an API that returns these in JSON format.

At this first pastebin you can find the code for the code behind: http://pastebin.com/u4RGs0Wa. A implementation of the JSON returned by the web service is also needed. You can find that over at this pastbin: http://pastebin.com/9QTwU2Ds

With that code in place you should be able to build and run the app and see to collections of 6 colorful patterns and palettes.

Hero image

A pattern often seen on the Hub control is the Hero image. If you look at the Bing Travel application, or the Food & Drink app, you see a big image running from edge to edge. The image highlights some special content. Let’s add one to our project.

First we’ll add another section to the Hub control. To do this the easy way, right-click on the Hub control element in the Objects and Timeline panel and select Add HubSection. The new section is added at the end of the list. The hero image must be the first section, so drag the last section up so that it becomes the first.

The hero image section does not need a header text, so remove that. The hero image section should be 1000px wide, keep the height at the default. All there’s left to do now is setting the background of the section to an image. I’ve uploaded one here, but you can use any image you like. In a real application I would choose an image that has some meaning, but you’ll get the idea.

I added the image to the Assets folder in the project. Change the Brush of the Background property of the section to ImageBrush. Set the Strech property to UniformToFill so the image will always fill the entire area and staying a 1000px wide. Last but not least, select the image in the ImageSource dropdown.

And now you have a hero image. You could add a caption to it if you have the content to do so. For example, the Travel app shows a large image of the location you were looking for, and adds the name of the location to it.

At this point the application could look something like this:

Interactive Headers

When you need to navigate to more content of a certain section you’ll need to make the header of that section interactive. When the user clicks on the header, the event will be handled and the user is navigated to another page.

To explain the navigation, you’ll need something to navigate to. We’re going to add a new page to the project. This can be done by right clicking on the project in the Projects panel and select Add New Item… In the dialog that appears select the blank page template. I named the page “DetailsPage.xaml” and hit OK. You can close the document right away, because we won’t be doing anything with it.

We’re going to make the header of the middle section, patterns, interactive. Making it interactive is very simple. Just select the section in the objects and timeline panel, than head over to the properties panel and in the common category check the IsHeaderInteractive property. You should see the “ > “  appear in the header right away.

The actual navigation is performed in the code behind, when handling the SectionHeaderClick event on the Hub control. Select the Hub control. On the top of the Properties panel, set the name to “patternSection”. To add the event from within Blend, look at the upper right corner of the properties panel and select the little lightning bolt. You should see a long list of available events now. Find the SectionHeaderClick event and double-click in the empty textbox next to it.

Right after double clicking the event, the code behind file of the page should open and the code for the event handler is added.

To perform the actual navigation add the following code to the new handler:

switch (e.Section.Name)
{
    case "patternsSection":
        Frame.Navigate(typeof(DetailsPage));
        break;
    default:
        break;
}

When more sections are added in the future of your app, you probably need to extend this method.

Semantic zoom

The semantic zoom control isn’t something new in Windows Store applications, but it is recommended to use when working with the Hub control.

Find the SemanticZoom control in the Assets panel and add it to the grid next to the Hub control that’s already there and reset the layout like we did earlier. Open the SemanticZoom control in the objects and timeline panel and drag the Hub control to the ZoomedInView. After that, select the Hub control and reset the Width and Height properties to auto.

At this point the outline of the page should look something like the image on the left. Nice, but it doesn’t do anything. To get the SemanticZoom to work you’ll need to have the ZoomedOutView also.

There has to be some reference between the sections in the zoomed out and zoomed in views. To accomplish this, add another CollectionViewSource to the resource section next to the two we added earlier. I named this one “sections”.

This CollectionViewSource has to be filled with a list of strings containing the headers of the sections you want to navigate to. The easiest way to do this is in the code behind with a simple foreach construction.  To get access to the hub control from the code behind you have to give the hub control a name, “Hub” for example.

Add the following code to the MainPage_Loaded method in the code behind of the main page.

List sections = new List();
foreach (HubSection section in Hub.Sections)
{
    if (section.Header != null)
    {
        sections.Add(section.Header.ToString());
    }
}			
this.sections.Source = sections;

With the CollectionViewSource filled all there’s left is to add the UI for the ZoomedOutView. This will be a simple GridView containing boxes with text, the names of the headers.

Add the XAML below to the ZoomedOutView of the SemanticZoom control:

<gridview margin="120,120,0,0" 
          selectionmode="None" 
          itemssource="{Binding Source={StaticResource sections}}">

The result should look something like this when zoomed out. Tapping or clicking on one of the boxes should navigate you to that particular section.

Final words

I believe I’ve covered the basics of the Hub Control and how to use it when working in Blend for Visual Studio 2013 preview. The Hub control will save you a lot of work compared with how you had to solve the same pattern in Windows 8.0. The Hub control is only one of many new controls in Windows 8.1. I’m planning on writing a couple more tutorials about them. If you want to be the first to know subscribe to my RSS feed or follow me on twitter.

If you have any question please leave a comment, send an email or tweet me. CodeProject