Hello Metro
In compliance with the long tradition of Hello World style programs, Hello Metro
is the simplest Metro style application that it is practically possible to
write.
In the Visual Studio 11 preview, select the “Application” project from the new
project wizard.
You’ll end up with what seems at first glance to be a classic application with a
solution structure that, at first glance also, seems to be fairly classic.
The first clue that we’re not in Kansas anymore however, comes from the type
from which the main page is derived. Not a Window but a UserControl. The odd
nature of the Metro “Application” is also confirmed when we look at the App
class and see, after a little bit of delving into the obj directory, that the
APP class derives from Windows.UI.XAML.Application class.
So then, Metro applications are user controls with a new kind of application
wrapper. This implies that the user control is meant to run in some other
environment and indeed, as you’ll see later, the world of the Metro app is very
strictly controlled.
There is one other file that is really interesting in the Metro application
solution. The Package.appxmanifest.
Editing the Package.appxmanifest brings up a new UI that is split into four
tabs. Application UI, Capabilities, Declarations and Packaging.
The Application UI tab enables us to set the display name, entry point and a
short description of the application.
There is also a section that deals with the look of the application on the start
screen. A logo of 150x150 pixels that appears on the start screen can be chosen
from local resources. There is usually an image sub folder with images embedded
in the application distribution, these logos etcetera go in here. You can
specify a “wide” logo which at 310x150 isn’t quite 16:9 aspect ratio which I
think was a mistake by someone. I’d love to hear the real reason why that ratio
was chosen. It’s almost 2:1 but not quite; go figure. A small logo of 30x30 can
be used on tiles and a splash screen image of 624x304 can be specified as well
but is just a blank image by default in the basic wizard.
The choice of logo and other asset sizes shows that the strict design intent of
Metro applications will be enforced from the get-go.
The section on Badge Notifications is to do with the tile used to give a preview
of an active application. The badge logo of 24X24 pixels is, for me anyway, an
odd choice given that a 30X30 logo is already specified.
You can specify whether your application is “Toast” capable here. Toast is a
popup notification that optionally appears when your application has urgent news
to share with the user. Here is a screen shot of the Application UI tab:
Metro applications run in a sandbox or “security container” when we create a
Metro application, we need to specify in advance what services supplied by the
sandbox are to be requested. This information is packaged in the application
executable in the form of metadata and, most importantly, the user will be able
to grant access to services that might require it such as location services or
access to the local file system.
The capabilities of a Metro application are listed below. You simply select
which capabilities you require from the Capabilities tab.
|
Capability
|
Name
|
Description
|
|
Internet (Client)
|
internetClient
|
Allows your app to access the Internet and public networks. Most apps that require Internet
access should use this capability.
|
|
Internet (Client & Server)
|
internetClientServer
|
Allows your app to access the Internet and public networks, and allows incoming connections
from the Internet to your app. Inbound access to critical ports is always
blocked. This is a superset of the Internet (Client) capability. You do not need
to declare both.
|
|
Home/Work Networking
|
privateNetworkClientServer
|
Allows inbound and outbound access from your app to the user's trusted networks such as
home and enterprise networks. Inbound access to critical ports is always
blocked.
|
|
Document Library Access
|
documentsLibrary
|
Allows your app to access the user's Document Library, and to add, change, or delete files.
Your app can access only file types that it has declared in the manifest. Your
app cannot access Document Libraries on HomeGroup computers.
|
|
Picture Library Access
|
picturesLibrary
|
Allows your app to access the user's Picture Library, and to add, change, or delete files.
It also allows access to Picture Libraries on HomeGroup computers, and picture
file types on locally connected media servers.
|
|
Video Library Access
|
videosLibrary
|
Allows your app to access the user's Video Library, and to add, change, or delete files. It
also allows access to Video Libraries on HomeGroup computers, and video file
types on locally connected media servers.
|
|
Music Library Access
|
musicLibrary
|
Allows your app to access the user's Music Library, and to add, change, or delete files. It
also allows access to Music Libraries on HomeGroup computers, and music file
types on locally connected media servers.
|
|
Default Windows Credentials
|
defaultWindowsCredentials
|
Allows an app to connect to intranet resources that require domain credentials.
|
|
Shared User Certificates
|
sharedUserCertificates
|
Allows your app to access software and hardware certificates, such as smart card
certificates.
|
|
Removable Storage
|
removableStorage
|
Allows your app to access removable storage devices, such as an external hard drive or USB
flash drive, and to add, change, or delete files. Your app can access only file
types that it has declared in the manifest. Your app can't access removable
storage devices on HomeGroup computers.
|
|
Location
|
location
|
Allows your app to access the user's current location.
|
|
Microphone
|
microphone
|
Allows your app to access the user's microphone.
|
|
Webcam
|
webcam
|
Allows your app to access the user's camera.
|
|
Text Messaging
|
sms
|
Allows your app to access text messaging functionality.
|
|
Near-field Proximity
|
proximity
|
Allows your app to access the user's near-field communication (NFC) device.
|
The capabilities tab screenshot is shown here:
The following tab, Declarations, enables us to specify what other capabilities
the application should have. An example would be if the application should have
a persistent presence in the system. Metro applications will normally be
suspended if they are not in the foreground and will be “Tombstoned” if there
are more than two “active” applications.
Suspension means that the application will not run any code but can be awoken
immediately.
Toombstoned means that the application must store every important aspect of its
state in a container which will allow the application to be removed from the
memory but “rehydrated” or, I prefer the term “resurrected” later and restored
from its container.
All this implies that the out-of-the-box standard Metro application cannot have
a timer that survives suspension, it will not continue to do processing or
handle background tasks unless the application is specifically configured to do
so.
The declarations tab enables all this so, for example, we can specify that the
application can provide a timer or run a background task. We can also do other
interesting stuff like provide search capabilities to the system or assume the
role of a protocol provider such as the mailto: protocol.
Really, the Declarations tab is beyond the scope of “Hello World” so here’s a
screen shot to show what it looks like and rest assured there will be an article
on this later.
Finally, the Packaging tab enables us to specify the packaging for our
application as it will be seen in the Microsoft Marketplace application store.
For the purposes of test and development there is no problem running your
application locally but distribution of the application to the public will be
restricted.
Here is the screenshot of the Packaging tab. Once again, this really goes beyond
the scope of Hello World so watch this space for more information later.
The Hello Metro application.
There is nothing particularly remarkable about the Metro application shown here.
It uses XAML to place a text block containing the text “Hello Metro” at the
centre of the screen. That’s all.
Here is the XAML:
<UserControl x:Class="HelloMetro.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768"
d:DesignWidth="1366">
<Grid
x:Name="LayoutRoot" Background="#FF008000">
<TextBlock FontSize="36" TextAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold">Hello Metro</TextBlock>
</Grid>
</UserControl>
Here’s a screenshot:
Nothing to see here; move along…
Or is there?
The Metro application, possibly especially the Hello World application, is
remarkable in its unremarkableness. You see, Metro isn’t necessarily a big deal
development wise but its intent is huge and understated at the same time. Metro
is a “Design Language” which might be thought of as a bit of an odd term because
its almost too pretentious to be true, except, having a strong background in the
print industry where I learned typesetting, colour composition and page-makeup
and having seen the results that the Swiss Movement had on the Graphics industry
and indeed, the world of presentation and clarity in general; I appreciate how
important a change Metro is to the developer.
Application design for the developer is, more or less a balance between a
technical chore of getting the architecture right and having as much geeky fun
as possible given the boundaries of the application you’re supposed to write.
This Hello World application uses a Sans Serif font, has a green background, is
utterly clean, straightforward and does what it says on the tin. It is indeed
the epitome of what a Metro app should be.
Forget drop shadows, forget Gaussian blur halos, forget pages with 87 text boxes
to configure one lousy application feature. Reduce everything to the barest
minimum required to get the message to the user. Give the user all of the
information they need, provide the info they don’t need only if they ask for it,
keep it simple, keep it clean.
Is it required viewing?
Gary Hustwit and Luke Geissbuhler’s 2007 film HELVETICA celebrates 50 years of
the Swiss typeface of that name. This starkly utilitarian font has become the
iconic style of modern signage and is evident in every city and every country of
the world. The Swiss sans-serif font has been copied many times for commercial
reasons and typefaces like Verdana and Segoe pay homage to the original which
itself was drawn from the London Transport Johnstone typeface which was designed
to enable foreign travellers to decipher London’s underground rail system
quickly and clearly.
While having nothing to do with software development per-se, the film provides a
fascinating insight into how designers revolutionised the delivery of
information by radically removing every frill and escutcheon not necessary to
the message.
Metro is a design language that must be understood by both developer and
designer otherwise the developer risks presenting the poor user with more of the
same truly awful user interface crimes as we have seen in so many industries
during the last twenty years. Metro enables the creation of pure kiosk style
applications that are dedicated to well-defined and clear tasks. Zen like
simplicity is a hard concept to grasp when one lives in a world of traffic and
noise.
Download the code for this application
here. NOTE: This
solution will only work with the Visual Studio 11 developer preview.