Laurent Bugnion (GalaSoft)

IdentityMine /forward Community Site

Laurent Bugnion — Fri, 10 Jul 2009 18:29:26 GMT

At the same time that Microsoft was releasing Silverlight 3 and launching Expression Blend 3 and SketchFlow, IdentityMine released our new community site:

(http://www.identitymine.com/forward/)

/forward is the IdentityMine home to share our ideas, technology and design thinking. We always want to be forward thinking and being able to share that passion is our goal. Here you will find our thoughts on all things UX. Some will see the immediate light of day and others may simply be relegated to the future.

This site will gather all the community contributions made by the IdentityMine team. By nature, we are passionate about software and design, and we love to help others make their applications beautiful. Remember, we love our (and your) software!! This is what makes us live, and this is the air we breathe. Most of us have this in our blood to blog, answer questions on forums, talk about the technologies that we love at conferences, etc.

With the new /forward site, you will have a great source of information, directly from experts involved every day with advanced technologies, and using them since the very early days. The sources of information include our personal blogs, Codeplex projects we work on, involvement in expert sites such as StackOverflow, videos and pictures taken at conferences, and more.

We are really looking /forward to your visit!!

Silverlight 3, Blend 3 and the MVVM Light Toolkit

Laurent Bugnion — Fri, 10 Jul 2009 17:17:16 GMT

The big news today is of course the launch of Silverlight 3. Microsoft organized a big event in San Francisco (I was invited, but could not make it to SF in time, unfortunately :() and there was a big celebration. Together with Silverlight 3 RTM, we were given Expression Blend 3 Release Candidate (including SketchFlow). This is not the final version, but it is as close as it is ever going to be before it is officially released. This version should be feature complete, so there is already a lot to be done with Blend 3 now. For more information about today’s launch, see Scott Guthrie’s blog.

One question that was asked a few times is When is the MVVM Light Toolkit going to be available for Silverlight 3?

Well here is the good news: The MVVM Light Toolkit V1.1.0 is already compatible with Silverlight 3. That’s right, you don’t need any change and can already work with the toolkit in Silverlight 3. Of course you need to install the Silverlight 3 tools for Visual Studio.

For more information about the MVM Light Toolkit V1.1.0, check the Get Started page!!

Note: There is only one minor change. If you have already downloaded the GalaSoft.MvvmLight source code, and try to open it with Silverlight 3 installed, you will be asked to convert the projects to Silverlight 3. The whole source code (WPF and SL) as well as the WPF projects are untouched.

To avoid the conversion process, I posted a converted version of the projects here. The source code is completely and entirely the same as before. This is still V1.1.0.

Installing the MVVM Light Toolkit V1.1.0.0

Laurent Bugnion — Wed, 08 Jul 2009 08:50:54 GMT

With V1.1.0.0 of the MVVM Light Toolkit, an automated Setup application is provided to make it much easier to install, manage, update and uninstall the Toolkit files. For more information about the MVVM Light Toolkit, check the “Get Started” page.

Prerequisites

The MVVM Light Toolkit and its Setup application run on Windows operating system only, and require the .NET framework 3.5 SP1 to use the MVVM Light Toolkit. If you didn’t install it already, you can do so here.

Installing the Setup

Navigate to the following page:
http://www.galasoft.ch/mvvm/install/publish.html
- Note: This is a ClickOnce installation. It will run automatically in Internet Explorer and Firefox. Other browsers, as far as I am aware, are not supported.

Press the “Install” button.
In the Application Install dialog, click on Install.

The application is being downloaded.

The MVVM Light Toolkit Setup starts.

Installing the Toolkit

The MVVM Light Toolkit Setup can be used to install, manage, update and uninstall the Toolkit.

To start the Toolkit Setup, you can select the shortcut in Start, All Programs, Laurent Bugnion (GalaSoft), MVVM Light Toolkit Setup.

To install the Toolkit with default settings, click on Install.
Note: Visual Studio must not be closed while the MVVM Light Toolkit is installed. Should you encounter an issue while installing, however, we recommend shutting down Visual Studio and reinstalling the Toolkit.
To display the Get Started page online, click on the question mark.
To modify the settings, click on Go to Settings

Modifying the Settings

The following settings are available:

Destination for Binaries: This is the folder in which the DLLs will be copied.
- If you select (for instance) c:\mvvm, the DLL for WPF will be installed into c:\mvvm\ and the DLL for Silverlight will be installed into c:\mvvm\silverlight\
Destination for Snippets: This is the folder in which the code snippets will be copied. This folder should match the folder set into Visual Studio 2008.
- To check which folder is set in Visual Studio 2008, choose Tools, Code Snippet Manager.

The snippets for WPF and for Silverlight are installed in the same folder.

Destination for Templates: This is the folder in which the ItemsTemplates subfolder and the ProjectTemplates subfolder will be found. These two subfolders should match the ones set into Visual Studio 2008.
- To check which folders are set in Visual Studio 2008, choose Tools, Options, Project and Solutions.

Installation Type: You can choose to install all the files for WPF, Silverlight, or both.

Modifying the Settings after installation

Unfortunately, files are getting pretty locked by Visual Studio after they have been installed. To prevent errors, you can only modify the settings by uninstalling the Toolkit first, modifying the desired setting and then reinstalling. The installation process is very fast, and all the settings are saved, so the process is very painless.

Updating to a new version

To check if a new version is available, you simply have to start the Toolkit Setup. It will connect to the server, and notify you if a new version is available. Simply follow the indications to upgrade the Toolkit to the new version.

After the Toolkit Setup has been upgraded to the new version, follow the steps described under Installing the Toolkit (earlier in this page).

Uninstalling the Toolkit

To uninstall the MVVM Light Toolkit, follow the steps:

Start the Toolkit Setup application (under Start, All Programs, Laurent Bugnion (GalaSoft), MVVM Light Toolkit Setup).
Press on the Uninstall button.

This step removes all the files that have been installed on your computer. Empty folders will get deleted too.

Uninstalling the Setup

If you wish to remove the MVVM Light Toolkit Setup application from your computer, follow the steps:

Select Start, Control Panel.
Select the Programs and Features control panel (or the equivalent on your operating system).
Find the entry names Mvvm Light Toolkit Setup.
Press Uninstall.

This will remove the Setup application from your computer. This step does not remove the Toolkit however. If you want to remove the Toolkit, follow the steps described in Uninstalling the Toolkit (earlier in this page). You must uninstall the Toolkit before you uninstall the Setup application.

New intro on my website

Laurent Bugnion — Thu, 18 Jun 2009 23:02:14 GMT

The time was ripe for a new intro on my website www.galasoft.ch. Here it is below, posted for my blog’s readers. I hope that you find it entertaining.

----

Time sure flies when you’re busy :) Already middle of the year, summer is coming and I have been so busy with amazing projects! Yes, since last time I wrote here, much water has run under the bridges and I am loving my job.

I have taken part to an exciting series of conferences: The Microsoft Most Valuable Professional summit took place in March in Seattle. After that, back in Europe for a quick jump to Belgium where I held two talks at the TechDays conference in Antwerp. This was a fantastic experience by the way. Later, back to the US for the most exciting of all conferences, MIX in Las Vegas! And this time I was a speaker, what a thrill! I often say that MIX06 is the conference that changed my (professional) life completely, and to be accepted to speak at MIX09 was a fantastic and exciting achievement.

After my return in Switzerland, I had two more talks, one in Geneva and one in Bern. This was the same talk, but once in French and once in German. The response has been really good and it was a nice experience (even if it was a bit scary when I was preparing ;))

