That is a symbolic milestone: Last week, MVVM Light reached the bar of 120’000 downloads on http://mvvmlight.codeplex.com, the site that has been hosting source and installers since the beginning of the project (100'000 downloads) and on Nuget, the popular package manager for .NET (20'000 downloads). More information about Nuget and MVVM Light.

Scroll down to have a chance to win a copy of
Expression Studio V4!

MVVM Light started its “career” on Codeplex in October 2009. Back then it was intended as a set of classes I could use when blogging about MVVM, to avoid having to repeat the same concepts over and over again. These ideas were born from discussions on the WPF disciples mailing list (now renamed to “XAML disciples”), a group of friends who talks about everything and anything and occasionally about coding. In fact in some cases some code was even stolen borrowed with appreciation from some of the individuals on this list. Since then of course, the code has evolved, driven by requests from the community. I have a lot of appreciation for everyone who helps, and for the many interesting discussions around MVVM and other coding concepts.

I remember one discussion (in a sauna in Seattle, of all places) with my friend Josh Smith about what I wanted to achieve with MVVM Light. Back then I told him that my goal was to have this side project, but that I didn’t intend to let it grow too big. I can say with confidence that I failed big time: MVVM Light is taking a lot of my free time, but what a reward!

Multiple platforms

MVVM Light is available these days for Silverlight 3, Silverlight 4, Silverlight 5, WPF3.5, WPF4, Windows Phone, WinRT (Windows 8). I know for a fact that it is running into many Windows Phone applications (MVVM Light for WP7 was released within a few days from every major version of Windows Phone).

Lesser known fact, MVVM Light is also running on XBOX: At the end of last year, a lot of new applications were released for this platform. The applications are XAML based, and MVVM Light was chosen as the framework of choice to build these applications. There is no obligation, but this is driving adoption of MVVM Light in the living room!

Of course Windows 8 is also supported. Here too, MVVM Light was available within a few days from the major releases (developer preview, customer preview) and that will continue. I have the chance to have people within Microsoft who are using MVVM Light and helping me with issues, again it is a great pleasure to have this collaboration.

An amazing community

If like me you follow the #mvvmlight tag on Twitter, you will see that many people worldwide are using it. I love to see tweets about it in all kinds of languages (in fact if I would love to travel to all the places where it is used :)

I also receive many more emails than I can handle. I really do my best to answer everything, sometimes with a delay, but I fail. If you have sent me an email and it was not answered, please accept my sincere apologies. It’s simply too much to handle. On the other hand, if you have technical questions, make sure to post the on StackOverflow with the tag "mvvm-light"!! Questions there are rarely left unanswered, and I am also checking them out from time to time. Crowdsourcing the tech support has probably been one of the best decisions I ever made in this project!

Things I would like to do (or to have done differently)

Not everything is perfect in this project, by far. There are a few things I really would like to do better, and some thing I would like to have done differently.

First, the documentation: This is an oft-heard comment and it is true, there isn’t a structure documentation concept. There are however many many articles by MVVM Light enthusiasts, but I agree that for a beginner it can be a daunting task to find their way through all the information. So yes, this is still a big project and a big plan, I want to have a solid documentation concept. When? Well that is the big question, because that takes a lot of time. The balance between coding and documenting is really not easy. That said, the whole source code is documented, so at least that is clean :)

Another thing I regret is that I took over too many new features and bug fixes in V4. Because of that the gap between V3 and V4 was much too long. I will change that in the next version, and release true RTM versions more often.

V4 and then?

These days I was busy releasing V4 release candidate (RC) to Codeplex (source), Nuget and to create an MSI installer. I will give a couple of weeks to the RC just to catch last minutes bugs (if available) and make a few minor adjustments. It means that V4 will definitely be released in the next few weeks.

And then… well then I want to tackle a few things: more documentation, and starting to work on V5. I also have a couple of applications for the phone and for Windows 8 that I would love to finalize. I guess that rest is for the dead, eh? ;)

Again, I want to thank everyone who sends me messages of support through the years. I could not have done all this without the moral help of the community.

Celebration

To celebrate this milestone, I am giving away two copies of Expression Studio 4 Ultimate (includes Expression Blend, Sketchflow, Expression Design, Expression Encoder Pro and Expression Web+Superpreview). This is a value of 599 USD each!

Not only you will have a chance to win this for as little as 10 USD, but in addition the whole proceeds of this auction will be sent to the humanitarian organization Calcutta Rescue. I have many ties with this organization and I was even president of the Swiss organization (in charge of gathering funds in Switzerland) for quite a few years. In 2007, I had the chance to visit the projects personally and I can attest that they are extremely well managed. You can see pictures of this visit on my Flickr page.

In order to participate, follow the easy step:

• Go to this page on my website and make a donation of at least 10 USD. You are welcomed to give more of course!

On May 29th, I will block the counters and will randomly pick two winners for the Expression Studio copies. Winners will be notified per email and the prizes sent by standard mail. I will personally ensure that the funds are sent to Calcutta Rescue by the intermediary of the Swiss organization Calcutta Espoir, whose sole purpose is to gather funds in Switzerland for the Indian NGO.

