1
2
3
4
5
6
7
8
9
10
11
12
13

[Required(ErrorMessage = "Field 'FirstName' is required.")]
public string FirstName
{
    get
    {
        return this.firstName;
    }
    set
    {
        this.firstName = value;
        this.OnPropertyChanged("FirstName");
    }
}

Of course the article comes with a nice demo application:

You can read the full article here: Attributes-based validation in a WPF MVVM application

Actually and as you already know if you can write XAML like Text={Binding …} it is only because Text is a Dependency Property. Also, dependency properties are defined in a static way (so that if you have 50 textboxes you don’t have to instantiate 50 times the Text property). The default behavior for the mode of the binding (TwoWay, OneWay, etc.) can be found in the static declaration of the dependency property. For example, in the case of the Text property of the TextBox we have:

1
2
3
4
5
6
7
8
9
10
11
12

TextProperty = DependencyProperty.Register(
	"Text", 
	typeof(string), 
	typeof(TextBox), 
	new FrameworkPropertyMetadata(
		string.Empty, 
		FrameworkPropertyMetadataOptions.Journal 
		| FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
	new PropertyChangedCallback(TextBox.OnTextPropertyChanged), 
	new CoerceValueCallback(TextBox.CoerceText),
	true, 
	UpdateSourceTrigger.LostFocus));

The interesting part here if of course the BindsTwoWayByDefault option. Note that this is the only default option available (we can’t have a OneWayToSource binding by default).

To this:

Of course, selection must work properly:

I asked a question on StackOverflow about this control because I didn’t find any easy way to do it. I though at the beginning that playing with the templates of the TreeView and TreeViewItem would do the trick but it didn’t.

The solution I finally choose involves creating multiple ListBox and wire them together using DataBinding:

• I create a new CustomControl which inherits Control (I couldn’t use neither Selector or TreeView because I wouldn’t have been able to manage the SelectedItem property from the derived class)
• In the template of this CustomControl is an ItemsControl. This ItemsControl has its ItemTemplate property set to a DataTemplate containing a ListBox.
• The CustomControl has a Depth property of type int. This property indicates the number of ListBox that should be generated.
• The CustomControl automatically databound ListBoxes together: each ListBox’s ItemsSource property is databound to the SelectedItem’s children property of the previous ListBox in the visual tree.
• The CustomControl has a SelectedItem property and a SelectionChanged event (like Selector-derived class).
• I added an IsReallySelected attached property to the ListBoxItem which are generated. This enables to databing an IsSelected property of the ViewModel class behind the control with the IsSelected of the ListBoxItem. I had to create an attached property because its value is true when the ListBoxItem is selected AND the parent ListBox has IsSelectionActive set to true.

Here is the result:

You can download the source code of this sample (VS2010 RC solution).

Because the image of the diagram is pretty big, I decided to use Silverlight DeepZoom and the result is just below this text You can download the full image resolution here. Please use the full screen button in the upper right corner of the viewer for the best browsing experience.

Here are general remarks that might help you get information from those diagrams.

The top level Control class:

• Defines general UI properties such as Background, Foreground, BorderBrush and BorderThickness
• Defines a set of properties to control font rendering: FontFamily, FontSize, FontStyle…
• Has a DoubleClick event (other mouse events such as MouseUp/MouseDown comes from the UIElement class)

Below the Control class, we have (this list is not complete):

• The ContentControl class: those controls have… a single Content
• The ItemsControls class which handles a collection of child controls
• The TextBoxBase class which is the parent of TextBox and RichTextBox
• The RangerBase class which handles a range (minimum, maximum) and which is the parent of the ScrollBar, Slider and ProgressBar classes
• The Thumb class which has the ability to be dragged over a surface

Below the ContentControl class we can find many existing WPF controls:

• ButtonBase and its child: Button, ToggleButton and RepeatButton
• Label (see this post for an explanation of the differences between a Label and a TextBlock)
• ListBoxItem and its children: ListViewItem, ComboBoxItem
• ScrollViewer
• HeaderedContentControl, a ContentControl that has both a Content and a Header. This is the case of the Expander, GroupBox and TabItem controls
• Tooltip
• Window
• UserControl

General other remarks:

