Telerik blogs

With our Q3 2012 release last month, we introduced a new functionality in RadSlideView: Filmstrip mode. This feature brings this control even closer to the native photo browsing experience of Windows Phone. As you might have noticed, with RadSlideView you can zoom-in an image and see more details, but when you zoom-out, you can't zoom any further than fitting the image to the available screen-size. Not anymore. The new mode allows you to see the adjacent images if you zoom out enough and quickly browse all images by pan and flick gestures. To leave this mode, simply zoom-in or tap some of the images.

Filmstrip Mode First Look

To use the filmstrip mode, you have to set the IsFilmstripModeEnabled property of RadSlideView to True and also define a FilmstripModeItemTemplate. This template may be the same as the ItemTemplate, but it may also be completely different. The most typical scenario is that you would want both zooming in and out of the images. The zooming in is done by PanAndZoomImage that needs to be included in the ItemTemplate:

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

The zooming out is handled by the filmstrip mode itself, so you should not include another PanAndZoomImage but rather have a native Image element in the template of the filmstrip. The other specific thing is that the images in RadSlideView stretch by default to fill the space they have, but in filmstrip mode they don’t. So if you want to cover the whole screen you will need to explicitly set the width of the Image element, for example:

<telerikPrimitives:RadSlideView.FilmstripModeItemTemplate>
    <DataTemplate>
        <Image Source="{Binding}" Width="480" />
    </DataTemplate>
</telerikPrimitives:RadSlideView.FilmstripModeItemTemplate>

You can take advantage of the two item templates by providing different information in them and show/hide some details like title, author, etc. for only one of the modes. 

Pretty much that’s all you need to know before bringing the native picture experience to your application. The filmstrip mode is available in RadSlideView as part of both RadControls for Windows Phone 7 and 8

Now you can get license for our controls not only from Telerik’s website but also from Nokia as part of their Premium Developer Program

Have fun and don’t forget to share your comments and feedback in our forums.


TodorPhoto
About the Author

Todor Petrov

Todor Petrov has been with Telerik since 2011, working on the Android and Windows Phone UI suites. He is passionate about technologies, movies and music.

 



Comments

Comments are disabled in preview mode.