Develop Your First Metro Application

Introduction

Metro style application is a new concept of designing and developing a full screen user interface application. It gives the flexibility to the developers to manipulate each pixel of the system screen in their applications while the end users can be completely engaged with the content they love in a full screen view. It lets developers create the applications in various platforms like web, desktop, tablets and mobile devices with use of technologies like HTML5, CSS, JavaScript, C++, C# and VB.NET.

Refer the screen shot given below, it shows a weather application provided in Windows Developer Preview. This application covers the full screen of your display and looks much more alive with animation and graphics. For example, if the weather is cloudy, it shows that the clouds are moving in your screen, or if the weather is rainy, it shows rain drops on your desktop.

Weather application provided in Windows Developer Preview
Figure 1: Weather application provided in Windows Developer Preview

To build metro style applications you need to install Windows 8 Developer Preview with developer's tools. You may refer to the link:http://msdn.microsoft.com/en-us/windows/apps/br229516 for more information.

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="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="#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.



Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Packaged application development teams frequently operate with limited testing environments due to time and labor constraints. By virtualizing the entire application stack, packaged application development teams can deliver business results faster, at higher quality, and with lower risk.

  • With 81% of employees using their phones at work, companies have stopped asking: "Is corporate data leaking from personal devices?" and started asking: "How do we effectively prevent corporate data from leaking from personal devices?" The answer has not been simple. ZixOne raises the bar on BYOD security by not allowing email data to reside on the device. In addition, Zix allows employees to maintain complete control of their personal device, therefore satisfying privacy demands of valued employees and the …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds