Using Telerik RadSlideView (Q1 2012 Release) on WP7

The Telerik SlideViewer has recently been revamped, and includes some nice built-in features.  If  you’re updating from the previous version, you’ll need to make some minor changes to your code in order for it to work.  Click on the images to enlarge so you can see the code.  In order to use this control, and it’s advanced features/settings,  you’ll need to declare the following namespaces:

The following references should be added to your project:

The following using statements need to be declared:

The main difference now is that it operates in Binding mode only, and the datasource name has changed to “ItemsSource.”    In this example,  we’ll implement the Pan and Zoom feature of the SlideView so that the user can double-tap or pinch & zoom to view the images up close.  In this example, a descriptive label is synced with each image and the zoom mode is set to “Free” which allows the user to zoom to the maximum extent.   I’ve also included the busy indicator which will display as the images are loaded.  The busy indicator is probably more useful if you’re loading images from an external datasource, but still adds a nice touch even on fast-loading local images.  Here’s the entire XAML code for the control.

The DataSource:

There are various ways that you can wire up a datasource of images for the RadSlideView.  Here’s one way to do it:

Images are the data,   so you’ll need to add those to your project in the Images folder.   For this example, I named the images “1.png”, “2.png”, “3.png”, and so on.   Let’s create a new Class called “ViewModel” and let’s add a couple properties:

We’ll need to create a datasource of course, and populate it.  In this case, I’ll create an ObservableCollection<ViewModel> and load it with a For Loop in the MainPage_Loaded event:

That’s pretty much all there is to it.  The RadSlideView will iterate through the images with the swipe gesture.  If you want to move through the images using an application bar button or image tap or something,  Telerik provides methods for that.  Here is how we can implement a couple of buttons on the Application Bar to iterate thru the images.  Note that when you use the buttons to iterate thru the Pan & Zoom images, the Zoom level is maintained.  So, for example, if you zoom in on one of the images, in order to move to the next image with a swipe,  you’ll need to zoom out or double-tap and then swipe.  Using the MoveToNext() or MoveToPrevious() methods wired to a tap event, the zoom extent is maintained, and you don’t need to zoom out or double-tap in order to go to the next image.  That might be a benefit in some cases.

Note:  Metro guidelines discourage the use of Application Bar buttons for “Navigation” but here we are just iterating thru the image collection, never leaving this page (much like the built-in email app on the phone).

Pesonally, I like having an alternate method of moving thru the images, and that the built-in Move methods maintain the zoom extent by default.

In summary, this is another useful and appealing control by Telerik.  BTW, I have no interest or affiliation with them – I just like their software.

For more information go to http://www.telerik.com/help/windows-phone/radslideview-overview.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s