WPF

A short break

Laurent Bugnion — Sat, 31 May 2008 11:34:38 GMT

I am going to take a short break of blogging for a couple of months. The reason is simple: I have been working on a book about Silverlight 2 since September last year, and we are in a phase now where I need to concentrate on that exclusively, and put other activities aside. I might post the occasional article from time to time, but until mid-Summer, it's going to be write write write.

Stay posted for news about the book coming up, and don't delete me from your feeds, it's really only temporary :)

My talk at the "Internet Briefing RIA conference" in Zurich

Laurent Bugnion — Thu, 29 May 2008 21:11:28 GMT

I just posted today's talk at the RIA conference in the World Trade Center, Zurich. Unfortunately it was not recorded, but the slides and the demos' source code is available on my site.

The talk went really good, even though the crowd was rather tough :) Trying to "sell" Windows Presentation Foundation, a desktop Windows-only technology, to an audience of web developers, many of them using Java and open source technologies (and even one Adobe employee) sparkled some very interesting discussions. I can't say I convinced everyone (and it was most certainly not my intention), but I think everybody had a really good time. I know for sure that I did!

To all those who stayed until the end of my presentation, and even though mine was the last presentation of the day, thank you very much!! To those who couldn't stay, I hope you'll have fun checking the slides and the demos, and contact me if anything is unclear!!

WPF talk this Thursday: "Ultra Rich Interactive Applications"

Laurent Bugnion — Tue, 27 May 2008 12:47:23 GMT

I have been in very much stress lately and hardly had time to post, but I don't forget you, dear readers...

Anyway, this Thursday, I will be talking in a RIA conference organized by the Internet Briefing group here in Zurich, in the World Trade Center. My talk is titled "Ultra Rich Interactive Applications with WPF" and subtitled "When Silverlight is not enough...". I think it's going to be an interesting talk (but obviously I am partial) about the major differences between WPF and Silverlight, and the added richness that WPF provides. I am a big fan of Silverlight, but I have to admit that it's nice going back to the amazing power of WPF sometimes, without having to worry about "is that feature even implemented in Silverlight"?

The talk takes place between 16:30 and 17:30 in the World Trade Center, Leutschenbachstrasse 95, 8050 Zürich. Hoping to see some of you there, maybe!

WPF: ListView/GridView minimum and maximum width for a column

Laurent Bugnion — Tue, 06 May 2008 17:05:12 GMT

A WPF ListView is a possible replacement for a datagrid, when it doesn't have to support advanced features like grouping or filtering of rows. If you use a ListView in your WPF application, and set the "View" property of this ListView to be a GridView.

A ListView/GridView even supports features like reordering and resizing columns. Unfortunately, it is not possible to define a minimum or maximum width for the columns. Fortunately, it is not really to do this in the code behind. Let's see how.

First we need to understand how exactly the resizing of a GridView column works. When a column can be resized, a narrow vertical line appears on the right side of the column. Passing the mouse over this line turns the cursor into a "resize" cursor.

To find out what exactly this line is made of, we can use a tool like Snoop, or Mole. These tools display the inner structure of a WPF UI, also known as the Visual Tree. For example, in Mole, we can navigate down to our ListView and display the header row's inner structure:

The feature that is of particular interest to us is the "Thumb" control, named PART_HeaderGripper. This requires some explanations:

A Drag action is the action through which a control is selected (click-and-hold) and then the mouse is moved. The expected action is usually that the clicked control moves together with the mouse, but other actions may be performed too, for example resizing the columns of a grid, etc...
A Thumb is a small WPF control that can be dragged. It has a collection of events that are used to program what happens when a drag action is performed on the control. For example, the event Thumb.DragDeltaEvent is fired every time that the Thumb is dragged a little.
Note: A Thumb doesn't really look like anything (well, it does look like a Rectangle!). With the great ability that WPF has to redefine the look&feel of any control, you can make a Thumb look like anything you need. This is why the Thumb control is in the namespace System.Windows.Controls.Primitives: The Thumb is usually used to create other controls, hence the "Primitives".
The makers of WPF controls have for convention to name inner controls of other controls with the "PART_" prefix.