After this crazy travel time, I had time to work on exciting projects at IdentityMine. Silverlight and Windows Presentation Foundation are my daily bread and I love it. WPF really rocks, and the more I use it, the more I am in love with that framework. Since I have the chance to work with some of the best designers in the industry, I can really (some would say finally) create the beautiful applications I have always dreamed of, and Love my Software (which is incidentally IdentityMine’s motto). It’s really amazing to be part of that world class team of experts. What a motivation to get better. In the process, I am also learning a huge lot about interaction design, and sometimes it is tough, but it is always a passion.

One more talk took me to Belgium again, this time in Kortrijk for MultiMania 2009. It was an interesting event, with a crowd in majority favoring Adobe products, but I think my talk was well received and we had a lot of interesting discussions.

One project that has been occupying most of my “free programming time” is a toolkit to assist the implementation of Model-View-ViewModel applications in Windows Presentation Foundation and in Silverlight. After quite some time, I released the first version of the toolkit. I am still working on it and should post an installer soon (for the moment the installation is manual). I also have a couple of ideas about things I would like to add to the toolkit. Finally, the grand plan is to post everything on Codeplex and to let the community do its thing. That should be fun.

The coming weeks will be quite packed with work. I will be in Seattle from the 11th of July. I will stay a couple of weeks to work with the team (and meet tons of friends I am sure), and then my family will join me for a week of leisure between Seattle and Vancouver. This should be a lot of fun.

For more information about my whereabouts, planned talks (such as the one I will give at the SD2IG group in Seattle on the 15th of July), make sure to subscribe to my blog. Meeting you all is what is keeping my motivation high and my passion alive.

MVVM light toolkit (Silverlight edition) posted

Laurent Bugnion — Tue, 16 Jun 2009 22:17:42 GMT

To make development of WPF and Silverlight applications according to the Model-View-ViewModel pattern easier, I have put together a small toolkit which should speed up the creation of such applications by automating certain tasks.

The toolkit must be installed manually for now. My next task is to prepare an installer, which should allow installing everything automatically, and also checking for upgrades, upgrading automatically and uninstalling the toolkit. For now however, a little manual work must be done.

Please note: An automated Setup for the WPF and Silverlight MVVM Light Toolkit is available. Please use the automated Setup from now on. If you are unable to use the automated setup for any reason, please contact me at laurent@galasoft.ch. More information about the Setup and getting started with the MVVM Light Toolkit is available on the Get Started page, which will be extended with new information.

For more details about the MVVM light toolkit, check this initial blog post.

Also, a web page will be extended over the next few days, and everything will be announced in this blog, so stay tuned.

Manual Installation

~~To install the toolkit manually, please follow the steps.~~

For Windows Presentation Foundation

~~Check this post~~.

For Silverlight

~~Download the GalaSoft.MvvmLight DLL~~ and copy it in a folder of your choice (for example c:\data\mvvm\silverlight).
Note that this is NOT the same as the WPF version. Do not mix the two up. Event though the code is almost identical, this assembly is compiled against Silverlight, not Windows Presentation Foundation.
~~Download the project template~~. To make it available in Visual Studio, locate your project templates folder. By default it is located into your “My Documents” folder, into a folder named “Visual Studio 2008/Templates”. Into the ProjectTemplates folder, into the Silverlight folder, create a new folder named Mvvm and copy the project template into this new folder. Do not unzip the file, simply copy the zip file as is.
In Windows 7, the full path would be “C:\Users\[user_name]\Documents\Visual Studio 2008\Templates\ProjectTemplates\Silverlight\Mvvm”
Download each item template (listed below). To make them available in Visual Studio, locate your item templates folder. By default it is located into your “My Documents” folder, into a folder named “Visual Studio 2008/Templates”. Into the ItemTemplates folder, into the Silverlight folder, create a new folder named Mvvm and copy all the item templates into this new folder. Do not unzip the files, simply copy the zip files as is.
In Windows 7, the full path would be “C:\Users\[user_name]\Documents\Visual Studio 2008\Templates\ItemTemplates\Silverlight\Mvvm”.
- ~~MVVM View Template~~
- ~~MVVM ViewModel Template~~
- ~~MVVM ViewModel Locator Template~~
Download the code snippets. To make them available in Visual Studio, locate your code snippets folder. By default it is located into your “My Documents” folder, into a folder named “Visual Studio 2008/Code Snippets/Visual C#/My Code Snippets”. Copy all the snippets into this folder.
In Windows 7, the full path would be “C:\Users\[user_name]\Documents\Visual Studio 2008\Code Snippets\Visual C#\My Code Snippets”.
Note: These are the same snippets as for WPF. You might have installed them already.
- ~~Creating a new property raising the PropertyChanged event~~.
- ~~Creating a new ViewModel into the ViewModelLocator class~~.
~~If you are interested, you can also~~ ~~download the source code~~ for the GalaSoft.MvvmLight classes (this is optional).
Note: The source code includes the WPF and the Silverlight version of the toolkit, all in one assembly, and also unit tests.