I count on you, awesome MVVM Light community, to make this action a success! See you on May 29th to announce the winners!

Cheers
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/ctC

[This is the English version of an article I wrote for the Netzwoche publication in Switzerland. This is part 2 of a 3-parts article about Metro. The original article in German can be found online on the Netzwoche website.]

With Windows 8, Microsoft is going to potentially install their new design language called Metro on a massive amount of computers of all shapes, from thin low-powered slates to full scale PCs. However Metro was not born overnight and in fact a lot of research was put into it. In this article we will discuss the origins of the Metro design language, the inspiration that was the source of it all.

A bit of history

Design, much like art, is evolving through a series of influences. In the case of the Metro design language, a few schools and movements have helped to shape it.

Bauhaus

Bauhaus was created in the 1920s by architect Walter Gropius in Germany. It is an ambitious movement that wanted from the start to integrate many aspects of life: graphic design, industrial design and later architecture. This school of design is characterized by a strong simplification of the object: avoid excessive decoration and frills, and instead concentrate on its functionality. This is underlined by the motto: “Form follows function”, meaning that the functionality of an object should govern its appearance. Anything in the form of the object that is not directly related to the function it fulfills is superfluous and should be omitted.

The world is changing

Bauhaus was created at a point in time where the world was changing tremendously. A world war and the great Spanish flu had just ended, which had cost many millions of lives. Nonetheless, this period between the two World Wars was marked by euphoria and a feeling of a new beginning.

The 1920s were also a time of transition; people went from manual work and artisanship to a society mostly dominated by industrialization. Objects that were earlier routinely created by hand were now made by machines. All this influenced the design proposed by the Bauhaus school.

Pure and functional

Be it in architecture, graphic design or industrial design, the characteristics of Bauhaus are purity and simplicity. For instance, notice how the items on Figure 1 are purely functional: there are no excessive decorations, no icons or gradients, nothing that confuses the message or the function.

Figure 1: Bauhaus inspired Industrial design, Architecture and Graphic design

This philosophy of “to the point” and “no nonsense” can be found in the Metro design language as well. In Metro, we speak of being “authentically digital”. Metro-inspired UI does not show excessive shadows, textures or glass effects that are found in other systems. Instead we acknowledge that the computer screen is not a simulation of nature, and we remove the useless decorations, concentrating instead on the function of the UI.

Swiss typography

Another important inspiration for the Metro design language is Swiss: the typography created in our country in the 1950s and refined since then plays a major role in Metro. It is quite obvious to anyone who used a Windows Phone that Metro puts a lot of emphasis on readability and type. It is not rare to use text blocks as command actuators instead of buttons. In fact, most controls have a simple and pure design, where typography plays a central role.

Purity, balance and readability

Fonts inspired by Swiss typography put readability in the forefront. Of course, this is especially true for fonts used on a computer screen, and probably even more on mobile devices. When used on smaller backlit displays, in broad daylight, readability can be a concern. This is why extra care must be put on the font used on these devices.

Most notably, anything that distracts the reader from the primary function of the letter must be avoided. This is very similar to the principles of Bauhaus that we discussed earlier: Form follows function, no frills, no excessive decoration. This is why the fonts created by the Swiss typography movement are sans-serif: The “serifs” are the small details, often a small horizontal or vertical dash, located at the end of letter segments. Serifs are quite popular in fonts used for print, but for extra legibility in Windows 8, sans-serif fonts are preferred, like the Segoe font family designed by Microsoft specifically for user interfaces, and used in Windows Phone, XBOX, Windows Media Center, and of course Windows 8.

Motion design

Another strong influence of the Metro design language is motion design. Often used in movies, for example in the opening or closing credits, motion design is very useful for user interfaces running on computers, and most especially for touch-based UI.

By using subtle and fluid animations, the user interface can guide the user and hint what action needs to be taken next. This is especially true when the screen is fast and responsive: as soon as the user touches the screen, animations are played to help discover the features. A good example of this is the lock screen on Windows Phone: When the user presses the Windows button while the screen is locked, a short animation “bounces” the lock screen, which hints to the user that he should use his finger to pull the lock screen up. Similarly, when the Windows 8 device is locked, passing your finger on the lock screen will move the picture according to the finger’s vertical movement. The key here is for the hardware to react fast enough so that the relationship between the finger’s movement and the action on the screen is absolutely clear.

Kinetic typography

Many movies rely on kinetic typography, i.e. “text in movement” to introduce the viewer to the movie, in the opening credits. Some excellent examples can be found in designer Saul Bass’ work, for instance Alfred Hitchock’s movie “North by Northwest”. Other more recent examples can be mentioned, for example the introduction to “Pulp Fiction” by Quentin Tarantino, or the excellent intro by visual artists Kuntzel and Deygas to Steven Spielberg ‘s movie “Catch me if you can”.

Kinetic typography is also very pregnant in the Metro design language: For example in Windows Phone, the usage of the panorama control creates this effect of fluid motion. Horizontal motion is also very important in Windows 8, especially in slates used with touch in landscape mode. Of course the vertical motion used in list controls is still available, and combining both creates a very enticing user experience, just like motion design creates a feeling of excitement for the viewer before the movie starts.

