Click here to Skip to main content
15,867,453 members
Articles / Programming Languages / C#

My First Windows 8 Application – Metro Puzzle

Rate me:
Please Sign up or sign in to vote.
4.83/5 (52 votes)
7 Apr 2012Ms-PL4 min read 128K   6.4K   97   40
My first Windows 8 application, Metro Puzzle.

Introduction

Windows 8 is the next version of Microsoft Windows, a family of Operating Systems produced by Microsoft for use on personal computers, including home and business desktops, laptops, netbooks, tablet PCs, servers, and media center PCs.

It adds support for ARM microprocessors in addition to the traditional x86 microprocessors from Intel and AMD. Its user interface has been changed to make it better suited for touchscreen input in addition to the traditional mouse, keyboard, and pen input.

Windows 8 will contain a new user interface called Metro UI. With the new change, the Start menu is replaced in favor of the new Start screen, where there are tiles that contain shortcuts to applications, Metro style applications, and updating tiles, similar to those in the Windows Phone.

Related Links 

Background

I attended the Build Conference where I first saw the new Windows 8 Operating System and many cool things coming from Microsoft in the new release.

I have much to say about the 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.

How To Build Puzzle 15 Game

MetroPuzzle/1.png

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.

MetroPuzzle/2.png

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

Step 3: Add Metro Application Bar

Because Windows 8 should support Touch systems, Microsoft has created the ApplicationBar object to allow users without mouse to perform right click operations just by sliding the finger from the bottom of the screen up.

Of course if you do work with mouse, you can just right click and the application bar will appear.

MetroPuzzle/3.png

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).

XML
<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 from continuing working, the toast will disappear after a couple of seconds.

MetroPuzzle/4.png

The Toast API has a couple of default templates as you can see from the enum below.

C#
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 Toast from your code, you need to make sure “Toast Capable” is set to Yes in your “Package.appxmanifest” file.

MetroPuzzle/5.png

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

C#
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 a Metro application is the Contracts API; Contracts allow you to work with the shell and with other apps using WinRT.

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

MetroPuzzle/6.png

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

C#
private DataTransferManager _dataTransferManager;

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

In DataRequested, just define what you want to send to the shared application; you can also send a bitmap or other stuff depending on your application.

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

C#
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:

C#
DataTransferManager.ShowShareUI();

How To Deploy It

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

MetroPuzzle/7.png

Points of Interest

There is a lot more in the new Windows 8 WinRT and Metro apps, and over the next weeks, I'll write more advanced articles on the subject.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Architect Sela
Israel Israel
Shai Raiten is VS ALM MVP, currently working for Sela Group as a ALM senior consultant and trainer specializes in Microsoft technologies especially Team System and .NET technology. He is currently consulting in various enterprises in Israel, planning and analysis Load and performance problems using Team System, building Team System customizations and adjusts ALM processes for enterprises. Shai is known as one of the top Team System experts in Israel. He conducts lectures and workshops for developers\QA and enterprises who want to specialize in Team System.

My Blog: http://blogs.microsoft.co.il/blogs/shair/

Comments and Discussions

 
BugIt doesn't work Pin
Nick__J27-Mar-12 11:46
Nick__J27-Mar-12 11:46 
GeneralRe: It doesn't work Pin
Shai Raiten29-Mar-12 22:36
Shai Raiten29-Mar-12 22:36 
GeneralRe: It doesn't work Pin
Shai Raiten7-Apr-12 2:47
Shai Raiten7-Apr-12 2:47 
GeneralRe: It doesn't work Pin
cvo-aalst10-Sep-12 4:07
cvo-aalst10-Sep-12 4:07 
QuestionHow to fix Build VS11 error Pin
Andrea Turchi20-Mar-12 0:13
Andrea Turchi20-Mar-12 0:13 
AnswerRe: How to fix Build VS11 error Pin
Kamiln22-Mar-12 15:12
Kamiln22-Mar-12 15:12 
GeneralRe: How to fix Build VS11 error Pin
bssrini30-Mar-12 16:18
bssrini30-Mar-12 16:18 
AnswerRe: How to fix Build VS11 error Pin
Shai Raiten7-Apr-12 2:47
Shai Raiten7-Apr-12 2:47 
QuestionHow to fix csproj file error Pin
Garth Boyst7-Mar-12 9:53
Garth Boyst7-Mar-12 9:53 
AnswerRe: How to fix csproj file error Pin
Shai Raiten7-Mar-12 20:42
Shai Raiten7-Mar-12 20:42 
Generalnice one Pin
JimMillsDC7-Mar-12 4:06
JimMillsDC7-Mar-12 4:06 
GeneralRe: nice one Pin
Shai Raiten7-Mar-12 20:41
Shai Raiten7-Mar-12 20:41 
GeneralMy vote of 5 Pin
LeslieM29-Feb-12 22:28
LeslieM29-Feb-12 22:28 
GeneralRe: My vote of 5 Pin
Shai Raiten7-Mar-12 20:41
Shai Raiten7-Mar-12 20:41 
QuestionOutstanding Pin
AviFarahBarCap8-Feb-12 11:31
AviFarahBarCap8-Feb-12 11:31 
AnswerRe: Outstanding Pin
Shai Raiten19-Feb-12 23:06
Shai Raiten19-Feb-12 23:06 
GeneralMy vote of 5 Pin
Dean Oliver28-Jan-12 4:56
Dean Oliver28-Jan-12 4:56 
GeneralRe: My vote of 5 Pin
Shai Raiten19-Feb-12 23:06
Shai Raiten19-Feb-12 23:06 
QuestionSome words on the puzzle code? Pin
rradi8-Jan-12 1:46
rradi8-Jan-12 1:46 
AnswerRe: Some words on the puzzle code? Pin
Shai Raiten19-Feb-12 23:07
Shai Raiten19-Feb-12 23:07 
Questionlaunch metro apps Pin
wtl22211-Dec-11 19:44
wtl22211-Dec-11 19:44 
AnswerRe: launch metro apps Pin
Shai Raiten7-Mar-12 20:41
Shai Raiten7-Mar-12 20:41 
QuestionMy vote of 5 Pin
Alistair Tudor4-Oct-11 6:42
Alistair Tudor4-Oct-11 6:42 
AnswerRe: My vote of 5 Pin
Shai Raiten4-Oct-11 6:45
Shai Raiten4-Oct-11 6:45 
Question5 from me Pin
Nick Polyak2-Oct-11 7:33
mvaNick Polyak2-Oct-11 7:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.