Getting started in Silverlight

The procedure in Silverlight is extremely similar to the one in WPF. The goal is to have a process which is as similar as possible, as well as the source code.

Creating a new MVVM application

In Visual Studio 2008, select the menu File, New, Project. Under the Silverlight/Mvvm section, select the MvvmLight project template.

Add a reference to the GalaSoft.MvvmLight assembly that you installed before. This manual step is needed for the moment, until an installer is created.

Because of a bug in Silverlight Project Templates, some additional manual steps are needed:
- Right click on the Silverlight project in the Solution explorer and select Properties

In the project properties, set the Startup Object to the correct choice.

Set the Xap file name to [YourProjectName].xap

Press Ctrl-F5 to run the application. This sample application can be modified as needed.

Adding a new ViewModel

If you need a new ViewModel in the MVVM application, follow the steps:

In Visual Studio, in the Solution explorer, right click on the ViewModel folder and select Add, New Item from the context menu.
Under Silverlight/Mvvm, select the MvvmViewModel template.
Enter a name for the new ViewModel and press OK.

Open the ViewModelLocator class (in the ViewModel folder).
At the end of the class, type mvvmlocatorproperty to select the corresponding code snippet.

Press the Tab key to expand the snippet.
The first replacement in the snippet is the type of the ViewModel you just created.
Use tab to select the second replacement.
The second replacement in the snippet is the name of the attribute that will hold the value of the ViewModel. You can choose any identifier suitable for an attribute (field).
Use tab to select the third replacement.
The third replacement is the name of the property that you will bind your View’s data context to. Here too you can choose any identifier suitable for a property.

Of course you also need to initialize your ViewModel by entering code in the constructor.

Adding a new View

Of course a ViewModel is tightly associated to a View. After adding a ViewModel, you probably want to add a new View too. In the Silverlight version of the application, a new View is a new UserControl. If you need a more finely granulated user interface, you can link the ViewModel to other UI elements. This scenario is not supported by the toolkit, however, and requires some manual work.

Note also that the toolkit does not support navigation out of the box. This is because there are many ways to do navigation in Silverlight. The project can easily be modified to integrate your preferate way to do navigation.

To add a new UserControl-based view in the application, follow the steps:

In Visual Studio, in the Solution explorer, right click on the project and select Add, New Item from the context menu.
Under Silverlight/Mvvm, select the MvvmView template.
Enter a name and then press OK.

Open the newly created XAML file.
Modify the DataContext property to link to the ViewModel property that you added above.

Adding a new bindable property into a ViewModel

Finally, you probably want to add bindable properties in your ViewModel. Follow the steps:

Open the ViewModel you added before.
Type mvvminpc to select the corresponding code snippet (“inpc” stands for INotifyPropertyChanged ;))

Press the tab key to expand the snippet.
The first replacement is the name of the property that you will bind to.
Press the tab key to select the second replacement.
The second replacement is the type of the new property.
Press the tab key to select the third replacement.
The third replacement is the name of the attribute that will hold the value of the property. You can choose any identifier suitable for an attribute (field).
Press the tab key to select the fourth replacement.
The fourth replacement is the initial value for the property (if any). You can also delete the default value altogether.

MVVM light toolkit for WPF and Silverlight

Laurent Bugnion — Sun, 14 Jun 2009 22:17:28 GMT

In the next few days…

This article refers to the WPF version of the MVVM light toolkit. In the next few days I will post the Silverlight version.

Update: The Silverlight version has been published.

My next priority is to create an installer which will automate the installation process.

I also want to create and write about a few sample applications related to the toolkit. There is a lot to be said and demoed about MVVM in general, and this toolkit in particular. I am impatient and curious to see what direction future development will take. I have a few ideas I would like to add to the toolkit, more about that later.

Feedback

I am as always very interested in feedback, so do not hesitate to post a comment here, or contact me to start a discussion.

To be completely honest, I do not intend to add a lot of features to the toolkit. First, I am intrigued by new developments in Expression Blend 3 that I will keep under scrutiny, to see how they influence (or make obsolete) some of the features of this toolkit. Also, WPF 4 and Silverlight 3 will change the game of MVVM by (hopefully) integrating some of the concepts into the framework and making it an even more natural fit.

HOWEVER let’s keep the discussion rolling, so you know what to do if you like, dislike or want to change something in the toolkit ;)

Features

The community and Microsoft already have a few MVVM initiatives running. However, I didn’t find any completely satisfying for my particular set of requirements. Most importantly, I work as an integrator in WPF and Silverlight projects, and I use Expression Blend a lot. My toolkit is finely tuned to make working in Expression Blend much easier, for designers and developers. For instance, it allows creating design time data very easily, in order to facilitate design work. To be honest, I have been using some of the classes and concepts gathered here for quite some time already, but this is the first time that I have a clean, complete kit of features related to MVVM.

I spent a lot of time making the syntax and the features in the toolkit as compatible as possible between WPF and Silverlight. Most of the code can be shared between WPF and Silverlight. Minor changes are needed in XAML, but the ViewModels are compatible (as long as you don’t use WPF-only or Silverlight-only features of course).

