MIX

Sample code for my #mix10 talk online

Laurent Bugnion — Tue, 16 Mar 2010 22:19:40 GMT

Update: Seems that not everyone is running on the latest and greatest, which is understandable. To avoid confusion, I added the version of the framework for which these samples are available. In the next few days, I will try to port them to other versions in order to have working samples in WPF3.5, WPF4, SL3 and SL4. Please be patient, thanks!

Update 2: I reconfigured the samples to include all the external assemblies you need to run them (including Microsoft.Practices.Unity.dll, System.Windows.Interactivity and Microsoft.Expression.Interactions.dll)

Update 3: The MVVM Demo 2 (end) now contains the MVVM Light application for Windows Phone 7 that I demoed at TechDays Belgium 2010 in Antwerpen. It features sharing most of the code between the Silverlight 4 application and the Windows Phone 7 application, and creating a new view for the phone application on top of the MainViewModel.

I just saw that the video for my MIX10 session is online already! Impressive work, MIX10 team. I also published the sample code on my web server, so here are the links:

Powerpoint slides
Video
All the source code (including the referenced assemblies)
- MVVM Demo 1 (start) [SL4]
- MVVM Demo 1 (final) [SL4]
- Command sample [SL4]
- RelayCommand sample [SL4]
- Messaging sample [WPF4]
- MVVM Demo 2 (start) [SL4]
- MVVM Demo 2 (final) [SL4]
MVVM Light Toolkit Version 3

It was a real pleasure and an amazing experience to have this talk and to get all the great feedback! Thanks all for coming, and as usual don’t hesitate to send your feedback!

Laurent

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

What’s new in MVVM Light V3

Laurent Bugnion — Tue, 16 Mar 2010 16:42:53 GMT

V3 of the MVVM Light Toolkit was released during MIX10, after quite a long alpha stage. This post lists the new features in MVVM Light V3.

Compatibility

MVVM Light Toolkit V3 can be installed for the following tools and framework versions:

Visual Studio 2008 SP1, Expression Blend 3
- Windows Presentation Foundation 3.5 SP1
- Silverlight 3
Visual Studio 2010 RC, Expression Blend 4 beta
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4 RC
- Silverlight 3
- Silverlight 4 RC

For more information about installing the MVVM Light Toolkit V3, please visit this page. For cleaning up existing installation, see this page.

New in V3 RTM

The following features have been added after V3 alpha3:

Project template for the Windows Phone 7 series (Silverlight)

This new template allows you to create a new MVVM Light application in Visual Studio 2010 RC and to run it in the Windows Phone 7 series emulator. This template uses the Silverlight 3 version of the MVVM Light Toolkit V3. At this time, only the essentials features of the GalaSoft.MvvmLight.dll assembly are supported on the phone.

New in V3 alpha3

The following features have been added after V3 alpha2:

New logo

An awesome logo has been designed for MVVM Light by Philippe Schutz.

DispatcherHelper class (in GalaSoft.MvvmLight.Extras.dll)

This class is useful when you work on multi-threaded WPF or Silverlight applications.

Initializing: The DispatcherHelper class must be initialized in the UI thread. For example, you can initialize the class in a Silverlight application’s Application_Startup event handler, or in the WPF application’s static App constructor (in App.xaml).

// Initializing in Silverlight (in App.xaml)

private void Application_Startup(
    object sender,
    StartupEventArgs e)
{
    RootVisual = new MainPage();
    DispatcherHelper.Initialize();
}


// Initializing in WPF (in App.xaml)

static App()
{
    DispatcherHelper.Initialize();
}

Verifying if a property exists

The ViewModelBase.RaisePropertyChanged method now checks if a given property name exists on the ViewModel class, and throws an exception if that property cannot be found. This is useful to detect typos in a property name, for example during a refactoring. Note that the check is only done in DEBUG mode.

Replacing IDisposable with ICleanup

