JAPF

A couple of weeks ago, I started a series of articles about WPF internals organization. In the first article I did a tour of the core WPF classes. In this second part, I’m reviewing the organization of the various controls that exist in the framework.

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

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.

It’s finally online after a long work.I hope my french readers will enjoy it:  http://japf.developpez.com/tutoriels/dotnet/mvvm-pour-des-applications-wpf-bien-architecturees-et-testables/

Here is the abstract translated to english:

“Inch by inch, the WPF technology is being adopted by .Net developers as a development platform for next generation user interfaces. This changeover is taking time and complicated because WPF changes principles that are well known until now in the process of designing a user interface. The Model-View-ViewModel methodology helps formalize WPF developement by giving guidance that leads to apps cleary architectured, testable, and by optimizing the workflow between developer and designer.”

Getting back to work this morning, I opened my Google Reader to have a look at the RSS feeds I’m reading.

I found a nice video on Channel9: “XAML Guidelines, Part 2”. The first episode, where Jaime Rodriguez interviews 3 people from Identity Mines is also available on Channel9 (unfortunately, the sound is rather poor on this episode…).

This time, Jaime meets up with Unni Ravindranathan from the Expression Blend team. During the shot, they open the Blend source code project inside Blend (sounds nice isn’t it :p). Unni explains the structure of the project, their conventions, how resources are used, etc.

I think Blend is an application we can learn a lot from. If you’re also interested to understand what architecture Blend uses, you can check out this post from Paul Stovell.

Here are some notes I took while watching the video:

• Blend is shipped with 2 themes: Expression Light & Expression Dark
• Blend resources are stored in (only !) 3 resources dictionaries
• Resources are categorized into Colors, Brushes and Styles
• Blend defines a set of margins and thicknesses that are used in the entire application to ensure a consistency across the different layouts
• By convention, Name and Key properties are always defined first in the XAML
• Properties might be spitted over several lines, if this is the case; properties are grouped together by types (style, size, appearance…)
• Blend 3 will add extensibility and improve XAML code generation:
  - Name will always be the first property
  - Better control over how the XAML is formatted
• Name everything versus name nothing? Blend names almost everything, it helps UI automation
• Static resources versus dynamic resources? No big performance impact, Blend mostly uses dynamic resources
• When design time doesn’t work fine in Blend
  - An exception can occur when Blend is creating the control because the running process is Blend itself and not the application we are creating
  - Add tests to check if code is running in design mode (you can use System.ComponentModel.DesignerProperties.GetIsInDesignMode(DependencyObject) method)
  - Debug Blend process by attaching an instance of Visual Studio to Blend
• Blend is a big application:
  - 300 000 lines of XAML
  - 500 000 lines of C#

If you want more information about fixing error that we can have in Blend (while the application works properly at run time), you can check out this post of Jaime.