A web log of #Win8Dev

I spent the last 9 months developing a Windows 8 app. It’s not in the store and I’m not sure it ever will be.  It was a proof of concept and something very different for the company, so I believe it met its goal of adding energy in that direction and hopefully some inspiration.

Unfortunately though all of this knowledge on developing a Win8 app (WinJS/C++ specifically) was not shared. Of course it’s complicated with NDAs, deprecated knowledge of past builds and the fact that I just didn’t catalog much of what I learned.

I just signed up for a new project last Friday which should keep me solidly fixed in the Win8 world for a while. And this time I am going to keep a log on the web, call it a web log or even a blog, if you like.

My goal is to bring together all of the notes, trials, discoveries and odd things that come up over the course of the week and then have a post ready the following Monday.

The content will cover developing unnamed (“Metro”) apps using WinJS with a focus on UI development, working with a design team and the language of Windows 8.

That’s it for now, just a tiny commitment to posting weekly about my Win8 development journey. It should be fun.

My mom won’t care about the Windows 8 Start button

Disclaimer: I am an independent Windows 8 developer who used to work for Microsoft. My family uses Windows PCs and iOS devices. When working on HTML5 projects I sometimes use a Mac to develop. Its crazy, I know.

There has been a lot of talk about the lack of a Start button in Windows 8.  Or more accurately, a statically placed visual icon in the Desktop app which the user can click on to return to the Start screen.

What happens if the user is in the Desktop app and moves there mouse into the same area, perhaps even driven by muscle memory?  A little thumbnail of the Start screen shows up and when clicked takes you to the Start screen.

For even faster travel back to the Start screen, just press the Windows key and you’re there. It’s stunning, really.

I do agree though, it’s not in your face and you have to learn how to do it. Should they put the Start button back in the task bar?  Sure, just use the new Win8 logo and you’re done.


Do I think this is going to be a real issue for my mother, grandparent or my kids? No.  At least I hope not.  If so, something went terribly wrong.

Try this.

Go to one of your non-techie Windows-using friend’s computers and hit the amazing start button.  Take a look at the most commonly used programs.  What do you see?

This is what I found:

  1. Web Browser
  2. Photos, Music, Video, Messaging, Twitter, Facebook, Reader
  3. Windows Explorer, Microsoft Office, Video Chat, Calculator, Snipping Tool
  4. QuickBooks, Family Tree Maker, Minecraft, League of Legends

Those are examples of commonly used Windows Programs. Now how does that compare to the new fandangled Metro style apps which run from the Windows 8 start screen and not the Desktop app?  You know the one missing the Start button.

Web Browser
You can do just about everything in the browser, the web is amazing. You may even be able to build an OS on it.  Is there a Metro-style browser in Windows 8? Yes, its IE10 and hey it has way better support for CSS3.  Are there more coming? Yes, Firefox is confirmed.

Mail, Photos, Music, Video, Messaging, Twitter, Facebook, Reader
There are Metro-style apps already available in the Consumer Preview that perform these functions. Are they awesome? Almost, definitely promising, but I believe they will be better for release. And if not, there will be other options via the Store.

Windows Explorer, Microsoft Office, Video Chat, Calculator, Snipping Tool
These programs are not  yet available as Metro-style apps. If Microsoft does not make them available then they’ve failed here.  And the good news is, as far as the last three are concerned, there will be other options via the Store.

Quickbooks, Family Tree Maker, Minecraft, League of Legends
These are examples of programs that are likely not to be changed (ever or anytime soon) to Metro-style apps, for some reason or another – existing investment, technical philosophy, etc.  This is where it hits the most and we might need that little Start button back. And if you don’t convert or get a hook in the Store somehow, less and less Windows users will adopt your program and instead use one of the other options via the Store.

My mom won’t care about the Windows 8 Start button
Because hopefully she will be too busy hanging it in Metro style land; not breaking her computer rather finally getting to it enjoy it.  One of my first “ah-ha” moments with Windows 8 was looking at the Settings app.  “My family could use this!” I thought.  It’s way friendlier and less intimidating than the Control Panel.  Thanks Metro design language.

…other options via the Store
You may have noticed this phrase come up more than once in this post.  That’s because this is big clincher, the thing that makes everything work.

Quick, guess how many Windows programs my 10-year old daughter has installed? 0