The IDisposable implementation in the ViewModelBase class has been marked obsolete. Instead, the ICleanup interface (and its Cleanup method) has been added. Implementing IDisposable in a ViewModel is still possible, but must be done explicitly. IDisposable in ViewModelBase was a bad practice, because it supposes that the ViewModel is garbage collected after Dispose is called. instead, the Cleanup method does not have such expectation.

The ViewModelLocator class (created when an MVVM Light project template is used in Visual Studio or Expression Blend) exposes a static Cleanup method, which should in turn call each ViewModel’s Cleanup method. The ViewModel is free to override the Cleanup method if local cleanup must be performed.

Passing EventArgs to command with EventToCommand

The EventToCommand class is used to bind any event to an ICommand (typically on the ViewModel). In this case, it can be useful to pass the event’s EventArgs parameter to the command in the ViewModel. For example, for the MouseEnter event, you can pass the MouseEventArgs to a RelayCommand<MouseEventArgs> as shown in the next listings.

Note: Bringing UI specific classes (such as EventArgs) into the ViewModel reduces the testability of the ViewModel, and thus should be used with care.

Setting EventToCommand and PassEventArgsToCommand:

<Grid x:Name="LayoutRoot">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <cmd:EventToCommand Command="{Binding MyCommand}"
                                PassEventArgsToCommand="True" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Grid>

Getting the EventArgs in the command

public RelayCommand<MouseEventArgs> MyCommand
{
    get;
    private set;
}

public MainViewModel()
{
    MyCommand = new RelayCommand<MouseEventArgs>(e =>
    {
        // e is of type MouseEventArgs
    });
}

Changes to templates

Various changes have been made to project templates and item templates to make them more compatible with Silverlight 4 and to improve their visibility in Visual Studio and Expression Blend.

Bug corrections

When a message is sent through the Messenger class using the method Messenger.Default.Send<T>(T message, object token), and the token is a simple value (for example int), the message was not sent correctly. This bug is now corrected.

New in V3

The following features have been added after V2.

Sending messages with callback

Certain classes have been added to the GalaSoft.MvvmLight.Messaging namespace, allowing sending a message and getting a callback from the recipient. These classes are:

NotificationMessageWithCallback: Base class for messages with callback.
NotificationMessageAction: A class with string notification, and a parameterless callback.
NotificationMessageAction<T>: A class with string notification, and a callback with a parameter of type T.

To send a message with callback, use the following code:

var message = new NotificationMessageAction<bool>(
    "Hello world",
    callbackMessage =>
    {
        // This is the callback code
        if (callbackMessage)
        {
            // ...
        }
    });

Messenger.Default.Send(message);

To register and receive a message with callback, use the following code:

Messenger.Default.Register<NotificationMessageAction<bool>>(
    this,
    message =>
    {
        // Do something
        
        // Execute the callback
        message.Execute(true);
    });

Messenger.Default can be overriden

The Messenger.Default property can also be replaced, for example for unit testing purposes, by using the Messenger.OverrideDefault method. All the public methods of the Messenger class have been made virtual, and can be overridden in the test messenger class.

Sending messages to interfaces

In V2, it was possible to deliver messages targeted to instances of a given class. in V3 it is still possible, but in addition you can deliver a message to instances that implement a certain interface. The message will not be delivered to other recipients.

Use the overload Messenger.Default.Send<TMessage, TTarget>(TMessage message) where TTarget is, in fact, an interface (for example IDisposable). Of course the recipient must register to receive the type of message TMessage.

Sending messages with a token

Messages can now be sent through the Messenger with a token.

To send a message with token, use the method overload Send<TMessage>(TMessage message, object token).
To receive a message with token, use the methods Register<TMessage>(object recipient, object token, Action<TMessage> action) or Register<TMessage>(object recipient, object token, bool receiveDerivedMessagesToo, Action<TMessage> action)

The token can be a simple value (int, string, etc…) or an instance of a class. The message is not delivered to recipients who registered with a different token, or with no token at all.

