Integrating SemanticZoom with Hub in Windows 8.1

Editor’s note: The following post was written by Client Development MVP Houssem Dellai

 Integrating SemanticZoom with Hub in Windows 8.1

1-    Introduction

Windows 8.1 has come with some cool new controls. One of them is the Hub component. The Hub makes it easier for developers to design grouped items, than it was in Windows 8.0. In fact, it’s now possible to design each group independently from other groups, without using the CollectionViewSource or either developing additional classes to got items of the group in different sizes.

2-    Problem

One of the common tasks for developers was integrating the SemanticZoom with the groups using the same CollectionViewSource. Now they want to use the Hub, without the CollectionViewSource. In that case, they may notice that, in ZoomedOutView mode, tapping a section name will return to the ZoomedInView mode, but doesn’t scroll to the right HubSection. Instead, it always scroll to the first HubSection, as shown in figure 1!

 

Figure1. Clicking on any Hub Section scrolls always to the first Hub Section.

 

3-    Solution

Let’s make each item of the ZoomedOutView point to the right HubSection in the ZoomedInView. For that, we’ll use the ScrollToSection (HubSection section) method in the Hub object. All what to do is just passing into parameter the HubSection to scroll to.

Following is the Tapped event’s code that will recognize the requested HubSection and scroll to it.

 

 

private async void GoToSection_Tapped(object sender, TappedRoutedEventArgs e)

{

    await Task.Delay(200); // This delay is relevant for the success of the scrolling.

 

    // Get the title of the HubSection from the tapped TextBlock

    var textBlock = e.OriginalSource as TextBlock;

    if (textBlock == null) return;

    var sectionName = textBlock.Text;

 

    // Depending on the title, scroll to the related HubSection.

    switch (sectionName)

    {

        case "Hub Section 1":

            MainHub.ScrollToSection(MainHub.Sections[0]);

            break;

        case "Hub Section 2":

            MainHub.ScrollToSection(MainHub.Sections[1]);

            break;

        case "Hub Section 3":

            MainHub.ScrollToSection(MainHub.Sections[2]);

            break;

        case "Hub Section 4":

            MainHub.ScrollToSection(MainHub.Sections[3]);

            break;

    }

}

 

Figure2. Clicking on “Hub Section 2” will scroll to the second Hub Section.

 

4-    Conclusion

This article shows how much easy it is to take advantage of the semantic zoom in Windows Store apps. As users really like to use these funny touch gestures on their tablets, this is a useful feature.

About the author

Houssem is a Software Engineer specialized in client development. He is developing Windows 8 and Windows Phone apps that uses Windows Azure for backend services. He also give technical trainings, speak in international conferences and write articles. You can find more on his website or follow him on Twitter!

The MVP Monday Series is created by Melissa Travers. In this series we work to provide readers with a guest post from an MVP every Monday. Melissa is a Community Program Manager, formerly known as MVP Lead, for Messaging and Collaboration (Exchange, Lync, Office 365 and SharePoint) and Microsoft Dynamics in the US. She began her career at Microsoft as an Exchange Support Engineer and has been working with the technical community in some capacity for almost a decade. In her spare time she enjoys going to the gym, shopping for handbags, watching period and fantasy dramas, and spending time with her children and miniature Dachshund. Melissa lives in North Carolina and works out of the Microsoft Charlotte office.