Transportation signage

Like the name shows, Metro got some inspiration from the signage you see in airports, train stations, undergrounds. This universal design language relies heavily on typography and simple icons, often emphasized by plain bold colors. Because it relies on the principles we enumerated before, this design language is very efficient and to the point. It helps travelers to immediately understand where they need to go next, wherever they are, and regardless of the language spoken locally. Similarly, the Metro design language gives a feeling of hominess to the user.

Figure 3: Transportation signage is universally recognized

Additional references

For additional information on the Metro design language, these two videos should give you a great head start:

• Designing Metro style: principles and personality by Samuel Moreau recapitulates the design inspiration we discussed in this article, and expands by detailing design principles that are recommended for Windows 8 application designers and developers.
  http://channel9.msdn.com/events/BUILD/BUILD2011/APP-395T
• 8 traits of great Metro style apps by Jensen Harris talks about the user experience of Windows 8 and gives great insight and advices on how to build a consistent user experience.
  http://channel9.msdn.com/events/BUILD/BUILD2011/BPS-1004

Conclusion

Understanding where the Metro design language comes from is a good starting point to understand how it can enhance your Windows 8 application. Microsoft’s ambition is to create a consistent user experience. For the end user, this consistency has big advantages: The user does not have to constantly learn new design concepts. Instead, he reuses what he already learned in other applications and in the operating system itself.

As we saw, Metro has core values, taken from the movements and schools it inspires itself from: Purity, simplicity, balance, fluidity. Those concepts help creating a beautiful user experience and to make the user feel at home.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/ct1

Well I'll be… I stand corrected!

I recently published a blog post stating that you need to declare a command as ICommand (instead of RelayCommand) if you want it to work in Windows 8. I even went as far as to modify the MVVM Light code snippets that are used to create commands.

In fact, scratch that post… I was wrong! I got a few people writing to me and letting me know that RelayCommand works just fine for them. And now, after I tested again, I cannot reproduce the issue! So I need to be clear, my first post was wrong, and I stand corrected.

Based on the feedback, I will also set the MVVM Light snippet back to expose the command as RelayCommand instead of ICommand. It would indeed be "purer" as ICommand, but it also causes issues (such as the need to cast to call RaiseCanExecuteChanged) and is not worth it.

Sorry about the confusion folks!!

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/crm

I just published the MVVM Light V4 RC packages to Nuget. Note that this is still technically a preview, so the main package is still V3. The V4 packages are available here:

• Package with libraries and content:
  When you install this package into a “virgin” application (i.e. an application without ViewModelLocator, preferably a brand new application), it installs a new ViewModel folder with a MainViewModel, ViewModelLocator and adds an entry into the App.xaml file to intialize a the ViewModelLocator in the global resources.
  Do not use this package if you want only the libraries, this will add content files!
• Package with libraries only:
  This installs and references only the libraries.

Both packages are available for Silverlight 3, Silverlight 4, Silverlight 5, .NET3.5SP1, .NET4, Windows Phone 7.0, Windows Phone 7.1 and Windows 8 (WinRT). That last one is brand new! :)

Nuget prerequisites

Follow the steps to install Nuget (if needed):

• In Visual Studio 10 or 11, select the menu Tools, Extension Manager.
• In the Extension manager, select Online Extensions, Visual Studio Gallery.
• In the field marked “Search Installed Extensions:, enter “nuget”.
• Select the Nuget entry and then press Install.
• Restart Visual Studio.

Installing from VS directly

In Visual Studio, follow these steps to install the packages:

• Open an application without MVVM Light installed.
• Right click on the project and select Manage Nuget Packages.

• In the Manage Nuget Packages dialog, select Online (on the left).
• Enter “mvvmlight” in the Search Online field.
• You will see four choices:
  • MVVM Light: This is the stable release (V3RTM) with content files. Not available for Windows 8!
  • MVVM Light libraries only: This is the stable release (V3RTM), only libraries. Not available for Windows 8!
  • MVVM Light [Preview]: This is V4RC with content files.
  • MVVM Light libraries only [Preview]: This is V4RC, only libraries.
• Select the package you want to install and press Install.

That’s it.

Updating from VS directly

If you have a previous version already installed, you can look for the update with the following steps:

• Right click on the project and select Manage Nuget Packages.
• In the Manage Nuget Packages dialog, click on Updates.
• If an update for the given package is available, you can install it from there,

As usual, please try it out and let me know if something does not work right!

Happy coding
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/crS

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/crL

I had the chance to be invited to talk at various conferences this year already, and I promised to post the slides and source code, so here it is!

MVVM Applied: From Silverlight to Windows Phone to Windows 8

Belgium, Netherlands, Bulgaria

The Model-View-View Model pattern is a common denominator between applications using XAML to create the user interface. First applied in WPF, it was then easily ported to Silverlight and Windows Phone development. With WinRT and the Metro-style applications, XAML is now a first-class citizen for native Windows 8 development. Here too, the MVVM pattern is making developers' life easier, and proven components can be used to simplify and speed up application development. In this session, Laurent Bugnion, the creator of the acclaimed MVVM Light Toolkit, will present best practices around XAML-based Windows 8 application development, and how to leverage code and skills in Windows 8 too.

