Microsoft .NET Framework 4.5 Quickstart Cookbook

In order to use this recipe, you should have a Windows 8 operating system, Visual Studio 2012, and Blend for Visual Studio 2012. We will also need a Windows 8 developer license to create Windows Store apps, which we can get for free from Visual Studio 2012, as shown in the following image:

First we will open Visual Studio 2012 in Windows 8 and create a new project. For this we must perform the following steps:

We created an application from the Grid Application template, which does a lot of work for us, creating an app that allows us to navigate through a hierarchy of groups and group items. We can explore them in the touch-ready Windows Store app GridView (the Windows Store app control that displays a grid of data items) and from there we can go to the group view and the item view, where we can navigate to other items.

If we look at the structure that has been created for us by the project template, we have the typical Properties and References sections of a Visual Studio .NET project. The App.xaml file is the entry point to our application and has the same meaning and overall structure as the same file on Silverlight, WPF, or Windows Phone projects containing defined or referenced global resources. When the application starts, it creates a frame-based navigation system, similar to that of the Windows Phone, and navigates to our first page, in our case, HelloPage.xaml.

To move between pages, the code behind App.xaml creates a frame and adds it as the application's main content. The navigation actions just change the page contained by the frame, and the navigation stack is maintained for us so we can go forward and navigate back automatically. The following diagram explains it clearly:

So, we can navigate to a particular page with the following instruction:

this.Frame.Navigate(typeof(GroupedItemsPage), "AllGroups");

The previous instruction indicates the page we want to navigate to and the navigation parameter. Additionally we can navigate back with the following instruction:

if (this.Frame.CanGoBack) {
this.Frame.GoBack();
}

Note that the CanGoback check is not obligatory, but not doing so can throw an exception.

We have also specified the application's capabilities through the Package.appxmanifest designer.

We added a basic page of type LayoutAwarePage, which provides layout awareness, that is, this page is now able to detect changes in how it is viewed. This can be either portrait, landscape, snapped, or filled. Being the two last ones (snapped and filled) special views of the application provided by the Windows Store App design style that our application is expected to support.

On our basic page, we deleted a resource so the page could get the app.xaml file predefined. The AppName resource added a grid with some layout and two controls to it, TextBlock and Button. Then we adjusted their layout and properties to change the default application behavior with the click event of the start button. We finally changed the default code of the App.xaml.cs OnLaunched method to navigate to our new page instead of the previous GroupedItemsPage location.

Moreover, we have been doing several tasks in various ways with Visual Studio 2012 so now we should be more familiar with it.

Other options to create our Windows Store app would be to create a blank application or a split application. The blank application creates an extremely basic application structure for us to fill. The split application shows information in a master-detail way, showing the master information on one half of the screen and the details on the other half.

There are also the classic Class Library and Unit Test Library templates.

We have built this first project as a grid application as we will use it for further recipes, adding more features to it so that it becomes a fully compliant Windows Store app style application.

With this recipe, we have also created an application and extended it with a first page and made it compliant with the Windows Store app style design and principles, providing a clean and open layout that minimizes distractions, with enough breathing room and a clear information hierarchy founded on a clean typography.

We should have an application ready, such as the previous recipe app. Any app will do. In fact, you can create an empty project and you will be ready to start this recipe.

Here we are going to take some steps to provide our app with a splash screen and app. tiles. There are some predefined places in our app that we can customize with default images.

We just added some graphical assets and changed completely how the application looks in the Windows 8 UI, re-styling it and providing it with a bit of branding. Our app is now much closer to the Windows Store app design style.

We have also shown how easy this is and explained some of the properties from the Package.appxmanifest file.

We could use additional splash screens for 1.4x and 1.8x scaling if we want better adaptation for higher resolution displays.

We could also capture the SplashScreen.Dismissed event and react quickly to it, for example, to provide a follow-up screen that mimics the splash screen while our application loads.

This behavior would be beneficial if the application has to perform some processing or data loading/caching before providing control to the user.

The official Microsoft Developer Network (MSDN) splash screen sample, for example, exhibits this precise behavior.

Another option would be to start the transition to our application's main screen after the SplashScreen.Dismissed event.

As any Windows Store app would do, we propose evolving the resultant application from the previous recipe.

Here we will add some data to showcase the lifecycle steps that our application goes through, binding it to our interface and feeding it while stepping through the lifecycle events. To do this, we should start from the app resulting from our previous recipe.

We started creating the AppData class that inherits from BindableBase, which in turn implements the INotifyPropertyChanged interface and is used to notify the value changes in a property that we have bound to the user interface through binding.

Next we add an AppData property in our application class so that we can reference this property globally anywhere within our application.

Continuing, we will handle the suspending and resuming events that occur when the application is suspended, which will happen after we switch to another task or application. After 5 seconds, our application will save its state and become Suspended. In our case, we will only indicate that our application has been suspended.

For that we have the SaveUserSessionData() method responsible. There we will access our application data through the application data's ApplicationDataContainer class where we can store the settings and other information belonging to our application. The ApplicationDataContainer class is a private storage for our application and current user that we can access in many different ways, such as the key-to-value dictionary or through a filesystem-like method. This is very similar to Silverlight's isolated storage and if you have used it before it should feel very familiar.

