A non-traditional “Hello World” app with Windows 8
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.
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!
Scroll down a bit and you should see this block of code, just before the OnLaunched method ends:
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.
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:
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.
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 + . )
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.
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.
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.
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).
And that’s it – the logo and the title are taken care of in all the different views :)
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:
It’s actually a combination of the splash screen image itself, along with a background color.
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!
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.
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 :) )
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.
The Wikipedia app on the other hand, makes use of it in a beautiful way!
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!
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!
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.