Expression Blend

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

Quick tip: Commenting out properties in XAML

Laurent Bugnion — Mon, 01 Feb 2010 17:26:05 GMT

Often when you write XAML, you wish you could ignore a property temporarily. In code, it is easy to do: Just comment out the line where the property is set, and you are good to compile.

LayoutRoot.Background = new SolidColorBrush(Colors.Red);
//LayoutRoot.DummyProperty = "Ignored";
/* LayoutRoot.Another = "Ignored too"; */

In XAML it is not so easy, because XML (of which XAML is a dialect) does not have line comments, but only block comments. You can comment out a whole XAML element, but not just one property.

<!--<ThisBlockIsIgnored Hello="World"
                    Again="Blah">
    <Label Content="No parse" />
</ThisBlockIsIgnored>-->

<TextBlock Text="This is parsed"
   Tag="This too"
   <!--DummyAttribute="No parse"-->
   Margin="10"/>

This last blocks creates an error.

Commenting single properties in XAML requires just a little more initial work, but then it is very easy:

In the root tag, add a new xmlns statement to import the Open XML markup compatibility elements:

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

Then, add another xmlns statement mapping a prefix of your choice (I like to use “ignore”) to an URI of your choice (for example “http://www.galasoft.ch/ignore”). Note that this URI does not need to point to anything on the web. This is just a unique resource identifier, something like a unique ID.

xmlns:ignore="http://www.galasoft.ch/ignore"

Finally, use the mc:Ignorable property to set the new prefix as ignorable.

mc:Ignorable="ignore"

Note: If you already had one ignorable prefix defined (for example the “d” prefix that Expression Blend and the Visual Studio designer use), no problems. Just add the new prefix to the Ignorable list with a space to separate the prefixes.

mc:Ignorable="d ignore"

The XAML parser honors the Ignorable property and will simply ignore any value prefixed by one of the prefixes defined in the list. Do not however use the Blend “d” ignorable prefix, because this has a special meaning for Blend and Visual Studio designer. The way described here defines a brand new prefix without any additional meaning. The “ignore” prefix can be used for properties or for whole blocks (including their content):

Single property:

<TextBlock Text="This is parsed"
   Tag="This too"
   ignore:DummyAttribute="No parse"
   Margin="10"/>

Whole block:

<ignore:ThisBlockIsIgnored Hello="World"
                    Again="Blah">
    <Label Content="No parse" />
</ignore:ThisBlockIsIgnored>

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

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

Silverlight 4: Drag&drop with EventToCommand

Laurent Bugnion — Thu, 17 Dec 2009 16:49:31 GMT

One of the MVVM Light Toolkit’s user requested that I add the possibility to pass the EventArgs of an event to the ICommand that it is bound to through the EventToCommand trigger. At first I was a bit reluctant because it seems like a transgression of the rule that says you should avoid to have too much knowledge about the UI layer in the ViewModel. For example, if you have a RelayCommand in the ViewModel that expects a MouseEventArgs, it kinds of binds you to a certain kind of UI element, which is not super clean.

That said, I also understand that in some cases it might be useful to get the EventArgs down in the ViewModel, which is why I decided to add this possibility (available from V3/alpha 3).

And in fact, as I was testing it, I just got another request from my good friend Laurent Kempé (one of the early and enthusiastic users of MVVM Light) to help use EventToCommand in the case of a drag&drop operation in Silverlight 4. That was the perfect test case for this new feature.

Note: Laurent wrote a post in French describing a drag&drop implementation.

Resources

The source code for this sample is available here. The MVVM Light Toolkit’s DLLs are also included (V3/alpha3). This code is for Visual Studio 2010 beta 2 and/or Expression Blend Preview for Silverlight 4.

You can optionally install the MVVM Light Toolkit V3/alpha3 from the Installing Manually page.

More info about the MVVM Light Toolkit is available on the Get Started page.

Creating a drag&drop enabled Silverlight application

Let’s start by creating a new MVVM Light application in Silverlight 4. In the moment the process of installing the project templates is manual, but it should be easy enough if you follow these instructions.

You can create a new MVVM Light application for Silverlight 4 in Visual Studio 2010 or in Expression Blend Preview 4. Simply choose File, New Project and then select the template called MVVM Light (SL4).

We need to define a drop target for the files in the application. This can be done for just any UI element, so you can choose the main Grid (if you want the whole application to be a drop target) or any other element. In our case, to keep things simple, let’s define the main Grid as the drop target.

Set the property AllowDrop to True, either in XAML or in Blend. Also change the other properties as shown in XAML below.
Note: We will implement the DroppedFileContent property in a moment.

<Grid x:Name="LayoutRoot"
      AllowDrop="True"
      Background="#FF9F9F9F">
    <TextBlock FontSize="36"
               FontWeight="Bold"
               Foreground="Purple"
               Text="{Binding DroppedFileContent}"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               TextWrapping="Wrap"
               TextTrimming="WordEllipsis" />
</Grid>

Open the MainViewModel and add a bindable property.
Note: If you have the MVVM Light Toolkit installed, you can use a code snippet for this: Type mvvminpc then tab to expand the snippet, and enter the property’s name, tab, its type, tab and the name of the attribute. Then, edit the code until it looks like the one below:

/// <summary>
/// The <see cref="DroppedFileContent" /> property's name.
/// </summary>
public const string DroppedFileContentPropertyName = "DroppedFileContent";

private string _droppedFile = "Drop file here";

/// <summary>
/// Gets the DroppedFileContent property.
/// Changes to that property's value raise the PropertyChanged event. 
/// </summary>
public string DroppedFileContent
{
    get
    {
        return _droppedFile;
    }

    set
    {
        if (_droppedFile == value)
        {
            return;
        }

        _droppedFile = value;
        RaisePropertyChanged(DroppedFileContentPropertyName);
    }
}

Add a RelayCommand<DragEventArgs> property to the MainViewModel. Name this property HandleDropCommand. You will need to add GalaSoft.MvvmLight.Command, System and System.Windows to the “using” section.

public RelayCommand<DragEventArgs> HandleDropCommand
{
    get;
    private set;
}

Finally, in the constructor, initialize the HandleDropCommand. We will start by simply showing a MessageBox when a file is dropped.

public MainViewModel()
{
    HandleDropCommand = new RelayCommand<DragEventArgs>(e =>
    {
        System.Windows.MessageBox.Show("Drop");
    });
}

Add an EventToCommand trigger to the main Grid. This element is part of the GalaSoft.MvvmLight.Extras DLL which is referenced by default in the MVVM Light project template, so if you start like we described here, you don’t need to do anything to use EventToCommand. If you start from a non MVVM Light application, you need to add a reference to GalaSoft.MvvmLight.dll, GalaSoft.MvvmLight.Extras.dll and System.Windows.Interactivity.dll
Make sure you get the V3/alpha3 version.
Make sure you reference the binaries from C:\Program Files\Laurent Bugnion (GalaSoft)\Mvvm Light Toolkit\VS10\Binaries\Silverlight).
- Build the application to make sure that you have the latest stand loaded in Blend.
- In Blend, open the Assets tab, select the EventToCommand from the Behaviors category and drag/drop it on the LayoutRoot grid.
- Then set the EventName property to “Drop”.
- Bind the Command property to the HandleDropCommand in the MainViewModel which is the Explicit Data Context of the main Grid.
  Note: To open the databinding editor, press the advanced properties widget (the small black square) next to the Command property, and select Data Binding from the context menu.

