Wednesday, January 23, 2013

[C# and Win8] How to develop your first Modern UI application
Part 2: Source Code & Development

In the last part we discussed how to create your first Modern UI project and all the prerequisites for being able to start its development. In this part you will actually see, what developing this type of application really means.

Development of the Image Viewer application

For this tutorial we are going to create an Image Viewer application. The goal of this example application will be to display all the images in your local Pictures Library. You may reuse the skeleton project, that we have created at the end of the last blog post and apply the following steps to it.

Add some code that gets data from your local Pictures Library and execute your application. A best practice in Modern UI applications is to always use an asynchronous approach, which is why we use the GetFilesAync() method and the await keyword in the following example :

CodePicturesLibrary

You will see that there is an exception of type “System.UnauthorizedAccessException” :

Exception

Modern UI application do not have any access rights by default, which is why you get an error message, when trying to access your local Pictures Library.

So as first step you have to allow access to your Pictures Library. To do this you just have to double-click on the “Package.appxmanifest” file in the Solution Explorer. Then go to the Capabilities section and enable the checkbox “Pictures Library”. Save your modifications and there should not be any error message anymore, when you execute your application.

Capabilities

In the next step, add a new class ImageItem to the solution and implement the following code :

ImageItem

This class will be instantiated for each picture in your local Pictures Library. It contains the picture itself, the picture name and a short description.

Add a GridView to the “MainPage.xaml” file, that is going to be used for displaying the pictures from the local Pictures Library :

GridView

Here is an example implementation of the whole code that could be implemented for the Image Viewer application in the “MainPage.xaml.cs” file :

Example

When executing the application, you will get a display of all the pictures that are currently stored in your local Pictures Library :

Fig9_Image_Viewer

If there are no pictures you will get a message that there were no pictures found :

NoPictures

This concludes this part. I am going to show you how to further configure your applications in more detail, as well as how to publish them in the next parts of the series.


Share/Save/Bookmark

No comments: