Start Developing Windows Store Apps

Introduction

Microsoft had introduced its all new OS Windows 8 with a new style of graphical user interfaces called Metro. This newly graphical style works only on Windows 8. Metro is based on WPF. But you can also use HTML5 with CSS3 and JavaScript!

The main difference when compared with WPF or WinForms apps is that Metro is a full screen window. That enables the user to focus more on the app and what he is doing. So designers will have a lot of space to make their GUI more attractive. When focusing just on one app, the user wants it to be a responsive one. To achieve that, the scheduling system will give it more resources and will suspend the execution of some others. In addition to that, some new keywords were added to the C#5.0 syntax as sync and await. Their main role is to build asynchronous methods to not block the UI.

So that you are excited to start developing Metro apps on Windows 8 and Visual Studio 2012, here I have provided some tips and codes that you may need to build your first app quickly. Most of them are the result of differences between WPF and Metro. 

New Controls

When opening the toolbox on Visual Studio 2012, you will notice some new controls such as WebView which enable you to show an HTML web content directly on your app. You just provide the URL, and it will work as a web browser. You can find a simple app with code here and here.

Navigation Between Pages

To navigate to another window or page, the code used is quite different from the one used in WPF and WinForms.

this.Frame.Navigate(typeof(SecondPage)); 

Passing Data to the Second Page

When you need to pass any data or object to another page, you will have to do that at the time of navigation from the first page using this code:

this.Frame.Navigate(typeof(EpisodesPage), myObject) ; 

In order to receive that data in the second page, you have to use the OnNavigatedTo method as shown below:

protected override void OnNavigatedTo(NavigationEventArgs e)
{ 
    myObjectType myObj = e.Parameter as myObjectType; 
}  

Permissions

If your app will use the internet, webcam, microphone, the user's files or will give your location, then you have to mention that in the Package.appxmanifest file which you will find it in your solution. This needs to be done so that the user will be sure that he is controlling the app he uses to avoid sending user's data without notifying him.

Using Database

Metro apps doesn't support SQL Server, MySQL, or Oracle, you can use SQLite or LINQ instead. You will find here and here some apps that demonstrate how to use LINQ. They are developed for Windows Phone 7, but the code is almost the same. Developers should think about storing the data on the Cloud.

Data Binding

In Windows Store apps as in WPF, you can bind your objects and attributes to the UI using just the XAML code. The way to do that is by using the following attribute declared within the Page element:

xmlns:local="using:MyAppName" 

Then through "local" you can choose the object to bind its properties. Suppose you defined a class called Person with the attribute Name. You have to define this object in the parent of the control you want to use to bind your data. For example, you declared a TextBlock under the Grid control to show the value of the Name's property. Then your code will be like this:

<Grid.Resources>
     <local:Person x:Key="FirstPerson" />
</Grid.Resources>   

DataContext="{Binding Source={StaticResource FirstPerson}}" 

In the TextBlock element, you will need to specify the property you want to bind which is "Name" to the Text attribute of the TextBlock.

<TextBlock Text="{Binding Name}"> 

Update your UI

Your Name property may change its value during running, so you want the UI to also be updated. A simple way to do that is by implementing the INotifyPropertyChanged interface and add the PropertyChanged event that will intercept the modification.

public event PropertyChangedEventHandler PropertyChanged;   

The OnPropertyChanged is the method that will notify the UI about the changed attribute.

protected void OnPropertyChanged(string name)
{
    PropertyChangedEventHandler handler = PropertyChanged;
    if (handler != null)
    {
        handler(this, new PropertyChangedEventArgs(name));
    }
}  

The best way to call this method is by set property of the Name attribute.

private String name;
public String Name
{
    set
    {
        name = value;
        OnPropertyChanged("Name");
    }
}     

The Executable File

After building a Metro app, you will not find an .exe file from which you can launch your app in any Windows computer without using Visual Studio. Instead, you can create a package that have a PowerShell script to install the app in your computer. The way to do that is by right clicking the project, ->Store -> create app packages. Then choose No, Next and Create. A new folder called AppPackages is created under your project folder. You will find there a file called Add-AppDevPackage.ps1, run it with PowerShell and follow instructions to install your app.

