Category Archives: Windows Metro

Metro is an internal code name for a typography-based design language created by Microsoft, originally for use in Windows Phone 7. Early uses of the Metro principles, such as the typography, began as early as Microsoft Encarta 95 and MSN 2.0,[1][2] and later evolved into products such as Windows Media Center and Zune.[3] Later the principles of Metro were included in Microsoft’s mobile operating system, Windows Phone, the Xbox 360 dashboard update, and Windows 8.[4] A specially-made version of Microsoft’s Segoe font family, Segoe WP, is used as the main font family for all typographical elements.[4] It was confirmed by Microsoft at Computex that Windows 8, the successor to Windows 7, takes inspiration from Metro.[5] Microsoft also added the Metro design principles to other products and services, like the Xbox 360 and Windows Live, in order to create a unified and distinctive look across its consumer products and services.[6]

Introduction to Windows 8 Metro & WinRT (part 1)

Posted on by

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.

    The first thing to do, is ensure you download the tools. In order to create a Windows Metro application, you will need to be running Windows 8 (consumer preview available here) and Visual Studio 11 (beta available here or any of the express editions. If you are using Windows 7 and Visual Studio 11 beta, or Visual Studio Express, then the metro templates will not be available to you in Visual Studio.

Windows 8

 

Windows8

Visual Studio 11

 

Visual Studio

 

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

New Project

 

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

 

Blank Solution

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:local="using:BlankApplication"
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

Run

Find Pictures

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

Find

View Images

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

My Pics

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.