Image Browser in Windows Store Apps

In this article we are going to create a very first app for Windows 8; it is an Image Browser. We will create it using a FlipView control in Windows 8. The FlipView control lets people flip through views or items one at a time. The Flip buttons appear when the mouse hovers and permits people to flip to the next or previous image.
item.

The first step is to create a new Metro Style Blank App Project:



Now the project is created and the "MainPage.xaml" is opened in the main window or you can open it from the Solution Explorer. First we will add a FlipView control which can be done by using the toolbox on the left or writing some XAML code. The code for adding a FlipView is written below; we have used the HorizontalAlignment and VerticalAlignment so that our control is centered in the screen:

<FlipView HorizontalAlignment="Center" VerticalAlignment="Center">
</FlipView>

The FlipView control can contain many FlipViewItem items in it, which will be flipped one at a time. Inside the FlipViewItem we define what is to be displayed, since we are making a image gallery we will use an Image control inside every FlipViewItem we add. Here is the complete snippet of the code:



I have added three images as a sample, you can add as many as you can or you can bind the image control programmatically to retrieve a specified number of images. You might have noticed the beauty of the Windows 8 SDK, I haven't used any C# code and i have a nice light-weight image browser. Debug the app.