Also included in the toolkit, you will find a Messenger making it super easy to enable communication between classes. Using the Messenger class and the classes in the GalaSoft.MvvmLight.Messaging namespace, you can broadcast messages to instances who registered for a particular type of message without worrying about dependencies or memory leaks.

Since it is a “light” toolkit, it should be quite easy for you to modify it to suit your own needs. Do not hesitate to inspire yourself from this code, or to modify it at will.

Manual Installation

~~To install the toolkit manually, please follow the steps.~~

For Windows Presentation Foundation

~~Download the GalaSoft.MvvmLight DLL~~ and copy it in a folder of your choice (for example c:\data\mvvm\wpf).
Note that this is NOT the same as the Silverlight version. Do not mix the two up. Event though the code is almost identical, this assembly is compiled against WPF, not Silverlight.
~~Download the project template~~. To make it available in Visual Studio, locate your project templates folder. By default it is located into your “My Documents” folder, into a folder named “Visual Studio 2008/Templates”. Into the ProjectTemplates folder, create a new folder named Mvvm and copy the project template into this new folder. Do not unzip the file, simply copy the zip file as is.
In Windows 7, the full path would be “C:\Users\[user_name]\Documents\Visual Studio 2008\Templates\ProjectTemplates\Mvvm”
Download each item template (listed below). To make them available in Visual Studio, locate your item templates folder. By default it is located into your “My Documents” folder, into a folder named “Visual Studio 2008/Templates”. Into the ItemTemplates folder, create a new folder named Mvvm and copy all the item templates into this new folder. Do not unzip the files, simply copy the zip files as is.
In Windows 7, the full path would be “C:\Users\[user_name]\Documents\Visual Studio 2008\Templates\ItemTemplates\Mvvm”.
- ~~MVVM View Template~~
- ~~MVVM ViewModel Template~~
- ~~MVVM ViewModel Locator Template~~
Download the code snippets. To make them available in Visual Studio, locate your code snippets folder. By default it is located into your “My Documents” folder, into a folder named “Visual Studio 2008/Code Snippets/Visual C#/My Code Snippets”. Copy all the snippets into this folder.
In Windows 7, the full path would be “C:\Users\[user_name]\Documents\Visual Studio 2008\Code Snippets\Visual C#\My Code Snippets”.
- ~~Creating a new property raising the PropertyChanged event~~.
- ~~Creating a new ViewModel into the ViewModelLocator class~~. Note: These are the same snippets as for Silverlight. You might have installed them already.
~~If you are interested, you can also~~ ~~download the source code~~ for the GalaSoft.MvvmLight classes (this is optional).
Note: The source code includes the WPF and the Silverlight version of the toolkit, all in one assembly, and also unit tests.

For Silverlight

~~The~~ ~~instructions for Silverlight~~ ~~are posted in another blog post.~~

Getting started in WPF

Creating a new MVVM application

In Visual Studio 2008, select the menu File, New, Project. Under the Mvvm section, select the MvvmLight project template.

Add a reference to the GalaSoft.MvvmLight assembly that you installed before. This manual step is needed for the moment, until an installer is created.

Press Ctrl-F5 to run the application. This sample application can be modified as needed.

Note: The application is localized in French for demo purposes. This can easily be changed in the code.

Adding a new ViewModel

If you need a new ViewModel in the MVVM application, follow the steps:

In Visual Studio, in the Solution explorer, right click on the ViewModel folder and select Add, New Item from the context menu.
Under Mvvm, select the MvvmViewModel template.
Enter a name for the new ViewModel and press OK.

Open the ViewModelLocator class (in the ViewModel folder).
At the end of the class, type mvvmlocatorproperty to select the corresponding code snippet.

Press the Tab key to expand the snippet.
The first replacement in the snippet is the type of the ViewModel you just created.
Use tab to select the second replacement.
The second replacement in the snippet is the name of the attribute that will hold the value of the ViewModel. You can choose any identifier suitable for an attribute (field).
Use tab to select the third replacement.
The third replacement is the name of the property that you will bind your View’s data context to. Here too you can choose any identifier suitable for a property.

Of course you also need to initialize your ViewModel by entering code in the constructor.

Adding a new View

Of course a ViewModel is tightly associated to a View. After adding a ViewModel, you probably want to add a new View too. In the WPF version of the application, a new View is a new Window. If you need a more finely granulated user interface, you can link the ViewModel to a UserControl instead, or even to other UI elements. This scenario is not supported by the toolkit, however, and requires some manual work.

To add a new Window-based view in the application, follow the steps:

In Visual Studio, in the Solution explorer, right click on the project and select Add, New Item from the context menu.
Under Mvvm, select the MvvmView template.
Enter a name and then press OK.

Open the newly created XAML file.
Modify the DataContext property to link to the ViewModel property that you added above.

Adding a new bindable property into a ViewModel

Finally, you probably want to add bindable properties in your ViewModel. Follow the steps:

Open the ViewModel you added before.
Type mvvminpc to select the corresponding code snippet (“inpc” stands for INotifyPropertyChanged ;))

Press the tab key to expand the snippet.
The first replacement is the name of the property that you will bind to.
Press the tab key to select the second replacement.
The second replacement is the type of the new property.
Press the tab key to select the third replacement.
The third replacement is the name of the attribute that will hold the value of the property. You can choose any identifier suitable for an attribute (field).
Press the tab key to select the fourth replacement.
The fourth replacement is the initial value for the property (if any). You can also delete the default value altogether.

Working on a MVVM “light” toolkit

Laurent Bugnion — Wed, 27 May 2009 14:41:30 GMT

As some of you now, I have been spending most of my free time (which is not much these days once I am done with the amazing projects I am working on at IdentityMine, and the time spent with the family) working on a very simple, very light MVVM toolkit.

This toolkit will encompass