Finally, check the PassEventArgsToCommand checkbox.
Note: The combination of having an argument of type EventArgs in the RelayCommand, and the PassEventArgsToCommand property set to true will cause the event’s EventArgs to be passed directly to the RelayCommand’s parameter.

If you do not have Blend, you can also add the EventToCommand in Visual Studio in XAML:
- In the MainPage.xaml file, add two namespaces to the UserCommand tag:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"

Then, add the EventToCommand trigger within the LayoutRoot grid with the following XAML code:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Drop">
        <cmd:EventToCommand Command="{Binding HandleDropCommand, Mode=OneWay}"
                            PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

Test the application: In Blend, press F5, or in Visual Studio press Ctrl-F5. Then, drag a file, and drop it on the main Grid. Notice how the mouse cursor indicates that the Grid is a valid drop target.

Drop the file. You should see the MessageBox proving that the RelayCommand has been called successfully.

Getting and handling the files

Now that we have the RelayCommand ready, let’s access the DragEventArgs and get the file content from there. In this sample example, we will accept TXT files, and display the first few words from the file content.

Replace the call to MessageBox within the HandleDropCommand implementation with the following code:

if (e.Data == null)
{
    return;
}

var files = e.Data.GetData(DataFormats.FileDrop)
    as FileInfo[];

// This works with multiple files, but in that
// simple case, let's just handle the 1st one
if (files == null
    || files.Length == 0)
{
    DroppedFileContent = "No files";
    return;
}

