JAPF

The last couple of days, I’ve been busy writing an article about MVVM in French. I don’t know yet if I’ll translate it to English, but I’m sure I can share the demo application, and this is the goal of this post !

I think the best way to understand how things fit together is to explore the source code of the application.

It’s a very small demo because I wanted to demonstrate only a subset of MVVM facilities, so you’ll find:

• an easy way to work with commands in MVVM using Josh Smith RelayCommand class
• the power of the ICollectionView interface to implement navigation and search feature
• empty code-behind file for my views
• a base class for all my ViewModel objects (again, based on the work of Josh)

You can download the source code here. Enjoy

Article updated ! I find out that the Command property of the KeyBinding class is not a DependencyProperty… This prevent using the syntax I wanted (binding to an ICommand exposed in the ViewModel). There are several workarounds you can find across the web (using a MarkupExtension, an attached properies…) but because I didn’t have much time, I finally put some glue in my code-behind ;(

I’m still playing with MVVM those days and today, I needed a simple behavior I didn’t know how to do with MVVM. I finally found a simple solution and as I love them, it’s 100% XAML :p

The problem is simple, I have a ListBox where the user can type date in it.
When the User Validate his input, I need to process the text entered and return another value.
The User can validate the input by pressing the Enter key while the TextBox has the focus.

My first attempt was the subscribe to the KeyUp event, and in the code-behind, delegate the work to the associated ViewModel class. I don’t like that solution a lot (events handler in code-behind are sort of ugly…).

I know I could define an ICommand in my ViewModel and do the work directly there (using the excellent RelayCommand class written by Josh Smith). The problem was how to trigger this command when the Enter key is pressed. well, actually it’s pretty simple:

1
2
3
4
5
6
7
8

    <TextBox Text="Hello world" Width="100" Height="40">
        <TextBox.InputBindings>
            <!-- update: we cannot use Binding to the Command property as it's not a DP -->
            <!-- workarounds exist such a MarkupExtension, AttachedProperty... ->
            <!-- personally, I did that in the code behind to make it works :( -->
            <KeyBinding Command="{Binding ProcessInput}" Key="Enter"/>
        </TextBox.InputBindings>            
    </TextBox>

As I updated the article (because Command is not a DP), I finally did the same thing in C# in the code-behind…

Recently, while discussing a WPF issue on a forum, I discovered that some people didn’t know anything about the Model-View-ViewModel pattern. I’m not an expert of MVVM as I discovered it a couple of months ago. I started to use it on my first real project at work, which involve a pretty big application using advanced TreeView, Ribbon, on-demand graphic creation, a C++ kernel, datagrid, etc. The MVVM pattern helps me to keep my design as clean as possible. In this post, I’d like to give you some of the aspects of the MVVM pattern, and useful links across the web.

If you find yourself:

• having huge .xaml.cs code behind file
• using event handler (such as Click…) everywhere
• tweaking TreeViewItem (using ItemContainerGenerator for example) to manipulate a TreeView
• having tons of IValueConverter
• … then MVVM might come to the rescue :p

What MVVM can offer?

• a clean and well defined separation between the Model and the View
• the possibility to easily leverage the power of WPF: databinding, commands, validation, and more
• a code that is testable
• an organization that facilitate the workflow between designers and developers
• minimalist code-behind file (which leads to testable code)
• facilitate the deployment of an application in multiple environment (WPF / Silverlight)

How is that possible?

Here is a part of the introduction of John Gossman:

“In simple examples, the View is data bound directly to the Model. For example, a boolean in the Model can be data bound to a CheckBox, or a string field to a TextBox. In practice however, only a small subset of application UI can be data bound directly to the Model, especially if the Model is a pre-existing class or data schema over which the application developer has no control.
The Model is very likely to have a data types that cannot be mapped directly to controls.  Finally we need a place to put view state such as selection or modes.
The ViewModel is responsible for these tasks.  In this latter role the ViewModel contains data-transformers that convert Model types into View types, and it contains Commands the View can use to interact with the Model.”

• The View has the associated ViewModel set as its DataContext so that the View can easily data bind to ViewModel properties
• The ViewModel reflects its changes to the Model by calling appropriate methods on the Model
• The ViewModel exposes ICommand that the View data bind to, in order to execute actions
• The Model signals its changes to the ViewModel by raising events

What are good resources to start working with MVVM?

• Karl Shifflett started a series about MVVM, you can find his work here.
• Karl and Josh Smith wrote a very nice application that uses MVVM pattern. Moreover the application contains also information about internalization support. Check out the CodeProject article here.
• Karl wrote an article about a very important concept: user input validation. This is the first article of his new MVVM series.
• WPF architect, John Gossman wrote a series of blog post about MVVM on his blog. An introduction to MVVM is available and a good point to start.
• Josh Smith wrote an excellent tool, Crack.Net which is built using MVVM. Crack.Net is hosted on CodePlex, and studying the source code is a very good manner to understand how stuff fits together in the MVVM world.
• Josh Smith wrote an article about applying MVVM concepts to the WPF treeview. If you must work with a complex treeview, then you MUST read this article.
• Marlon Grech wrote an article about ICollectionView. ICollectionView is a useful interface that can be used in ViewModel classes to keep track user selection

If you never heard about MVVM, or never take the time to look at it, I suggest you to take a look at some of those links. Trust me, the investisment worth it !

I’ve been waiting for a long time for this, and Karl Shifflet finally did it !

Karl is a WPF guru, and he just started a new series of articles on Model-View-ViewModel. Here is his own introduction: “My goal is to provide an introduction, several simple examples and progress to a series of WPF LOB scenarios where M-V-VM is used.  Scenarios like, dialog box, simple form, master – detail, complex master detail with several embedded ViewModels, etc.”

I’m sure this series will very soon become the reference to learn MVVM. His first article is about validating the user input in a concise and agile way. Right now, I can’t give more details because I just start to read the article, but I’ll try to give my feedback as soon as possible.

As you might already know, I’m a big fan of the Model-View-ViewModel pattern. I’m using it extensively on the current I’m working on at work. Today I had to face a simple problem that was tricky to solve.

In the application I’m building, I have a “Library panel”. This panel contains a set of items that are used in my application. Because the number of items can be very large, I decided to add a filter capability. Filtering to a collection is very straightforward once you get familiar with the ICollectionView interface. If you want more details about it, check out Marlon’s blog post about it.

To give the user the possibility to filter the items, I added a ComboBox control. Of course, because I’m using the MVVM pattern, I’m not creating the ComboBoxItem myself, the databinding mechanism of WPF handle this (to be precise, the databinding handles collecting the item, and the ComboBox handles the creation of the ComboBoxItem to wrap them…).

The problem

In my ViewModel, I create a ObservableCollection<string> property that I called “Categories”.Then, in my view (XAML), I databound the ComboBox’s ItemsSource property to this “Categories”. Ok, it works fine and took me about 10min to do it.

Now, I want to add separator between some ComboBoxItem… Hmmm, how should I do that… I cannot do combobox.Items.Add(something) anymore because the ItemsSource property is databound… Well, I could as something in my ViewModel, but what ?

My solution

I wanted to keep the logical information about where Separator are in the ViewModel. This is typically an example of something that should stays in the ViewModel. I decided to add an empty items in my ObservableCollection for every Separator I wanter to have in the view.

In the view, I set up an ItemContainerStyle for my ComboBoxItem. The tricky part is, how could I replace my ComboBoxItem with a Separator… Well actually, we can’t. But what we can do is to change the entire template of the ComboBoxItem when the content is empty:

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

        <ComboBox ItemsSource="{Binding Categories}">
            <ComboBox.ItemContainerStyle>
                <Style TargetType="{x:Type ComboBoxItem}" BasedOn="{StaticResource {x:Type ComboBoxItem}}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding}" Value="">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                                        <Separator HorizontalAlignment="Stretch" IsEnabled="False"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ComboBox.ItemContainerStyle>
        </ComboBox>

And voila ! It works fine and keeps the logic in the ViewModel. If you have any other idea about how we can solve this issue, please feel free to comment