Renaming CommandMessage to NotificationMessage

To avoid confusion with ICommand and RelayCommand, the CommandMessage class has been renamed to NotificationMessage. This message class can be used to deliver a notification (of type string) to a recipient.

ViewModelBase constructor with IMessenger

The ViewModelBase class now accepts an IMessenger parameter. If this constructor is used instead of the default empty constructor, the IMessenger passed as parameter will be used to broadcast a PropertyChangedMessage when the method RaisePropertyChanged<T>(string propertyName, T oldValue, T newValue, bool broadcast) is used.

In the default ViewModelBase constructor is used, the Messenger.Default instance will be used instead.

EventToCommand behavior

The EventToCommand behavior has been added in V3. It can be used to bind any event of any FrameworkElement to any ICommand (for example a RelayCommand located in the ViewModel). More information about the EventToCommand behavior can be found here and here.

Updated the project templates to remove the sample application

The project template has been updated to remove the sample application that was created every time that a new MVVM Light application was created in Visual Studio or Blend. This makes the creation of a new application easier, because you don’t need to remove code before you can start writing code.

Bug corrections

Some bugs that were in Version 2 have been corrected:

In some occasions, an exception could be thrown when a recipient was registered for a message at the same time as a message was received.

New names for DLLs

If you upgrade an existing installation, you will need to change the reference to the DLLs in C:\Program Files\Laurent Bugnion (GalaSoft)\Mvvm Light Toolkit\Binaries. The assemblies have been moved, and the versions for Silverlight 4 and for WPF4 have been renamed, to avoid some confusion. It is now easier to make sure that you are using the correct DLL.

WPF3.5SP1, Silverlight 3

When using the DLLs, make sure that you use the correct versions.

WPF4, Silverlight 4

When using the DLLs, make sure that you use the correct versions.

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

MVVM Light V3 released at #MIX10

Laurent Bugnion — Tue, 16 Mar 2010 16:40:46 GMT

During my session “Understanding the MVVM pattern” at MIX10 in Vegas, I showed some components of the MVVM Light toolkit V3, which gave me the occasion to announce the release of version 3. This version has been in alpha stage for a while, and has been tested by many users. it is very stable, and ready for a release. So here we go!

What’s new

What’s new in MVVM Light Toolkit V3 is the topic of the next post.

Cleaning up

I would recommend cleaning up older versions before installing V3. I prepared a page explaining how to do that manually. Unfortunately I didn’t have time to create an automatic cleaner/installer, this is very high on my list but with the book and the conferences going on, it will take a little more time. Cleaning up is recommended because I changed the name of some DLLs to avoid some confusion (between the WPF3.5 and WPF4 version, as well as between the SL3 and SL4 versions). More details in the section titled “Compatibility”.

Installation

Installing MVVM Light toolkit is the manual process of unzipping a few files. The installation page has been updated to reflect the newest information.

Compatibility

MVVM Light toolkit V3 has components for the following environments and frameworks:

Visual Studio 2008:
- Silverlight 3
- Windows Presentation Foundation 3.5 SP1
Expression Blend 3
- Silverlight 3
- Windows Presentation Foundation 3.5 SP1
Visual Studio 2010 RC
- Silverlight 3
- Silverlight 4
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4
- Silverlight for Windows Phone 7 series
Expression Blend 4 beta
- Silverlight 3
- Silverlight 4
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4

Feedback

As usual I welcome your constructive feedback. If you want the issue to be discussed in public, the best way is through the discussion page on the Codeplex site. if you wish to keep the conversation private, please check my Contact page for ways to talk to me.

Video, tutorials

There are a few new videos and tutorials available for the MVVM Light toolkit. The material is listed on the Get Started page, under “tutorials”.

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

My program at #MIX10

Laurent Bugnion — Wed, 10 Mar 2010 18:01:28 GMT

