Develop Your First Metro Application

Introduction

Weather application provided in Windows Developer Preview

What is a Metro Type Application?

Metro
Style Applications are full screen applications and they are more harmonious in
the sense that the age old mechanism of using mice keyboards has been revamped
with the first-class option of touch. These applications are chromeless;
this means every pixel on the window can be used for the metro style
application. Metro style applications are fast, responsive, fluid with good
animation and great touch experience. These applications are scalable to
different sizes of your system screen. The applications can adjust themselves
automatically to your screen size on which they run. Applications can also be
created in a portrait view.

Components of Metro Style Application

Let’s
discuss the different components of a metro style application before moving
into details.

  • Charms
    – This menu comprises five icons, which appear if you swipe the right edge of
    the screen. You will get charms for search, share, start, devices and settings.
    For example, a share charm can be used to share data from one application to
    another.
  • Share
    Contract
    – Share contract lets any application
    share the data with any other application. A source application provides
    something to share and target application is an application being shared
    through. It provides a set of common formats for data interchange.
  • Search
    Contract
    – It enables search in your
    application from anywhere in Windows. Application provides search suggestions
    to help users find something very quickly.
  • Picker
    Contract
    – Picker Contract allows other
    applications to choose content from your application.
  • Tiles
    – A Tile is a program launcher with a single hit. You can provide text or image
    in a tile to make it more attractive. Application tiles are alive with status
    and activity updates encouraging the users to dive into your application. It
    shows overall personality of your application. Screen shot below shows a list
    of application tiles provided with Win8 Developer Preview.

List of application tiles provided with Win8 Developer Preview
Figure 2: List
of application tiles provided with Win8 Developer Preview

Notification
– Notifications lets your metro application pop up a message to the user. It
can also update the application tile for important information. Alarm is a good
example of notification. Once an alarm time triggers, it pops up a notification
on a user’s window.

Cloud
Every application gets cloud storage per user for state, settings and some
small amount of user content. If a user logs on to window with Windows Live ID,
he will be able to access his application from the same point where he left it
on some other machine.

Framework and Tools for Metro Style Application Development

Microsoft
introduced Visual
Studio
11.0 express edition in Win8 Developer Preview to design, develop
and test your metro application. Integrated Development Environment (IDE) now
has been furnished to build a powerful high performance metro application. You
can use HTML5, CSS, JavaScript, C++, C# and VB.Net templates to build your
application. You can also download Microsoft Expression Blend for metro
application development as it’s lighter than Visual Studio.

Microsoft
Visual Studio 11.0 provides JavaScript debugger for developers to create Metro style
applications with more efficient and effective ways. VS 11.0 also has an UI to
package your application and an online Portal to upload your application on
Windows Store to make it available for users. You can also use Visual Studio to
upload your application on portal.

Moreover,
Visual Studio has provided some project templates to provide the basic
structure of your application, like fixed layout application, grid application,
navigation application, split application etc.

Architecture and Design Considerations Before Metro Application Development

Before
designing any metro style application, you should consider the user’s expectation,
interaction and its look and feel. Here I have mentioned list of important
points that need to be considered while designing and developing any metro
style application.

  • Keep
    in mind who the end users are and what their expectations with the application
    might be.
  • Your
    application should be more flexible to communicate with other applications. You
    need to decide what windows features and applications can be used to provide a
    rich flow, such as share, search, and settings.
  • Your
    application should look more alive and fresh by including rich animation, Toad notifications,
    application tiles and content tiles.
  • The
    features should be provided to the users to personalize your application while
    running. For example a user should be able to change the tile image and set the
    content from your application on her personal tile.
  • The
    application should be accessible from everywhere, from home desktop, tablets
    and mobile devices.
  • Win8
    provides different contacts (Share, Search and Picker) to implement in your
    metro style application. But before using any contracts you should ask, do you
    really need it in your application?

Create Your First Metro Style Application

From Visual Studio 2011, select File > New Project. This will
open the new project dialog box. Now, select a language from Visual C#, Visual
Basic, JavaScript or Visual C++. Next you need to select an application type
from the center pane (Windows Metro style template type). Here “Application” is
chosen for the application type.

Visual Studio 2011 New Project
Figure 3: Visual Studio 2011 New Project

Now, enter a name for your project and click OK. This will save your
project in the default path (your may edit to some other path). Project
solution will be created (shown in the screen shot).

Application 1 - Microsoft Visual Studio
Figure 4: Application 1 – Microsoft Visual Studio

By default your solution will contain the following sections and files.

MainPage.xaml – This file is the default start page for your application,
representing design view. XAML is a
declarative markup language, standard for all Microsoft application design.
XAML simplifies creating an UI for metro application. Sample XAML code given
below.

<!-- XAML -->
<UserControl x_Class="Application1.MainPage"
    
    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="#FF0C0C0C">
  <StackPanel>
        <Button Content="Click Me" FontSize="24" Width="200" Height="60" Click="MySampleButton_Click" />
        <TextBlock x_Name="DisplayText" FontSize="48" Foreground="White" />
   </StackPanel>
    </Grid>
</UserControl>

MainPage.xaml.cs – This is the code-behind file that contains the logic for your
default start page. Sample C# code.

namespace MySampleApp

    partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void MySampleButton_Click(object sender, RoutedEventArgs e)
        {
            DisplayText.Text = "This is my sample application";
        }
    }
}

AssemlyInfo.cs – This file contains the name and version metadata that is
embedded into the generated assembly. Note that this file is available in C#
and Visual Basic projects only.

Package.appxmanifest – This file contains metadata that describes your app, including
display name, description, logos, and capabilities. You can configure this
section through the UI as well as through an XML file. Double click the
Package.appxmanifest file; it will open the UI to configure your application.
Please refer to the screen shot.

Package.appxmanifest file
Figure 5: Package.appxmanifest file

Package.appxmanifest
file can be configured and edited through code also. Right click on the file
and open the code. It’s an XML file.

Package.appxmanifest file can be configured and edited through code
Figure 6: Package.appxmanifest
file can be configured and edited through code

Images – These files are the default logo and splash screen images that
you can replace with your own images.

App.xaml,
App.xaml.cs
– These files specify app-level logic.
The App class is required to display the user interface.

Now you are ready to add custom logic and
create your own application. Run the application and package it. Finally upload
it on Windows Store for users.

Conclusion

Microsoft provide full flexibility to the
developers to create metro applications with Visual Basic, C#, C++,
Silverlight, HTML5 and XAML. A metro application is highly user friendly with
live and updated tiles. Microsoft has created a Windows Store to upload or
download these applications. A developer can create their own application and
sell it on Windows Store.

More by Author

Must Read