This is the first tutorial of the series on Exploring Telerik Rad Controls for Windows 8 Metro Application development. In this tutorial we are going to explore the newly introduced control which is Pagination Control for Windows 8 which is available in both XAML and HTML based app development. Telerik makes the developers life easy with providing these set of rich UI controls which can be very much easy to integrate and start implementing the core business.

Telerik Rad Pagination control for Windows 8 Metro application can be used for easy navigation and for easy accessing a list of available source to the end users. This controls makes it flexible for the users to access the content in a much easier way rather than accessing the content in different pages or sections. Let us see how we can use this control specifically for showing a list of images in a much more easier way, something like an album.Telerik rad controls for Windows 8 metro can be downloaded from the Telerik website as a trial download as its in preview. Just register and download the free trial copy of the library before you start following this series and this post.      [more]

Telerik Rad Pagination in Action:

Let us see the steps on how to use this control in real time to show a series of images as a good looking user interface for the end users to navigate between the images and have a high resolution view of the image. Open Visual Studio 2012 IDE in administrator mode and create a new Windows Store application in HTML (JScript) with a valid project name as shown in the screen below.

Clicking on OK will create a project with some default files and images that are basically required to run the project with the necessary files. By default we can see below list of files added to the projects.

• CSS file
• JavaScript files
• html files
• image files
• pfx file (Key)
• Manifest file

Our first step will be to add the reference to the Rad Controls for Metro libraries which we have downloaded and installed in the local development environment. Keeping into consideration that the Telerik Rad Controls for Windows 8 has been installed, point to references in the solution explorer and right click and select Add New References as shown in the screen below.

Now we can see a new window which has the option to select the reference from the local machine or select the inbuilt libraries or other options to get the library from the source. Since we have already installed the library to the local machine we can see the library reference available in the extension tab as shown in the screen below.

Clicking on OK will add the reference to the newly created application project under the references section. So now we can use the Telerik rad control with this application by using this reference as shown in the screen below.

First prepare a list of images that are required to be showcased with the control which we are going to use as a pagination. Just create some 5 to 10 images with a thumbnail of the same image as shown in the screen below.

Add the images to a separate folder called Images which is already available in the project folders, if required we can use a separate folder to keep track of the images. To add the images just right click on the Images folder in the solution explorer and select Add Existing files and select the images that are to be added to the project. Once the images are added we can see the list of images in the Image folder as shown in the screen below.

Next step is to customize the design, to do that open the CSS file which is available in the CSS folder of the project which is named Default.css file. Open the css file and add the below code, the code below is the customization of the template that is required to do the pagination for the image workspace which we are going to derive as the output as shown in the screen below.

Code: Default.css file is made available with the whole solution download at the bottom of this post.

We can customize the CSS file based on our design and it can provide with the best suitable option for the requirement we get. Now next step is to customize the default.js file which is the hard core business logic to fetch the images and assign the datasource. We are going to use the Windows 8 Flipview control with which we can bind the source to the control and change the orientation of the control and also we can create a listed view context to make the pagination navigate easily. Make use of the below default.js code which collects the images from the image folder and assign the respective images thumbnails to generate the image url as shown in the screen below.

Code: default.js file is made available with the whole solution download at the bottom of this post.

In this default.js file we have a code bit which will bind the data source to the image flip view which we are going to define in the default.html file. We can see the page is defined with default.html which is going to be the primary page for the application to launch when the project is initialized.

Binding Code:

WinJS.Namespace.define("F5debugTelerikPaginationNamespace", {
        images: new WinJS.Binding.List(imageData)
    })

Next step is to modify the Default.html file, we can see the base code that is available in the html file references to the css, js files that are necessary to make this page working fine. Now add our references to the files which we modified and see if the path of the files are correct in the head section as shown in the screen below. Also add references to the Telerik scripts.

Next step is to write our code in the body section which will use the templates which we have defined in the CSS and use the appropriate div to align the necessary components. We need to use the WinJs.UI.FlipView and Telerik.UI.RadPagination controls that are required to showcase the images which we are going to use a data source for these controls. For the Telerik Rad Pagination control we place a page provider which will use the Flipview selection as the source to navigate to the different images as shown in the screen below.

Code: default.html file is made available with the whole solution download at the bottom of this post.

That’s it, now we are done with our code. Lets test the application by simply building and executing by pressing F5 directly from the keyboard or use the IDE play button to stat building and executing the project and we can see the Telerik Rad Pagination in action as shown in the screens below. We can see the image number changes when the respective image is clicked.

Hope this tutorial will be useful to you, If interested please don’t forget to connect with me on Twitter, Facebook and GooglePlus for updates. Also subscribe to F5debug Newsletter to get all the updates delivered directly to your inbox. We won’t spam or share your email address as we respect your privacy.