Getting ready to fly to Vegas and MIX10 is really an exciting time! It is also a very busy time, because we are working on a few projects that will be shown on stage, I have my presentation to prepare, and of course as always the book… though these days it has been a bit on the back burner to be honest ;)

I arrive in Vegas on Sunday evening around 10PM, so I won’t be able to make it to the traditional IdentityMine dinner this year. I am sure it will be fun nonetheless!

My session: Understanding the MVVM pattern

http://live.visitmix.com/MIX10/Sessions/EX14

My session is scheduled on the first day, which is awesome, so I am crossing my fingers and hoping that the MIX team doesn’t change it at the last minute… The session will take place on

Monday, the 15th of March, 2PM, Room Lagoon F

Important: remember that the USA are moving to Summer time on Sunday, so don’t forget to adjust your watches!!

Ask the Experts

On Monday evening, I will attend the Ask the Experts event, which is taking place between 5Pm and 6:30PM in the main meal hall. This will be a great occasion to grab a beer and talk about code.

The Commons

MIX has a great place called the Commons, a great location to chill between sessions, and meet tons of interesting people. I love the Commons and plan to spend a lot of time there to meet as many people as I can.

Parties

I was invited to a few parties, and will do my best to avoid conflicts :) I plan to be at the following events:

Silverlight Mixers on Monday evening
Insiders MIX party on Tuesday
Silverlight partner happy hour on Tuesday too

This is a lot of fun, but at the same time we all know that the best value of a conference is to meet people face to face. This is just the right occasion.

And on Thursday…

On Thursday I will be attending a Silverlight event at the Luxor. It will be a very busy day, perfect way to end the conference. I fly back home on Friday morning, but due to a long stop in Washington DC (where I intend to go downtown and take pictures… except if the weather is bad, in which case I will probably go to the museum of flight), I will reach home only on Sunday.

Getting hold of me

The best way to reach me during MIX is to send me a message on Twitter. I will regularly tweet my location at the conference, so make sure to come and meet me. I am eager to make new friends, to talk about the fantastic jobs we did in WPF and Silverlight over the past year and hear your war stories!

http://www.twitter.com/lbugnion

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

Schedule for my session at MIX10

Laurent Bugnion — Fri, 05 Mar 2010 07:48:58 GMT

Microsoft has published the schedule for the MIX10 sessions. I have a sweet spot, and I dearly hope that it stays this way (Last year I had a great spot, but it was changed last minute and then I had a much better one, “competing” against Vertigo and their Playboy app… yeah try to explain to a bunch of geeks that MVVM is better than Playboy… good luck with that ;) Anyway, this year my sweet spot is on the very first day of the conference (there are workshops on Sunday, but this qualifies as pre-conference), Monday after the keynote which should get everyone pumped and excited.

Schedule and location

I would be really happy to meet y’all at

Understanding the Model-View-ViewModel Pattern

in Lagoon F on Monday at 2:00 PM

http://live.visitmix.com/MIX10/Sessions/EX14

See you in Vegas (or in video…)

Everything I saw so far hints that this should be a very, very exciting edition of MIX, maybe the most electrifying ever. The great news is that everything will be available even if you cannot make it: The keynotes are typically streamed live, and if you remember last year’s experience at PDC, it is a really good alternative. Built with Silverlight, the feed uses smooth streaming (adjusting the quality according to your bandwidth automatically), possibility to pause and rewind if you miss something, and a great picture quality. As for the sessions, the message at MIX is that the videos will be available online approximately 24 hours after the session is being held. This is a great feat!

So, see you in Vegas (or in video)!

Cheers,

Laurent

The MVVM landscape at MIX10

Laurent Bugnion — Thu, 21 Jan 2010 15:06:26 GMT

Update: Shawn Wildermuth has changed his session and will be talking about Silverlight Security instead.