• Download the slides
• Source code: Start
• Source code: Silverlight 5
• Source code: Windows Phone 7
• Source code: Windows 8
• Snippets, Visual Studio 10
• Snippets, Visual Studio 11
• Video (or see below)

100% Fidelity: From Comps to Apps, Tips and Tricks for XAML Integration

Netherlands

Designers create a vision, and this vision becomes an application. With some technologies, the transition from the vision to the UI can be a painful and frustrating exercise. With XAML however, we have tools and techniques that make this transition much easier and allow for 100% fidelity to the comps. In this session, Laurent Bugnion (Director of UX Integration, IdentityMine) will show tips and tricks gathered over 6 years of experience. We will talk about design time data, exporting assets from Adobe design applications, measuring and adapting, animations... Together we will learn techniques that apply to multiple platforms, from Silverlight to Windows Phone 7 to WinRT, WPF, Microsoft Surface, Kinect and more.

• Download the slides
• Video (or see below)

Metro Design Principles

Switzerland (Tech Conference), Switzerland (Shape), Bulgaria, Dubai

The Metro design language is becoming an intrinsic part of the Microsoft user experience. Already, we can find it on Zune (where it all started), Windows Phone 7 (where it was refined and perfected), Xbox, Windows 8, as well as on the Microsoft.com website. In this session, we will dive into the history of this design language, study its characteristics and show tips and tricks to implement Metro user interfaces in Windows Phone and Windows 8.

• Download the slides

Building The Apps of the Future on Windows 8!

Dubai

The future of application development is here! Attend this session to get a comprehensive view of app development on Microsoft's latest client platform - Windows 8!

• Download the slides
• Source code

Going mobile with Windows Phone

Dubai

This session is intended to introduce developers to Windows Phone. It isn’t your boring old level 100 intro session. This session assumes that you know how to develop applications and skips past the "hello world" stuff to talk about tools, navigation elements, the back stack, phone controls and the marketplace.

• Download the slides
• Source code

Video: MVVM Applied: From Silverlight to Windows Phone to Windows 8

Video: 100% fidelity: from comps to appl, tips and tricks for XAML integration

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/cqz

If you installed the latest MVVM Light version for Windows 8, you may encounter an issue where code snippets are not displayed correctly in the Intellisense popup. I am working on a fix, but for now here is how you can solve the issue manually.

The code snippets

MVVM Light, when installed correctly, will install a set of code snippets that are very useful to allow you to type less code. As I use to say, code is where bugs are, so you want to type as little of that as possible ;) With code snippets, you can easily auto-insert segments of code and easily replace the keywords where needed. For instance, every coder who uses MVVM as his favorite UI pattern for XAML based development is used to the INotifyPropertyChanged implementation, and how boring it can be to type these “observable properties”. Obviously a good fix would be something like an “Observable” attribute, but that is not supported in the language or the framework for the moment. Another fix involves “IL weaving”, which is a post-build operation modifying the generate IL code and inserting the “RaisePropertyChanged” instruction. I admire the invention of those who developed that, but it feels a bit too much like magic to me. I prefer more “down to earth” solutions, and thus I use the code snippets.

Fixing the issue

Normally, you should see the code snippets in Intellisense when you position your cursor in a C# file and type mvvm. All MVVM Light snippets start with these 4 letters.

Normal MVVM Light code snippets

However, in Windows 8 CP, there is an issue that prevents them to appear correctly, so you won’t see them in the Intellisense windows. To restore that, follow the steps:

• In Visual Studio 11, open the menu Tools, Code Snippets Manager.
• In the combobox, select Visual C#.
• Press Add…
• Navigate to C:\Program Files (x86)\Laurent Bugnion (GalaSoft)\Mvvm Light Toolkit\SnippetsWin8 and select the CSharp folder.
• Press Select Folder.
• Press OK to close the Code Snippets Manager.

Now if you type mvvm in a C# file, you should see the snippets in your Intellisense window.

Cheers
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/cow

I am not sure if you guys know Aaron Stebner. Aaron works at Microsoft, and has pulled thorns from my side many many times already. His blog is at http://blogs.msdn.com/b/astebner and it is a gold mine of tips and tricks to debug and solve many cryptic issues happening during installation and removal of programs. For example, Aaron taught me how to remove programs that do not appear in the Programs and Features list, amongst many other things.

The last nugget I used from Aaron’s blog saved my butt just before a presentation where I had to run both Visual Studio 10 with the Windows Phone SDK, and Visual Studio 11 for WinRT development. Of course this had to be on Windows 8. Unfortunately when you install the Windows Phone SDK on Windows 8, you may (or may not, I saw both scenarios) encounter an issue with XNA, and the installation fails. Unfortunately, even if you don’t use XNA in your apps, this will prevent even normal Windows Phone app development. Fortunately, Aaron has a fix for that.