• It’s funny to see that both Window and UserControl inherits from ContentControl. Before doing the diagram I though that Window came from somewhere else
• Having those diagrams in mind (or on a screen !) is very useful when you need to create your own custom control
• We can see the differences between creating a custom control (inherit from Control or derived class) and a UserControl (inherit from UserControl)
• .Net4 will introduce new controls (not in this diagram) in the WPF framework such: DataGrid, Calendar, TimePicker

January

• XAML guidelines: interviews of WPF masters
• photoSuru: a WPF application with spectacular user experience
• Model-View-ViewModel, Commands and InputBindings
• Filtering with or without ICollectionView ?
• Why do I love Extension Methods in System.Linq ?
• Using extension methods to raise an event

February

• Very simple MVVM demo application
• VS2010 UI

March

• French article about MVVM posted !
• Thinking with MVVM: Data Templates + ContentControl
• MIX09 starts today !
• First look at Expression Blend 3 !
• The future of WPF at Mix09

April

• Adding transitions to a MVVM based dialog

May

• Browse your codebase like a pro with ReSharper
• Visual Studio 2010: Beta1 available with .Net4 and WPF4 included
• .Net4, WPF4 and VS2010 interesting links

July

• BezierSegment demo application

August

• Learn how .Net manages memory in 15min
• WPF possible memory leak with EventManager.RegisterClassHandler

September

• How to close a View from a ViewModel ?

October

• A quick tour of existing MVVM frameworks
• The cost of building Visual Trees
• Announcing the “WPF internals” series
• Analyzing events usage using a R# plugin
• WPF internals part 1 : what are the core WPF classes ?
• VS2010 Beta 2 coming today !
• How to measure rendering time in a WPF application ?

November

• Using Snoop to take a look at VS2010 !
• PDC09: some announcements
• PDC09: some WPF sessions are available !
• PDC09: Advanced WPF Application Performance Tuning
• PDC09 : How VS2010 was built with WPF ?
• Discover and compare existing MVVM frameworks !

Today I’m proud to announce the MVVM frameworks Silverlight application (click the image to open the Silverlight3 page).

A couple of observation:

• please contact me via this blog or twitter if you find incorrect information
• I’m not judging anybody’s work by giving rating, it’s just my personal feeling to have an easiest way to sort the data

Hope you’ll like it

In my last blog post, I did a review of a PDC09 Session “Advanced performance tuning with WPF”. Today, I’m doing a review for another very interesting session “How VS2010 was built with WPF ?”. The video is available here.

Why did Microsoft choose WPF for VS2010 ?

• Technological: prove the capabilities of WPF4
• Architectural
  • Separated presentation
  • Support for long range road map (+10 years)
• Key VS2010 features need it: Editor, Architecture Editor, Parallel tools debugging
• Take an opportunity to give feedback for WPF4: when VS2010 development started, .Net 3.5 SP1 was just shipped and it was the right time to give feedback for the new features and fixes for WPF4.

It is worth noting that VS2010 is a project that is being watched carefully inside Microsoft. We can expect that more Microsoft applications will move to WPF in the next coming years.

What WPF features are used ?

• Declarative UI using XAML
• Databinding
• Styles and templates
• Application Resources
• Interop Win32 (because they did not have the time to rewrite everything using WPF or because features doest not need to use WPF for example de WinForms designer…)
• Integration with the message loop (to deal with particular focus issues)
• New text stack (part of WPF4) based on DirectWrite

Staged approach

• Define data models: a huge diagramming and architectural exercice
• Replace the main window with WPF (only the window not its content !) to start the mix approach (managed/unmanaged, WPF/Hwnds)
• Write new managed components: Window manager, command bar presentation
• Scout with other VS teams
• Test, Test, Test…

What were the challenges ?

• Mixed mode application: native and managed code; WPF and HWNDs (Win32 or WinForms)
• Keep existing extensions working and allow new extensions to take advantage of WPF
• Don’t “stop the train” other teams were working at the same time on the product to add new functionalities
• Text clarity
• Performance
• Focus management

You can watch the session here if you want more detail and demos of what I mention in this post.

The first approach is to measure the elapsed time needed to instantiate and populate the control from C# code. We can use the StopWatch class to have a precise and easy to use measuring tool.

