Understanding basic WinRT Metro Applications and Application Capabilities

Just about a month ago, WinRT was introduced with all new style of application development that can work better with Multi Touch Enabled devices. We call it as Metro Applications. In this post, I will discuss how to develop your first metro applications and how to work with its layout changes.

How to Start

Before we start talking directly about Metro Style application, let us see how to install it first. I refer to use OracleVM which you can find for free from this link, and install.  This will install a Virtual Machine in which you can install the Developer Preview of Windows 8.




After your Virtual Machine is ready download Windows 8 Developer Preview from this link. Remember you need to install Windows Developer Preview with Developer Tools 64 Bit which is 4.8GB in size if you are willing to develop Metro Style Application. If you have something else, you do not have option than install it again. ( I have lost several hours trying on other windows previews). If you are having problems while installing Windows 8 in your Virtual Box, please follow the steps mentioned here.


After you install Windows 8 in your virtual machine please make sure you change the resolution to something above 1152. It is important because anything below this will turn of certain things. You cannot open Metro Apps or you cannot apply Partial fill settings of your application when the resolution is below this range.

Another Important consideration


You must remember, Metro application does not support closing the application, at least now. Hence if you start a new application the other application will keep on running in background.  You can switch back to that by hovering the left hand side of the screen and dragging back to the working area. Shortcut to do this is Windows + Tab.  The only way to close is either using an explicit close button from the application itself, or using Alt + F4  key from the keyboard.

The Desktop Tile
Metro application is designed in such a way that the tiles are capable of update itself and it is easier to work with them using your hand. But like me most of the people might want the desktop on which we are all familiar of in windows. Yes Metro has a Tile called Desktop Tile that can present you with the very old Desktop with applications that are meant to run in desktop.  You can move back and forth to this Desktop tile when you want.

So the one that is marked represents the Desktop Tile. You can also see Visual Studio and other developer tools appear in the same picture as Tile. The Visual Studio Express will help you build your first metro applications.

Application Store

Application store is another important point to note for Metro style application. After you package a metro style application you need to publish it and upload it to Application Store with all the important information of it clearly. The user that needs the application should connect to the application store and download the same. This way the user is always aware of what he is downloading and what the application does.

Now as you know much about Metro applications, lets start writing one metro application.

What are Capabilities? 

Just like Silverlight or Windows Phone, Metro applications run in a very constrained mode. That means when you install the metro application you should provide the entire rules which the application should follow. That is to say if you do not specify that the application needs internet access to run the application, you would not get it from the application either. Hence Capabilities are defined set of rules that govern the application to access certain functionalities that application needs.

When you create a blank application in Visual Studio, you will see a appmanifest file that exists for each application. It is nothing but an XML file where you need to specify capabilities, Application related metadata etc. You can easily open that file in XML editor and add Capabilities like below :

<Capabilities>    
    <Capability Name="internetClient" />
</Capabilities>

But you dont need to. If you double click on the File Package.appmanifest, you can edit to add Capabilities from a list of Capabilities that are commonly used. For instance Internet is checked by default. Lets add Location in this list. Location will allow you to get Latitude/Longitude information of the device.

When you run an application, it deploys the application automatically to metro application without the need of Application store. Hence you dont need to wait until the application store approves your application to run.  This is called as side loading which the end user cannot do as it is explicitly restricted to Visual Studio. Now if you run your application, you will see a blank black screen appear after the initial flash screen.

Lets run the project and swipe the application by hand to see some settings. You can also hover over the left hand bottom of your application to open the same settings or use Windows + I.

Here you can see some standard settings that appear on the bottom of the sidebar. The Application information is also specified in the top of the side bar. And a special link which indicates the application capabilities.  Lets click on it to see which capabilities are there for me.

I have asked for Location, Proximity and Internet access, and hence it shows up in this list.  You can see there is one additional settings called Location listed as Off above the list.

Certain features needs explicit access by the user when the application request it. Location is taken as sensitive capability, and hence it will again ask the user to enable it when you first call it and the user has the option to block this too.

Now lets write some code to access the Location and see what happens to the application.

We add some basic XAML to the application which adds one TextBlock and one Button. So when the Button is clicked the Textblock updates the current location of the device.



Lets see how xaml looks like:

<UserControl x:Class="Metro1SimpleApp.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"
    Loaded="UserControl_Loaded"
    d:DesignHeight="768" d:DesignWidth="1366">

    <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
        <Grid.RowDefinitions >
            <RowDefinition Height="120" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical"  Grid.Row="1" Grid.Column="1">
            <TextBlock x:Name="txtLocation" Text="Your Current Location is : "/>
            <Button Click="Button_Click" Content="Update Location" />
         </StackPanel>

    </Grid>

</UserControl>

Here the code adds one TextBlock and a Button that acts just like regular controls. If you try to know from inside these controls are wrappers to WinRT controls.  Now the Button has a Click Handler defined and the UserControl also defines the Loaded event handler.

Now lets write code for those handlers :

private async void Button_Click(object sender, RoutedEventArgs e)
{
    await UpdateGeoLocationAsync();
}

private async void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    await UpdateGeoLocationAsync();
}

private async Task UpdateGeoLocationAsync()
{
    Geolocator location = new Geolocator();
    Geoposition position = await location.GetGeopositionAsync();

    this.txtLocation.Text = string.Format("Your current position is :({0}, {1} ", position.Coordinate.Latitude, position.Coordinate.Longitude);
}

Geolocator is an WinRT API that calls for a GeoPosition either by using satellite position (if appropriate sensor is found in the device) or using internet address of the IP. Now this is slow API and hence WinRT allows you to only invoke asynchoronous call to this api. We use the new async support here to call the API.

If you dont know about async, please read my article.

We add the contextual await to call from both the UserControl.Loaded and Button.Click event handlers.

When I run the application, it will first ask to unblock the Location API. I have already told you, the location API is taken as sensitive and hence you as an user for the application have the settings to block and unblock.  You will see something like below :

Thus it asks to turn on location service. If you allow then only the application can get Location data. Lets allow it, you will see the location is updated.

If you are moving, you can click on the Button on the application to update your location when needed.

Now after you unblock the location API for the first time, if you go to settings, you will see the Location capability is now enabled for you. You can turn on or off whenever you want.

To run on or off, you can drag the button to the right or left.

You can download the sample from here.

Even though for a developer coming from normal Windows application it may seem to you as weird to have such kind of security enabled for your application, but world is moving towards it and this will benefit the end user to have clear knowledge about what the application is capable of. Hence it adds up security to the whole system.

Conclusion


This is still very early stage of WinRT to talk about. There may be some amount of changes in final release of it. But yet it is good to learn about it. I hope you like my post. I will update with more posts on WinRT metro application in near future.

Thanks for reading.