Once we know this, we can try to intercept the events raised by the Thumb control named "PART_HeaderGripper", when the ListView's user resizes the columns. Remember, in WPF, events are "routed", we say that they "bubble" up from the control they originate from to the parent and the parent's parent, etc...

As a first try, we can add an event handler on the ListView and try to handle the "Thumb.DragDelta" event:

<ListView x:Name="MyListView"
          IsSynchronizedWithCurrentItem="True"
          ItemsSource="{Binding Path=Items,
                                Mode=Default,
                                Source={StaticResource DataProvider}}"
          Thumb.DragDelta="Thumb_DragDelta">

with:

void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
  // Do nothing for the moment
  Console.WriteLine("Thumb_DragDelta");
}

Unfortunately, if we place a breakpoint inside the Thumb_DragDelta event handler, it is never reached, not even if you resize any column of the ListView. Why not? Well, when a routed event is handled by any control, it can be marked as "handled". This is done by setting the RoutedEventArgs.Handled property to true inside the event handler.

Fortunately, there is a way to tell the framework that we are interested in an event even if it has been marked as handled. We cannot do this in XAML, however, so just remove the Thumb.DragDelta from the XAML:

<ListView x:Name="MyListView"
          IsSynchronizedWithCurrentItem="True"
          ItemsSource="{Binding Path=Items,
                                Mode=Default,
                                Source={StaticResource DataProvider}}">

Instead, we will add an event handler in code behind. This is one of the few things that you cannot do in XAML!

public Window1()
{
  InitializeComponent();

  MyListView.AddHandler(Thumb.DragDeltaEvent,
    new DragDeltaEventHandler(Thumb_DragDelta),
    true);
}

Notice that the last parameter of the AddHandler override is set to "true": This is what indicates that we want to get notified when the DragDelta event "bubbles" to us, even if it has been marked handled before it reaches us. This time, if you run the application and resize a column, the event handler is executed and the breakpoint is reached.

The last thing we need to do is to forbid the column to be resized under a minimum size, or above a maximum size. To do this, we need to do a few steps:

Get the Thumb at the origin of the event. This is not the "sender" parameter, because the event handler is placed on the ListView. So even though the routed event originates on the Thumb, the "sender" is actually the ListView. However, there is another way to get the Thumb: The parameter "e" (of type DragDeltaEventArgs), like all RoutedEventArgs, contains a property named "OriginalSource". This is the Thumb we want!
Then, we want to get the GridViewColumnHeader containing the Thumb. Here too, we need to understand how the visual tree is built. All controls in WPF are essentially lookless, and the look&feel is created in a ControlTemplate, which is separate. We can, however, get the parent's template using the TemplatedParent property.
We're almost there: Once we have the GridViewColumnHeader, all we need to do is get the Column it belongs to (conveniently exposed in the Column property), and set its Width to the minimum respectively maximum value we want to use. Translated in code, this is:

void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
  Thumb senderAsThumb = e.OriginalSource as Thumb;
  GridViewColumnHeader header
    = senderAsThumb.TemplatedParent as GridViewColumnHeader;
  if (header.Column.ActualWidth < MIN_WIDTH)
  {
    header.Column.Width = MIN_WIDTH;
  }
  if (header.Column.ActualWidth > MAX_WIDTH)
  {
    header.Column.Width = MAX_WIDTH;
  }
}

where MIN_WIDTH and MAX_WIDTH are two constants. We could as well use properties to be able to set these values from the outside.

With this code, the column will be resizable up to a certain limit, and then the Thumb will stop moving. While it requires a good understanding of the inner works of a WPF control, this is not very complicated. It requires some code-behind, however, and cannot be done in pure XAML.

I am now a Microsoft Certified Professional

Laurent Bugnion — Sat, 19 Apr 2008 01:29:57 GMT

