My First Metro Application – Metro Puzzle

Last week me and other 20 guys from Sela Group were in the Build Conference where we first saw the new Windows 8 operation system and many cool things coming from Microsoft in the new release.

I have much to say about new things regarding ALM, Metro but as always I prefer to start with building something with the new technology instead of talking about it….

So now I’ll talk about my first Metro Application for Windows 8 called – Metro Puzzle based on Puzzle 15 also called the N-Puzzle.

Step 1: Prepare your environment

To Get started with Metro Applications you need Windows 8 Developer Preview installed with Developer Tools – Download Here

Windows Developer Preview works great on the same hardware that powers Windows Vista and Windows 7:

• 1 gigahertz (GHz) or faster 32-bit (x86) or 64-bit (x64) processor
• 1 gigabyte (GB) RAM (32-bit) or 2 GB RAM (64-bit)
• 16 GB available hard disk space (32-bit) or 20 GB (64-bit)
• DirectX 9 graphics device with WDDM 1.0 or higher driver
• Taking advantage of touch input requires a screen that supports multi-touch
• To run Metro style Apps, you need a screen resolution of 1024 X 768 or greater

Step 2: Create Project

With the new Developer Tools you’ll be able to create Windows Metro Style applications in C#, Visual Basic, C++ and JavaScript.

There are very cool templates for getting started with Metro application, Grid and Split but from my puzzle I’ve created new Application Project.

Step 3: Add Metro Application Bar

Because Windows 8 should support Touch systems Microsoft create the ApplicationBar object to allow users without Mouse to perform Right Click operation just by sliding the finger from the bottom of the screen up.

Of course if you do working with Mouse you can just right click and the application bar will appear.

So How?

Just add the ApplicationBar control just before the end of the XAML file and make sure the ApplicationBar height is 88 (Metro Standard).

<ApplicationBar Grid.ColumnSpan="9" Height="88" Grid.Row="9" 
                VerticalAlignment="Bottom">
    <StackPanel Orientation="Horizontal">
        <Button Content="Exit" Style="{StaticResource BackButtonStyle}"
                x:Name="btnBack" Click="btnBack_Click" />
        <Button Content="New Game" 
                Style="{StaticResource RefreshButtonStyle}" 
                x:Name="btnnewGame" Click="btnnewGame_Click"/>
    </StackPanel>
</ApplicationBar>

Step 4: Add Toast

Toast is the way to notify your user about something, instead of using the annoying Message Box you now Toast the user.

The toast will appear on the right bottom and will not prevent from the user to continue working, the toast will disappear after couple of seconds.

Toast API have couple of default templates as you can see from the enum below.

public enum ToastTemplateType
{
    ToastImageAndText01 = 0,
    ToastImageAndText02 = 1,
    ToastImageAndText03 = 2,
    ToastImageAndText04 = 3,
    ToastSmallImageAndText01 = 4,
    ToastSmallImageAndText02 = 5,
    ToastSmallImageAndText03 = 6,
    ToastSmallImageAndText04 = 7,
    ToastText01 = 8,
    ToastText02 = 9,
    ToastText03 = 10,
    ToastText04 = 11,
}

Before you can call the Toast from your code you need to make sure the “Toast Capable” is set to Yes in your “Package.appxmanifest” file.

The below code define a Toast template with Image and Text.

void DisplayToastWithImage()
{
    // GetTemplateContent returns a Windows.Data.Xml.Dom.XmlDocument 
    // object containing the toast XML
    XmlDocument toastXml = ToastNotificationManager.
           GetTemplateContent(ToastTemplateType.ToastImageAndText01);
 
    // You can use the methods from the XML document to specify all of the
    // required parameters for the toast
    XmlNodeList imageElements = toastXml.GetElementsByTagName("image");
    XmlElement imageElement = (XmlElement)imageElements.Item(0);
    imageElement.SetAttribute("src", "package://images\\Winner.png");
    imageElement.SetAttribute("alt", "Placeholder image");
 
    XmlNodeList textElements = toastXml.GetElementsByTagName("text");
    for (uint i = 0; i < textElements.Length; i++)
    {
        textElements.Item(i).AppendChild
             (toastXml.CreateTextNode("Congratulations You Won"));
    }
 
    // Create a toast from the Xml, then create a ToastNotifier object 
    // to show the toast
    ToastNotification toast = new ToastNotification(toastXml);
 
    // If you have other applications in your package, you can specify 
    // the AppId of the app to create a ToastNotifier for that application
    ToastNotificationManager.CreateToastNotifier().Show(toast);
}

Step 5: Add Share Support

One of the coolest things in Metro Application is the Contracts API, the Contracts allow you to work with the shell and with other apps using the WinRT.

For Example: if you want to select a local file, or Tweet something you just need to use the Contracts to send the other program the object you want to share.

So first, create an instance of DataTransferManager and implement the DataRequested event.

private DataTransferManager _dataTransferManager;
 
public MainPage()
{
    _dataTransferManager = DataTransferManager.GetForCurrentView();
    _dataTransferManager.DataRequested +=
        new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>
        (_dataTransferManager_DataRequested);
}

In the DataRequested just define what you want to send to the Share Application, you can also send Bitmap and other stuff depends on your application.

In the below example if the user want to share and is still playing I’ll send the application download link, but if the user won the game I’ll send his score.

void _dataTransferManager_DataRequested(DataTransferManager sender, 
    DataRequestedEventArgs args)
{
    args.Request.Data.Properties.Title = "Metro Puzzle";
    if (_timer.IsEnabled) // If the user didn't finish the game 
    {
     args.Request.Data.Properties.Description = "Share Metro Application";
     args.Request.Data.SetText("Got Windows 8? You Should Download" +
                               " Metro Puzzle – " + Const.DownloadLink);
    }
    else
    {
     args.Request.Data.Properties.Description = "Share Win";
     args.Request.Data.SetText(string.Format("I've just finish Metro "+
           "Puzzle in {0} moves in {1}, think you can beat me? {2}", 
            txtMoves.Text, txtTime.Text, Const.DownloadLink));
    }
}

You can also force the Share UI to appear on demand using the following method:

DataTransferManager.ShowShareUI();

Download Metro Puzzle

How To Deploy It:

Open the solution in Visual Studio and Compile it, or click the Deploy.bat file.

Enjoy