Creating Windows Store app - Beginners tutorial

Introduction

In this tutorial we will be creating a very basic Windows Store App using XAML and C#. As this is the very first tutorial of this series, I'll be focusing mainly on project setup and basic workflows and later on, in other upcoming series, I'll be picking up more advance concepts. So, before moving forward, let's talk about the environment setup to execute our app.

Pre-requisite

 In order to complete Windows 8 metro style app, our machine need following things:

• You need Windows 8 with Microsoft Visual Studio Express 2012
• You need developer license 

Creating a project

• Launch Visual Studio 2012. Select File >> New Project. The New Project dialog window appears and from the left pane you can select template of your choice

In the left panel, you can select 'Windows Store' template. Once selected, center pane will show you the list of available items for the selected template. Here we are using Blank App, which will not contain any user controls by default. If require, we can add the controls at later point of time.

Give the name and location of the project nad press OK button. After clicking on OK, you will see the structure similar to as shown below:

Here you will see that, your solution contains lots of file. I'll try to brief about each of these items.

1. Logo.png and SmallLogo.png images - to display in the start screen
2. StoreLogo.png - to represent your app in Windows store
3. SplashScreen.png - to show at startup of your application
4. MainPage.xaml - to run our app
5. Package.appxmanifest - to describe your app and lists all the files that your app contains

These above files are required for all Windows Store apps, which are built using XAML and C#.

While using Blank App template, we can replace our blank page with any other page templates, in order to take advantage of layout and other helper classes. 

Replacing the MainPage

• Delete the MainPage.xaml from Solution Explorer by rightclick nad select Delete
• Select Project >> Add New Item
• SelectWindows Store from left pane and pick any page template from center pane. Here I am selecting Basic Page
• Enter the name of the page. Here I am giving MainPage.xaml. First time when you add a new page to the Blank Template, Visual Studio will show you a message as

Click Yes, to add these files. You will see, all the newly added files under the Common folder.

Build your app and now you will be able to see your page in design view. Press F5 and you will be able to see your app running as:

At this point of time, there is no button to close the app. So, you can use Alt+F4 to close it, typically we don't close Windows App (what is the reason behind this, we will see in our next article of this series). Now press the Windows key, you will be able to see a new tile added for your new app. Now to run the app, you can click or tap on that directly. Isn't it a good feature ???

Congratulations on building your first Windows store app.

Working with App.xaml

App.xaml is one of the most important files as this file is store the things, which you can access across the application. Double click and open the file. You will notice that, it contains a ResourceDictionary, which in turn has a reference of StandardStyles.xaml ResourceDictionary. This StandardStyles.xaml contain lots of style, which give look and feel to our app:

<application.resources>
        <resourcedictionary>
            <resourcedictionary.mergeddictionaries>
                
                <resourcedictionary source="Common/StandardStyles.xaml">
            </resourcedictionary>
        </resourcedictionary.mergeddictionaries>
 </resourcedictionary></application.resources>

 Now go to code behind file of App.xaml. It contains a constructor, which calls InitializeComponent() method. This is the auto generated method, whose main purpose is to iniyialize all the elements, which are declared in xaml file. It also contains the suspension and activation methods as:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
 
// The Blank Application template is documented at http://go.microsoft.com/fwlink/?LinkId=234227

namespace HelloWorldSample
{
    /// <summary>
    /// Provides application-specific behavior to supplement the default Application class.
    /// </summary>
    sealed partial class App : Application
    {
        /// <summary>
        /// Initializes the singleton application object.  This is the first line of authored code
        /// executed, and as such is the logical equivalent of main() or WinMain().
        /// </summary>
        public App()
        {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }
 
        /// <summary>
        /// Invoked when the application is launched normally by the end user.  Other entry points
        /// will be used when the application is launched to open a specific file, to display
        /// search results, and so forth.
        /// </summary>
        /// <param name="args" />Details about the launch request and process.
        protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            Frame rootFrame = Window.Current.Content as Frame;
 
            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();
 
                if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }
 
                // Place the frame in the current Window
                Window.Current.Content = rootFrame;
            }
 
            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
                {
                    throw new Exception("Failed to create initial page");
                }
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }
 
        /// <summary>
        /// Invoked when application execution is being suspended.  Application state is saved
        /// without knowing whether the application will be terminated or resumed with the contents
        /// of memory still intact.
        /// </summary>
        /// <param name="sender" />The source of the suspend request.
        /// <param name="e" />Details about the suspend request.
        private void OnSuspending(object sender, SuspendingEventArgs e)
        {
            var deferral = e.SuspendingOperation.GetDeferral();
            //TODO: Save application state and stop any background activity
            deferral.Complete();
        }
    }
}

Now moving to MainPage.xaml. This file defines the UI for your app. In code behind of this file, you will notice that, it uses LayoutAwarePage, which extends Page class and provides various mathods for navigation, view management and page management. In MainPage.xaml.cs file, you can add logic and event handlers for your application. The Basic Page template has two mathods, which you can use to save and load the page state.

protected override void LoadState(Object navigationParameter, Dictionary<string,string> pageState)
 {
   }

protected override void SaveState(Dictionary<string,string> pageState)
{
  }

Adding content to MainPage.xaml

Open MainPage.xaml from solution explorer. Now if you want to add more content, just open the xaml and start adding it as:

<stackpanel margin="120,80,0,0" grid.row="1">
                <textblock width="Auto" height="29" text="Welcome to my first windows store app"> 
            </textblock></stackpanel>

Run your application by pressing F5 and you will see below changes:

Hope this material will be a very good start for beginners.