Now how many apps has she installed on her iPod? At least 30 or 40.

What does the mean?  She loves her iPod way more. I believe that once she sets up her Win8 PC in the same manner as well she’ll be hooked. When my wife customizes her Win8 PC she’ll be happier and more productive. When my mom customizes her Win8 PC (or I do it for her) she won’t be lost anymore.

As for those of us power users
I need my Visual Studio and Photoshop to pay for all of these apps and Windows 8 PCs, so I need to learn to be comfortable moving between the Start screen and the Desktop app. The good news is it’s not that hard. You really just need to know Win, Win+X and Win+C.

Try it out. Besides, your other hand needs something to do while you’re mousing around.

Windows 8 AppBarButtonStyles enumerated and visualized

As a result of the WinJS AppBarIcons post yesterday, I’ve received a fair number of requests asking to see how this compares to what’s available for XAML-based projects.

AppBarButtonStylesThe results are in, but they don’t quite stack up.

Download the full image

There are currently 29 options compared to the 150 options in WinJS.  Additionally some of the names and icons conflict or are used in different ways.  I’m hoping this is ironed out before the full Windows 8 release.

Instead of a property, the appearance of the Button is set via a Style where the name of the icon is used as a prefix to the string “AppBarButtonStyle”. The Styles are defined in the “StandardStyles.xaml” resource dictionary which is part of the basic project template.

Sample code:

This works fine and is inline with how XAML-based controls are styled, but after doing so much WinJS work I will say it feel a bit heavy compared to just setting a property.  Custom icons are defined by setting the to “AppBarButtonStyle” and setting the Content property of the Button to your own PNG file.

Overall, I prefer the WinJS choice of names and icon usage over those used in XAML, except for the “find/Search” icon. Since the icon looks like the OS-level Search charm, I believe it should be named “search” and not “find” in WinJS.

Windows 8 AppBarIcons enumerated and visualized

Download the full image

While digging into the Windows 8 Consumer Preview, I found that AppBar buttons are now defined by using the AppBarCommand object which has an icon property. In order to work, the string value must be set to a property of WinJS.UI.AppBarIcon or a custom PNG.

Sample code:

This is wonderful functionality providing for both custom icons and 150 existing icons using the Segoe UI Symbol font.  Genius, now where is the list of available icons?

Oh, I see, there isn’t one available yet.  Ok, I’ll just make one for myself and my friends. Enjoy.

Thinking of Pinned Apps conceptually on Windows Phone

One of the more distinctive features of Windows Phone is the Start screen – which includes nice big live tiles that you can add and organize however you prefer. Up until the latest release, pinned items have been limited to applications, contacts, websites and other native or system level items.

With the latest release, a new feature has been added for app developers called Secondary Tiles. The new tiles allow users to create shortcuts on the Start screen to a deep location (at least one-level beyond the homepage) of an application.

This is a big win for app users as it allows them quick access to something they really care about. And it is a big win for developers, as a unique feature of Windows Phone and as a way for their app to become even more valuable and loved by the user.

So how do you design your app with this feature in mind?

This is a design challenge I recently worked through and not finding much documentation on the topic, I’ve decided to share my thoughts.

Quick Tiles Overview

Before there were secondary tiles, there was the primary tile, formally known as the Application Tile.  The job of this tile is simple – open the application to the home page, defined by the default task in your WMAppManifest.xml file.  Even though they may not currently be pinned to the Start screen, they always exist and are accessible as the first entry in the ShellTile.ActiveTiles collection.

Secondary Tiles are created via code in response to user interaction (e.g. click of a “Pin to Start” button).  When created the tiles are given a unique NavigationUri, reflecting the purpose of the tile to link to a specific place or thing within the application.

Both types of tiles have six properties – Title, BackgroundImage, Count, BackTitle, BackBackgroundImage, BackContent.  The first three should be obvious in functionality.

The second three properties once set will cause the tile to flip, as though you were looking at two sides of the tile in space.  This is a great way to get the user’s attention, but could be abused by over usage.  For an avant-garde usage of flipping tiles check out Flipping Tiles.

For more information, check out the Tiles Overview on MSDN.

Just a Slice of the App

Now that we have the basics on the table, what does this mean for design?

