locked
Swipte up & down gesture in hub control

    Question

  • I want to detect vertical gestures in a hub control. The hub section in question does not scroll vertically.

    It appears that if I set ManipulationMode in the UI elements in said hub section, the hub won't scroll horizontally if the horizontal swipe originated in the UI element with ManipulationMode.

    Is there any way of having the vertical swipe and horizontal swipe work in unison? kinda like how xbox music on windows phone does in the now playing hub section. You can scroll up and down in the album art images to skip next, skip previous, and you can also scroll horizontally to change views. Reproducing this behaviour seems extremely difficult.


    • Edited by mcosmin Sunday, December 14, 2014 6:49 PM
    Sunday, December 14, 2014 6:48 PM

Answers

  • I was able to do this using a FlipView. I created a default Hub App and replaced HubSection3 with the code below.  I can switch between the different views, and when I get to the flipview, it scrolls vertically with different items.

     <HubSection x:Uid="HubSection3" Header="SECTION 3"
                            HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
                    <DataTemplate>
                        <FlipView>
                            <FlipView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Vertical"/>
                                </ItemsPanelTemplate>
                            </FlipView.ItemsPanel>
    
                            <FlipViewItem>
                                <Image Source="Assets/Logo.scale-240.png"/>
                            </FlipViewItem>
    
                            <FlipViewItem>
                                <Image Source="Assets/SmallLogo.scale-240.png"/>
                            </FlipViewItem>
                            <FlipViewItem>
                                <Image Source="Assets/WideLogo.scale-240.png"/>
                            </FlipViewItem>
                        </FlipView>
                        
                        
                    </DataTemplate>
                </HubSection>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by mcosmin Saturday, December 20, 2014 5:14 PM
    Monday, December 15, 2014 5:05 PM
    Moderator

All replies

  • I was able to do this using a FlipView. I created a default Hub App and replaced HubSection3 with the code below.  I can switch between the different views, and when I get to the flipview, it scrolls vertically with different items.

     <HubSection x:Uid="HubSection3" Header="SECTION 3"
                            HeaderTemplate="{ThemeResource HubSectionHeaderTemplate}">
                    <DataTemplate>
                        <FlipView>
                            <FlipView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Vertical"/>
                                </ItemsPanelTemplate>
                            </FlipView.ItemsPanel>
    
                            <FlipViewItem>
                                <Image Source="Assets/Logo.scale-240.png"/>
                            </FlipViewItem>
    
                            <FlipViewItem>
                                <Image Source="Assets/SmallLogo.scale-240.png"/>
                            </FlipViewItem>
                            <FlipViewItem>
                                <Image Source="Assets/WideLogo.scale-240.png"/>
                            </FlipViewItem>
                        </FlipView>
                        
                        
                    </DataTemplate>
                </HubSection>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by mcosmin Saturday, December 20, 2014 5:14 PM
    Monday, December 15, 2014 5:05 PM
    Moderator
  • I think I already tried that and I didn't like the outcome. I just don't remember why right now.
    Tuesday, December 16, 2014 7:37 AM
  • I'm not sure why - it seemed to be exactly what you wanted when I tried it.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, December 16, 2014 2:46 PM
    Moderator
  • Oh.

    Well, it has something to do with the mechanics behind it. because the selected item always has to be in the middle (so you can always scroll down or up from the middle). My issue was that i was artificially setting SelectedIndex = 1 and the flipview performed the animation to show the proper selected index.

    I will try an observable collection and add and remove items so that the slected item will always be in the middle without manually setting SelectedIndex.


    • Edited by mcosmin Wednesday, December 17, 2014 9:08 PM
    Wednesday, December 17, 2014 9:07 PM
  • Yup. Combining your idea with an observable collection did the trick.
    Saturday, December 20, 2014 5:14 PM