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 :
You will see that there is an exception of type “System.UnauthorizedAccessException” :
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.
In the next step, add a new class ImageItem to the solution and implement the following code :
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 :
Here is an example implementation of the whole code that could be implemented for the Image Viewer application in the “MainPage.xaml.cs” file :
When executing the application, you will get a display of all the pictures that are currently stored in your local Pictures Library :
If there are no pictures you will get a message that there were no pictures found :
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.