Think of a Pinned App as a manifestation of the “Be ‘On the Go’ Capable” Metro Principle. By pinning a specific single unit (location, person, book, etc) to the Start screen, the user has less typing, less navigation and any other type of data entry to make it to their favorite or valuable object.

Since the intention is to focus on the single object, this gives you a license to only expose the object and the segment of the app that deals with the object.  Let’s take a look at a real example to explain the idea and see it in action.

The People Hub is used to expose all of your contacts information and statuses.  Its an easy way to get the most recent statuses or search for a contact in order to get in touch with them.  I can select a specific contact, check out their info and hit Back to return to the People Hub.

Now, I have this friend named Pinto Snows who like I to keep in close touch with. I can pin him to my Start screen, so I have quick access to his contact info and status by selecting him via his very own tile.  If I close the app, I return to the Start screen and not the People Hub.  For one thing, I came from the Start screen so that’s where I expect to return.  Secondly, I only wanted info about him, I don’t need to look up anyone else.

This is a very “on the go” interaction.

There is no need to go to the homepage of the app from here, this is just a slice of the app.

Development and Implementation

When developing the app, this “slicing” needs to be taken into consideration.

The page that loads from a Secondary Tile must be self-sufficient. It can’t depend on data being loaded from the home page or some other page. There are two simple ways to detect whether a page has been opened via a Secondary Tile:

  1. NavigationContext.QueryString – the Uri for secondary tiles should be unique and ideally pass an ID in the QueryString. Depending on how you have developed an app, this may be enough to detect the difference.  If you are already using QueryStrings to pass information, just use a unique parameter when setting the Uri for the SecondaryTile, such as “pinned=true”.

  2. NavigationService.CanGoBack – since the page is normally loaded by navigating within your app, this property will be true.  In a pinned situation where this page is loaded as the first page, the property will be false.

The biggest difference here is that when the user hits the Back button they are leaving your app, unlike a non-pinned situation where they go up one-level or to the homepage.  The good news is you have the previously mentioned ways to detect the situation as well as the normal application-level events to save state and data if needed.

For a good example of a third party application following this pattern, check out 4th and Mayor pictured to the right.  The first image shows the app and a specific location (below Settings) pinned to Start. The second image shows the location opened via the pinned tile.

One more suggestion (which is done in People, not in 4th and Mayor) is to disable the Pin button if the user has already pinned that object to Start.  You can easily check for the existence of the pinned tile be querying the ShellTile.ActiveTiles collection and comparing NavigationUri values.

Metro List View double line (ep. 2) – from PSD to HTML

I mentioned I was going to shelve this project for now, but I started thinking about implmenting the same style and layout in HTML.

“Metro in HTML?!”

Yes, I said it.  And its really not too far of stretch, especially when you think of the style of menus, focus on typography and the print and infographic-based design concepts. That’s very “webby”.

If you remember from the previous post, the goal was to match a Silverlight for Windows Phone page to the PSD Design Templates provided by the Windows Phone Design team. By the end of it, I was able to get very close only truly stumbling on the lack of font tracking or charcter spacing in Silverlight on the Windows Phone.

Instead of waiting for Silverlight 5 (which includes charcter spacing) to get on the Windows Phone (next year?) I thought I would try the same exercise in a technology that does in fact allow you to set font tracking – CSS.

You can see the results in action here -> Metro Line View double line in HTML.

Or check out the image below:

browser comparison of Metro List View in HTML

A few notes on the implementation:

– I started the project using the HTML5 Boilerplate is a project template.  It includes a CSS rest and normalization and a load of other useful features.  I expect to use it again in the future.

– There is no special CSS casing for different browsers.  I wanted to serve them all the same plate and see how they would render.

– I switched to “Segoe UI” from “Segoe WP” which works much better in the browser (which makes sense, of you think about it) so there are slight chracter differences no matter how close the layout.

– Letter-spacing is tricky (especially since the fonts are not the same).  It appears that in the first line item “Text” could use less space and “example” could use more.  I went with a happy medium for all.

– I went the easy route and decided to use absolute positioning and pixel values since the exact heights were important. In a real implementation, I’d likely need to move to a relative solution.

Relative values especially become important when you start thinking of different screens and devices. In the photo below you can see the test page loaded in an iPhoen 3GS, iPhone 4 and Samsung Focus (WP7 NoDo).

Metro List View in html on phones