1
2
3
4
5
6
7
8
9
10
11

Stopwatch sw = new Stopwatch();
sw.Start();
 
for (int i = 0; i < 5000; i++)
{
  // here is the operation that fills the control
  this.canvas.Children.Add(new Rectangle());
}
 
sw.Stop();
MessageBox.Show("Took " + sw.ElapsedMilliseconds + " ms");

However this approach will not give good results because we’re not taking into account the time needed to render elements in the visual tree. This is because elements are not rendered when you call the Add methods (for example in a Canvas) but when the visual tree is fully loaded.

A much better approach is to use the Dispatcher and request it to process an action at a priority right bellow the Render priority which is the Loaded priority:

Using this trick, we ensure that all rendering actions have been completed. We can use the following code to do that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Stopwatch sw = new Stopwatch();
sw.Start();
 
for (int i = 0; i < 5000; i++)
{
  // here is the operation that fills the control
  this.canvas.Children.Add(new Rectangle());
}
 
this.Dispatcher.BeginInvoke(
  DispatcherPriority.Loaded,
  new Action(() =>
  {
    sw.Stop();
    MessageBox.Show("Took " + sw.ElapsedMilliseconds + " ms");
  }));

Hope this helps !

Knowing the organization of WPF classes is important when we create a new control because we have to determine which base class we’re going to use. It is also interesting to know how the framework has been designed. That’s the goal of this first article.

Here is an image of the core WPF classes and how they are related (click for larger resolution):

The diagram is voluntary simple above the Control classes because that will be targeted by another article.

As you problably know the WPF engine manages 2 trees: the logical tree and the visual tree. For each logical item (that you declare in the XAML), the item is expanded with its visual tree (for example, a scrollbar is made of RepeatButtons and a Thumb). To visualize the visual tree you can use a tool like snoop.

In a diagramming tool, you might want to draw lines betweeen entities, like the following:

In this article, we’re going to talk about the underlying control that we can use to do that. If you need to create that kind of control, you basically have 2 options:

• inherits from Control and override the OnRender method to do the basic graphic operations (such as drawing a line or an ellipse)
• inherits from Control and create a ControlTemplate to fill the visual tree of your control

Of course the first option has better performance, but it’s also less evolutive. Moreover, in the OnRender method, you can only do low level graphic operations.

Using the second option is generally fine and easy:

1. create the class that inherit from Control
2. create a style that targets your new control
3. add a Setter to set the ControlTemplate property
4. fill the ControlTemplate’s content

Here is a sample ControlTemplate for a basic connection (assuming that the Connection class has 4 double dependency properties (X1,Y1) (X2,Y2) that defines that start and the end point):

1
2
3
4
5
6
7
8
9
10
11
12

<Style TargetType="{x:Type VisualTreePerf:Connection}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type VisualTreePerf:Connection}">
          <Line X1="{TemplateBinding X1}" Y1="{TemplateBinding Y1}"
                  X2="{TemplateBinding X2}" Y2="{TemplateBinding Y2}"
                  Stroke="Black" StrokeThickness="2">                                
          </Line>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Of course this is a very minimal template, you’re probable going to improve it by adding new features:

• 2 rectangles to show the extremities of the connection
• 2 thumb to be able to drag’n'drop the extremities
• 1 context menu to access connection’s operations

You can do that by adding more controls to the template. Now, take a second and think about the performances. Time is needed to built and render the visual tree and the most complex it is, the longer it takes. I did a quick benchmark on my machine and here are the results for 500 connections added in a Canvas:

What we can see is that adding only 5 controls in the template, we multiply the rendering time by 4 ! That means we must be careful when we’re designing ControlTemplate that are going to be instantiated many time. Before creating the control we should think about whether the control is going to by displayed 1, 10, 100 or 1000 times in our application. More complex ControlTemplates mean more time to render them. Several techniques can be used to improved performance:

• use a panel that supports UI virtualization (such a VirtualizingStackPanel)
• use adorners to give feedback while an item is selected to improve creation performance (create the Adorner only when the item is selected)

To explore other performance related techniques:

• for ItemsControl, make sure to check out Charles Petzold excellent article on MSDN Magazine
• for a virtualized canvas, check out this blog post