A DLL with classes that make MVVM applications easier to create and “wire”.
- A “base” ViewModel class that contains utility methods that ViewModels typically need.
- A command class that can be used in WPF and Silverlight, to loosely wire your controls to methods in the ViewModel.
- A messenging system to let ViewModels and other classes communicate in an uncoupled manner.
A project template to create a new MVVM application in Visual Studio.
Some snippets to easily extend existing MVVM applications (for example with new properties).
Some sample applications.

I have already most of it ready, and am working on the sample apps, which is a great way to identify things that are missing from the toolkit. I already learned a lot from working on this, as well as the many discussions around this with my peers in the community.

More blog posts will follow around this topic. Stay tuned!

HP Touchsmart TX2 keyboard failure (and the cure)

Laurent Bugnion — Wed, 06 May 2009 18:48:15 GMT

This morning, something weird happened on my new HP Touchsmart TX2 (a multitouch tablet PC). The keyboard just stopped working, including all the buttons around it (such as the volume up, volume mute and volume down buttons). The keys simply didn’t react anymore.

To solve the issue, I tried rebooting, and this is when I noticed that the keyboard also didn’t work in the BIOS. For example, I was unable to display the boot menu by pressing the “ESC” key anymore.

I then connected an external USB keyboard, and it worked just fine. This really sounded like a hardware failure.

Since the device is of course still under warranty, I called HP tech support. I chose the French language option, meaning I was talking to a French technician. I have to say, I was impressed by the quality of the support.

First, I was directed to a guy responsible for the desktop Touchsmart PCs, who couldn’t help me (bad start) but promised me another technician would call me in “a few minutes”. I thought “yeah right”, but what do you know, 15 minutes later they actually called.

The cure was the following:

Remove the battery.
Unplug the laptop.
Press the “Power on” button for 3 minutes.

This part is not very funny, because the power on button is actually a sliding button, and it is quite painful to press it for 3 minutes (aka eternity).

Without letting the power button go, replug the laptop to the power adapter.
Restart the laptop normally.

After these steps, the keyboard was back. I assume that it is a kind of reset, and that pressing the power button was to make sure that all the condensers were actually empty. Anyway, it worked, and it saved myself the painful step of sending my laptop back to HP!

The #techdays presentations screencasts are online (French and German)

Laurent Bugnion — Wed, 06 May 2009 17:24:44 GMT

And now the German version of the session is online too. Get it at

http://www.microsoft.com/switzerland/msdn/de/techdays/default.aspx

Reminder, the French version is at

http://www.microsoft.com/switzerland/msdn/fr/techdays/Presentations.aspx

The slides are also available at this URL. Have fun!!

Installing Windows 7 from a USB drive

Laurent Bugnion — Fri, 01 May 2009 16:20:51 GMT

Yesterday, Windows 7 RC (release candidate) was published on MSDN, so the subscribers are currently downloading it. I have been using Windows 7 since October 2008, when it was pre-released during the PDC conference. Then I moved to the beta when it was released, and have been using it as my main system since then. I almost never had to go back to Vista (which I kept installed on another partition of my main laptop, just in case).

By a funny coincidence, though, Win7 beta stopped working for me last night, after a nasty crash that aparently corrupted the user profile. This would be possible to fix, but I decided what the heck, all my data is safe anyway (I have a 3rd partition for data, plus back everything up to Mozy) so it's not like I really need to go back into Win7 beta, especially since the RC is almost there.

So now I am eager to install. The bits are currently being downloaded, and I have a couple of hours to kill while waiting. So why not study an alternative way to install Win7 to a PC? At the last MIX, I remember I heard someone mention that you don't need a DVD to install Win7. A simple UBS stick is enough, provided it is big enough to hold the 2.5 GB data contained in the Win7 ISO file. Well it so happens that we got a free 4GB USB stick at MIX, so here we go, perfect conditions for the test :)

I searched online, and found this gem of a video, by Dennis Chung, one of the DPE in Singapore, that shows in details how to do that.

To make it even easier, here are the steps:

Preparing the USB stick

Plug the USB stick in a USB port, and make sure that you don't have any data you need on it. The data will be erased.
Open a command line console
Type Diskpart
Type List Disk
Type Select Disk N where N is the number corresponding to your USB disk. This should be easy to find based on the size of the disk.
Type clean
Type create partition primary
Type active
Type format fs=fat32 quick
Type assign

After this is done, you should see the USB disk appear in Windows Explorer in the list of mounted drives:

Copying the files

Then, you need to mount the ISO file as a virtual DVD drive. For this, you will need a 3rd party tool. Personally, I like VirtualCloneDrive. Simply copy all the content of the ISO file (mounted through VirtualCloneDrive) to your USB stick.

Booting

In order to boot from the USB stick, you need to modify the boot order in the BIOS of your computer. Accessing the BIOS menu depends on your machine. On my Alienware M15X, I need to press XXXX while the machine is starting up. This gives me access to the BIOS options, where I can select the boot sequence. If the USB stick is found, the laptop will boot from there.

Note: To speed up the boot sequence, revert the setting to always boot from the hard disk after you are done installing Windows 7.

With this done, you should now see your Windows 7 installer starting up and leading you through the installation process. Have fun!!

Switching expertise: From Client App Dev to Silverlight

Laurent Bugnion — Wed, 29 Apr 2009 21:25:25 GMT

At the last MVP summit in March, some of us were informed that a new MVP expertise had been created for Silverlight. They asked a small number of existing MVPs with strong Silverlight competency (including yours truly) if they would agree to switch to that new expertise.

I must admit that I have not always been very happy with the thought of a new expertise dedicated only to Silverlight. In my opinion, it is very important to keep Silverlight close to Windows Presentation Foundation, and to make sure that WPF experts are informed about the latest changes and the future plans of Silverlight. This is why I liked the Client App Dev expertise, gathering under one roof WPF and Silverlight people.