I hope that this helps spread the word, and increase Aaron’s blog’s visibility!

Happy coding,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/cou

I just pushed the following to Codeplex:

• A new MVVM Light project template for Windows 8 Consumer Preview. This template appears in the File, New Project dialog and allows you to create a Metro style app already wired with MVVM Light.
• An updated Windows 8 installer for MVVM Light.

Preconditions:

This installs MVVM Light for Windows 8 only. You can install it side-by-side with the standard MVVM Light for Silverlight, WPF and Windows Phone.

Where do I get it?

You can download the MSI from:
http://mvvmlight.codeplex.com/releases/view/85317

What does it do?

The installer installs the Windows 8 version of the MVVM Light DLLs, as well as a new project template for an MVVM Light Metro style app, and code snippets.

What is missing?

Since Windows 8 Developer Preview, I worked on porting the DispatcherHelper class, and it works now. However the EventToCommand behavior is still not available on Windows 8 (because behaviors are not supported on Windows 8 for the moment).

Known issues

Some testers reported issues with the code snippets installation. Code snippets should appear when you type “mvvm” in your C# code, there is a list of mvvm-prefixed snippets (such as mvvminpc, etc). If you do not see these snippets, please stay tuned, I am working on fixing this issue.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/cnx

This is part 2 of a multipart blog post about the gestures and shortcuts in Windows 8 consumer preview. Part 1 can be found here!

More about the Search charm

In the first installment of this series, we talked about the charms and mentioned a few gestures to display the Search charm. Search is a very central and powerful feature in Windows 8, and allows you to search in Apps, Settings, Files and within Metro applications that support the Search contract.

There are a few cool features around the Search, and especially the applications associated to it. I already mentioned the keyboard shortcuts you can use:

• Win-C shows the Charms bar (same as swiping from the right bevel towards the center of the screen).
• Win-Q open the Search fly out with Apps preselected.
• Win-W open the Search fly out with Settings preselected.
• Win-F open the Search fly out with Files preselected.

Searching in Metro apps

In addition to these three search domains, you can also search a Metro app, as long as it supports the Search contract (check this Build video to learn more about the Search contract). These apps show up in the Search flyout as shown here:

Notice the list of apps below the Files button? That’s what we are talking about.

First of all, the list order changes when you search in some applications. For instance, in the image above, I had used the Store with the Search charm. This is why the store shows up as the first app. I am not 100% what algorithm is used here (sorting according to number of searches is my guess), but try it out and try to figure it out

Applications that have never been searched are sorted alphabetically. Does it mean we will see cool app names like ___AAA_MyCoolApp? I certainly hope not!!

Pinning

You can also pin often used apps to the Search flyout. To pin an app with the mouse, right click on it in the Search flyout and select Pin from the context menu. With the keyboard, use the arrow keys to go down to the selected app, and then open the context menu. With the finger, simply tap and hold until you see a semi transparent rectangle indicating that the context menu will be shown, then release. The context menu opens up and you can select Pin.

Pin context menu

Pinned apps

Unpinning, Hiding

Using the same technique as for pinning here above, you can also unpin a pinned application. Finally, you can also choose to hide an app from the Search flyout altogether. This is a convenient way to clean up and make it easy to find stuff.

Note: At this point, I am not sure how to re-add a hidden app to the Search flyout. If anyone knows, please mention it in the comments, thanks!

Reordering

You can also reorder pinned apps. To do this, with the finger, tap, hold and pull the app to the side, then pull it vertically to reorder it. You can also reorder with the mouse, simply by clicking on an app and pulling it vertically to the place you want to put it. I don’t think there is a way to do that with the keyboard though.

That’s it for now

More gestures will follow in a next installment! Have fun with Windows 8

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/cm7

This blog post started as a simple one, but grew to be quite large and time consuming. I am splitting it, because I really want to publish the first findings already. Stay tuned for more!

I am sure that you heard that Windows 8 was released last week in an early although quite stable stage called "consumer preview". Windows 8 is an interesting mix of touch-based and mouse/keyboard based system. Some aspects are a bit annoying (see my post about the "split personalities" in Win8 to see what I mean!) but others are really interesting from a user experience point of view. In this post, I want to list various gestures I discovered in Windows 8, and ask for your feedback if you have more.

Optimizing touch and keyboard/mouse, the learning curve

