Farjana Parveen Ayubb
Farjana Parveen Ayubb

Reputation: 305

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

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>

Upvotes: 1

Views: 331

Answers (1)

Grace Feng
Grace Feng

Reputation: 16652

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>

Upvotes: 1

Related Questions