Asynchronous Programming

One of the most amusing features in .NET 4.5 is asynchronous programming. The concept itself is not new, it existed before in parallel programming. But what's really nice is the ease with which to use it. Two keywords you have to consider which are "async" and "await". Await is used in front of any asynchronous method (OpenFileAsync(),...). When using await, you have to assign async to the method using it.

There's a mount of defined asynchronous methods in .NET 4.5 that you can use. On the other hand, you can make your own async methods. To do that, you can start by this simple code:

async void myMethodAsync()
{ 
    await Task.Run(() =>  
    {
      //Here the code to run asynchronously 
    }); 
}  

The main goal behind using this concept is to avoid blocking the User Interface while executing or waiting for some long instructions. The result is really nice.

Adapt to Snapping

Your Windows App should consider and adapt to the Windows 8 graphical concepts. One of them is Snapping. It consists of re-sizing the app resolution size by reducing its width by about 300 pixels. The way to do that is by making two sets for the same UI, one for the Snapped mode (typically a ListView) and one for the Full Screen mode (typically a GridView). Then you will detect if the app is Snapped or in Full Screen mode using the ApplicationView.Value. Depending on that, you will choose the right set.

The solution to do that is available for download in this link.

Live Tiles

Live Tiles are just one of the most exciting features in Windows 8. It usually gives users newest information to keep them updated. Below, you will find a simple code about how to do that. Remember that to enable larger Tiles, you have to add a Wide Logo in the Package.appxmanifest file.

var LiveTile = @"<tile>
    <visual version=""1"">
       <binding template=""TileWideText03"">
          <text id=""1"">My first own wide tile notification!</text>
       </binding>
       <binding template=""TileSquareText04"">
          <text id=""1"">My first own small tile notification!</text>
       </binding>
   </visual>
</tile>";

XmlDocument tileXml = new XmlDocument();
tileXml.LoadXml(LiveTile);
var tileNotification = new Windows.UI.Notifications.TileNotification(tileXml);
Windows.UI.Notifications.TileUpdateManager.
  CreateTileUpdaterForApplication().Update(tileNotification);  

You can download the sample from here.

ICommand 

Writing unit tests requires that your logic code is separated from your UI code. Using MVVM pattern is a nice solution because it separates the concerns, especially with WPF and Windows RT apps. To go more on that goal, it's just useful to remove the click events. This sample shows you how to do that.

You can see in this sample that when clicking the button, instead of executing the Click event related to it, it executes the Execute() method related to the specified Command (MyCommand). The Execute() method is contained in a separate Object than the one where the button is in. By this way, you can develop your Commands independently and test them even when the UI is not yet finished. This will make it easier to work with Test Driven Development strategy.

What you have to pay attention to when using the ICommand interface is that the Execute method takes just one parameter of type Object as input.

You can download a fully working sample here.

Share content to Facebook and Twitter

One of the nice features in Windows 8 is to share content with Facebook and Twitter easily without using their APIs. You just set the content. And the People app, which is installed by default, will get that content and publish it to your page. Until now, only links and texts are supported by the People app, there's no support for photos or videos, unfortunately. But you still can do that using other tiers apps from the Windows Store.

Here is a simple and fully working code that shows how to share.

How to change items' sizes in GridView 

GridView and ListView controls are nice to present data in Windows 8. But, as you want to show up some items more than the others, then you want to give it more space. This is not possible with GridView or ListView. 

How it works?

First of all, create item-templates for each size. Then, set the "unit" size for each item of the group. After that, using the PrepareContainerForItemOverride(...) you will be able to modify the size of each item. Finally, you will need SelectTemplateCore(...) to assign the right template to the right item. 

What I developed here is a very simple application to start from.

Add Options page to Settings 

Windows 8 applications' guidelines claims that all the settings and options for the app should be located and accessed through the Settings (Windows key + C). The way to create the Options page is a little bit different from the normal page. This simple app in MSDN will show you how to add About us page. And this one will guide you through the creation of an Options page where you set some options to your app like background theme, favorits,...