As developers, we start exploring any new platform/framework/language with a traditional “Hello World” program.

Windows 8 is a re-imagined new OS, and so I thought let’s re-imagine the “Hello World” too. Consultant Jargon is my non-traditional version of “Hello World”.

Windows 8 store apps have a few things we need to keep in mind other than the new WinRT API set and the new language choices. These apps can run on a wide range of devices with different form factors and so, a considerable amount of thought must go into designing such apps.

Consultant Jargon focuses on getting these basics right – it scales well with any display resolution, handles different views (like snapped and portrait), follows (most of) the Modern UI principles including the tiles, splash screen etc., and implements the share charm.

Feature-wise, it generates random, geeky jargon like “Balanced Reciprocal Time-frame”, “Responsive Incremental Programming” which means nothing in reality, but sounds complex and deep! What’s more, you can share this jargon with apps like Mail, MetroTwit, FlipToast etc., to post it on Twitter/Facebook/LinkedIn to impress (or spook out) your friends :)

Let’s Start (pun intended)

Open VS 2012, and create a new Windows Store Blank App.

image

 

Next, delete the MainPage.xaml and add a new “Basic Page”, and name it MainPage.xaml. (Why?)

It’s not a big deal if you name it something else, or leave it as the default “BasicPage1.xaml”. We just need to ensure that we update some code that runs when your app is launched which points to the first screen that the app should show.

So, if you choose not to name the new page as “MainPage.xaml”, just go to the App.xaml.cs file and navigate to the OnLaunched method. The Solution Explorer in the new VS 2012 helps you get there easily!

image

 

Scroll down a bit and you should see this block of code, just before the OnLaunched method ends:

image

Notice the underlined part. This statement effectively means – try navigating to “MainPage” – and if the navigate method returns a “false”, throw an exception.

You can replace the “MainPage” with the name of the Basic Page that you just created.

Cool! Now we have a base to start with that handles different orientations and views well.

To-Dos

Here’s what we’ll do in our app now:

  • Have a logo and title, and make sure that both are visible in the Full screen and Filled view, and only the logo is visible in the Snapped view.
  • Create a Splash Screen, which looks similar to the ones that comes with apps like the Messaging or Email app.
  • Create a tile which looks decent, both small and wide tile, and see how we can disable the text being shown on the tile.
  • Implement the “share” charm so that we can spread more non-sense around :D
Logo and title

We have a few options to pick from to create our logo. You can find a good icon/logo on the web (just make sure it’s under an open license like Creative Commons).

Or, you can use one of the free tools to create a unique logo for yourself.

I used Paint.NET and PowerPoint (for shapes) to create the Consultant Jargon Logo:

Logo310

Another great alternative is GIMP.

The main reason to go for these tools instead of, say MS Paint, is that we can create layers which helps in editing the images and save images with transparent backgrounds. And transparent backgrounds can be helpful, as we’ll see shortly.

Once I have the logo ready, I can use it to brand my app in the different views, and I can also scale it to different resolutions and use if for the tiles.

To use this logo in the main screen (and the only screen) in our app, we replace the “back button” with the logo.

image

 

Let’s see if this shows up when we run the app. Sure enough, it does.

Now, let’s see how it handles the snapped view! (If you’re a keyboard person, Windows key + . )

image

Right! Back Button. References. Tool generated code.

The reason why this exception shows up is that we sure replaced the “back button”, but didn’t handle other parts of the “Basic Page” that we added that references this back button. The “other parts” are the different visual states. So, scroll down in your main page to a section that starts with “<VisualStateManager.VisualStateGroups>”

Comment out (or delete) the sections that manipulated any properties on the back button.

image

There, that’s much better.

Next, let’s play around a bit with layouts so that when in full screen/fill view, it shows the logo and title, and only the logo when in snapped view.

To do this, the approach I take is to have a two grids – one for the snapped view and one for the other views.

image

 

To manage transitions between the two grids, we’ll use the Visual States that the Basic Page provides.

To do this easily, we can use the “Device” window. Press Ctrl+Q which will take you to the Quick Launch text box (on the top right of the VS window). Type in “Device” and you should be able to open the device window.

image

 

Select the snapped view (the third button) from the “View” option and make sure that the Visual state is set to “Snapped”. Click on the Enable state recording option, select (click on) the grid named “SnapTitle” and set the visibility property to Visible.

Similarly, select the grid named “FullTitle” and set the visibility to Collapse (while making sure the Snapped state recording is on).

image

And that’s it – the logo and the title are taken care of in all the different views :)

 

Splash screen

Splash screen is the first impression that you get to make on the user. And we all know first impression matters :)

That’s a good enough reason to invest in a good splash screen.

The image that we are allowed to use for a splash screen should be of 620 X 300 resolutions. But hey, what if my screen resolution is larger than that? Of course it’s going to be larger than that! :)

So how do I get this:

image

It’s actually a combination of the splash screen image itself, along with a background color.

image

So, avoid having gradients or high-res images that may abruptly cut off at 620 X 300 so that it can blend really well with the background color – and we should be good!

 Screen shot 1

Invest in a good tile

You would have heard about Live Tiles enough by now :)

It’s one of the most visible things that differentiates the UI on Windows 8 and Windows Phone from the rest.

But does every app need a Live Tile? Not necessarily. If you don’t have dynamic content to update your tile with, it’s OK not to have a Live Tile. But even if it’s a static tile, it’s always a good idea to have one that catches the eye. It’s good to have the brand associated with the tile.

With Windows 8, we have two options for tiles to be displayed on the start screen – a small tile and a large tile. The small tile is 150 X 150 pixels and the large tile is 310 X 150 pixels. The large tile is optional. There is another tile that is required which is the small logo – a 30 X 30 pixel image. This is what is displayed when you search for your app from the search charm.

Apart from these, there is another resolution image that we need to keep in mind for the Windows Store itself – and that’s a 50 X 50 pixel image.

 

 Logo310

Logo150

 

 

 

 

Logo50

 

 

 

 

 

logo30

310 X 150 png

150 X 150 png

50 X 50 png

30 X 30 png

I’ve seen a lot of people miss out the 30 pixel and 50 pixel logos and it would show up as the default logo (I like to call it the “Don’t do it” logo coz of the X in the image :) )

StoreLogo

Don’t do it!

 

The Share Charm

One of the really great things I liked about Windows 8 is how it lets our apps integrate to the core Windows experience. The Share Charm is one such way to provide the user a familiar experience for sharing content from your app with other apps (which most often boils down to sharing with people).

And, one of the most frequently asked question about this feature is “how’s it different from copy-paste?”

Well, you can present the data to be shared in a particular format.

In Consultant Jargon, I’m keeping it simple and adding a couple of words to the actual jargon as shown below.

image

 

The Wikipedia app on the other hand, makes use of it in a beautiful way!

image

In the above cases, Consultant Jargon and Wikipedia apps act as the Share Source, and the MetroTwit and Mail apps act as the Share Target.

Implementing the Share Target is a bit more involved, so I left it out of my little Hello World app :) Moreover it didn’t make much sense for this app to act as the target anyway!

Being a share source is extremely easy though, at least with simple formats like text and URLs. Use the DataTransferManager!

image

That’s it and we’re good to spread non-sense around :)

 

So, there we have it. A non-traditional Hello World to start off with developing apps for a re-imagined, new Windows 8.

 

 

Thanks for reading and happy coding!

Amar

 

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

PPS: If you liked the <Windows key + .> shortcut for snapped view, you should check out my friend, Yash’s blog, for an exhaustive list of Windows 8 Keyboard shortcuts.