I had the privilege of speaking at the Philly .NET Code Camp 2012.1 at Penn State Abington this past Saturday.  My talk was titled Filling in the UX Gaps in Metro Style Apps, which should sound familiar since that was the title of my TechBASH presentation.  However, I’ve modified the presentation quite a bit since then so the new title for it is Metro Design Fundamentals.  The modifications I made were mostly related to beefing up the section on design inspirations and spending a bit more time talking about just how important design is to Metro style apps.  Your app isn’t going to make it into the store without taking UX and design into account.  This stuff’s important!

Thanks again to the folks at Philly .NET for allowing me to speak at this great event.  I had a blast!

You can download the slides here: Metro Design Fundamentals (PDF, 18MB)

No related posts.

Better Grid Application template (.zip file, 7 MB)

No related posts.

On Saturday, I gave a presentation at TechBash about Windows 8 application design and development.  The talk introduces the Metro Design principles and shows how to apply these principles to convert a desktop application into a Metro style app.  Also as part of this presentation, I prepared a Visual Studio template for Grid Applications that improves on the user and developer experience that Microsoft delivered in their Grid application template.  I will have a series of blog posts that goes through the concepts in this presentation in detail at a later date.

If you are familiar with the Visual Studio templates for Metro style apps, you will recognize the following screenshot as the Grid Application template:

This template is fine for giving the correct layout and margins and typographic style for Metro style apps, but it doesn’t really inspire the developer to create engaging experiences.  It’s actually a bit boring and uninspiring.  The template also has some usability issues.  The mouse scroll wheel does not work in the built-in template for the main GridView.  There’s also no semantic zoom even though it would be easy to have this built-in as an option in the template.  Users will come to expect semantic zoom for this style of application since it is part of the Windows 8 touch design language.

So, I offer you a template I call Better Grid Application.  Here’s what it looks like:

It also has semantic zoom:

I’ll have more to say about the template and the design principles that went into it and my presentation in an upcoming blog post series.

In the meantime, the slides and Visual Studio template are here for your use.  To install the template, put the BetterGridApplication.zip file in Libraries\Visual Studio 11\Templates\ProjectTemplates\CSharp\Windows Metro style\1033\ and then restart Visual Studio.  The template should now show up in the Visual C#\Windows Metro style category in the New Project window.  I will also be creating a WinJS version of this template soon.  I will probably set up a repository for this somewhere soon as well so it is easier to get any updates I make to it.

Update: I originally uploaded an older version of the template. I have uploaded the correct version now. Sorry about that!

Download presentation slides (.pdf file, 10.8 MB) Download the Better Grid Application template (.zip file, 7 MB)

No related posts.

On September 12, 2011 Microsoft revealed Windows 8 at the BUILD conference.  Among the many new features and experiences introduced was a new style of fully immersive apps dubbed “Metro style apps”.  These apps can be written using XAML with C++ or C#/VB or HTML5 using JavaScript.  As a common underpinning to these two very different development environments, Microsoft introduced the Windows Runtime (or WinRT for short).  WinRT is the bridge to core Windows 8 OS functionality from the various supported development options.  I explained WinRT in some detail in a previous post.

Fast forward to today: Microsoft announced the editions of Windows 8 that will be available upon release.  Among these was a new name for what was previously referred to as Windows on ARM (WOA for short).  The new name for WOA is Windows RT.  Now, the observant amongst you probably immediately recognize the potential problem with this new name.  For those that don’t, let’s review the concept of name collision.

Name collision is a programming concept that occurs when two variables are given the same name within areas of a program in which they would conflict (i.e. they are in the same scope).  What is the result of name collision?  Confusion.  The compiler doesn’t know how to distinguish between the two variables and will complain.  Thankfully, most compilers won’t even let you do this sort of thing.  So, given that Microsoft has built a lot of software over the years, why have they made what seems to be a mistake directly akin to name collision?  Amusingly enough, there was a post on the Building Windows 8 blog back in August entitled “Designing the Windows 8 file name collision experience”.

