While watching the live video from the Microsoft Office Preview event, me and my colleagues all had the same reaction (almost simultaneously in different locations) and we posted it to Twitter at roughly the same time:
“Formerly known as Metro style Applications”…did I hear that correctly?
Microsoft all made us scratch our heads because I think we’ve all gotten used to the term “Metro style apps”. Originally this term seemed awkward (especially the use of the work ‘style’ in it), but we all got used to it. We wrote posts about it. We gave presentations about it. The term maybe even grew on us a bit. So now Microsoft seems like they’re going to replace it with “Windows 8 Style Applications”? Immediate reaction from my colleague @brianlagunas:
I think we’ve had some time to digest this (pun intended) and maybe it’s time to revisit the term and whether or not Microsoft meant this as a replacement term because I have my doubts. Here’s my theory:
There is a lot of confusion in the software world regarding the Metro design language. For starters, when it is applied to an immersive, full-screen Windows 8 application that is launched from the Start screen, we have been calling that a “Metro style app”. But what do you call a desktop application running on Windows 8 that has been styled using the Metro design language in an attempt to fit in with the system even though it is running in the classic desktop? It is still technically “Metro style”. Is it possible that Microsoft was just referring to this scenario? That’s my theory at the moment but I’d really like some clarification from Microsoft on this soon. It’s hard to communicate these things to customers when there are competing terms floating around.
What are your thoughts? I’d really be interested in hearing them, so comment on this post or find me on Twitter @brentschooley.
When I posted the “Better Grid Application” template for Metro style app development in XAML, I posted the wrong file. It was an older version of the template. Sorry about that. I have updated the file in the original post but here is the link again:
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!
In the process of writing my first Windows 8 Metro style app using C# and XAML, I came across some limitations of the current WebView control’s implementation. The flow for the feature I was working on is fairly simple:
Content for a webpage is displayed in a WebView (using the WebView’s Source property).
User browses the page until they find something they want to save.
User clicks a save button and the app parses the information into a readable format for saving in the app’s storage.
This is a pretty straightforward concept and I thought the implementation would be just as intuitive. Judging by the similarity of the WebView control to the Silverlight WebBrowser control, I went about implementing this functionality as I would have for Silverlight. I set the WebView’s Source property to the initial Uri where I wanted the browsing to begin. I wired up a test button that I thought would kick off the parsing process. That’s when I started to run into problems.