Windows 8 has two sides: the Metro side of Windows 8 (the side which is primarily made for touch) and the desktop side (the side which is quite usable with touch (and in fact much better than Windows 7 in that regard), but primarily made for keyboard/mouse usage. We will see in this post that a lot of thought has been put in optimizing both sides of the experience. You can use your fingers to work the gestures, but you can also use keyboard/mouse and never have to touch your screen. This is a good thing because having to raise the arm to touch the screen when using a PC/laptop is either useless (if the screen is not touch enabled) or at least tiring and disrupts the flow of work.

A consistent experience

As far as I can see, the gestures used in Windows 8 are very consistent throughout the operating system and all the applications. It is very important that Windows 8 “Metro style” app developers comply with these guidelines in order to provide a consistent experience to the user. For example, you will see later that each application can expose setting dialogs through the “charms bar” (more about that in a moment). If an app provides another way to change settings (for instance through a button in the application bar leading to a Settings page), it introduces a different experience that the user has to learn. By not using the gestures and UX concepts that Microsoft recommends, you force the user to think. Please consider this when you create your apps!

What about beveled screens?

Some touch-enabled computers, especially older ones, have a slightly elevated frame around the screen, which makes swiping from the side a bit difficult at times. The “hot spot” for the gesture detection is a thin invisible line on the side of the screen. If the frame around the screen is to high, activating this thin line can be a bit tricky. I found on one of my old laptops that I need to press the finger a bit harder against the screen for the gesture to be successful. Of course, new slate computers like the Samsung Slate 7 have a completely flat glass screen which is a delight to touch and swipe.

Unlocking the screen

When the slate is powered on, a lock screen is displayed, very similar to what Windows Phone 7 offers. The screen has a clock for date/time, indications such as battery level as well as potential notifications by applications. To unlock the screen, simply drag it up and let go. Note that this doesn’t give you access yet to the computer: there is an identity check, either through a password, a pin or my personal favorite, the picture password.

Unlocking the screen, dragging up

Keyboard

You can also unlock the screen with the keyboard, by pressing any key.

Mouse

If you use the mouse, simply click, hold and drag up.

The charms bar

The charms are a set of shortcuts that are available in every application. In order to show these, you swipe your finger from the far right edge of the screen towards the middle of the screen, horizontally.

 
Displaying the charms bar

 
The charms bar

Keyboard

You can reveal the charms bar with the keyboard by using Win-C.

Mouse

Revealing the charms bar with the mouse only is interesting: Move the mouse cursor to the top-right corner (or bottom-right) of the screen and wait for a short moment. You will see the charms appearing, but the bar has a transparent background. Then, move the mouse down (or up) until you reach the first charm. The bar will display its background and you can click the charm you want to use.

Search charm

The first charm is a system and application wife search. Tapping it reveals a search dialog which can be used to search in the Applications, the Settings or the Files (file name or content). Metro style apps can also register for a Search contract, and be notified when the user enters a search string and then taps an app displayed in the Search dialog.

A few useful keyboard shortcuts:

• Win-Q will open the Search with the list of apps preselected.
• Win-W will open the Search with the Settings preselected.

Share charm

The second charm is used to share content between Metro style apps. Note that both the sender and the receiver need to support this contract for the interaction to be successful.

Useful keyboard shortcuts:

• Win-H will open the Share fly out menu.

Start button

This gives access to the Start menu.

Devices

The fourth charm expands a “Devices” dialog. I am not 100% sure what this does: for instance my Bluetooth devices are not shown there. Right now on my slate, the only device displayed is a second screen.

Useful keyboard shortcuts:

• Win-K will open the Devices fly out menu.

Settings

The fifth and last charm is the Settings. On the bottom, it displays a series of buttons used to control the network connection, the volume and brightness, notifications, display language and to switch off or restart the device.

On the top part, there is an area which an app developer can customize to display the app’s settings. It is a good practice to use this “fly out” area for the app’s settings, in order to create a consistent experience.

Useful keyboard shortcuts:

• Win-I opens the Settings fly out menu,

Getting to the Start menu

In order to display the Start menu, there are different gestures that can be used.

Touch

With fingers, you can pull the charms bar out (see above) and press the Windows button. If your slate has a Windows button (like the Samsung Slate 7), you can of course use this to show the Start menu too.

Keyboard

On Windows keyboard, press the Windows button to show the Start menu. Note that as soon as the Start menu is displayed, you can start typing to search through applications.

Selecting items

The selection in Windows 8 Metro is different than it used to be in Windows 7. Since one single tap on an item is actuating the item (for example starting an application), we need a different gesture to select. Once an item is selected, the application bar opens up and you can use the buttons to perform operations.

Touch

When using the fingers, press an item and drag it down slightly. The item will spring back into place and show a selection mark.

Mouse

To select an item with the mouse, simply right click on it.

Keyboard

With the keyboard, use the arrow keys to move to the item you want to select, then press the Space bar.

Reordering items

To reorder items in the Start menu, pull them up or down with a long pull, until you “pull them out” of their group. Then, you can move them to the new place.

Touch

Pull the item you want to reorder with your finger. Note that if you need to scroll horizontally to a different item group, you can hold the item with one finger, and scroll with another finger. It is truly multitouch.

Mouse

Click, hold and drag the item to pull it out of the item group, then move it left or right to add it to a different group. Note that if you need to scroll, you can use the mouse wheel while holding the item with the left button down.

Keyboard

As far as I can say, you cannot reorder items with the keyboard only.

More to follow…

That’s all for the first post in this series. More to follow soon!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/cjb

Update: Posted the video of “MVVM Applied” below.

This week I was “on tour” in Belgium and Netherlands and presented 3 times:

“MVVM Applied, From Silverlight to Windows Phone to Windows 8”

(in Belgium and Netherlands)

The goal of this session was to make people feel confident that the skills they acquired working in various XAML frameworks (Silverlight, Windows Phone, WPF, Surface, etc) are going to help them tremendously when developing Windows 8 applications. It was a session packed with code, where we went from a Silverlight 5 application, added design time experience, reworked the design in Expression Blend, then created an application reusing most of the code in Windows Phone (including design time experience in Blend), and then created a WinRT application which, again, reused most of the code (including design time experience in the Visual Studio Designer). Of course the sample code uses the MVVM Light Toolkit in order to make the coding easier, and to maximize code reuse.

I also showed techniques to keep as much compatible code as possible between the frameworks, and abstract the differences. For instance, Windows 8 is more asynchronous than Silverlight (which was already more asynchronous than WPF, remember the discussions around the lack of synchronous web requests in Silverlight?). In Windows 8, operations such as file system access and stream access (read/write) are asynchronous now. Using techniques such as callbacks, you can quite easily isolate the code that is Windows 8-specific, and call into it from shared code (more about this technique in a following blog post). It was an interesting session that gathered quite a lot of positive feedback.

You can download the following from Skydrive:

• Start solution (PictureUploader-0-Start, running Silverlight 5 application, without design time data)
• Silverlight 5 (PictureUploader-1-SL5) design time data complete
• Windows Phone 7 (PictureUploader-2-WP7) application complete
• Windows 8 (PictureUploader-3-Win8) application complete
• Code snippets for VS10 (Snippets.vssettings, Silverlight 5 and Windows Phone)
• Code snippets for VS11 (SnippetsWin8.vssetings, Windows 8)
• Slides (MVVMApplied)

To import the code snippets in Visual Studio’s toolbox, select the menu Tools, Import and Export Settings, and select the snippets file. This will import the snippets into your toolbox. Note that if you had snippets in your toolbox before, it will add the new ones instead of overwriting the old ones.

Note about the Windows 8 sample: For some reason the sample refuses to start if you include the GalaSoft.MvvmLight.Extras DLL for Windows 8. It does however run just fine if you include the project instead. For that reason, I included a copy of that project’s source code and referenced it directly. Given the current state of Windows RT (developer preview), I won’t even waste any time looking for a fix. We’ll see about that in the Consumer preview ;)