I’m not going to throw stones about whether or not “Windows RT” is a good name or the right name for the ARM version of Windows 8.  What I do know is that it has the potential to cause some confusion in developer circles.  There is a hashtag on Twitter #winrt.  Can you immediately tell whether it’s referring to Windows Runtime or Windows RT?  The longer version #windowsrt is a lot of characters for a system designed in such a way to limit the length of a post.  Then there’s WinRT People, the site that collects posts from around the web about WinRT and related topics.  Microsoft clearly established and communicated the “WinRT as Windows Runtime” naming scheme and now they’ve muddied the waters with this Windows RT naming decision.  In a conversation with a Microsoft technology developer I’ll need to ask the question: “I’m sorry, were you referring to Windows Runtime or the ARM version of Windows?”  Not sure I understand this decision at all.

Related posts:

1. Metro Snack #2: What is WinRT?

Windows 8 Consumer Preview is finally here! I’ve already talked about my initial impressions of Windows 8, followed along with the BUILD keynotes day 1 and day 2 and provided developers with tips on how to get started with Windows 8 development. For all of this time since the BUILD conference, everyone has been able to try Windows 8 but it has mainly been aimed at developers looking to develop apps for the new platform. That all changes today with the release of the Consumer Preview. Now it’s everyone else’s chance to try it out. What’s up first? The installation!

Windows 8 Consumer Preview Setup

Microsoft is trying its best to keep things friendly and streamlined in the installation process. To that end, Windows 8 can be installed using a setup application that includes a web downloader that will walk you through the process. (Note: ISO downloads are also available)

Step one: compatibility check

The first thing the installer will do is check for Windows 8 compatibility for both you installed applications and your device drivers.

When the installer is done checking for compatibility it will provide a concise report and a link to more details. For most users, this is enough information so it’s nice to see it presented so cleanly.

For more detail, there is also a full compatibility report.

step two: downloading windows 8 consumer preview

Now Windows 8 Consumer Preview is ready to download. The next screen will give you the product key for the install (save this for later just in case!).

Once you start downloading you’ll be given progress indicators.

If you need to pause at some point, don’t worry. There’s built-in pause support!

step three: installation

Now comes the fun part — the actual installation. Interestingly enough, there are some unexpected options in the next dialog. Windows 8 will give you three options:

• “Install now” – meaning: install as an upgrade of the current system
• “Install on another partition” – meaning: don’t install over top of my current system
• “Install later” – meaning: save the stuff you just downloaded and I’ll come back to it later

After this, Windows will present a fairly standard license agreement.

Setup will now ask you what you want to keep from your current system.

If you’re not sure what you might want to keep, there’s even some guidance for that.

It’s almost time to install at this point, but there might be a few things you need to address before you can install. In my case, there are some antivirus issues that need to be addressed (i.e. uninstalled).

After this, it’s time to install!

And it’s off to the races!

Conclusion

I like the installation experience for Windows 8. There’s just enough information provided without becoming overwhelming. When I need more details, they’re available. My Windows 8 Consumer Preview installation hasn’t successfully completed yet, but once it does you can bet I’ll have more to say. Stay tuned! In the meantime, follow me on Twitter (@brentschooley) for more up to date information.

Related posts:

1. Visual Studio Async CTP (Version 3) Installation Issues
2. Metro Snack #1: Choosing XAML or HTML5 for Windows Developer Preview apps
3. Windows 8 on a Mac Using Boot Camp

[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\System]

“AllowDomainPicturePassword”=dword:00000001

“AllowDomainPINLogon”=dword:00000001

If you don’t know how to make this change, it might be a good idea to skip this tip!

Related posts:

1. BUILD Keynote Day 1 – Windows 8 Experience

Related posts:

1. Visual Studio 2008 SP1 hotfixes for WPF

It doesn’t seem like a great idea to go into a series of posts talking about Metro-style apps without briefly defining the core components that they are built on.  The most fundamental piece of the puzzle for these apps is Windows Runtime, or WinRT for short.  WinRT is probably best described as an unmanaged, native API that can be leveraged from many different languages via a mechanism called language projection.  Read more to find out some more details about how WinRT works.

How does this thing work? (in a nutshell)

Metadata

