locked
Hub App, HubSection Navigation with C# and Xaml RRS feed

  • Question

  • I am working with the Hub App template for Visual Studio 2013 RC - to build out an upcoming Windows 8.1 project;

    Is it possible with C# and Xaml to navigate within Hub Sections of the Hub App - rather than navigate to a new Xaml page on a click event, stay on the initial Hub App page, and navigate to a different HubSection within the Hub App page;

    Thanks in advance for insight, guidance;


    robert hellestrae

    Monday, September 16, 2013 7:07 PM

Answers

  • Yep, you can do that. For example, if you start with a XAML Hub App template, you can add the following code to have the Item Click event in Section 2, navigate to another section - say Section 5 for example.

    Here's how  you can modify the XAML & CS of the generated code for HubPage.xaml & HubPage.xaml.cs:

    - In the below page, I have given the Hub a name called as "TestHub"

    - Replaced ItemView_ItemClick with navigating to a HubSection instead of a different page.

    XAML:
    ======
            <Hub SectionHeaderClick="Hub_SectionHeaderClick" Padding="40,40,0,0" Name="TestHub">
    
    CS:
    ====
            void ItemView_ItemClick(object sender, ItemClickEventArgs e)
            {
                // Navigate to the appropriate destination page, configuring the new page
                // by passing required information as a navigation parameter
                //var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
                //this.Frame.Navigate(typeof(ItemPage), itemId);
                TestHub.ScrollToSection(TestHub.Sections[4]);
            }


    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    • Marked as answer by rrobhelle Tuesday, September 17, 2013 1:09 AM
    Monday, September 16, 2013 11:17 PM
    Moderator

All replies

  • Yep, you can do that. For example, if you start with a XAML Hub App template, you can add the following code to have the Item Click event in Section 2, navigate to another section - say Section 5 for example.

    Here's how  you can modify the XAML & CS of the generated code for HubPage.xaml & HubPage.xaml.cs:

    - In the below page, I have given the Hub a name called as "TestHub"

    - Replaced ItemView_ItemClick with navigating to a HubSection instead of a different page.

    XAML:
    ======
            <Hub SectionHeaderClick="Hub_SectionHeaderClick" Padding="40,40,0,0" Name="TestHub">
    
    CS:
    ====
            void ItemView_ItemClick(object sender, ItemClickEventArgs e)
            {
                // Navigate to the appropriate destination page, configuring the new page
                // by passing required information as a navigation parameter
                //var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
                //this.Frame.Navigate(typeof(ItemPage), itemId);
                TestHub.ScrollToSection(TestHub.Sections[4]);
            }


    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    • Marked as answer by rrobhelle Tuesday, September 17, 2013 1:09 AM
    Monday, September 16, 2013 11:17 PM
    Moderator
  • Fantastic - thanks, and the Hub.ScrollToSection method works great for my project;

    robert hellestrae

    Tuesday, September 17, 2013 1:09 AM