So why did I accept to switch then? Well, precisely for this reason. Since the new expertise is created anyway, I thought that it would be good to be part of that, and to make sure that the product group is sensitive to this aspect, and keeps close to WPF. Also, since my audience is made as much of WPF than Silverlight developers, it will be a good way to spread the news about Silverlight plans and maybe to contribute to bring these 2 platforms even closer.

I am excited about the switch, actually, especially because the Silverlight expertise will be a small group, allowing quite a rich interaction with the product group. I know personally some of the other Silverlight MVPs, and all of them by reputation. This should be a very lively group and I am proud to be part of it.

The #techdays presentations screencasts are online (French only)

Laurent Bugnion — Wed, 22 Apr 2009 22:21:17 GMT

Update: The German version of the presentation is online too.

I was just notified that the screencast for the session I gave at TechDays in Geneva a few weeks ago is now online. You can see this presentation (in French) at

http://www.microsoft.com/switzerland/msdn/fr/techdays/Presentations.aspx

The slides are also available at this URL. Have fun!!

Posting the source code for #techdays (Switzerland) talks

Laurent Bugnion — Mon, 20 Apr 2009 03:07:39 GMT

Update:

I updated the installation instructions to make it clearer that you need the WPF toolkit and SQL Server express before you can run the application.

TechDays Switzerland is always a very nice venue, and this year in Geneva and in Bern were no exceptions. For me it was a special occasion, because I gave the same talk in French in Geneva, and in German in Bern, and I had never done this before. I think it went well. Altogether approximately 450 people saw this talk. I think I will possibly reuse it later this year at other occasions, because it is a good one.

The topic was "WPF today and tomorrow" and the abstract was:

Entwicklung von WPF Applikationen – heute und morgen

Im Rahmen dieser Session werden Best Practices zur Entwicklung der Windows Presentation Foundation (WPF) erörtert. Wir erstellen Lookless-Controls und gestalten sie entsprechend. Ausserdem werden moderne Präsentationsmodelle, die den Designer-Developer-Workflow erleichtern sollen, sowie im .NET-Framework und im WPF-Toolkit erstellte Controls vorgestellt. Mithilfe von Visual Studio und Expression Blend üben wir uns in der Erstellung von Anwendungen.
Ein weiterer in dieser Session behandelter Aspekt ist die künftige Entwicklung der WPF. Mit der bevorstehenden Einführung von .NET 4 wird die WPF weiter an Flexibilität und Leistungsstärke gewinnen. Pixel-Shader, Ergänzungen an der XAML-Sprache, die Multi-Touch-Technologie, neue Controls und andere Erweiterungen – all dies führt uns zu einer neuartigen User Experience und zu neuen Möglichkeiten der Interaktion (Think Minority Report!).

Windows Presentation Foundation: aujourd'hui et demain

Cette session passe en revue les pratiques de développement utilisées avec Windows Presentation Foundation de nos jours. Nous construirons une application de business connectée à une banque de données, utiliserons les nouveaux contrôles « Line of Business » (Datagrid, Ribbon) et utiliserons Visual Studio et Blend pour rendre nos applications plus belles.
Ensuite, nous parlerons du future de WPF. Avec .NET 4 qui arrive, WPF sera aussi plus puissant et flexible. Pixel shaders, les additions au langage XAML, les applications à touche multiple (mulittouch) et d’autres additions nous rapprocherons de l’expérience utilisateur du futur (telles que dans « Minority Report »).

Slides

The slides for the sessions should be available on the TechDays website soon (www.techdays.ch) as well as a recording of the session. In the mean time, I uploaded the slides here.

TechDays Switzerland 2009

View more presentations from lbugnion.

Video

I showed a small video about pixel shaders in this talk. The video is available for download here.

Source code

Here is the source code of the "Line of Business" application we built together. As a reminder, it is inspired by a "hands on lab" put together by the DPE team at Microsoft Switzerland. This lab can be downloaded here.

To run the application, you must first install the following:

Install SQL Server Express
Extract the Northwind database to C:\temp.
Install the WPF Toolkit.
Source code for the LOB application.

Using a Behavior to magnify your WPF applications

Laurent Bugnion — Sun, 05 Apr 2009 05:32:21 GMT

At MIX 2009, the Expression Blend team cam up with a new concept called Behaviors. In fact, the only thing new is the way that the Behaviors are packed. WPF developers have been doing what we called "Attached Behaviors" for quite some time already: see this thread (dated July 2008) to read a discussion around this topic at the WPF Disciples group.

Attached Behaviors leverage a feature of WPF called Attached Properties, that allows you to add a property to an element even if this element doesn't implement it. When the Attached Property value is set (or changes), you get an access to the element to which the property is attached, and you get a chance to attach an event handler to it, or to modify how it looks, reacts, etc... This is why we call this Attached Behavior. In fact it is similar to extension methods in C#: You define a method somewhere in your code, and you attach it to another element that doesn't know about it. For more information about attached behaviors, you can read the article that my good friend and fellow WPF Disciple Josh Smith wrote about them.

The Behaviors proposed by the Blend team are using Attached Behaviors under the covers, and propose a neat way to "pack" them and to attach them to an element. In this post, we will see how I built a Behavior that you can use to add a magnifying glass to a WPF application in just a few lines of XAML (the Behavior implementation needs more than that though ;) but it is neatly packed and can be reused).

In this article, you will see

How to download the assemblies needed.
How to add them into Expression Blend 3 or in Visual Studio 2008.
How to set the ZoomBehavior's properties.
How the ZoomBehavior is built (and of course you can download the source code).
And a sample application.

Default magnifier on a picture

Why Expression.Interactivity?

This question was asked many times after the Behaviors were shown at MIX: Why do I need to add a reference to an Expression Blend assembly to use Behaviors in my application, even though they do not really have anything to do with Blend? Sure, Blend provides a nice way to add a Behavior to an element visually, but you can do the same in XAML.

