Introduction to Windows 8 Metro & WinRT (part 1)

Welcome to the first in this two part series on developing Metro application in Windows 8. Part two is available here

Introduction to Windows 8 Metro & WinRT (part 2)

In this two part series, I will demonstrate just how easy it is to create your first Windows Metro application, and highlight some of the changes that you will need to be aware of if you are coming from a WPF, Silverlight or Windows Phone background. The series will concentrate specifically on the three different types of Metro application available to you in Visual Studio.

The first part will demonstrate how to create a blank Metro application, familiarise yourself with the location of the resources and files, and finally demonstrate how to load some data from your computer using the new async and await keywords in C# 5.0.

The second part will demonstrate how to create a Grid and Split Application, highlighting the differences between the two, and also show you the amazing “Simulator” that incidentally, will please project managers no end, as they will have to purchase far less hardware to test their Metro applications on.

here

express editions.

Windows 8

Visual Studio 11

Creating a Simple Metro Application

If you run Visual Studio, select New Project and then the Windows Metro Style template (Visual Basic template is at the bottom of this screenshot), also note that there are three application types available that are highlighted in yellow. Select the Blank Application Template and name the project BlankApplication and click OK

The first thing to notice is that your solution explorer has an Assets folder and a Common folder

In the Common Folder you have a StandardStyles.xaml file that (as you might guess) contains the styles all Metro applications use, and since one of the Metro Guidelines is that “a Metro Style app should look like a Metro application”, these styles are invaluable. If you also look at both the XAML and code being of the App.xaml you will see that this works like WPF or Silverlight if you have ever used the navigation framework and it also explain why when you hit F5 you get a blank page

Viewing Images from my computer

If you double click on the BlankPage.xaml and add the following mark-up and code to click a button and load some images from your computer. Also be aware that everything in WinRT is asynchronous. Since it is Olympic year, I have a folder in “My Pictures” on my computer with some aerial photos of the Olympic Village as a work in progress

XAML

<Page
x:Class="BlankApplication.BlankPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:local="using:BlankApplication"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008&quot;
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006&quot;
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
<Button Content="Find Pictures" HorizontalAlignment="Center" Command="{Binding Path=LoadImages}" Click="Button_Click" />
<Image x:Name="image1" />
</Grid>
</Page>

Code Behind

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
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;
using Windows.UI.Popups;
using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace BlankApplication
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class BlankPage : Page
{
public BlankPage()
{
this.InitializeComponent();
}
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached.  The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
private async void Button_Click(object sender, RoutedEventArgs e)
{
var dialog = new MessageDialog("Would you like to find some pictures?");
dialog.Commands.Add(new UICommand("Yes", null, "Yes"));
dialog.Commands.Add(new UICommand("No", null, "No"));
var result = await dialog.ShowAsync();
if (result.Id.ToString() == "Yes")
{
var picker = new FileOpenPicker();
picker.ViewMode = PickerViewMode.Thumbnail;
picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
picker.FileTypeFilter.Add(".jpg");
var file = await picker.PickSingleFileAsync();
if (file != null)
{
IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);
var bitmapImage = new Windows.UI.Xaml.Media.Imaging.BitmapImage();
bitmapImage.DecodePixelHeight = 400;
bitmapImage.DecodePixelWidth = 400;
bitmapImage.SetSource(fileStream);
image1.Source = bitmapImage;
}
}
}
}
}

Run Application

If you select F5 in Visual Studio, and click on Find Pictures

Find Pictures

Here you can see the text that you added to the command in the code behind

View Images

Finally here you can view all the images that I have in the My Pictures folder on my computer

As you can see there are a lot of similarities for WPF and Silverlight developers coming to WinRT, and though some libraries will differ it will not be that difficult to incorporate these differences to your existing toolset.

6 thoughts on “Introduction to Windows 8 Metro & WinRT (part 1)”

Pingback: Introduction to Windows 8 Metro & WinRT (part 2) « Ira Lukhezo's blog
Pingback: Introduction to Windows 8 Metro & WinRT (part 2) « Ira Lukhezo's blog
Pingback: Writing multithreaded programs using Async & Await in C# « Ira Lukhezo's blog
Pingback: Interesting Windows 8 Links – 2012-04-16 | Dan Rigby
Dina says:

on April 21, 2012 at 09:02

in Metro doesn’t support any form of plug-in by digsen. But, as Telerik’s executive clamp boss Doug Seven points out, that doesn’t meant that developers with Silverlight skills should worry, since Silverlight will
Ira Lukhezo says:

on April 21, 2012 at 09:21

@Dina

The only issue with Silverlight is how much additional development Microsoft are likely to supply to the platform. Metro is quite a locked down development environment, far much more restrictive than anything Microsoft have supplied previously.

Ira Lukhezo's blog

.NET Haberdasher