The video of this talk, also available at Channel 9

“100 Fidelity: From comps to apps, tips and tricks for XAML integration”

(in Netherlands only)

The purpose of this session was to show the audience usage of various tools (of course mainly Expression Blend) to create user experience that is as close from the designers’ vision as possible. Nowadays with XAML and Blend, it is possible to reach 100% fidelity. I also talked about the integrator role, a role that we fully embrace at IdentityMine. The integrator’s main tool is Blend, and Blend is used to integrate the design assets into the application. We talked about and demoed the features that make Blend truly shine, such a gradient creation, resource management, animations, etc.

Even though this session was in the graveyard shift (Friday afternoon, 4PM), I was positively surprised to see quite a few people attending. Also, when asked who in the audience is a designer, I saw approximately 10 hands raising, which is more than usual. Are we seeing more interest from designers in Blend due to Metro? One can only wish so!

You can download the following from Skydrive:

• Slides (100%Fidelity)

There is no source code for this session, because most of the demos were about creating and integrating assets in Blend. Refer to the video for more details.

Screenshots

These screenshots are taken from the “MVVM Applied” session

Silverlight 5 application with a beginning of styling

Windows Phone application start screen

Windows Phone application during upload

Windows Phone application, upload completed

Windows 8 application, start screen with application bar

Windows 8 picture picker

Windows 8 application during upload

A few impressions

The room where I presented MVVM Applied in Netherlands

The room where I presented MVVM Applied in Netherlands

They had my book (and Brennon’s) at the conference bookstore :) 

A cool clownfish

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/chJ

If you tried to build applications for Windows 8 with XAML/C#, you may have noticed an annoying issue: If you have a list controls (for example a GridView) and you bind the ItemsSource property to a property of type ObservableCollection<Something> on your ViewModel, the GridView is not updated when the collection’s content changes. The CollectionChanged event is raised properly, but it is not honored by the binding system.

Thankfully, this is a temporary bug, and it should be solved in the Consumer Preview version of Windows 8, due for release end of February. In the meantime, however, it is easy to circumvent this bug.

To find a solution, I researched the web and found a class named ObservableVector, for which changes are honored by the binding system. However this class had a major flaw: it forces the original ObservableCollection to be <object> instead of being strongly typed. This is of course super annoying when you are trying to share code with Silverlight/WPF/Windows Phone. So I took a good look at it, and I came up with what I think is a better implementation.

• Download the improved ObservableVector class from here.

With this implementation, the original ObservableCollection can remain untouched. For instance, if you have this in the original, shared MainViewModel.cs file:

public partial class MainViewModel : ViewModelBase
{
    public ObservableCollection<UploadFileInfoViewModel> Files
    {
        get;
        set;
    }

    // ...
}

Notice that the MainViewModel class is partial. This allows easily adding the following code only into the Win8 project, into another file added only to the Win8 project, named MainViewModel.Win8.cs:

