locked
FlipView-type navigation for Pages

    Question

  • I would like to walk through the pages of my application as if it were a FlipView control (by swiping left and right). I can not use a real FlipView because it eats all manipulation events (making my pages unresponsive to touch), and I can not use Frame/Page navigation because it does not give me the nice animations. Any suggestions ?
    Thursday, October 06, 2011 7:34 PM

Answers

  • Here's the reply I got from a dev engineer:

    - They should get a PointerEntered event for the first finger touching the screen.
    - For subsequent fingers, they should get a PointerEntered event as well as long as the previous finger(s) did not trigger a DirectManipulation.
    - DirectManipulation can be blocked by setting the UIElement.ManipulationMode property to something else than None. In this case they can set that property on a Border or the Grid element.
    - DirectManipulation can also be blocked by setting e.ManipulationMode to something else than None in the ManipulationStarting event handler.

    The inner controls can be put inside a ScrollViewer control that supports vertical panning only, by setting HorizontolScrollMode=Disabled and VerticalScrollMode=Enabled.

    Does this answer the question?


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Monday, October 24, 2011 5:21 PM
    Moderator

All replies

  • The FlipView Control sample scenario 3 does not fit your needs?  That shows interacting with the HTML.
    Jeff Sanders (MSFT)
    Friday, October 07, 2011 2:23 PM
    Moderator
  • Thanks for the suggestion. Based on that sample I'll try the following: hang a bunch of pages or user controls in a FlipView. After navigation through swipe, hide the FlipView but keep on displaying the control. If horizontal manipulation is detected, show the FlipView again and let it take over the navigation. Looks a bit cumbersome, but very feasible.
    Friday, October 07, 2011 5:17 PM
  • Hi Diederik,

    Depending on what you are trying to achieve... You may be able to use something similar to scenario to of the Transitions Animation sample: http://code.msdn.microsoft.com/windowsapps/Transition-Animations-49f902d1

    You could use - pixel and + pixel X offsets and 1 section to fly pages left and right!

    -Jeff


    Jeff Sanders (MSFT)
    Friday, October 07, 2011 8:22 PM
    Moderator
  • Thanks again, Jeff. 

    I created a small sample to illustrate the problem (by the way: I'm using XAML, not HTML).

    Here you have a FlipView with two 'pages', each containing a Slider.

    <FlipView>
        <FlipViewItem Background="Pink">
                <Slider VerticalAlignment="Center" Margin="36"/>
            </FlipViewItem>
        <FlipViewItem Background="LightBlue" >
                <Slider VerticalAlignment="Center" Margin="36" />
            </FlipViewItem>
    </FlipView>
    

    The app runs very nice in mouse mode, but in touch-only mode it gets very hard to select or manipulate a slider. Other controls behave even worse than the slider: all manipulation events seem to be swallowed by the FlipView, even when you set e.Handled to true. You end up with a very nervous GUI.

    Sunday, October 09, 2011 9:23 AM
  • Diederik,

    I plopped your XAML into the Flip View sample (Scenario 1) and used the Simulator without much of a problem but that could be because it is not a physical device.  I will try on a physical device or get one of my coworkers to do it and get back to you!

    -Jeff


    Jeff Sanders (MSFT)
    Monday, October 10, 2011 7:14 PM
    Moderator
  • Hi Diederik - I am in the process of gettting my tablet set up to test.  I'll update you tomorrow.
    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Monday, October 10, 2011 8:21 PM
    Moderator
  • Hi Diederik - I put the sample on my Acer W500 tablet.  The slider was a litle difficult to touch at first because it was set to the default size which I thought was very thin. I increased the vertical size of the slider to a bigger size and had no problems at all.  Are there any other controls which seem difficult to manipulate?
    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Tuesday, October 11, 2011 8:53 PM
    Moderator
  • Hi Matt, here's a more elaborate sample:
    <FlipView>
        <FlipViewItem Background="Pink">
                <Slider VerticalAlignment="Center" Margin="36"/>
            </FlipViewItem>
        <FlipViewItem Background="LightBlue" >
                <ToggleSwitch VerticalAlignment="Center" Margin="36" />
            </FlipViewItem>
            <FlipViewItem Background="LightGreen" >
                <Grid x:Name="theGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="5*"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Border Background="Red" Grid.Row="0" PointerEntered="ColorStrip_PointerEntered" />
                        <Border Background="Yellow" Grid.Row="1" PointerEntered="ColorStrip_PointerEntered" />
                        <Border Background="Green" Grid.Row="2" PointerEntered="ColorStrip_PointerEntered" />
                    </Grid>
                </Grid>
            </FlipViewItem>
        </FlipView><br/>
    
            private void ColorStrip_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerEventArgs e)
            {
                Border el = e.OriginalSource as Border;
                this.theGrid.Background = el.Background;
            }
    

     

    In the third page I want to allow the user to change the background color by swiping over the colored borders on the right. This works very well with the mouse, but in touch-only mode it only works when tapping. The FlipView control seems to swallow all manipulation events, even swiping in a direction perpendicular to its own. Inside another container control, everything works as expected.


    Wednesday, October 12, 2011 5:47 PM
  • Hi Diederik,
          On my Acer, I find that swiping from the outside of the Flipview into the new color area allows the color to change without much problem.  When I swipe inside the Flipview, it moves the Flipview current view rather than changing the color, as it thinks that is what I am trying to do. 
           I've uploaded a video to Youtube so you can see what I am talking about.  Please let me know if I am not understanding your question properly.

    http://www.youtube.com/watch?v=i3Rrjtv-CWk

     

    - Matt


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Tuesday, October 18, 2011 4:06 PM
    Moderator
  • Hi Matt,

    thanks for the feedback.

    You certainly noticed that swiping vertically through the colors does not change the background color. Well, it should. Here is an example of a similar screen: http://www.youtube.com/watch?v=sB_xtG-7UvA. It works very well until you host it inside a FlipView.

    -Diederik

    Tuesday, October 18, 2011 6:53 PM
  • I think I understand what you mean now - the three colors (red, yellow, green ) are hosted inside the flipview and are stacked vertically. When the finger touches the screen, any dragging moves the entire flipview,even vertically, and does not drag from one color to the next. It seems like we need to figure out how to have the flipview stay stationary when the finger moves vertical. Is that correct?


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Tuesday, October 18, 2011 8:13 PM
    Moderator
  • That's 100% correct!
    Wednesday, October 19, 2011 12:32 PM
  • Diederik - I set the "ManipulationMode" property on the Flipview and I think I have the best that we're going to get in this scenario:

    <Flipview ManipulationMode="TranslateX">

    This allows the flipview to understand left-to-right finger swipes that allows the flipview to change between flipviewitems but does not try to move the flipview when the finger moves vertically. 

    I think you're seeing a limitation on what is possible when you integrate controls that use the same gestures for manipulation.  If you have one control on another control and both use the same gesture for activation, you're likely going to run into problems if their boundaries are not clearly defined. 

    You would probably be better off not combining these controls if you're looking for best productivity. 


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Wednesday, October 19, 2011 2:29 PM
    Moderator
  • Diederik - I contacted our PMs and they are investigating this scenario to see how it can be improved.  I'll let you know when there's an update.

     


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Thursday, October 20, 2011 5:05 PM
    Moderator
  • Thanks Matt, I really appreciate this.

    At this moment, this is my observation: the FlipView is a fantastic control, but in its current implementation (Developer Preview) it is only useful for navigating between rather passive elements, e.g. images and menu items. When the FlipView is used to host more interactive content -e.g. user controls and pages- it absorbs most of the manipulation events, making these controls unresponsive to touch.

    I'm looking forward to an update ...

    Thursday, October 20, 2011 5:45 PM
  • Here's the reply I got from a dev engineer:

    - They should get a PointerEntered event for the first finger touching the screen.
    - For subsequent fingers, they should get a PointerEntered event as well as long as the previous finger(s) did not trigger a DirectManipulation.
    - DirectManipulation can be blocked by setting the UIElement.ManipulationMode property to something else than None. In this case they can set that property on a Border or the Grid element.
    - DirectManipulation can also be blocked by setting e.ManipulationMode to something else than None in the ManipulationStarting event handler.

    The inner controls can be put inside a ScrollViewer control that supports vertical panning only, by setting HorizontolScrollMode=Disabled and VerticalScrollMode=Enabled.

    Does this answer the question?


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    Monday, October 24, 2011 5:21 PM
    Moderator
  • Thanks Matt. This is indeed the answer.

    In my previous sample, each colored rectangle can block the FlipView manipulation by registering itself on manipulation events -by setting ManipulationMode to something different from None- , and then simply ignore these events - by specifying no handler at all.

    When the XAML is modified as follows, everything works as expected:

    <Border Background="aColor" Grid.Row="aRow" PointerEntered="ColorStrip_PointerEntered" ManipulationMode="TranslateRailsY" />
    

    Tuesday, October 25, 2011 4:56 PM