The answer is that Behaviors have been implemented by members of the Blend team, and are still very new. They just needed a place to store them, and it made sense to them to put that code in an assembly that comes with Blend. In my opinion it was not the best choice, and putting Behaviors in the WPF Toolkit (and in the Silverlight Toolkit) would have been a better option. I suppose that this will change later, and that Behaviors will maybe even flow into the .NET framework (and maybe even into the System.* namespace).

What does the behavior do?

The ZoomBehavior I developed and expose here allows to easily add a magnifying glass to any WPF window. With just a few lines of XAML code, you add a relative complex functionality. You can have any shape and any content - photos, videos, user interface elements, shapes, etc...

Custom magnifier on a video

Custom magnifier on text

Default magnifier with custom width on UI elements

What about Silverlight?

Behaviors work in Silverlight as well as in WPF. The mechanisms they rely on are compatible. However, my ZoomBehavior does not work in Silverlight, because it relies on a class named VisualBrush that is not available in Silverlight yet. Also, I draw the magnifying glass on the Adorner layer, which is not available in Silverlight applications (but we could imagine a workaround for that particular limitation).

In other words, if you do Silverlight code, you can learn from this sample, but you cannot use it.

Using the ZoomBehavior in Expression Blend 3

Expression Blend 3 is probably the easiest way to add a Behavior to an application. You will need Expression Blend 3, which is currently in Community Technology Preview state, and can be downloaded here.

Download my Utilities assembly. This assembly is in a Zip file. Extract it to a local folder.
In Blend 3, right click on the Project tab, on the References folder.
From the context menu, select Add Reference. Navigate to the folder containing the Utilities assembly, select it and press OK.
Build the application. This ensures that all the referenced assemblies are copied to the bin/Debug folder.
Open the Assets Library.
You should see the ZoomBehavior in the Behaviors tab.

The Asset Library and the ZoomBehavior

Drag and drop the ZoomBehavior on any element in the Window.
Note: Typically, you want to add this behavior to the LayoutRoot panel (the first element under the main window). Even if you add the ZoomBehavior to a child element somewhere in the window, the magnifier will be added to the window's Content element, and will be visible in the whole window.
You should see the behavior appear in the Objects and Timeline panel.

Objects and Timeline panel

To toggle the magnifier on and off, you need a little snippet of code. For example, you can use a ToggleButton and then write the following C# code:

First add the following using directive to the top of the page:

using GalaSoft.Utilities.Wpf.Zoom;

Then, use this snippet for the Click event handler on the Button:

/// 
/// Test the ToggleZoom extension method
/// 
private void Button_Click(object sender, RoutedEventArgs e)
{
  TestRectangle.ToggleZoom();
}

The result is a round magnifier, with a magnifying factor of 2.0 and a diameter of 200 pixels. You will see below how to change the size and aspect of the magniifier.

Alternatively, you can use the IsVisible dependency property on the ZoomBehavior object, set it directly or data bind it, for example to a checkbox or a ToggleButton, or any other boolean property.

ZoomBehavior properties in Blend 3

Binding the IsVisible property in Blend 3

Using the ZoomBehavior in Visual Studio

Adding the magnifier can also be done directly in XAML, without using Blend 3:

Download my Utilities assembly and the Microsoft Expression Interactivity assembly. These assemblies are in a Zip file. Extract them to a local folder.
In Visual Studio, add a reference to both assemblies to your WPF application
- Right click on the References folder
- Select Add Reference from the context menu
- Browse to the folder in which you saved both assemblies above, and select them. Then press OK.
In XAML, add two XML namespaces to the Window tag:

xmlns:i="http://schemas.microsoft.com/expression/2009/interactivity"
xmlns:zoom="clr-namespace:GalaSoft.Utilities.Wpf.Zoom;assembly=GalaSoft.Utilities"

Add the following attached property to the element you want to attach the magnifier to (in that case, the Rectangle named TestRectangle).
Note: Typically, you want to add this behavior to the LayoutRoot panel (the first element under the main window). Even if you add the ZoomBehavior to a child element somewhere in the window (like in this sample), the magnifier will be added to the window's Content element, and will be visible in the whole window.

<Rectangle x:Name="TestRectangle"
           Fill="#FF821A32"
           Stroke="#FF000000"
           HorizontalAlignment="Right"
           Margin="0,260,17,354"
           Width="179">

  <i:Interaction.Behaviors>
    <zoom:ZoomBehavior x:Name="MyZoom" />
  </i:Interaction.Behaviors>

</Rectangle>

Here too, to toggle the magnifier on/off, you need to add the namespace GalaSoft.Utilities.Wpf.Zoom to your code-behind, and then call the extension method ToggleZoom() on the element to which you added the behavior. For example:

TestRectangle.ToggleZoom();

And of course here too you can use a binding on the IsVisible property

<i:Interaction.Behaviors>
  <zoom:ZoomBehavior x:Name="MyZoom"
                     IsVisible="{Binding ElementName=ToggleZoomCheckBox,
                                         Path=IsChecked, Mode=TwoWay}" />
</i:Interaction.Behaviors>

Using properties

There are a number of properties that you can use to customize the magnifier's look and feel. All these properties are Dependency Properties, which means that they can be data bound or animated, such as in the sample that you can download below.

Zoom factor

The property ZoomFactor can be set to any value between 1.0 and Double.MaxValue. The default value is 2.0.

Magnifier height and width

The properties MagnifierWidth and MagnifierHeight govern the dimensions of the magnifying glass. Default value: 200 px * 200 px.

Distance from the mouse

When the magnifier is visible, the mouse cursor turns into a cross. The magnifier appears next to the cursor, either left or right, below or above, depending on the mouse position. If you move the mouse too fast, the cursor might "land" on the magnifier, which you want to avoid. In that case, and depending on the shape of the magnifier, you may want to increase the distance from the mouse, using the DistanceFromMouse property. Default value: 5 pixels.

Magnifier shape

By default, the magnifier is an Ellipse. You can however specify any shape you want, using the Template property.