What a crazy week that is. I am currently in Seattle for the Microsoft Most Valuable Professional summit, which ended yesterday. I took an additional day in Seattle to meet a few friends and Siemens colleagues, and this morning got an email notifying me that I passed the MCTS exam about WPF that I took back then in December.

Because the exam was in beta stage when I took it, Microsoft needed a veeeeeeeery long time to evaluate the replies and check if I met the requirement. Apparently, they also had issues finding volunteers to try the beta exam, so it took even longer than planned. But hey, everything happens when you wait long enough, and as of today I am a Microsoft Certified Professional.

Now I want to point again what I wrote in December: I am not quite sure about the value of the MCTS exams. You are not a good developer just because you learn answers by heart. Testing one's knowledge with multiple choice questions is really absurd, especially when it comes to programming. Additionally, in Europe, most firms I know of really don't care if you have a cert or not, and rather look to your credentials, experience and education, as well as things like involvement in the community, etc...

But hey, the exam was free, it was fun learning for it, and I got the title, so what am I complaining about? :)

De WPF Integratio (About WPF Integration)

Laurent Bugnion — Fri, 11 Apr 2008 20:38:56 GMT

Introduction

I've been posting a lot about Silverlight lately, but hey, here is a WPF post, and about WPF integration, no less.
Note: To fully understand this article, you should have a basic understanding of WPF, styles and templates, triggers, etc...

In my current project at work, I act as WPF Integrator. I am that dude who sits between the designers and the developers, and tries to avoid that they fight too much. Or something. Sometimes it works, sometimes it doesn't, you know how it is with kids. They need their freedom. But I digress.

One important task of a WPF Integrator is (drum roll) WPF integration. For us, this operation usually occurs when we have a design iteration. The way we create application components is (roughly) the following:

