ViewportControl as DataTemplate in Landscape mode

[Benjamin]

Hi, I'm having some problems with using a ViewportControl as a DataTemplate in Landscape mode. The ViewportControls bounds is set so the width of it fits the screen and the height is set to a higher value making it scroll-able in vertical direction only.

In portrait mode this works fine, I can scroll the ViewportControl up and down and swiping horizontally changes the item in the SlideView, just as expected. But in landscape mode I have to start a vertical swipe and then while swiping change the swipe direction to horizonal in order to change item in the SlideView. If i start a horizontal swipe the ViewportControl seems to get the swipe event and the other way around, the events seems to get mixed up or something.

I have tried the same DataTemplate in the WP8 Panorama- and Pivot-control, there it works like expected. So I'm wondering if there is some work-around this, or if it can be fixed?

To reproduce it the following XAML can be used:

<Controls:RadSlideView ItemsSource="{Binding SomeCollection}" ItemTemplate="{StaticResource TestTemplate}"/>

<DataTemplate x:Key="TestTemplate">
    <ViewportControl x:Name="SlideViewViewport" Bounds="0,0,400,1000">
        <Border Background="AliceBlue" Width="200" Height="200"/>
    </ViewportControl>
</DataTemplate>

Thanks!

[Valentin.Stoychev]

Hi Benjamin,

Currently the Scrollviewer inside the ViewPort control is "eating" the events and they do not go to the SlideView control.

There is no known workaround for this. We will add this to our backlog to see if we can change the handing of the events.

Regards, Valentin.Stoychev
Telerik

[Benjamin]

Hi thanks for the reply. Bummer though, this is kind of a deal breaker for us. I also think it's strange how it works perfect in portrait mode, ah well. Is it possible to get any date of when this might be fixed?

Thanks

[Todor]

Hi Benjamin,

In RadSlideView we rely on the ManipulationDelta event to perform the sliding and it seems like the ViewportControl doesn't handle the manipulation as expected in landscape mode. Have a look at the following snippet:

<Border ManipulationDelta="Border_ManipulationDelta">
    <ViewportControl x:Name="SlideViewViewport" Bounds="0,0,400,1000">
        <Border Background="AliceBlue" Width="200" Height="200"/>
    </ViewportControl>
</Border>

It you add a breakpoint in the ManipulationDelta event handler, you will notice that the breakpoint is hit on Horizontal manipulation in portrait mode (which is the one we use to change the slide view item). However, when the orientation is changed, the breakpoint is hit only on Vertical manipulation.

If you share some more details on your scenario we may be able to propose a workaround. For example, you can use the ScrollViewer, which seems to provide better experience in both portrait and landscape modes.

Regards,
Todor
Telerik

[Benjamin]

Hi, thanks for the quick reply, very much appreciated!

The thing I'm trying to achieve is zoom and pan-functionality in the RadSlideView ItemTemplate. That is why I'm using a ViewportControl with a Canvas and then applying a RenderTransform (ScaleTransform) to a StackPanel in the Canvas. My code is very similar to the one found in this SDK-sample. I'm not sure if this can be achieved without a ViewportControl.

I know there is a PanAndZoom control that would be perfect for my needs, except I need to have two images side by side that can be zoomed and panned as one single image (think a left and right page in a book). I found no way to do this with the PanAndZoom control, if there is that would be great.

My current XAML looks something like this:

<Controls:RadSlideView Name="SlideView"
                       ItemsSource="{Binding DoublePages}"
                       IsLoopingEnabled="False"
                       SelectionChanged="RadSlideView_SelectionChanged"
                       ItemRealizationMode="ViewportItem">

    <Controls:RadSlideView.ItemTemplate>
        <DataTemplate>
            <ViewportControl x:Name="SlideViewViewport"
                             Loaded="SlideViewViewport_Loaded"
                             ManipulationStarted="SlideViewViewport_ManipulationStarted"
                             ManipulationDelta="SlideViewViewport_ManipulationDelta"
                             ManipulationCompleted="SlideViewViewport_ManipulationCompleted"
                             SizeChanged="SlideViewViewport_SizeChanged">
                <Canvas>
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Image Source="{Binding LeftPage.Image}"
                               Stretch="Fill"
                               Width="{Binding ElementName=SlideViewSpread, Path=DataContext.PageWidth}"
                               Height="{Binding ElementName=SlideViewSpread, Path=DataContext.PageHeight}"
                               CacheMode="BitmapCache"/>

                        <Image Source="{Binding RightPage.Image}"
                               Stretch="Fill" Margin="-1,0,0,0"
                               Width="{Binding ElementName=SlideViewSpread, Path=DataContext.PageWidth}"
                               Height="{Binding ElementName=SlideViewSpread, Path=DataContext.PageHeight}"
                               CacheMode="BitmapCache"/>

                        <StackPanel.RenderTransform>
                            <ScaleTransform x:Name="xform"/>
                        </StackPanel.RenderTransform>
                    </StackPanel>
                </Canvas>
            </ViewportControl>
        </DataTemplate>
    </Controls:RadSlideView.ItemTemplate>
</Controls:RadSlideView>

[Valentin.Stoychev]

Hi,

In this case what you can do is to use our PanAndZoom image.

What you can do is to render your two images on the surface and to create a WritableBitmap. Then you can set the Source of the PanAndZoomImage to be this WritableBitmap. This should do the trick.

You can see here you to create a WriteableBitmap from layout. http://developer.nokia.com/Community/Wiki/Custom_Live_Tile_Layout_with_UserControl_as_image_source  . See specifically "Step 2: Convert the user control to image source"

Please let us know how it goes.

Regards,
Valentin.Stoychev
Telerik