Developing A Picture Flip Based UWP App In Visual Studio 2015 - Part One

Introduction

This article will lead you to develop a picture flip based Universal Windows Platform app, using Visual Studio 2015.

Developer Requirements

1. Windows 10
2. Visual Studio 2015

Note

• If you wish to develop an app for Windows 10, make sure that you have Windows 10 (Professional version recommended) installed on your machine to develop apps.
  
• Also, make sure you will be enabling the developer mode on your machine.

Enabling Developer Mode on your machine

Step 1 - Go to Start - Settings - For Developers Settings.



Step 2 - Enable Developer Mode on Settings.


Develop UWP apps, using Visual Studio 2015

Step 3 - Run Visual Studio 2015 now.



Step 4 - Click File -> New -> Project.



Select Visual C# under Templates - Blank app (Universal Windows) - Name your app and click OK.



Step 5 - Now, you can find the project, which has been created.



Here, we will be having several menu options. Let's start working now.

Go to Solution Explorer and click on Mainpage.xaml



In MainPage.xaml, you can find two panes – one as a designer pane and the another one will be your coding pane. The changes that you do in your coding pane will be reflected in your design pane.



This option will allow you to select the platform for which you have to develop apps.



Lets develop an app for 23”Desktop (1920 x 1080) 100% scale. Thus, select 23” Desktop option here.



Here, we can find the designer pane for Desktop. Now, let's start coding.

Step 6 - Go to Assets and add the image, which you require.

Assets (Right Click) - Add - Existing Item.



Step 7 - Select the images, which you require. Now, you can find the images have been added in Assets folder in Solution Explorer.



Step 8 - Write the coding, given below inside your Grid in MainPage.xaml-

<FlipView>
   <Image Source="Assets/IMG_1109.JPG" />
   <Image Source="Assets/IMG_1049.JPG" />
</FlipView>

Step 9 - Click “Local Machine” to Run the app, which you have built.



Now, you can find the Build has been started.



This Blue screen appears is the Splash Screen of your app.



Here goes your app output, which you have built.



You can also swipe for the next images, using the button.

Stay tuned for my next article.