locked
Scrollviewer and ManipulationCompleted RRS feed

  • Question

  • Hi,

    I have a page with a grid and inside a templated ContentControl that can have 2 different templates SimplePage and DoublePage, let's consider the SimplePage case :

    <Grid Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
                <TextBlock x:Uid="NoReadingWhenSnapped" HorizontalAlignment="Center" VerticalAlignment="Center" 
                           Foreground="Black" x:Name="txtIndisponible"
                           Style="{StaticResource BodyTextStyle}" TextWrapping="Wrap"/>
                <ContentControl x:Name="grd1" Margin="0" Background="Transparent"
                                LayoutUpdated="ImageViewport_LayoutUpdated"
                                ContentTemplate="{StaticResource SimplePage}"
                                HorizontalContentAlignment="Stretch"
                                VerticalContentAlignment="Stretch"
                                HorizontalAlignment="Stretch" 
                                VerticalAlignment="Stretch" 
                                Tapped="grd1_Tapped">
                    <ContentControl.Transitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </ContentControl.Transitions>
                    <ContentControl.ContentTransitions>
                        <TransitionCollection>
                            <PaneThemeTransition/>
                        </TransitionCollection>
                    </ContentControl.ContentTransitions>
                </ContentControl>
                <!--<FlipView Style="{StaticResource FlipViewStyle1}"/>-->
            </Grid>

    and the SimplePage template:

    <DataTemplate x:Key="SimplePage">
                <Grid x:Name="SimplePageDataTemplateGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" Loaded="SimplePageGrid_Loaded">
                    <ScrollViewer x:Name="zoomScroller" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center"
                                      VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" Background="Transparent" 
                                  HorizontalScrollMode="Auto" VerticalScrollMode="Auto"
                                  ManipulationMode="System" ManipulationCompleted="LecteurPage_ManipulationCompleted" ViewChanged="zoomScroller_ViewChanged">
                        <ScrollViewer.Transitions>
                            <TransitionCollection/>
                        </ScrollViewer.Transitions>
                        <Grid x:Name="ImageViewport" HorizontalAlignment="Center" VerticalAlignment="Center" 
                              Tapped="ImageViewport_Tapped" DoubleTapped="ImageViewport_DoubleTapped_1">
                            <Image Source="{Binding Image}"  Stretch="None" SizeChanged="Image_SizeChanged_1"
                                   UseLayoutRounding="True" CacheMode="BitmapCache"
                                   HorizontalAlignment="Center" VerticalAlignment="Top">
                            </Image>
                        </Grid>
                    </ScrollViewer>
                    <ProgressRing Width="50" Height="50" IsActive="{Binding IsLoading}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>

    I am subscribing to the ManipulationCompleted event from the scrollviewer but of course I never receive it because I assume it captures the touch events to handle the scrolling. In my case the scrolling bar is never shown because the zoom factor is limited so I would like to know how I can detect that the user is moving his finger horizontally to go to the next/previous page ?
    First I wanted to inherit from Scrollviewer control but it's a sealed class so it's not the right option.
     I had a solution and it implied to watch the following events :

          this.PointerPressed += LecteurPage_PointerPressed;
                this.PointerMoved += LecteurPage_PointerMoved;
                this.PointerReleased += LecteurPage_PointerReleased;

    but unfortunately I only receive the PointerPressed events and not the Moved and Released so I cannot even handle it manually...

     
    Friday, December 28, 2012 1:58 PM

Answers

All replies

  • You need to set ManipulationMode to something other than ManipulationModes.System.

    Be aware though that'll you'll have to take over all manipulation of the scrollviewer yourself.

    Friday, December 28, 2012 6:45 PM
  • I tried by adding the ManipulationStarted and ManipulationDelta as shown below :

    <DataTemplate x:Key="SimplePage">
                <Grid x:Name="SimplePageDataTemplateGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" Loaded="SimplePageGrid_Loaded">
                    <ScrollViewer x:Name="zoomScroller" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Center"
                                      VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" Background="Transparent" 
                                  HorizontalScrollMode="Auto" VerticalScrollMode="Auto"
                                  ManipulationMode="TranslateX TranslateInertia"
                                  ManipulationStarted="LecteurPage_ManipulationStarted"
                                  ManipulationDelta="LecteurPage_ManipulationDelta"
                                  ManipulationCompleted="LecteurPage_ManipulationCompleted" 
                                  ViewChanged="zoomScroller_ViewChanged">
                        <ScrollViewer.Transitions>
                            <TransitionCollection/>
                        </ScrollViewer.Transitions>
                        <Grid x:Name="ImageViewport" HorizontalAlignment="Center" VerticalAlignment="Center" 
                              Tapped="ImageViewport_Tapped" DoubleTapped="ImageViewport_DoubleTapped_1">
                            <Image Source="{Binding Image}"  Stretch="None" SizeChanged="Image_SizeChanged_1"
                                   UseLayoutRounding="True" CacheMode="BitmapCache"
                                   HorizontalAlignment="Center" VerticalAlignment="Top">
                            </Image>
                        </Grid>
                    </ScrollViewer>
                    <ProgressRing Width="50" Height="50" IsActive="{Binding IsLoading}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>

    But I only receive the ManipulationStarted event when I try to zoom in/out and not when I move my finger from right/left ...

    Monday, December 31, 2012 11:08 AM
  • Some other (parent) control is taking over the manipulation so you aren't receiving any events.

    What control is the DataTemplate SimplePage being used within? You more than likely have to set the manipulationmode on this control to something other than system as well.

    If you want to look at runtime for what control might be eating the events you can always use www.xamlspy.com (No affiliation). There will be a scrollviewer somewhere doing this. You can use xamlspy to change properties on the fly so you can go up the visualtree investigating manipulationmode on each node.


    British Airways Inspiration App & rara music

    Monday, December 31, 2012 12:07 PM
  • Hi,

    The ScrollViewer is receiving the event, so the manipulation won't be fired. You could try the way in this method:

    http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/d83dee4a-ee6d-4a50-a5a9-0107af8e36aa


    Aaron
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Aaron Xue Monday, January 7, 2013 11:18 AM
    Tuesday, January 1, 2013 7:24 AM