var file = files[0];

if (!file.Extension.ToLower().Equals(".txt"))
{
    DroppedFileContent = "Not a TXT file";
    return;
}

using (var stream = file.OpenRead())
{
    using (var reader = new StreamReader(stream))
    {
        // Read the first line
        var line = reader.ReadLine();
        DroppedFileContent = line;
    }
}

Few notes about this code:

You can get a reference to the files dropped on the target with the DragEventArgs.Data.GetData method.
Note however that since we are in Silverlight within the security sandbox, you will get a security exception if you try to access the file’s FullName. You may get the content of the file (because it is dropped by the user) but not additional information about where these files are located.
In this example, we get only the first file, but it is easy to see how we could access all the files dropped.
We do handle only TXT files in this example.
Reading the file’s content is done in an usual way, with a Stream and a StreamReader. Note the presence of the “using” statements, to make it easier (no need to explicitly close and dispose the stream and the reader). For binary files, we would use a BinaryReader, etc…

An issue with Visual Studio 2010

In the course of preparing this article, I noticed an issue in Visual Studio 2010 when I attempt to debug the HandleDropCommand implementation. Even with a breakpoint placed within the code, the debugger does not break. I am not sure right now what is the reason, and the code does get executed, but this complicates debugging of course. I am investigating and talking to Microsoft about that, but right now I am not sure where it comes from.

Conclusion

In the MVVM pattern, we generally try to avoid putting too much code in the code behind because it complicates the developer-designer workflow. Though I am not a puritan about that :) I think that EventToCommand and the new PassEventArgsToCommand property are reasonable steps to make UI interaction such as drag&drop even easier to code.

Hope you like it :)

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

MVVM Light V3/alpha3 for Blend 3 and Blend Preview 4

Laurent Bugnion — Sat, 05 Dec 2009 09:06:12 GMT

The project and item templates allowing you to create pre-wired MVVM Light applications are now also available for Expression Blend 3 and Expression Blend Preview for .NET 4 and Silverlight 4. The installation process is manual, but not difficult at all (unzipping a few files to predefined paths). I did document the installation process here.

Of course the templates are also available for Visual Studio 2008 and Visual Studio 2010, as well as the binaries. The source code is available on Codeplex.

I still have one feature I want to add in V3, and then I will create a release version. Seeing how my schedule is, it will probably be during the holidays. However, V3/alpha 3 is very stable and I didn’t get any error report from users who upgraded. I also don’t think there will be any breaking change. At this point, I would recommend users who want the new features to upgrade to V3.

I will post a list of new features in this version later.

Happy coding!

MVVM Light V3 in Blend Preview for .NET 4 and Silverlight 4

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

MVVM Light Toolkit V3 Alpha 3 for WPF4/SL4

Laurent Bugnion — Mon, 30 Nov 2009 22:56:14 GMT

Update: The templates are also available for Expression Blend 3 and Expression Blend Preview for .NET 4 and Silverlight 4.

I just published the latest alpha version of the MVVM Light Toolkit. I will post more about the new features in this alpha version, but the most exciting is probably that with this release, the MVVM Light Toolkit works in Windows Presentation Foundation 4 and in Silverlight 4 (in Visual Studio 2010).

There is no automatic installer for this version yet, but I wrote a page describing how to install manually (it is as easy as unzipping a few files). All the features are also available for Visual Studio 2008 as usual.

The source code was also updated on the Codeplex website.

More documentation will follow soon so stay tuned. In the mean time, have fun with MVVM in WPF4/SL4!

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

My talk at #notatpdc postponed

Laurent Bugnion — Thu, 19 Nov 2009 20:16:05 GMT

Hey guys,

I am really sorry for having to postpone my talk about Expression Blend 3 and SketchFlow. We had some huge difficulties with the NotAtPDC.com website, and unfortunately we were not able to locate the site administrator on time to solve the issue. Without a speaker login, I was able to talk to the attendees, but not share my desktop. Now I love to talk about Blend but I love even more to show Blend ;)

Ironically, as a Microsoft MVP I do have a LiveMeeting account, so I would be able to host the talk myself, but organizing a LiveMeeting take a little time, and I didn’t want to rush into that, cut my talk short or step on the next speaker’s feet (let’s hope that the issues get solved in time for him!)

We will definitely reschedule the talk, either within NotAtPDC (if we find a suitable time slot) or a bit later, so definitely stay tuned on this blog and my twitter feed for more info.