The MIX conference this year had an open call for sessions, and 12 sessions were voted by the public out of 169. Surprisingly (or maybe not that surprisingly in fact), 3 sessions out of the 12 have the MVVM pattern in their title. This shows a lot of interest for this pattern which is helping the developer to create decoupled, testable, blendable applications in Silverlight and in WPF.

Since my session is one of the three, I decided to contact the other two speakers (we happen to run in the same circles ;)) and try to coordinate the content. I think that by talking to each other, we can organize our content so that we avoid overlap and offer a wider landscape to the audience.

The two other authors responded positively to my request, and this is roughly how it will look like. Of course some overlap is unavoidable, to set the context right and avoid misunderstandings. After all, MVVM is a pattern, and as such there are multiple possible implementations or even interpretations of the pattern. But I think that this way, you will get a wider, deeper overview of what MVVM has to offer for you today.

Rob Eisenberg’s “Build Your Own MVVM Framework”

Rob is coordinator on the Caliburn project (a very powerful MVVM framework), but this is not a Caliburn talk. Instead, Rob will take some of the features of this framework and demonstrate how to build them from scratch. This should be a must see for the people who want to understand what is involved in a MVVM application, and how to avoid taking a dependency on an external framework. Rob will also talk about additional topics not directly related to MVVM.

Laurent Bugnion’s “Understanding the Model-View-ViewModel Pattern”

In this talk, I will set primary focus on the Blendability, i.e. how to structure your application so that it works great in Expression Blend. For instance, how can you display “design time data” in Expression Blend, so that the designers have something to design against. I will also show some components included in my MVVM Light Toolkit and explain how they can help you solve some issues in your applications. My talk will apply to Windows Presentation Foundation as well as Silverlight.

To be noted

It is nice to note that Rob and I are not employed by Microsoft, but “just” enthusiast users of the technologies we will talk about. There is a great community around Silverlight and WPF, and it is interesting to note that most of the MVVM frameworks (at the exception of PRISM which is not directly an MVVM framework) originate from outside of Microsoft. Let’s spread the word: MVVM is the pattern of choice when you work in WPF or Silverlight. Come visit our sessions, your life as a developer will be changed!

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

Talking in Las Vegas: MIX2010 and MVVM

Laurent Bugnion — Tue, 19 Jan 2010 12:28:40 GMT

Update: The session is officially on. See the MIX10 website.

This morning, very early (or very late depending how you see it), I learned that one of the sessions I submitted to the MIX 2010 open call for speakers had been picked by the public. Out of 169 sessions, only 12 were picked, so you imagine my feelings right now. Honestly, I am sure that this will be a good session, but it could have gone either way, and I had prepared myself mentally for the alternative possibility too.

Understanding the Model-View-ViewModel pattern

The Model-View-ViewModel pattern (also called MVVM) is a hot topic in today’s Silverlight and WPF world. This pattern facilitates modern development techniques such as separation of concerns (decoupling), unit testing and test driven development, work with modern tools such as Visual Studio 2010, Expression Blend and more.

In this session, Laurent (a user and promoter of MVVM since 2006) will introduce this pattern to you with many demos. We will talk about the basic components of a modern Silverlight or WPF application, and of additional helpers that will make your life as a developer much easier.

MVVM at MIX

Interestingly, 3 of the 12 open call sessions picked by the audience have “MVVM” in the title. Rob Eisenberg’s “Build Your Own MVVM Framework” and Shawn Wildermuth’s “RIA Services and MVVM: It Can Happen!”, in addition to mine, should cover the topic in depth. After thinking about it, I decided I will contact Rob and Shawn to talk to them about their session, and try to avoid overlap.

On my end, I will probably shift the focus a little more on what MVVM brings you from a designer (well, integrator)’s point of view, and how you can leverage this pattern to create beautiful applications. I will also, of course, talk about the MVVM Light Toolkit, the open source toolkit I have been developing since last year, and which encounters a great success.

Send me your suggestions