The Developer creates the component in Visual Studio. The component is composed of a main assembly (EXE or DLL), containing "functional XAML" and source code (code-behind), and a "Skins" DLL containing XAML resource dictionaries.
(Note: Because we don't want any source code into the "Skins" DLL, and to avoid circular references, we actually have a 3rd assembly called "Converters". As the name shows, this assembly contains the converters (and other helper classes) that are referenced from the Skins DLL).
Together with the WPF Integrator, they create a "raw" UI. That means a basic layout made of "functional XAML", according to the wireframes created by our user experience engineers.
(Note: "functional XAML" is the XAML code that is not strictly doing look&feel. For example, a Button tag is functional XAML, while the style and template it uses are "design XAML").
The WPF Integrator prepares the Skins DLL by exporting all styles to it (using Blend). We follow certain guidelines in naming all the components (styles, templates, DLL names, etc...) and also in the structure of the styles and templates (see below).
The Developers start what they do best, Developing. Meanwhile, the Designer do what they do best (let me hear you:) Designing! This is the Design iteration I was referring to before.
(Note: The Developer *only* works in the main assembly. The Designer *only* works in the Skins assembly.
If the Designer needs to change something in the main assembly, they contact the WPF Integrator to coordinate.
Similarly, if the Developer needs to change something in the Skins DLL, they contact the WPF Integrator to coordinate.
When a set of features are complete, the Developers' and Designers' work is integrated and tested.

Typically, we integrate the design to the application during design workshops, where a couple of Designers and Developers (and the WPF Integrator) sit together and work together, pretty much in an Extreme Programming spirit. These workshops are very intense and interesting, and usually allow fast progress in the application's look&feel.

Conventions, file structure, naming

A control refers to a Style which in turn refers to a Template (this is to facilitate the designers' job in Blend).
A control does *not* set its template directly, but always through a style.
If triggers are needed in the main assembly, the local style refers to a "BasedOn" style located in the Skins DLL.
A Style key is named like the control it refers to, suffixed with "Style". For example "MySpecificButtonStyle" or "ListBoxStyle" (for all ListBoxes), etc...
A Template key is named like the control it refers to, suffixed with "Template". For example "MySpecificButtonTemplate" or "ListBoxTemplate" (for all ListBoxes), etc...
(note: We use the "Template" suffix for ControlTemplate and DataTemplate).
The skin resources for a given control are stored in a resource dictionary file with the "Skin" suffix. For example, the control "MyUserControl"'s resource dictionary is named "MyUserControlSkin.xaml".

These guidelines help the designers to understand which Style and Template belong to which control. Note that Blend makes that task easier by allowing to navigate from the main assembly to the Skins assembly with a succession of clicks.

Typical Designer workflow

The very first task a designer must do when he gets the code is to understand its structure. This is where the conventions mentioned above help. Typically, they work this way:
(Note: You can download a sample application here, open the SLN file in Blend, and then open the main window (Window1.xaml))

Open the application's main window in Blend and check the logical tree.
If a user control is found, right-click on it and choose "Edit control" (fig 1). This opens the User Control XAML file in Blend.
(Of course, this fails if the User Control's source code is not available).
For any control they want to skin, select the control, and then choose the menu "Object / Style" (fig 2 and 3).
At this point, the style chosen can be local (for example if the Developer need to use a Trigger, etc. See listing 1). The Designers are trained to check the name of the file in which they are currently located (in Blend). If the file is named without a "Skin" suffix (for example MyPlugIn.xaml), they may not edit it. In that case, they look for a BasedOn style (fig 4). If they are currently located in a file with a "Skin" suffic (for example "MyPlugInSkin.xaml", then they may edit it (fig 5).
Once in the Style, they can select the context menu "Edit Control Parts (Template) / Edit Template". This opens the Control Template in Blend, where they can rework to look&feel of the control completely (including triggers, animations, etc...)

Figure 1: Edit control

Figure 2: Selecting a control

Figure 3: Edit style

<Button Content="GO"
        Grid.Column="1"
        Click="GoButton_Click">
  <Button.Style>
    <Style TargetType="Button"
           BasedOn="{StaticResource RoundButtonStyle}">
      <Setter Property="IsEnabled"
              Value="True" />
      <Style.Triggers>
        <DataTrigger Binding="{Binding ElementName=DirectoryNameTextBox,
                                       Path=Text}"
                 Value="{x:Static sys:String.Empty}">
          <Setter Property="IsEnabled"
                  Value="False" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Button.Style>
</Button>

Listing 1: Local style using a Trigger, Based On a skin style

Figure 4: Edit "based-on" style

Figure 5: Editing the style in the Skin file

Note: Here we see the advantage of setting the "Template" property in the Style instead of directly in the control: The Designer can see the "shape" of the control already in Blend, without having to rebuild.

Figure 6: Editing the template in the Skin file

The importance of Blend

This workflow would fail miserably without Blend. It can never be repeated often enough: You should keep your application Blendable! (as long as possible). Blend will fail to represent the UI in some circumstances. For example, if your application connects to a COM based component, this is something that Blend cannot handle. Similarly, if your application uses any kind of network service to get data, Blend won't be able to represent this data. This is where the MVVM (Model - View - ViewModel pattern comes handy: By enforcing a data-driven UI, you give the developer the possibility to create "design-time" data, i.e. data which is only used when the application runs in Blend (or in the Visual Studio WPF designer). I could talk about that for hours, and this jumps the scope of this post, but you can read more info about MVVM here:

John Gossman's blog.
Dan Crevier's blog.
Josh Smith's excellent article at CodeProject
Dr WPF's new Software Architecture Pattern: M-V-poo.
My presentation at TechDays 2008 in Basel (slides, source code).
And many more places on the web...

Using WinMerge as an integration tool

During these integration phases, I use WinMerge a lot. The reasons for using this merging tool are multiple:

It is probably the best merging tool currently available for Windows (if someone disagrees, don't hesitate to comment below!!).
Our Designers don't work in our source control infrastructure. They get a copy of the code, refactored as a standalone application. This allows them to test the application easily without having to install a whole networking system (our application is following a Service Oriented Architecture). The aplication they get features a test mode, allowing them to simulate certain conditions (again, see my TechDays talk and the source code for details). Because they work disconnected from the source control, a merging operation is needed.
The merging steps give me a good occasion to review the Designers and Developers work, and to understand it. This is an additional step towards code consistency and code quality (4 eyes review principle).

WinMerge is simply amazing, a must-use tool for a WPF Integrator (at least if you work according to a similar workflow as we do). It is free (amazing, when you see the quality of this tool), was clearly developed by people who needed such a tool and decided to create it (according to the "eat your dog food" idea), and can even be integrated into your favourite source control framework (yes, even ClearCase, which we are forced to use). You can compare folders, binary files, text files with a very clear user interface. All merging operations can be performed using the keyboard only, which is extremely ergonomic. Honestly, I love that tool.

By the way, I didn't mention it yet, but you can also edit both files you are comparing in WinMerge, and save both of them.

WinMerge, merging tool

Conclusion

Much has been written about the Designer-Developer workflow, the WPF Integrator role, the MVVM (or MV*) pattern, etc... In our project, we have the chance to use these principles in a real life situation. I can honestly say, I rarely had so much fun developing software ever. The only thing I can think of that made (almost) as much fun was the big ASP.NET project I worked on prior to this one. The Integrator role is a great place to be.

(Note: I also file this under Silverlight because WinMerge is also very useful for Silverlight integration, even though the Style and Template system is not as rich as in WPF yet).

TechDays 2008: Slides and Code of my presentation available online

Laurent Bugnion — Thu, 27 Mar 2008 19:46:20 GMT

The slides and demo source code of my presentation at TechDays last week are available online.
You will find:

Slides (Powerpoint 2007)
Source code (Visual Studio 2008 C#)
Download page

I hope that these documents will help you in your "quest for WPF". Let me know if you have questions or comments through the blog!!

TechDays 08: Talked about WPF and now back home

Laurent Bugnion — Thu, 20 Mar 2008 22:02:58 GMT

The Swiss edition of the TechDays 2008 is over. It was a great success,many people came, and as far as I can say, people had a good time. I didn't attend any sessions though, because I hung out in the main area instead and met a number of people (some of them I knew from MIX or other occasions), and talked talked talked. Yesterday evening, there was a party, I didn't stay too late though because I wanted to be well rested for my talk this morning.

My talk titled "Siemens goes WPF, Lessons learned" went great. It was in the first slot of the day, starting at 9. Many people came (I didn't count, but the room was 90% full, I'd say). People even laughed at my lame jokes (since no designers came to the session, I was free to joke about them, bwahaha :) Seriously, I regretted that no designers attended, but it's not very surprising. TechDays are rather developer-oriented (something I hope will change in the future, and Microsoft will open up and invite more designers soon).

I had a lot of positive feedback after the session, but if any of you who saw me want to comment more (and I definitely accept negative comments, don't be shy), feel free to use the feedback or to email me.

Thanks to all who attended, and thanks for the nice words!

TechDays 08: My talk next Thursday in Basel, Switzerland

Laurent Bugnion — Wed, 12 Mar 2008 06:44:16 GMT

Next week, on Wednesday the 19th and Thursday the 20th of March, the TechDays Switzerland will take place in the St. Jakobshalle in Basel. Apprently, it's sold out and they expect around 2300 people in 5 parallel tracks. Now that's kind of making me nervous, because I will be presenting a session on Thursday the 20th at 9AM!.

It's not the first time I'll be talking at a conference, but it's certainly the first time that so many people will attend, so... kind of nervous here :

The talk is called "Siemens goes WPF: Lessons learned" (in English, by the way) and is about the experiences that we made between when we introduced WPF in our project in 2006 and now, where we use it intensively in our project. I'll focus on the developer-designer interaction, the MVVM pattern, Blend and Visual Studio working together, and I'll show a demo of a "best practice" application we are using internally. Additionally, I'll talk about some social aspects of WPF (personal note to Nathan: If you still don't know what the social implications of WPF are, please feel welcomed to attend my talk next week :)

I really hope to see you (yes, you) next week, and that people will laugh at my lame jokes. No, seriously I hope it'll be interesting and fun and that we'll make this a memorable experience together!

Here's the abstract:

"Introducing WPF in a firm large or small brings a set of new challenges: Learning curve, new tools, new workflows and roles, new collaboration designer-developer, etc...

2 years ago, Siemens Building Technologies decided to take a close look at WPF, and to use it in a new project. With the help of top experts in the field, in and out of Microsoft, we identified some of the challenges and did our best to find appropriate responses. In this presentation, we will talk about technical but also social implications of using WPF, and how to make the transition as smooth as possible. We will also see some of the advantages of using WPF over classic technologies like WinForms or MFC."

#MIX08: Wrap-up post

Laurent Bugnion — Sun, 09 Mar 2008 20:16:06 GMT

MIX08 is over, and I am home with what one could call the "post-MIX" mood. It's a mix (pun intended, haha) of various feelings

Obviously I am extatic to be with my family again, even more so because I was away for almost two weeks, which I usually try to avoid. It's just so good to be with them again. I wish I could take them with me every time I am abroad.
Excitement about all the new things we saw. Thinking all the time of what I'll be able to improve in my various projects using these new techniques and resources. Lots of planning to do.
Planning in my head debriefings with various key people in my office and in my project.
And around all this, a regret that it's over already, and longing for MIX09. The value of this conference is much more than "just" the sessions. It's the people you meet, People I knew already and whom I don't get to meet in person much because of the physical distance. And also the people I met this year for the first time. There are people with whom you just "click", you could call that friendship at first sight (wink at Robbie, Nathan, Chad, Mark, Jonathan, James, Scott, Josh (Holmes), Josh (Waggoner), Rob, Grant, Dr.WPF, Ryan, Dave, Neil and so many others!! It was great to be with you all, guys)
And a slight, very slight regret not to be in SXSW (but I would have died inside to be so long away from Alise and Laeticia)

I am just so grateful for all the nice comments I heard and read about my blog and my site. It's always kind of awkward and slightly embarrassing to be praised (I guess that's a remainder of my humble swiss roots) but also so rewarding. It's a new reserve of energy for the year to come, fueling new ideas and new projects. I really want to thank all the people met either in real, through Twitter, through comments on my blog (or all of the above) for their kindness. The conversations were wonderful. You all gave me great insights and ideas. Now I just need 50 hours per day to work on them all.

A couple of highlights I will not forget:

A lunch-conversation with John Gossman, Rob Relyea, Mark Feinholz and Ted Hu. Honestly, I cannot remember what I ate. The talk was so rich and intense that all my attention was on it. Talking about the MVVM pattern, about the way Blend was built made me realize even more how revolutionary Blend is to client application development.
The dinner thrown by IdentityMine, including a short but great chat with Miguel.
Meeting Neil Rowe and "clicking" so well. Looking forward to a fruitful collaboration.
The lunch with James Clarke on the last day and the great discussion about Encoder and also mobile devices.
The impromptu meetings in the open space area.
The Twitter experience. Really helpful. I met so many people through this means.

The keynote with Steve Ballmer and Guy Kawasaki was great. I had never seen Steve nor Guy talk before, and I honestly didn't know what to expect. I am not a big fan of the "monkey" act, so I was kind of reserved about what I was going to see. It turned out that it was really, really great. I was amazed to see how much "on top of things" Steve is. How interesting and insightful his comments were. And also, beneath the ironic comments, the respect for Apple, Google, Adobe... Guy has it right when he talks of the new Microsoft, a message I always try to pass when I talk about my own collaboration with them. Microsoft is not in killer mode anymore, people (at least not the DevDiv). They are helpful, innovative, interested in what others do with their technology. Of course it's not perfect yet, but honestly, they have really come a long way, and they do it much better than many other companies (including our own Siemens) does. If only the journalists could get the message, stop the endless and fruitless bashing and give Microsoft's technologies the deserved attention. Of course it would need some work from their part, to even understand what these technologies are all about instead of simply rehashing the old messages.

MIX08 is done, let's look forward to MIX09: Wednesday, March 18 - Friday, March 20, 2008 at the Venetian Resort Hotel Casino in Las Vegas, Nevada