Create a ControlTemplate, either in Blend or in Visual Studio.
The ControlTemplate must target a Control (TargetType property).
One of the elements of the ControlTemplate must set its Fill (or Background) property to a TemplateBinding on the Control's Background. This is where the magnified view will appear.
Save this template in the window's resources (for example).
Set the ZoomBehavior's Template property to the saved ControlTemplate.

For instance:

<ControlTemplate x:Key="ZoomGlassTemplate1"
                 TargetType="{x:Type Control}">
  <Grid Background="Silver">
    <Rectangle Fill="{TemplateBinding Background}"
               Stroke="#FF000000"
               StrokeThickness="5"
               StrokeDashArray="1 2" />
  </Grid>
</ControlTemplate>

and

<i:Interaction.Behaviors>
  <zoom:ZoomBehavior x:Name="MyZoom"
                     Template="{StaticResource ZoomGlassTemplate1}"
                     DistanceFromMouse="20" />
</i:Interaction.Behaviors>

Tip: You want to make sure that an opaque background is set in your template (in that case, the Grid's Background is set to Silver), to avoid having a transparent background and seeing the window's content below the magnifier when it is close to the window's edges.

IsVisible

This boolean property can be set directly, or data bound for example to a checkbox, to toggle the magnifier on and off.

Downloads

You can download the following files:

Assemblies needed to add the ZoomBehavior to your application (GalaSoft.Utilities and Microsoft.Expression.Interactivity).
Source code for my Utilities classes (the ZoomBehavior classes are into the Wpf/Zoom subfolder)

I hope you'll have fun playing with this behavior, and feel free to give me your feedback!

Sample application

The sample application allows you to test the ZoomBehavior with multiple shapes, sliders for dependency properties and dynamic content.

Use the shapes on the left to change the shape of the magnifier. The round shape sets the default template. The other two templates are defined in Window1.xaml.

RadioButtons to choose templates

Use the button and checkbox on the top right to toggle the magnifier on/off. You can use the ToggleZoom extension method, or use the IsVisble dependency property on the ZoomBehavior.

Toggling the magnifier on/off

Press the "Z" key to toggle the ZoomBehavior on/off.
Pass the cursor on UI elements, shapes, image and even video and see the magnified content
Use the sliders on the bottom right to change the width, height and the zoom factor of the magnifier.

Changing the width, height and zoom factor

How does it even work?

The ZomBehavior relies on three classes.

ZoomBehavior
- This class inherits the Microsoft.Expression.Interactivity.Behavior class, which is a generic class. The ZoomBehavior can be attached to any FrameworkElement. However, the magnifier will always be available for the whole window containing the FrameworkElement.
- This class also defines a set of dependency properties detailed above in the Using Properties section.
- The ZoomBehavior also defines a method used to toggle the magnifier on/off. There is also another way to toggle the magnifier, using an attached method.
- To get a grip on the FrameworkElement using the behavior, you can override the OnAttached method, which will be called when the behavior is attached to an element. Then use the AssociatedObject of the Behavior class, which is automatically casted to a FrameworkElement in ZoomBehavior (thanks to the generic implementation).
ZoomAdorner
- This class inherits the System.Windows.Documents.Adorner class, that defines objects that can be added to the AdornerLayer.
- The AdornerLayer is a special layer that is guaranteed to always appear in front of all the other elements on the window. This is perfect to draw decorations for objects (such as handles to resize an element) or in our case, to make sure that the magnifier is on top of all other elements.
- If no template is defined, the method CreateGlass will create an Ellipse to display the magnified view.
- If a template is defined, the method CreateGlass will create a Control and apply the template to that element. This allows using any shape to display the magnified view.
- We override a few methods and properties in the ZoomAdorner class, to allow placing any element in the AdornerLayer. We use the helper class VisualCollection to create a tree of visual elements below the adorner. This requires overriding VisualChildrenCount, GetVisualChild, ArrangeOverride and MeasureOverride.
- We attach an event handler to the root element on which the magnifier is displayed, to track mouse movements. When we detach the adorner, we must remember to remove the event handler to avoid memory leaks.
- The magnified view is provided by a VisualBrush. This is a representation of the observed scene, which we can move by changing the ViewBox property.
- The method SetGlass is called everytime that the mouse moves, or that the aspect of the magnifier changes (through a dependency property). It is used to calculate the magnifier's size, position, and the ViewBox of the VisualBrush.
ZoomExtension
- This class is a utility class, that defines an extension method available on every FrameworkElement.
- The method ToggleZoom will only be active on the element on which you added the ZoomBehavior. On other elements, it will simply be ignored.

License

The GalaSoft.Utilities assembly and all the classes it contains are distributed under the Creative Commons License (Attribution 3.0 Unported).

http://creativecommons.org/licenses/by/3.0/

Conclusion

I hope you will have fun using this behavior. For me it was a great occasion to learn how to program behaviors, and to review the Adorner Layer, a great feature of WPF applications. But having played with the ZoomBehavior quite a lot in the last few days, I think it has a potential for many WPF applications. Feel free to use it!

Two days FREE training: WPF LOB

Laurent Bugnion — Fri, 03 Apr 2009 15:53:12 GMT

Get some of that: Microsoft's Jaime Rodriguez and Karl Shifflett are on tour and will come to a number of locations to give a two days training packed with WPF training for building Line of Business (LOB) applications.

"That must cost a lot", you think? (well maybe you don't if you read the title of this post) No it is FREE, yes you heard me, no costs, no commitment, no strings attached. You can even choose to follow one day only, or both, as you want.

And believe me, you get two of the best WPF experts you can imagine! Both Jaime and Karl have years of experience in WPF, and especially in building LOB applications. Both spent literally hours (days?) thinking about this, and how to build the best applications in the easiest way.

Don't wait, first come first serve! Go register now!

http://blogs.msdn.com/jaimer/archive/2009/04/01/announcing-the-using-wpf-to-build-lob-applications-training-tour.aspx