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

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#.

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

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

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.

Now, we can change the Hubsection 1 Name, Header property and enable the IsHeaderInteractive 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.

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

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

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