Windows 8.1: The Hub Control

July 16, 2013 0 Comments

Windows 8.1 XAML Features Series

When you launch Visual Studio 2013, you will see there happens to be a new project type in the Windows Store app category: Hub App. The Hub App template is centered around the new Hub Control that was added to Windows 8.1. It also happens to be my second favorite XAML feature of the new platform.

The concept of a hub is a central theme for many Windows Store apps. You see this concept at the core of Windows 8 and Windows Phone 8 in things like the People hub. The concept is rather straight forward. Provide the user with a landing page that surfaces information about different parts of the app in a single location. However, Windows 8 left developers without the tools to accomplish this without quite a bit of work.

Windows 8 had the GridView and ListView as two commonly used layout controls. While these are both great controls and solved a lot of the needs for a Windows Store app, they both had the same draw back: they only had a single data source. The ItemsSource property provides all of the data that is provided to the control. A single data source makes the concept of a hub a bit challenging. This left developers with a couple of options: get very creative with the structure of their data source or roll a hub style control of their own.

The Hub control is fairly straight forward layout. The Hub control consists of a collection of HubSections. Each HubSection has it’s own DataTemplate and can have it’s own data source. The size of each section is configurable. In a nut shell, the Hub control provides a solution to the hub concept that meets all of the current design guidelines. So if you are building an app that uses a central hub, the Hub control is what you are looking for.

Following is an example of what the Hub control looks like in XAML.

<Hub Header="News" SectionHeaderClick="SectionHeader_Click">
    <HubSection MinWidth="600" Header="Latest">
        <DataTemplate>
            <Grid>   
                <TextBlock Text="The most recent news will be here." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </Grid>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Tech" IsHeaderInteractive="True"  
                Background="#222222" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Tech news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Tech page."
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Sports" IsHeaderInteractive="True" 
                Background="#444444" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Sports news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Sports page." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>
</Hub>

 

You can find out more about the Hub control in the following links:

Series Navigation<< Windows 8.1: Data Binding
Filed in: Windows Store apps • Tags: ,

Leave a Reply