Since WinRT is designed to be a native API, it can’t contain metadata directly in its code.  To get around this limitation, WinRT stores its metadata in .winmd files that are encoded using the ECMA 335 metadata format (CLI).  You might recognize this strategy if you’re a .NET developer since this is what .NET does.  This enables things like reflection to be possible in WinRT.

object-oriented type system

Built on the metadata system is an object-oriented type system.  In this type system can be found a lot of things that could be found in the .NET framework.  There are also some new additions.  I won’t go into details of what is or isn’t in the WinRT APIs in this post as a) there are a lot and b) I’ll be going into a lot of them in more detail as the series progresses.

Components

Any class that is built to target WinRT is called a WinRT component.  Any WinRT supported language can be used to write a WinRT component.  Since it is built upon the metadata structure, a WinRT component written in one language can be easily used from another language.

What languages are supported?

Currently, the languages that are supported are C++(WRL and C++/CX), C#, VB.NET and JavaScript.  Technically, any .NET language can be used for WinRT development but only C# and VB.NET are supported for now.  Language projections can be created to expose the WinRT API to other languages in the future.

Give it a try

If you haven’t tried it out yet, head over to the Windows Dev Center and download the Windows 8 Developer Preview.  Then, get started with Metro style app development. You’ll need to choose whether to use XAML or HTML5 to build it.  I’ve got some tips to help you decide.

Related posts:

1. Metro Snack #1: Choosing XAML or HTML5 for Windows Developer Preview apps
2. Metro WebView Source and HTML workarounds

SOPA and PIPA are very dangerous laws that inherently break the way the Internet works. Please join the cause by signing the petition or calling your Congressmen.

No related posts.

Which should you choose?

XAML and HTML5 applications in Windows 8 both use WinRT as a foundation and by virtue of this offer an almost identical set of features to the developer. However, if you are developing your Windows 8 user interface during the Developer Preview there are some important things to consider. Ultimately, the decision is yours and you should choose what you are comfortable with given the current limitations. The point of this post is to help you make an informed decision given what we have available to us now.

Language Familiarity

This one seems fairly obvious but there’s going to be a learning curve if you currently do not know XAML or HTML5. This is mitigated somewhat by the fact that you are going to be learning a lot of new things (WinRT, Windows 8 Metro Style App flow, etc.). I would treat language familiarity as a starting point for your decision if your application is fairly simple in nature. However, if you are building a new app that does not leverage an existing codebase I would strongly consider basing this decision based on all of the factors described in this post.

Excellent Expression Blend Support for HTML5 Apps

The version of Expression Blend that is included with the Developer Preview has wonderful support for creating Metro apps using HTML5. As you build your user interface, the changes will be reflected immediately using a live DOM. There is also an interactive mode that will allow you to test your application without even running it. The CSS editing features in Blend are also top-notch. From a UI design perspective, this makes HTML5 Metro development very attractive.

No Expression Blend Support for XAML Apps

While the Expression Blend support for HTML5 apps is fantastic, it is nonexistent for XAML. The Blend team spent a lot of time making this version of Blend work with HTML5 but unfortunately it appears that did not leave enough time for XAML support. XAML developers/designers that want to use Blend to create animations, brushes, etc. will have to use Blend 4 until this support is added.

Visual Studio Designer for XAML has major bugs

For me, this has been the biggest reason to potentially avoid XAML during the developer preview. I am not sure exactly what causes it, but every project I have attempted to work on so far has gotten into a state where the Visual Studio Designer will no longer load my XAML files. This is a fairly significant problem since there is no Expression Blend support for Metro apps using XAML in the Developer Preview. This leaves designers and developers with very limited tooling support for the UI. For a platform with a strong focus on design, this is not an ideal situation to be in.

My personal conclusion

The conclusion I’ve reached at this point is that learning HTML5 and WinJS is probably a good investment. The tooling story for XAML Metro apps right now is somewhat frustrating and leads to more headaches than seem necessary at this point. I am much more familiar with XAML-based user interface coding than HTML-based so this is a difficult pill for me to swallow. I am hopeful that the beta in February will bridge a lot of these gaps but, just in case, I’ve decided that any applications I develop during the Developer Preview will be developed using HTML5.

Related posts:

1. Metro WebView Source and HTML workarounds
2. HTML5+CSS3+jQuery: Learn with me