locked
Using Microsoft.Xaml.Interactivity to do navigation with interactive HubSections

    Question

  • Hi,

    I', trying to use Microsoft.Xaml.Interactivity to do navigation. It works great, if I use it in the context of buttons. It's easy, readable and nice that I don't have to code anything. But I don't know how to control it with interactive HubSections.

    I figured out so far, that I can add the interaction behavior to the hub and when I make a HubSection interactive, it goes to the Page defined in the Hub definition (see the snippet below). So it basically works. But I don't want all the HubSections go to the same Page.

    What do I have to do, to make the HubSections navigate to different pages?

    <prismStorapps:VisualStateAwarePage
        x:Class="App1.Views.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
        xmlns:core="using:Microsoft.Xaml.Interactions.Core"
        xmlns:prismStorapps="using:Microsoft.Practices.Prism.StoreApps"
        xmlns:prism="using:Microsoft.Practices.Prism.Mvvm"
        prism:ViewModelLocator.AutoWireViewModel="true"
        mc:Ignorable="d">

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition/>
                </TransitionCollection>
            </Grid.ChildrenTransitions>
            <Hub >
                <interactivity:Interaction.Behaviors>
                    <core:EventTriggerBehavior EventName="SectionHeaderClick">
                        <core:NavigateToPageAction TargetPage="App1.Views.Section1Page"/>
                    </core:EventTriggerBehavior>
                </interactivity:Interaction.Behaviors>
                <HubSection Header="Hello" VerticalAlignment="Stretch" IsHeaderInteractive="True" >
                    <DataTemplate>

    ...

    Thank you in advance!

    Rico

    Saturday, October 04, 2014 11:00 AM

Answers

  • Hi James,

    well ... I understand your explanation and was afraid, that that's the case.

    But I know that the SectionHeaderClick event has information about the source object, which as far as I can tell is the HubSection. I mean if I could define the target name on the HubSection element, the construct would have all the information it needs to navigate to a different target for every section.

    It's frustrating and disappointing, because in this case behavior is such a great idea, but there is just the last bit missing to make it awesome. But instead you have to do a complicated workaround to make it work.

    Regards,

    Rico

    Monday, October 06, 2014 1:52 PM
  • Hi Rico,

    Yes I agree, everything should be as simply as they can.

    To help us improve the BehaviorSDK you could raise your suggestion at https://wpdev.uservoice.com/forums/110705-dev-platform

    But basically personally I don't think BehaviorSDK is difficult to use, try it with Blend, you should be able to find it is really easy, we do not need to code them but simply drag and drop, fill in some parameter can automatically generate the code.

    See this tutorial for more information: Add a built-in behavior

    As you can see my screenshot below:

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, October 07, 2014 3:26 AM
    Moderator

All replies

  • Hi Rico,

    Try to using Binding for the Target Page, basically TargetPage accept a String format, you could binding the string to the TargetPage property.

                <interactivity:Interaction.Behaviors>
                     <core:EventTriggerBehavior EventName="SectionHeaderClick">
                         <core:NavigateToPageAction TargetPage="{Binding pageName}"/>
                     </core:EventTriggerBehavior>
                 </interactivity:Interaction.Behaviors>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, October 06, 2014 6:30 AM
    Moderator
  • Hi James,

    thank you for your answer. I thought of that already, but I don't know how to I can make the HubSection set the property before the action is performed. I'm just starting to learn xaml, so please excuse my problably dumb question.

    I rather hoped that there is an elegant (built in) way to do this. It seems that you easily can add an interaction behavior to the Hub, so I would assume that there is an easy way to address the different HubSections.

    Regards,

    Rico

    Monday, October 06, 2014 7:21 AM
  • Hi Rico,

    SectionHeaderClick event is a Hub event, we can say no matter which section header been clicked, it will fire to a event, and you could get it from Section property.

    Therefore I think you could define a HeaderTemplate and enable the tapped event, and you could put your code as below, here I use a button, you could use Gird instead.

    <HubSection.HeaderTemplate>
        <DataTemplate>
            <Button Content="click me">
                <Interactivity:Interaction.Behaviors>
                    <Core:EventTriggerBehavior EventName="Click">
                        <Core:NavigateToPageAction TargetPage="{Binding TargetPageName}" />
                    </Core:EventTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
            </Button>
        </DataTemplate>
    </HubSection.HeaderTemplate>

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, October 06, 2014 10:44 AM
    Moderator
  • Hi James,

    well ... I understand your explanation and was afraid, that that's the case.

    But I know that the SectionHeaderClick event has information about the source object, which as far as I can tell is the HubSection. I mean if I could define the target name on the HubSection element, the construct would have all the information it needs to navigate to a different target for every section.

    It's frustrating and disappointing, because in this case behavior is such a great idea, but there is just the last bit missing to make it awesome. But instead you have to do a complicated workaround to make it work.

    Regards,

    Rico

    Monday, October 06, 2014 1:52 PM
  • Hi Rico,

    Yes I agree, everything should be as simply as they can.

    To help us improve the BehaviorSDK you could raise your suggestion at https://wpdev.uservoice.com/forums/110705-dev-platform

    But basically personally I don't think BehaviorSDK is difficult to use, try it with Blend, you should be able to find it is really easy, we do not need to code them but simply drag and drop, fill in some parameter can automatically generate the code.

    See this tutorial for more information: Add a built-in behavior

    As you can see my screenshot below:

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Tuesday, October 07, 2014 3:26 AM
    Moderator