Post
Ask Question

How To Use Hub Control In Universal Application Development With XAML And C#

Before reading this article, please go through the article's link, given below-

  1. Introduction To Universal Windows Platform (UWP) App Development Using Windows 10 And Visual Studio 2015
Reading this article, you can learn, how to use Hub Control in Universal Windows apps development with XAML and Visual C#.

The following important tools are required to develop UWP-

  1. Windows 10 (Recommended).
  2. Visual Studio 2015 Community Edition (It is a free software available online).

Now, we can discuss the app development, by following the steps, given below-

Step 1: Open Visual Studio 2015 -> Start -> New Project-> Select Universal (under Visual C#->Windows)-> Blank App -> Give the Suitable name for your App (UWPHubApp) ->OK.

New Project-

Step 2: Choose Target and minimum platform version for your Windows Universal Application will support. Afterwards, the project creates App.xaml and MainPage.xaml.

version

Step 3: Open (double click) the file MainPage.xaml in the Solution Explorer and click the Toolbox tab on the left to open the list of Common XAML controls. Expand Common XAML Controls and drag the required control to the middle of the design canvas.

Add the Hub control and change the Name property and Header property. While adding Hub control, automatically two Hub sections are also added to our project. 

Hub control  

Now, we can change the Hubsection 1 Name, Header property and enable the IsHeaderInteractive property.

property 

Similarly, we can change Hubsection 2 also change the Hubsection 1 Name, Header property and enable the IsHeaderInteractive property. Now, we can add Hubsection3, 4. Change the Name, Header property and enable the IsHeaderInteractive property.

property 

Step 4: Add Images to Assets folder to add an image source to Hubsections.

adding image 

Set Assets images to HSec1. Similarly, add images to All sections.

sections 

Step 5: Add SectionHeaderClick event in MYHub to navigate between Hubsections.

SectionHeaderClick 

Note: Automatically, the following code will be generated in XAML code view, while we are done in the design view-

  1. <Page x:Class="UWPHubApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPHubApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">  
  2.     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
  3.         <Hub x:Name="MYHub" Header="Hub Test" SectionHeaderClick="MYHub_SectionHeaderClick">  
  4.             <HubSection x:Name="HSec1" Header="Sec 1" IsHeaderInteractive="True">  
  5.                 <DataTemplate>  
  6.                     <Grid>  
  7.                         <Image Source="/Assets/02.jpg" Stretch="UniformToFill" /> </Grid>  
  8.                 </DataTemplate>  
  9.             </HubSection>  
  10.             <HubSection x:Name="HSec2" Header="Sec 2" IsHeaderInteractive="True">  
  11.                 <DataTemplate>  
  12.                     <Grid>  
  13.                         <Image Source="/Assets/03.jpg" Stretch="UniformToFill" /> </Grid>  
  14.                 </DataTemplate>  
  15.             </HubSection>  
  16.             <HubSection x:Name="HSec3" Header="Sec 3" IsHeaderInteractive="True">  
  17.                 <DataTemplate>  
  18.                     <Grid>  
  19.                         <Image Source="/Assets/04.jpg" Stretch="UniformToFill" /> </Grid>  
  20.                 </DataTemplate>  
  21.             </HubSection>  
  22.             <HubSection x:Name="HSec4" Header="Sec 4" IsHeaderInteractive="True">  
  23.                 <DataTemplate>  
  24.                     <Grid>  
  25.                         <Image Source="/Assets/05.jpg" Stretch="UniformToFill" /> </Grid>  
  26.                 </DataTemplate>  
  27.             </HubSection>  
  28.         </Hub>  
  29.     </Grid>  
  30. </Page>   

Step 6: Add the code, given below, to MYHub_SectionHeaderClick method in MainPage.xaml.cs. This code is used to navigate next HubSections.

  1. switch (e.Section.Name)   
  2. {  
  3.     case "HSec1":  
  4.         MYHub.ScrollToSection(HSec2);  
  5.         break;  
  6.     case "HSec2":  
  7.         MYHub.ScrollToSection(HSec3);  
  8.         break;  
  9.     case "HSec3":  
  10.         MYHub.ScrollToSection(HSec4);  
  11.         break;  
  12.     case "HSec4":  
  13.         MYHub.ScrollToSection(HSec1);  
  14.         break;  
  15.     default:  
  16.         MYHub.ScrollToSection(HSec1);  
  17.         break;  
  18. }    
code
 
Step 7: Deploy your App in Local Machine and the output of UWPHubApp App is given below-

output
 
To click seemore, navigate to the next section.

Navigate  

Summary: Now, you successfully created and tested your Hub Control in Visual C# - UWP environment.


Similar Articles