The viewport is set to device-width and the initial scale is set to 1, the difference is the absolute values for font size and spacing mixed with the different levels dpi per screen and browser upscaling.  If I were to switch over to relative values I could get much more consistant results.

This was a fun exercise, but is it the first and last time, I’ll be implementing the Metro design language in HTML?

No, I don’t think so.

Metro List View double line – from PSD to Silverlight

I was recently working on a Windows Phone 7 application where one of the goals was to be very true to the Metro design guidelines. Like many applications we were using the trusty ListBox to show items with titles and subtitles, which all works pretty smoothly until that title starts wrapping. Then it quickly becomes apparent how much work is need to adjust the Silverlight templates to match the PSD Design Templates.

We did get very close to parity with the design templates and I thought I’d share the process for those interested in matching the native layout of the — List View double line.

Obtain the PSD Design Templates

If you don’t have them already download the Design Templates for Windows Phone 7. After extracting the files open the enclosed PDF which will act as a guide to the contents of the many large PSD files.  Each files focuses on design and layout of different native WP7 components, not all components have a directly related Silverlight control, but its pretty simple to find something similar.

For a full walkthrough of the Design Templates check out this video screencast on the .toolbox site.

Locate the Target Layout

Open the “ListView_PSD.psd” file and you’ll see six different templates for the List view.  The target is the view in the center of the top row — Double Line.

In order to create a lightweight image to use for comparison, I quickly grabbed and flattened the target.

  1. Expand the “DoubleLine_Wrapped” layer group
  2. Toggle the “Redline copy 5” layer into view
  3. Crop and save.

Matching the Layout in Silverlight

Now the goal is just to create the matching XAML and templates which can be reused within real applications.  Thankfully Expression Blend has a project template that gets us more than halfway there.

  1. Open Expression Blend (free with Windows Phone Dev Tools)
  2. Create a new “Windows Phone Databound Application” project and name it “ListviewDoubleLine”

And right away, MainPage is loaded with a ListBox which includes some runtime and designtime data and a similiar data. The image to the right is an overlay of our target and current layout.

Change the Data to Match the Target

In order to use the target as a guide it will be much easier if the text is the same.

  1. For design-time values edit the SampleData/MainViewModelSampleData.xaml file
  2. For run-time values edit the ViewModels/MainViewModel.cs file
  3. In each file change the LineOne and LineTwo properties of the first six items to match the values used in the target

To avoid all the typing, you can download the edited files here.

Update the Header

Even though our focus is the ListBox, layout starts at the top of the page so we need to get that right first.

  1. ApplicationTitle – move to 17pt font size from 15pt
  2. TitlePanel – one less pixel in margin left and top (12,17 to 11,16)
  3. PageTitle – three less pixels in margin left and top (9,-7 to 6,-10)

Now other than the tracking of -10 on the PageTitle we’re set. Unfortunately adjusting font tracking in Silverlight 4 is not possible, but it is planned for Silverlight 5!

Update the ListBox

Now that the header is looking good its time to address the list items.  We’ll do this first by adjusting the position of the ListBox which acts the origin for all items.

  1. MainListBox – three less pixels in margin left and two less pixels in margin top (0,0 to -3,-2)

The first list item looks good now, other than the aforementioned tracking issue.

Update the ListBox ItemTemplate

Although the text is now lining up properly for the first and second items, you may notice that the subtitle of the second item is breaking when it shouldn’t.

The StackPanel used as the container element for the ItemTemplate is not wide enough, although looking at the default width of 432 it matches the redlines in the target.

480 device width minus 24 pixels on each side equals 432, so where’s the disconnect?  Its in the default styling of the title text box and in the visual vs hit target.  Setting the background of the StackPanel to red highlights the answer.  The StackPanel is 9 pixels away from the edge and not 24 as it appears to be.

We need to increase the width to account for this, as well as address the TextBlock spacing for the subtitle

  1. StackPanel – increase width from 432 to 459
  2. – decrease margin bottom from 17 to 1
  3. – set the MinHeight to 94
  4. LineTwo TextBlock – decrease the margin right from 12 to 0
  5. – change TextWrapping to NoWrap.

Matching the LineHeight for Text Wrapping

