Hub App for windows 8 – Hub Control

We will be developing a ‘hub app for windows 8’ in visual studio 13.

Anatomy of Hub Template
Hub template is new in Windows 8.1 app store.  The hub include groups of various kinds of content. You can use a hero image or content section for the first group which is not applicable in grid or split app. One advantage of hub is that you don’t have to worry about adding scroll viewer at bottom of page and most of the content will be organized according to specified rules.  Here is the structure of hub template looks like.

Use a large image for the hero that may be cropped both vertically and horizontally without losing the center of interest.

Here is an example of a single hero image and how that image may be cropped for landscape, portrait, and narrow width.

Lets do it now!

1. Open visual studio 13 > New project > Visual C# > Blank App
2. In solution explorer, open MainPage.Xaml and add below lines of code between opening and closing tag of Grid.

   //Defines Master Hub that will contain all hub sections and header is the title i.e Lahore
    <Hub Header="Lahore" >
   
   //Defines 1st section of Hub that will contain hero Image
   <HubSection Width="1000" >
          <HubSection.Background >
                 <ImageBrush ImageSource="1.png" > </ImageBrush >
          </HubSection.Background >
          // Defines Text you need OVER hero image
          <DataTemplate >
                 <StackPanel >
                      <TextBlock Name="TextBlock1" FontSize="40" >Hello World </TextBlock >
                 </StackPanel >
          </DataTemplate >
    </HubSection >
   
   //Defines 2nd section of Hub that will contain other content
   <HubSection Header="Introduction" Width="600" IsHeaderInteractive="True" >
         <DataTemplate >
              <Grid >
                 <TextBlock >Hello WOrld </TextBlock >
              </Grid >
         </DataTemplate >
    </HubSection >
   
   //Defines 3rd section of Hub that will contain other content
   <HubSection Header="Pictures" Width="600" >
   </HubSection >
   
   //Defines 4th section of Hub that will contain other content
   <HubSection Header="Videos" Width="600" >
   </HubSection >
   </Hub >
   

Download Complete code by Mr. Usman-Ur-Rehman

Having any problem implementing above code? Click on this post title and comment below there.