public partial class MainViewModel
{
    private ObservableVector<object, UploadFileInfoViewModel> _filesWin8;
    public ObservableVector<object, UploadFileInfoViewModel> FilesWin8
    {
        get
        {
            if (_filesWin8 == null)
            {
                Files.CollectionChanged += (s, e) =>
                {
                    if (e.NewItems != null)
                    {
                        foreach (var file in e.NewItems)
                        {
                            FilesWin8.Add(file);
                        }
                    }

                    if (e.OldItems != null)
                    {
                        foreach (var file in e.OldItems)
                        {
                            FilesWin8.Remove(file);
                        }
                    }
                };

                _filesWin8 = Files.ToObservableVector<object, UploadFileInfoViewModel>();
            }

            return _filesWin8;
        }
    }
}

This adds a new property to the MainViewModel class, which observes the old property’s CollectionChanged event. This way, by binding the GridView’s ItemsSource property to FilesWin8 instead of Files, your UI will react properly to the event.

Hopefully this little trick will help the readers while waiting for the Consumer Preview!

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/chH

Today I gave a talk in TechDays in Belgium about MVVM in Silverlight 5, Windows Phone 7 and Windows 8. This was the first time I gave that particular talk, and in addition keep in mind this is a developer preview, meaning that it is not finished, and not always stable.

I had a few surprises with this build. For example from time to time, the new “Metro style applications” just cannot be launched anymore. Nothing that a simple reboot cannot fix… but I’ll come back to that in a moment.

A couple of hours before my session started, I was notified by Windows 8 that it wanted to install updates. I even joked about it on Twitter. No way was I going to install updates just before a talk! Everyone knows you shouldn’t do that, it can change your computer configuration and cause unexpected effects during the talk! Yeah I thought I was clever.

The presentation went well, but towards the end I wanted to run the application to show it to my audience. Unfortunately when I clicked the shortcut on the Start screen, nothing happened. I tried launching another Metro app and it also failed. I immediately thought it was the effect I mentioned before, where Metro apps stop working and you need to reboot. Turns out I was wrong. Of course the decision I had to take, with more than 100 people waiting for my next move, was tough. I decided to reboot. And yep, at that moment I had totally forgotten about the pending updates.

And this is what happened:

Damn well I have to say the audience was really nice and supportive. I took the occasion to take a few questions (THANK YOU to those who asked something and gave me the chance to fill that void with content!!)

What was the issue actually?

After reboot I tried again, and the same result happened: No Metro apps could be started. From the room, I got the suggestion that it was a resolution problem. And indeed: You cannot run Metro applications with less than 768 pixels vertical resolution. And because of the projector, I was running at 1280x720. So I thought OK, let’s try it, increased the resolution to 1280x768 and indeed I could start the Metro apps… but then the projector stopped showing the image!

That’s really a tough problem to solve, and I must say I am not quite sure yet how to make this work. Projectors nowadays are, for the most part, limited to 1024x768 resolution. If you want to go 16:9, you often get 1280x720. My tests after my session show that at 1024x768, Metro apps seem to run but I am not sure what will happen when I attach the projector again in my next session… I guess I will find out tomorrow

Screenshots

I thought I would take this occasion to show my excellent audience what I wanted to actually show them, and how the finished Metro application looks like. So here are some screenshots. First you will recognize the Silverlight 5 version of the uploader, then the Windows Phone one, and finally the Metro application. I will post the code and the presentation in the following few days, and the video of the presentation will follow shortly after the Windows 8 beta is released. I want to really thank everyone for their attention and support, and for the many kind words I received after my session.

Silverlight 5 version

Windows Phone initial screen

Windows Phone picture selection

Windows Phone during upload

Windows Phone upload completed

Windows 8 initial screen with Application Bar

Windows 8 Picture Picker

Windows 8 during upload

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/cgk

Ironically, my last release of MVVM Light V3 was about fixing bugs in templates and making them better. In the process however, seems that I introduced a regression bug in the WPF4 project templates. Yep shit happens.

How do I know if I have the bug?

Check the Programs and Features control panel, and look for MVVM Light. If the “Version” column shows 3.0.2.19, you have the bug. If it shows anything higher, you don’t. For instance, the new version with the bug correction is 3.0.3.19. Also, any version 4.*.*.* does not have this bug.

Alternatively, simply try to create a new WPF4 MVVM Light application in Studio. If you see the following warning, you have the bug.

Upgrading

To fix the bug, simply download V3.0.3.19 from Codeplex and install. You don’t need to uninstall the previous version.

What’s next?

I am working hard on V4 and have some nice improvements coming up. Many people have asked me when the “beta” will come out of MVVM Light, and the answer is “soon”. In the coming few days, I will publish a temporary release that corrects a few memory leaks, notably in the Messenger and in the RelayCommand. This will give expert users time to test and report issues. Then I still have a couple of fixes and I will release a release candidate. I won’t add any new feature after the RC, but will merely fix bugs if people find some. Once the RC is deemed stable, I will release V4 and take a deep breath!

And yes, there will be a V5

Happy coding,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

• Share This Post:
• 
• 
• 
•   Short Url: http://wblo.gs/cck