Which ManipulationMode is suites for panning the custom control in UWP?

Question

I have a custom control(CustomPanel), i set the ManipulationMode as Scale but i can't able to scroll. Which ManipulationMode is suit for scrolling and panning?

Please find my custom control.

 <ContentPresenter Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Border>
        <Grid>
            <ScrollViewer x:Name="scrollViewer" 

                          HorizontalScrollBarVisibility="Visible" 
                          VerticalScrollBarVisibility="Visible"
                          HorizontalAlignment="Left" 
                          VerticalAlignment="Top">
                <local:CustomPanel x:Name="customPanel" Height="800" Width="900"
                                   ManipulationMode="Scale"/>
            </ScrollViewer>
        </Grid>
    </Border>
</ContentPresenter>

score 1 · Answer 1 · answered Jul 28 '16 at 04:50

1

I think the problem is that you can not set the ManipulationMode to your CustomPanel, since your CustomPanel is inside of the ScrollViewer, if you enable the manipulation mode inside the ScrollViwer, the controls inside will catch the manipulation event and don't handle that to its parent ScrollViewer any more, and if you don't handle the Manipulation events for this control in the code behind, there will be no effects except the ScrollViewer won't work any more.

But ScrollViewer can let user pan and zoom its content. so a possible solution is enable the scrolling and zooming in the ScrollViewer:

<Border>
    <Grid>
        <ScrollViewer x:Name="scrollViewer" 
      HorizontalScrollBarVisibility="Visible" 
      VerticalScrollBarVisibility="Visible"
      HorizontalAlignment="Left"  HorizontalScrollMode="Auto" VerticalScrollMode="Auto"
      VerticalAlignment="Top"
                    ZoomMode="Enabled" >
            <local:CustomPanel x:Name="customPanel" Height="800" Width="900"
               />
        </ScrollViewer>
    </Grid>
</Border>

answered Jul 28 '16 at 04:50

Grace Feng

16,564
2
22
45

Grace- Thank you for your suggestion, i have set the ManipulationMode like this `ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;` And i have processed the offset like this in ManipulaionDelta `if (ScrollOwner != null) { this.ScrollOwner.ChangeView(HorizontalOffset - e.Delta.Translation.X, VerticalOffset - e.Delta.Translation.Y, null, true); e.Handled = true; }` but the panning is not works – Farjana Parveen Ayubb Aug 02 '16 at 06:58
You mean you set the `ManipulationModes` to the child element of `ScrollViewer`? As I said, it will make `ScrollViewer` lost its scrolling, panning, zooming functions, cause all the gestures are caught by the child element and will not pass to `ScrollViewer` again. – Grace Feng Aug 02 '16 at 07:18
Grace- Thank you for your suggestion, but the above code is works fine for the Desktop in scrolling and panning, for mobile scrolling is works perfectly the issue only in panning. – Farjana Parveen Ayubb Aug 02 '16 at 09:01
@FarjanaParveenAyubb, OK, by second looking at your code, I can understand now, I think your code should only work for scrolling both on PC and mobile, for panning gesture, you want the child element change its position relative to its parent ScrollViewer, right? If yes, then you can try to calculate the position with the `ScrollableHeight` and `ScrollableWidth` of `ScrollViewer`, they indicate the real movable size inside the `ScrollViewer`. – Grace Feng Aug 02 '16 at 09:15
Grace - I have removed the `ManipualtionMode` for child(CustomPanel) and set the `ManipulationMode` for ScrollViewer as you suggest. And triggered the `ManipulationDelta` for ScrollViewer, while scrolling ManipulationDelta is not triggered. Could you please provide the suggestion for this. – Farjana Parveen Ayubb Aug 04 '16 at 09:02
@FarjanaParveenAyubb, I didn't suggest use ManipulationMode for `ScrollViewer`, I said, by default `ScrollViewer` supports the gesture of scrolling and zooming. You don't need to add manipulation events to controls inside of `ScrollViewer`.... – Grace Feng Aug 04 '16 at 10:04
Grace- sorry i misunderstood your suggestion, but we have some fixed rows in our custom grid(CustomPanel), while scrolling without set the `ManipualtionMode` the fixed rows are flicker, so only i triggered the ManipulationDelta. – Farjana Parveen Ayubb Aug 04 '16 at 10:40

Which ManipulationMode is suites for panning the custom control in UWP?

1 Answers1