And now for the final feat and the most advanced bit of trickery, adjusting the template to accommodate for the wrapping behavior. In Silverlight we do have control over Line Height but you must first change the lesser known LineStackingStartegy property.

  1. LineOne TextBlock – set LineStackingStrategy to BlockLineHeight
  2. – LineHeight to 43
  3. – set Margin explicitly to 12,9,12,0 replacing the inherited 12, 0, 12, 0
  4. StackingPanel – remove MinHeight setting
  5. LineTwo TextBlock – increase margin top from -6 to -3
  6. – increase margin bottom from 0 to 17

To explain the previous steps, after setting the LineStackingStrategy for the title, we found a height that matched the target and then adjusted the margins accordingly. Then realizing that the MinHeight value is not going to work for the wrapped title items we shifted to adding a margin bottom to the subtitle.

Final match

Although it takes a little extra fine-tuning you can see that it is possible to get pretty close to the Metro design templates for your WP7 apps.

The one big thing missing is font tracking, but that will show up in Silverlight 5 as a Character Spacing property on text controls. Since the upcoming WP7 “Mango” release will bring the phoen up to Silverlight 4, I’m guessing I’ll revisit this post summer 2012 around when Silverlight 5 makes it to the phone.  Then we can finally rest and reproduce a perfect match.

Until then, this little project is going on the shelf.

You can download the final source code here.

Grid by Example – WP7 design

I opened a PSD file today which contained a WP7 panorama design and this is what I saw:

intense grid lines for a WP7 app

Metro, the design language for Windows Phone 7 is all about the grid.  At least that’s where you start; then you break the rules to help enforce brand and the intent of your app.

If you’re involved with Windows Phone 7 app design and you haven’t already watched Megan Donahue’s MIX11 talk Advanced Application Design, watch it now. It takes a step beyond, “what is Metro” and moves to “how do I apply it and make something memorable”.

Then once you’ve watched that, check out Ward Bell’s talk All Thumbs: Redesigning an Existing UI to Suit Windows Phone 7.  Ward takes the concepts and inspiration designs from Metro and applies a business application perspective.  Its all about “Jetro” and its more about experience design than i think Ward even knows.

New Windows Phone 7 tutorials for Designers on toolbox!

One of my recent focuses has been diving into the topic of designing applications for Windows Phone 7.  Although simple upon first glance, the Metro design language has strong guidelines and can make a real impact on the design of your own applications.

I was lucky enough to become part of the effort with Avlade to update the Microsoft design Toolbox site with Windows Phone 7 content. After a good amount of time digesting the Metro design language, the Blend for Windows Phone add-in and the experience overall, we’ve come up with 7 tutorials for designers beginning their own WP7 journey.

Metro Design Language of Windows Phone 7
Metro Design Language of Windows Phone 7

Metro is the name of the new design language created for the Windows Phone 7 interface. When given the chance for a fresh start, the Windows Phone design team drew from many sources of inspiration to determine the guiding principles for the next generation phone interface.

Windows Phone 7: Starting to Design an Application
Windows Phone 7: Starting to Design an Application

Microsoft Expression Blend offers a feature rich environment for designing highly interactive experiences on Windows Phone 7.

Design Tips and Tricks for Windows Phone 7
Design Tips and Tricks for Windows Phone 7

The following list of tips and tricks will help you design and develop Windows Phone 7 applications.

Layout Tips and Tricks of Windows Phone 7
Layout Tips and Tricks of Windows Phone 7

One of the more powerful features that Silverlight offers you is an array of container controls providing a simple way to accomplish the layout of your dynamic applications.

Taking Advantage of Photoshop Templates
Taking Advantage of Photoshop Templates

In this tutorial, you discover how to use Photoshop Windows Phone 7 template files to create pixel-perfect application layouts for your Windows Phone 7 application.

FXG Import and Workflow
FXG Import and Workflow

FXG is an acronym for Flash XML Graphics File, and it describes an XML-based graphics interchange format created by Adobe for the Flash Platform, and is supported by Microsoft Expression Blend.

Designing for Gestures on Windows Phone 7
Designing for Gestures on Windows Phone 7

No longer do smart phones of today depend only on hardware keyboards or the stylus of the past. Windows Phone 7 devices come equipped with a capacitive touch screen that offers a smooth, accurate, multi-touch enabled experience for the user.

And there’s more on the way!

Keep an eye on the Toolbox site and Twitter account (@designtoolbox) for the latest information.