We are most excited to announce the immediate availability of our Q3 2011 Service Pack 1 release of RadControls for Windows Phone. Together with all the bug fixes and improvements, we also managed to add several cool new features in our controls. LiveTileHelper, Date/Time pickers Step property, Radar charts and financial indicators as well as the much requested pinch-to-zoom functionality for RadSlideView showing pictures.

The pinch-to-zoom gesture is well known and most of the users are familiar with it. More, people will expect it from any application that displays pictures in a gallery. Well, no need to implement your own gesture handling; it is all built-in in RadSlideView and the new PanAndZoomImage control. 

PanAndZoomImage aggregates a plain Image control and handles user manipulation to recognize a Pinch gesture. We have implemented our own custom gesture recognition, using the raw Touch.FrameReported event and processing the touch points. This allows us to precisely calculate the scale ratio generated by the two touch points and to apply it on the picture. Two zoom modes are available: FitToPhysicalSize and Free. When the first mode is selected (the default one) the maximum scales along the X and Y axes are calculated depending on the actual image size. Or you may specify the “Free” zoom mode and the desired MaximumZoom to allow for arbitrary image scaling.

In order to have that functionality you will need to apply the control in the ItemTemplate of RadSlideView:

<telerikPrimitives:RadSlideView.ItemTemplate>
    <DataTemplate>
        <telerikSlideView:PanAndZoomImage ZoomMode="FitToPhysicalSize" Source="{Binding Source}"/>
    </DataTemplate>
</telerikPrimitives:RadSlideView.ItemTemplate>

You will need to declare the following namespace in XAML:

xmlns:telerikSlideView="clr-namespace:Telerik.Windows.Controls.SlideView;assembly=Telerik.Windows.Controls.Primitives"

Please note that the SlideViewPictureSource component defines the default item template for RadSlideView and if you apply that data source to the slide view you do not need to specify the item template:

<telerikPrimitives:RadSlideView x:Name="slideView" AllowZoomOut="False">
    <telerikPrimitives:RadSlideView.DataSource>
        <telerikPrimitives:SlideViewPictureSource ItemsSource="{Binding}"/>
    </telerikPrimitives:RadSlideView.DataSource>
</telerikPrimitives:RadSlideView>

We have also prepared a real example for you to experiment with in our Demo Application, available with the installation package. Just go to SlideView -> Picture Zoom demo and explore the XAML and code behind.

Well, that’s all; I hope you will enjoy this cool new feature! Please let us know if you have some suggestions and/or questions.

Download Q3 2011 Service Pack 1


About the Author

Georgi Atanasov


Related Posts

Comments

Comments are disabled in preview mode.