I would love to hear if you have topics you would like to hear about during the session. I have a pretty good idea of what I will talk about, but let me know what is really important for you. What aspects of MVVM do you want me to focus on? What components of MVVM Light? Let me know, and I will adapt the content to include these topics!

I am very much looking forward to this session, and will see you in March at MIX!

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

MIX 2010: Voting for sessions has begun (I got two)

Laurent Bugnion — Wed, 06 Jan 2010 00:12:15 GMT

This year Microsoft decided to have an open call for sessions for the MIX 2010 in Las Vegas. This conference, in case you don’t know it yet, is a great 3 days about modern client technologies, such as ASP.NET, Windows Presentation Foundation and of course Silverlight. This year, MIX is taking place from the 15th to the 17th of March 2010 in the Mandalay Bay hotel in Vegas.

Today, the voting began! I didn’t count them, but there seems to be more than 100 sessions lined up, and the competition is fierce: Only 10 sessions will make the cut and be chosen for MIX. I just reviewed the speakers, and it is a pretty amazing line-up.

On my end, I submitted two sessions (see below). I honestly think that these two sessions will help the attendees become better developers in Silverlight and in WPF. The talks are based on years of experience with these two technologies, on real life projects.

A day in the life of a Silverlight/WPF Integrator

Vote here: http://visitmix.com/opencallvote/Entry?entryId=ADAYIN060

Abstract:

This session proposes an insight in the life of an integrator (sometimes called User Experience Developer or “Devigner”). How do we translate a creative designer’s vision into code, transforming it into interactive applications? What tools do we use, what tricks did we learn? This session will show you how to start from scratch and coordinate designers and developers to create a new rich application in Silverlight or Windows Presentation Foundation. We will see how to architect and structure the application according to the best practices in the field, and what workflows are involved. We will also see how to create and integrate XAML assets into the user interface. You will leave with a much better understanding on how the new integrator role is changing the way that client applications are developed.

You want to create beautiful applications? That’s what I do for a living, come and share the experience!

Having worked as an integrator for quite a few years now, in large distributed teams of developers and designers, I have identified many areas where the process is different from a classic application. The integrator role is a fairly recent role and many firms need guidance to understand how to start developing their Silverlight or WPF applications, and how to move from wireframes to design to development to testing.

We will also review the tools and the tips&tricks that make the life of an integrator easier. This is not just about Expression Blend, but about all the small helpers that facilitate the integration process.

Understanding the Model-View-ViewModel pattern

Vote here: http://visitmix.com/opencallvote/Entry?entryId=UNDERS103

Abstract:

From the maker of the MVVM Light Toolkit!

This talk is targeted at developers who keep hearing people talk about the Model-View-ViewModel pattern, but don’t quite know what it is, what it does, and how to get the best out of that. Again, few slides and a lot of code, as we will walk through the creation of a MVVM application and study the components that help separating the concerns in the application. We will also talk about external frameworks that help you creating new MVVM applications.

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

Using a Behavior to magnify your WPF applications

Laurent Bugnion — Sun, 05 Apr 2009 12: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!

Solving cross domain access problems (via Jon Galloway)

Laurent Bugnion — Mon, 30 Mar 2009 23:32:23 GMT

At my MIX09 and TechDays Belgium talk recently, I mentioned the issues that a Silverlight developer faces when trying to access a cross-domain web site. If the site has a clientaccesspolicy.xml (or crossdomain.xml) policy file in place, the call is allowed. If not, the call is rejected.

The solution, I mentioned, is to put a "gateway" in place to forward the call to the cross domain site. In my talk, I said that you could do that on your own web server, the server the Silverlight application is served from. Well, of course that works, but will add some load to your server (not even mentioning that you have to write the gateway yourself, which is not the nicest task).

Thankfully, others have thought about that, and apparently I had missed that my good friend Jon Galloway has a post back then in December that shows how to leverage Yahoo Pipes to act as a gateway from cross-domain access. Yahoo Pipes has a cross domain access policy file in place, so it will work.

Read Jon's article here!