For the resuming event, we are calling the PrepareMessage method. We will pass one message string to it and it will fetch the value from our application's localSettings property and concatenate it with the message, adding it to the AppKeyValue property.

Basically we are indicating our application lifecycle status changes and are concatenating them on a global property.

To finish, we must indicate the changes on the OnActivated and OnLaunched methods; there we will also add the PreviousExecutionState enumeration to the message that declares the original state from which the application comes.

We then added TextBlock control and bound it to the AppKeyValue property. In the code, we added its data context to the corresponding property of the application class holding this property; we did this to separate it from the App.cs class implementation and to take advantage of the BindableBase base class that the template had already provided.

We have also seen how to deploy our application, launch the task manager, and control our application states from it.

To properly understand the states, we have the following diagram:

Here we see clearly that when the application is not running, it can be put into the terminated (on purpose) or the not running (nobody terminated it, we just installed or deployed it, for example) state.

Then, we can launch it from the Windows 8 UI and the application will be in the running state. From this state we can close or terminate it or we can move to another application or window. After 5 seconds, our application will be automatically suspended. If we come back to it, our application will resume and get activated (not launched, as this would happen when we do it from the terminated or the not running state).

The application will remain as it was when it was suspended and we will have no clue that it has stopped its execution, unless we code the application to be aware of it.

It could be a good idea to save the user state and the application data, for example, if the user was working on a form. It would be nice that when he returns, he goes back to the same form he was working on and finds the same data.

If the application has been deactivated for a long period of time, a recommended practice would be to start afresh, as the user might not remember what was happening or where he was. Of course, it all depends on the application and the tasks being performed in it.

If the application works with online data, the activated and resuming events could be used to refresh the information from the online sources. For example, we could have an app with a financial purpose or our app is alive such as a chat, RSS reader, or a twitter app.

We could also associate our app with a file or a protocol so that it would be the default application for managing these file extensions or we could define auto-launching capabilities for AutoPlay or other contracts and extensions. Some possible contracts might be the camera, contact picker, print task, protocol, search, or share target.

We will implement this recipe on the application we have been developing, but we could apply what we are going to do to any Windows Store app.

Here we are going to see how to add notification capabilities to our application tile.

First, we picked a template for our tile and loaded it into an XmlDocument variable.

XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);

Next we accessed the element that we wanted to change from within the template and changed its value.

XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
tileTextAttributes[0].AppendChild(tileXml.CreateTextNode("A group was added or updated..."));

We repeated the same operation but with another SquareTile template, so we ended up with two customized tile templates.

    //Square Tile
XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);
XmlNodeList SquareTileTextAttributes = squareTileXml.GetElementsByTagName("text");
SquareTileTextAttributes[0].AppendChild(squareTileXml.CreateTextNode("A group was added or updated..."));

Then we added the square tile as a sibling of the wide tile.

    //We add the square tile to the wide tile as a sibling of the wide tile
IXmlNode node = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true);
tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node);

Once the tile XML code was ready, we created TileNotification from it.

    //We create the notification with the tiles and send it to the app tile
TileNotification tileNotification = new TileNotification(tileXml);

Then we added an expiration time for the tile to go away after 10 seconds.

tileNotification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(10);

We ended by sending createdTilenotification to TileUpdater of our application.

TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

We enabled the cycling tile notifications, which allow us to show various notifications one after another in a queue with instructions:

TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

And then we created TileNotification with a tag to differentiate between different TileNotifications while removing ExpirationTime.

Continuing our recipe, we created in a similar way the numeric badge from a template (basic badge templates are BadgeNumber or BadgeGlyph) and then set the badgeattribute, created the BadgeNotification, and used BadgeUpdateManager to update it.

A BadgeNumber template can display a number from 1 to 99 and a BadgeGlyph template can contain one of the following status glyphs:

We have seen that improving a tile with custom notifications or cycling through different tile notifications are easy to implement. Moreover, we have a good number of tile templates to explore.

Creating badges is also really easy and might add a lot of value to our application tile.

We should use tile improvements, notifications, and badges with care and only when they make sense and add value to our application.

We could also implement secondary tiles in response to user actions.

Finally, we can update the tile while the application is not running through the Windows Push Notification Service (WNS), improving our app with toast notifications.

We will implement this recipe on the application that we have been developing, but we could apply what we are going to do to any Windows Store app.

Here we are going to add the capability of creating toasts to our app.

In a way very similar to our tile notification, we picked up the toast template type and loaded the template content into an XmlDocument variable.

After this we accessed the element that we wanted to change, in our case the text element, and changed its value.

We changed its duration by setting one of the attributes of the toast element.

Finally, we created ToastNotification from the resulting XML and showed the toast.

We could navigate to a specific destination in our app when the user taps on the toast, as that might be an invitation to explore new and interesting data.

We can use different toast templates, schedule toast notifications, or even send toast push notifications through the WNS.

The toast can be extensively customized with images, sounds, or an expiration time.