sparky.dasrath

[2011.02.21] ReSharper C# snippet for MVVM ViewModel Property creation

2011-02-21T20:37:00.001-05:00

Here is a simple C# snippet for ReSharper (should work on most versions) to simplify the creation of ViewModel properties. It is clear that creating properties in the ViewModel can be a tedious and repetitive process, especially when there are several involved. To create the snippet, you need to add a new Live Template in R#.

In Visual Studio under the ReSharper menu item, select LiveTemplates... and you will see Fig. 1.

Fig.1 The Template Explorer window

Under the User Templates node, select the New Template option from the toolbar and you will be taken to the Template creation page. Here you can enter the shortcut used to toggle the snippet and a description. I used vmp (ViewModel Property) for my shortcut here. Simply copy and paste the code below into the window and I will explain the changes you need to make.

private $TYPE$ _$NAMEFIELD$;
$END$
public $TYPE$ $NAME$
{
    get {return _$NAMEFIELD$; }
    set
    {
        if(_$NAMEFIELD$ == value) return;
        _$NAMEFIELD$ = value;
        OnPropertyChanged("$NAME$");
    }
}

The artifacts enclosed between dollar signs ($) can be thought of as variables that you can replace once the snippet has been activated. If we follow the naming convention of labeling fields starting with an underscore and all properties begin with uppcase letter, you will see that if you leave things the way they are as in Fig. 2, you will not get the anticipated result.

Fig.2 Editing the template

This is where the options in the right pane of the Template window comes into play. There are built in macros to help us get the correct set up. We want the $NAME$ to basically be like $_NAMEFIELD$ but without the underscore and the first letter must be upper case. So click the "Choose macro" option next to the NAME identifier in the right pane and from the list, as in Fig. 3, select:
Value of another variable with the first character in upper case

Fig.3 Macro selection

After that, the Template window will look like Fig. 4. Note that we have not yet based the $NAME$ on the $_NAMEFIELD$ variable yet.

Fig.4 After setting the macro

Now click the another variable link and you will get a dropdown list to select which variable $NAME$ should use as its basis. This is shown in Fig. 5.

Fig.5 Relating variables

Your snippet is now ready for action!

NOTE: OnPropertyChanged should be replaced by whatever method name you used when you implemented INotifyPropertyChanged. For instance, you may have called yours RaisePropertyChanged instead of OnPropertyChanged, so modify the snippet to best suit your needs.

[2011.01.06] Drag and Drop in WPF using MVVMLight [IV/IV]

2011-01-06T19:42:00.005-05:00

This is a multipart series outlining several topics is WPF.

Part 1: MVVM via the MVVMLight framework
Part 2: Drag and Drop
Part 3: The Adorner
Part 4: DataTemplateSelector, StyleSelector, Unit Testing

In this final part, I will outline some other features that supplement the application and provides a better user experience. This was done primarily as a demonstration of the features, namely DataTemplateSelector and StyleSelector.

The Data Template Selector

You use a DataTemplateSelector to display data from the same collection differently, based on some criteria in the data. For example, the Contact type has a property, Crew, which is a Faction enumeration. Please take a look at the Contact class in the code to download to see the definitions. In this case, I will use different DataTemplates based on which Faction each member belongs to. The different templates are defined in the ResourceDictionary1.xaml file.

You need to inherit from from the DataTemplateSelector base class and override the SelectTemplate() method. This is all illustrated in Listing 1.

    1 using System.Windows;
    2 using System.Windows.Controls;
    3 using DragDropUsingMvvmLight01.Model;
    4 
    5 namespace DragDropUsingMvvmLight01
    6 {
    7     /// <summary>
    8     /// Extended class used to change the data template of each ListBoxItem based on some custom requirement. 
    9     /// </summary>
   10     public class FactionDataTemplateSelector : DataTemplateSelector
   11     {
   12         public override DataTemplate SelectTemplate(object item, DependencyObject container)
   13         {
   14             var frameworkElement = container as FrameworkElement;
   15 
   16             if (frameworkElement !=null && item is Contact )
   17             {
   18                 Contact contact = item as Contact;  // Contact is the type hosted in each ListBoxItem
   19 
   20                 if (contact.Crew == Faction.Strawhat)
   21                     return (DataTemplate)frameworkElement.TryFindResource("SourceListBoxItemTemplate");
   22                 return (DataTemplate)frameworkElement.TryFindResource("SourceListBoxDataTemplate02");
   23             }
   24             return null;
   25         }
   26     }
   27 }

Listing 1: Implementation of a DataTemplateSelector

The Style Selector

The reason and strategy follows the same pattern as in the template selector case, so I will just add the code to Listing 2 and let you take it from there.

    1 using System.Windows;
    2 using System.Windows.Controls;
    3 using DragDropUsingMvvmLight01.Model;
    4 
    5 namespace DragDropUsingMvvmLight01
    6 {
    7     /// <summary>
    8     /// Extended class used to change the style of each ListBoxItem based on some custom requirement. 
    9     /// </summary>
   10     public class ListBoxStyleSelectors : StyleSelector
   11     {
   12         public override Style SelectStyle(object item, DependencyObject container)
   13         {
   14             FrameworkElement frameworkElement = container as FrameworkElement;
   15 
   16             if (frameworkElement != null && item is Contact)
   17             {
   18                 Contact contact = item as Contact; // Contact is the type hosted in each ListBoxItem
   19 
   20                 if (contact.Crew == Faction.Strawhat)
   21                     return (Style)frameworkElement.TryFindResource("SourceListBoxItemStyle1");
   22                 return (Style)frameworkElement.TryFindResource("SourceListBoxItemStyle2");
   23             }
   24             return null; 
   25         }   
   26     }
   27 }

Listing 2: Implementation of a StyleSelector

Unit Testing

I am brand spanking new at this. I only did tests for the Contact model as I was not sure how to test the view models. I used NUnit as my testing framework. Thus far, I did not have to use any stubs or mocks. See Listing 3 for the code.

using System.Collections.ObjectModel;
using NUnit.Framework;
using DragDropUsingMvvmLight01.Model;

namespace DragDropUsingMvvmLight01.Tests
{
   [TestFixture]
   public class ContactTests
   {
       private Contact _contact = null;
       private ObservableCollection<Contact> _contacts;

       #region Setup
       [SetUp]
       public void Setup()
       {
           _contact = new Contact();
           _contacts = _contact.GetContacts();
       }
       #endregion

       [Test]
       public void GetContacts_ReturnValueIsNotNull_ReturnsTrue()
       {
           Assert.That(_contacts, Is.Not.Null);
       }

       [Test]
       public void GetContacts_IsTypeofContact_ReturnsTrue()
       {
           Assert.That(_contact, Is.InstanceOf<Contact>());   
       }

       [Test]
       public void GetContacts_HasAtLeastOneItemInCollection_ReturnsTrue()
       {
           Assert.That(_contacts.Count, Is.GreaterThanOrEqualTo(1));
       }

       [Test]
       public void GetContacts_ObjectIsInGoodState_ReturnsTrue()
       {
           var contact = _contacts[0];
           var firstNamePropertyIsNotNullOrEmpty = contact.Name;
           var lastNamePropertyIsNotNullOrEmpty = contact.Alias;
           var phonePropertyIsAValidNumber = contact.Race;
           var profileImageUrlPropertyIsNotNullOrEmpty = contact.ProfileImageUrl;
           Assert.That(string.IsNullOrEmpty(firstNamePropertyIsNotNullOrEmpty), Is.False);
           Assert.That(string.IsNullOrEmpty(lastNamePropertyIsNotNullOrEmpty), Is.False);
           Assert.That(phonePropertyIsAValidNumber, Is.Not.NaN);
           Assert.That(string.IsNullOrEmpty(profileImageUrlPropertyIsNotNullOrEmpty), Is.False);

       }

       #region Teardown
       [TearDown]
       public void Teardown()
       {
           _contact = null;
       }
       #endregion      
   }
}


Listing 3: Unit tests for the Contact model

The code looks mangled here due to a width of 460px and the long names of the test methods.

[2011.01.06] Drag and Drop in WPF using MVVMLight [III/IV]

2011-01-06T19:37:00.004-05:00

This is a multipart series outlining several topics is WPF.

Part 1: MVVM via the MVVMLight framework
Part 2: Drag and Drop
Part 3: The Adorner
Part 4: DataTemplateSelector, StyleSelector, Unit Testing

The Adorner

To provide a custom visual when doing the drag and drop, you can create an adorner. The look and feel of it can be anything you want, from a simple rectangle to something more complex. In this scenario, I want the dragged item to look exactly like the real item. First, recall that I am dragging the content of a ListBoxItem, not the actual ListBoxItem itself. The content of the ListBoxItem is a Contact type that is displayed using a DataTemplate. Think about how the Contact is shown in the ListBoxItem - if you look at the template in Blend, you will see as in Fig. 1, that each ListBoxItem contains nothing more than a Border and a ContentPresenter. This means that you can put whatever you want to be displayed in the ContentPresenter, which in this case will be a DataTemplate

Fig.1 A ListBoxItem template

Based on that, we can make the adorner a ContentPresenter also and just fill it with the appropriate DataTemplate when doing the drag. You first need to inherit from Adorner. Because you are creating a custom adorner, the doesn't know much about it, so you have to instruct the system how to size and lay it out on the screen. You do this by overriding several methods and a property. These are all shown in Listing 1.

    1 using System.Windows;
    2 using System.Windows.Controls;
    3 using System.Windows.Documents;
    4 using System.Windows.Media;
    5 
    6 namespace DragDropUsingMvvmLight01
    7 {
    8     /// <summary>
    9     /// An extended adorner class used to attach a visual element to a ListBoxItem as it is being dragged.
   10     /// </summary>
   11     public class DraggedAdorner : Adorner
   12     {
   13         private readonly ContentPresenter _contentPresenter;
   14         private readonly ListBoxItem _listBoxItem;
   15         private Point _updatedMousePosition;
   16 
   17         public DraggedAdorner(UIElement adornedElement) : base(adornedElement)
   18         {
   19             _contentPresenter = new ContentPresenter();
   20 
   21             _listBoxItem = adornedElement as ListBoxItem;
   22             if (_listBoxItem != null)
   23             {
   24                 _contentPresenter.Content = _listBoxItem.Content;
   25                 _contentPresenter.ContentTemplateSelector = _listBoxItem.ContentTemplateSelector;
   26             }
   27             _contentPresenter.Opacity = 0.7;
   28         }
   29 
   30         protected override Size MeasureOverride(Size constraint)
   31         {
   32             _contentPresenter.Measure(constraint);
   33             return _contentPresenter.DesiredSize;
   34         }
   35 
   36         protected override Size ArrangeOverride(Size finalSize)
   37         {
   38             _contentPresenter.Arrange(new Rect(finalSize));
   39             return finalSize;
   40         }
   41 
   42         protected override Visual GetVisualChild(int index)
   43         {
   44             return _contentPresenter;
   45         }
   46 
   47         protected override int VisualChildrenCount
   48         {
   49             get { return 1; }
   50         }
   51 
   52         public override GeneralTransform GetDesiredTransform(GeneralTransform transform)
   53         {
   54             GeneralTransformGroup generalTransformGroup = new GeneralTransformGroup();
   55             generalTransformGroup.Children.Add(new TranslateTransform(_updatedMousePosition.X, _updatedMousePosition.Y));
   56             return generalTransformGroup;
   57         }
   58 
   59         public void UpdateAdornerPosition(Visual elementToGetAdornerLayerFrom, Point updatedPosition)
   60         {
   61             // save the new position of the mouse that is passed in as an arguement as you drag the adorner 
   62             _updatedMousePosition = updatedPosition;
   63             var adornerLayer = AdornerLayer.GetAdornerLayer(elementToGetAdornerLayerFrom);
   64             if (adornerLayer != null)
   65                 adornerLayer.Update(AdornedElement);
   66         }
   67     }
   68 }

Listing 1: The DraggedAdorner class

The constructor of the DraggedAdorner class takes the element that is to be adorned. We need that to extract information from that we want to add to this adorner - namely it's content. Notice that the ContentTemplateSelector property was also set. This was done because I have multiple DataTemplates that are used based on some custom logic. I will go into that later.

As its name implies, the UpdateAdornerPosition() method will take the current mouse position and call the Update() method. Notice in the GetDesiredTransform() method, I am adding a TranslateTransform to the transform group. This is what will update the position of the adorner as it is moved across the screen.

Adding and removing the adorner as the application runs is provided by utility methods in the MainViewModel class as shown in Listing 2.

  145 #region Helper Methods
  146 
  147         /// <summary>
  148         /// Adds an adorner to an element. 
  149         /// </summary>
  150         /// <param name="elementToAdorn">Element to add an adorner to.</param>
  151         /// <param name="elementToGetAdornerLayerFrom">Element to get the AdornerLayer from.</param>
  152         /// <example>In the case of the ListBox, if you want to adorn each ListBoxItem and the adorner layer of the 
  153         /// containing ListBox is used, then the adorner object gets clipped as it is moved out of the ListBox. In this case,
  154         /// you need a layer that is higher up the visual tree to allow the adorner to be visible anywhere and not be clipped.
  155         /// </example>
  156         public void AddAdorner(UIElement elementToAdorn, Visual elementToGetAdornerLayerFrom)
  157         {
  158             // get the adorner layer to attach the adorner to
  159             var adornerLayer = AdornerLayer.GetAdornerLayer(elementToGetAdornerLayerFrom);
  160             _draggedAdorner = new DraggedAdorner(elementToAdorn);
  161             adornerLayer.Add(_draggedAdorner);
  162         }
  163 
  164         /// <summary>
  165         /// Removes an adorner from an element.
  166         /// </summary>
  167         /// <param name="adornedElement">The element that has an adorner associated with it.</param>
  168         /// /// <param name="elementToGetAdornerLayerFrom">Element to get the AdornerLayer from.</param>
  169         public void RemoveAdorner(UIElement adornedElement, Visual elementToGetAdornerLayerFrom)
  170         {
  171             var adornerLayer = AdornerLayer.GetAdornerLayer(elementToGetAdornerLayerFrom);
  172             var adorners = adornerLayer.GetAdorners(adornedElement);
  173 
  174             if (adorners == null) return;
  175 
  176             var dragAdorner = adorners[0] as DraggedAdorner;
  177             if (dragAdorner != null)
  178             {
  179                 adornerLayer.Remove(dragAdorner);
  180             }
  181         }
  182         #endregion

Listing 1: Methods to add and remove a DraggedAdorner

So at this stage there is an adorner and ways to add, update its position and remove it from the application. In addition, Part 2 of this series suggests where to perform each of these operations.

[2011.01.05] Drag and Drop in WPF using MVVMLight [II/IV]

2011-01-05T23:52:00.010-05:00

This is a multipart series outlining several topics is WPF

Part 1: MVVM via the MVVMLight framework
Part 2: Drag and Drop
Part 3: The Adorner
Part 4: DataTemplateSelector, StyleSelector, Unit Testing

Drag and Drop

MSDN has a section called Drag and Drop Overview but as far as I can tell, it only outlines what to do with the data you are moving around. You can also get more D&D info from:

Jaime Rodriguez - Drag and Drop in WPF Explained End to End Part 1 Part 2 Part 3
Bea Stollnitz - How can I drag and drop items between data bound ItemsControls?
Clarity Consulting - WPF Drag and Drop Between ItemsControls
Code Project - WPF Drag-and-Drop Smorgasbord
Marlon Grech - Drag Drop using Listboxes Part 1 Part 2
Chrisitan Mosers - Drag and Drop in WPF

Christian Mosers's post on WPF Tutorial.net has the steps you need to follow to do Drag and Drop. I did mine slightly differently and I will list (re-hash) the steps he outlined basically, but for my scenario.

Determine if you are initiating a drag/drop operation either as a combination of MouseLeftButtonDown and MouseMove or just MouseLeftButtonDown as I have done.
Determine what data is to be dragged and store that in a DataObject by passing in a format and the data to the constructor. See MSDN's Drag and Drop Overview for more information regarding DataObject.
Add adorner: If you want to provide rich visual feedback during the drag operation, adding an adorner can be done at this stage.
Call the static DragDrop.DoDragDrop() passing in the source of the drag (a ListBoxItem in this case), the actual data to be dragged and an appropriate DragDropEffects enumeration [see MSDN].
Note: Steps 1-4 can all be done in the MouseLeftButtonDown handler as I have outlined in the demo.
Set the AllowDrop property on elements that you want to be able to drop on. In this case, I made both the source and target ListBoxs droppable. The property is set in the MainWindow.xaml file.
Handle either the DragEnter or DragOver event. Test in this handler if you are passing over an element that has it's AllowDrop property set and that is accepts the type of data that is being dragged. Do this check by calling the GetDataPresent() method on the DragEventArgs parameter.
Update Adorner: If you are using a custom adorner, this is a good place to update its position on the screen as it is dragged around.
Finally, handle the Drop event when the user releases the mouse button. If the drop is done on a target that is expecting it and the correct data format is used, then retrieve the dragged DataObject and do whatever you need to with it at this point. You get the data by accessing the Data property on the DragEventArgs parameter and calling the GetData() method.
Remove Adorner: If you are using a custom adorner, once the drop is complete, this is a good place to remove it.

Fig. 1 shows what the application looks like.

Fig.1 Drag and Drop

Let's take a closer look at each of the main points in the drag and drop operation. Listing 1 shows the markup with the ListBox elements and the associated events that necessary for D&D. Notice the use of the EventToCommand behavior here.

   36 <ListBox x:Name="dragSource" 
   37          Grid.Row="1"
   38          MinWidth="100"
   39          MinHeight="40"
   40          Margin="0,0,0,0"
   41          AllowDrop="True"
   42          Background="AliceBlue"
   43          ItemContainerStyleSelector="{DynamicResource styleSelector}"
   44          ItemsPanel="{DynamicResource SourceListBoxItemsPanelTemplate}"
   45          ItemsSource="{Binding Contacts}"
   46          ItemTemplateSelector="{DynamicResource dataTemplateSelector}"
   47          Style="{DynamicResource ListBoxStyle1}">
   48     <i:Interaction.Triggers>
   49         <i:EventTrigger EventName="PreviewMouseLeftButtonDown">
   50             <cmd:EventToCommand Command="{Binding PreviewMouseLeftButtonDownCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   51         </i:EventTrigger>
   52         <i:EventTrigger EventName="DragOver">
   53             <cmd:EventToCommand Command="{Binding DragOverCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   54         </i:EventTrigger>
   55         <i:EventTrigger EventName="Drop">
   56             <cmd:EventToCommand Command="{Binding DropSourceCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   57         </i:EventTrigger>
   58     </i:Interaction.Triggers>
   59 </ListBox>
   60 
   61 <Border Grid.Row="2" Height="20" />
   62 
   63 <TextBlock Grid.Row="3" 
   64            Background="White"
   65            FontSize="18"
   66            Text="Listbox to drop to" />
   67 
   68 <ListBox x:Name="dropTarget" 
   69          Grid.Row="4"
   70          MinWidth="100"
   71          MinHeight="117"
   72          Margin="0,0,0,0"
   73          AllowDrop="True"
   74          Background="#FFE4F3FD"
   75          ItemContainerStyleSelector="{DynamicResource styleSelector}"
   76          ItemsPanel="{DynamicResource SourceListBoxItemsPanelTemplate}"
   77          ItemsSource="{Binding TargetContacts}"
   78          ItemTemplateSelector="{DynamicResource dataTemplateSelector}"
   79          Style="{DynamicResource ListBoxStyle1}">
   80     <i:Interaction.Triggers>
   81         <i:EventTrigger EventName="Drop">
   82             <cmd:EventToCommand Command="{Binding DropTargetCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   83         </i:EventTrigger>
   84         <i:EventTrigger EventName="DragOver">
   85             <cmd:EventToCommand Command="{Binding DragOverCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   86         </i:EventTrigger>
   87     </i:Interaction.Triggers>
   88 </ListBox>

Listing 1: Markup showing the ListBoxs and the events used for Drag and Drop

Steps 1-7: Drag

The PreviewMouseLeftButtonDown is a good place to determine if you want to begin a drag operation. The logic of what happens in this event is shown in Listing 2. In this case, I want to drag the data in a ListBoxItem, so first I needed to get a reference to the ListBoxItem that fired the mouse event as shown in Lines 76-77.

   72 PreviewMouseLeftButtonDownCommand = new RelayCommand<MouseButtonEventArgs>(
   73                     e =>
   74                     {
   75                         // get dragged listbox
   76                         ListBox listBox = e.Source as ListBox;
   77                         ListBoxItem listBoxItem = VisualHelper.FindAncestor<ListBoxItem>((DependencyObject)e.OriginalSource);
   78 
   79                         // set up shared states
   80                         _listBoxItem = listBoxItem;         // adorned element
   81                         _topLevelGrid = GetTopLevelGrid(e); // element to get an adorner layer from higher up the logical tree than the listboxitem
   82 
   83                         // Find the data behind the listBoxItem
   84                         if (listBox == null || listBoxItem == null) return;
   85 
   86                         Contact contact = (Contact)listBox.ItemContainerGenerator.ItemFromContainer(listBoxItem);
   87 
   88                         AddAdorner(listBoxItem, _topLevelGrid);
   89 
   90                         // Initialize the drag & drop operation
   91                         DataObject dragData = new DataObject("myContactData", contact);
   92                         DragDrop.DoDragDrop(listBoxItem, dragData, DragDropEffects.Move);
   93                     }
   94                 );

Listing 2: Command to deal with the dragging part of the operation.

In Line 77, I am using a helper method to actually pinpoint the correct ListBoxItem as shown in Listing 3. To create a DataObject, I first needed to grab the data contained in the ListBoxItem as shown in Line 86 by calling the ItemFromContainer method on the ItemContainerGenerator property of the ListBox. In Line 88, the adorner I used to help visualize the dragging operation is added. Lines 91-92 creates the DataObject to be dragged and then call the DoDragDrop method.

    1 using System.Windows;
    2 using System.Windows.Media;
    3 
    4 namespace DragDropUsingMvvmLight01
    5 {
    6     /// <summary>
    7     /// Walks up the visual tree to find the ancestor of a given type.
    8     /// </summary>
    9     internal static class VisualHelper
   10     {
   11         /// <summary>
   12         /// Recursive method to walk up the visual tree to return an ancestor type of the supplied type.
   13         /// </summary>
   14         /// <typeparam name="T">Type of ancestor to search for.</typeparam>
   15         /// <param name="current">Type to start search from.</param>
   16         /// <returns></returns>
   17         internal static T FindAncestor<T>(DependencyObject current) where T : DependencyObject
   18         {
   19             do
   20             {
   21                 if (current is T)
   22                 {
   23                     return (T)current;
   24                 }
   25                 current = VisualTreeHelper.GetParent(current);
   26             } while (current != null);
   27             return null;
   28         }   
   29     }
   30 }

Listing 3: Helper method to find an element up the visual tree hierarchy.

Notice that both ListBoxes refer to the same DragOver event. This is because in both cases, all I am doing is checking to see if the dragged item is over an element it can drop on and at the same time, update the position of the adorner as it is moved across the screen. See Listing 4 for all this fun stuff

   96 DragOverCommand = new RelayCommand<DragEventArgs>(
   97                 e =>
   98                     {
   99                         if (!e.Data.GetDataPresent("contact"))
  100                         {                          
  101                             e.Effects = DragDropEffects.None;
  102                         }
  103 
  104                         var currentMousePosition = e.GetPosition(_topLevelGrid);
  105 
  106                         if (_topLevelGrid != null && _draggedAdorner != null)
  107                             _draggedAdorner.UpdateAdornerPosition(_topLevelGrid, currentMousePosition);
  108                     }
  109                 );

Listing 4: Checking for a viable drop target and updating the adorner position.

Steps 8-9: Drop

Each ListBox raises its own version of the Drop event. Lines 111-122 deals with the expected case of dragging and dropping from source to target. First, check the DragEventArgs parameter to see if there is data there in the format we are expecting. This is shown in Line 114. If there is correct data, then simply update the collections of Contact items that is data bound to the respective ListBox. If there is a successful drop, then at this point, remove the adorner.

In Line 125 which deals with the case of doing a drag/drop on the source ListBox, there isn't much to do other than remove the adorner. See all this in Listing 5.

  111 DropTargetCommand = new RelayCommand<DragEventArgs>(
  112                 e =>
  113                     {
  114                         if(!e.Data.GetDataPresent("myContactData")) return;
  115                         Contact contact = e.Data.GetData("myContactData") as Contact;
  116 
  117                         _targetContacts.Add(contact); // add to new collection
  118                         _contacts.Remove(contact);    // remove from source collection
  119 
  120                         // pass in the root grid since its adorner layer was used to add ListBoxItems adorners to
  121                         RemoveAdorner(_listBoxItem, _topLevelGrid);
  122                     });
  123 
  124             // if dropping on the source list, remove the adorner
  125             DropSourceCommand = new RelayCommand<DragEventArgs>(e => RemoveAdorner(_listBoxItem, _topLevelGrid));

Listing 5: The drop operation.

[2011.01.04] Drag and Drop in WPF using MVVMLight [I/III]

2011-01-04T22:28:00.014-05:00

This is a multipart series outlining several topics is WPF

Part 1: MVVM via the MVVMLight framework
Part 2: Drag and Drop
Part 3: The Adorner
Part 4: DataTemplateSelector, StyleSelector, Unit Testing

I was given a task to do a simple demo on Drag and Drop in WPF. That's it, just plain vanilla D&D - well except for using a DataTemplateSelector and a StyleSelector. However, the same time, I wanted to learn and add to it, namely using an existing MVVM framework and Test Driven Development(TDD) or at least some bastardization of it. I figure one unit test at least is better than none and was a step in the right direction. I hadn't done D&D before so I had to spend some time seeing what others had done before.

In this demo, I will basically drag from one ListBox to another. Both the source (item dragged from) and target (item dragged to) ListBoxes will have the their respective ItemTemplateSelector and ItemContainerStyleSelector properties set to the same ResourceKeys, respectively. That is, both boxes will look and behave the same.

Design and Architecture

Basically, I will follow the Model-View-ViewModel patten here. I wouldn't spend time going into the details of the pattern as there is enough literature on it out there to sink a few ships. However, rather than re-invent the wheel at each and every step, I decided to use the MVVMLight framework on this demo. I chose MvvmLight because it is pretty popular and based on videos and podcasts with Laurent, I wanted to try it out as it provides some nice helpers to make the development of a Mvvm based application much smoother:

INotifyPropertyChanged is already implemented in a ViewModelBase class
RelayCommand
Designer support in WPF (wraps the GetIsInDesignMode() method in an IsInDesignMode property)
EventToCommand behavior to pipe a non-click based Command to handlers in the ViewModel
Messenger to communicate between multiple views and view models
a deterministic way of cleaning up

Going along with Mvvm, I will have a Model which is the data layer, the View which is the presentation layer and the ViewModel which sits between the View and Model. In Mvvm, the view does not have a direct reference to the model and references flow in a single direction:
View -> ViewModel -> Model. This means the model knows nothing of the view.

The Model

This is a simple, static piece of data in this case. The actual Contact implements the IContact interface which has a single method called GetContacts() which returns an ObservableCollection of Contacts. I used an interface here to add some flexibility to the code, specifically, to use Dependency Injection to inject an instance of a type that implements IContact in the constructor of the view model. I have not actually done so in this case as it was not necessary. These are shown in Listings 1 and 2.

    1 using System.Collections.ObjectModel;
    2 
    3 namespace DragDropUsingMvvmLight01.Model
    4 {
    5     /// <summary>
    6     /// Contract depicting the state and behavior of what a Contact is in this context.
    7     /// </summary>
    8     public interface IContact
    9     {
   10         /// <summary>
   11         /// Retrieves a collection of Contact types.
   12         /// </summary>
   13         /// <returns>An ObservableCollection of Conctact types.</returns>
   14         ObservableCollection<Contact> GetContacts();
   15     }
   16 }

Listing 1: The interface that is the basis for what a Contact is

    1 using System.Collections.ObjectModel;
    2 
    3 namespace DragDropUsingMvvmLight01.Model
    4 {
    5     public class Contact : IContact
    6     {
    7         #region Private Fields
    8         private ObservableCollection<Contact> _contacts;
    9         private const string ImgPath = @"images/";
   10         #endregion
   11 
   12         #region Properties
   13         public string Name { get; set; }
   14         public string Alias { get; set; }
   15         public string Race { get; set; }
   16         public string Status { get; set; }
   17         public string ProfileImageUrl { get; set; }
   18         public Faction Crew { get; set; }
   19         #endregion
   20 
   21         public Contact(){}
   22 
   23         public ObservableCollection<Contact> GetContacts()
   24         {
   25             return _contacts = new ObservableCollection<Contact>
   26                                          {
   27                                        new Contact{Name = "Monkey D. Luffy", Alias = "Straw-Hat", Race = "Human", Status = "Captain", ProfileImageUrl = ImgPath + @"luffyLogo.jpg", Crew = Faction.Strawhat},
   28                                        new Contact{Name = "Roronoa Zoro", Alias = "Pirate Hunter", Race = "Human", Status = "Swordsman", ProfileImageUrl = ImgPath + @"zoroLogo.jpg", Crew = Faction.Strawhat },
   29                                        new Contact{Name = "Nami", Alias = "Pirate Robber", Race = "Human", Status = "Navigator", ProfileImageUrl = ImgPath + @"namiLogo.jpg", Crew = Faction.Strawhat },
   30                                        new Contact{Name = "Usopp", Alias = "Tell Tale Man", Race = "Human", Status = "Sharpshooter", ProfileImageUrl = ImgPath + @"usoppLogo.jpg", Crew = Faction.Strawhat },
   31                                        new Contact{Name = "Sanji", Alias = "", Race = "Human", Status = "Cook", ProfileImageUrl = ImgPath + @"sanjiLogo.jpg", Crew = Faction.Strawhat },
   32                                        new Contact{Name = "Chopper", Alias = "Tony Chopper", Race = @"Reindeer-human", Status = "Doctor", ProfileImageUrl = ImgPath + @"chopperLogo.jpg", Crew = Faction.Strawhat },
   33                                        new Contact{Name = "Nico Robin", Alias = "Miss Sunday", Race = "Human", Status = "Archaeologist", ProfileImageUrl = ImgPath + @"robinLogo.jpg", Crew = Faction.Strawhat },
   34                                        new Contact{Name = "Cutty Flam", Alias = "Franky", Race = "Cyborg", Status = "Shipwright", ProfileImageUrl = ImgPath + @"frankyLogo.jpg", Crew = Faction.Strawhat },
   35                                        new Contact{Name = "Brook", Alias = "Dead Bones", Race = "Human", Status = "Musician", ProfileImageUrl = ImgPath + @"brookLogo.jpg", Crew = Faction.Strawhat },
   36                                        new Contact{Name = "Portgas D. Ace", Alias = "Firefist Ace", Race = "Human", Status = "Commander", ProfileImageUrl = ImgPath + @"aceLogo.jpg", Crew = Faction.Whitebeard },
   37                                        new Contact{Name = "Edward Newgate", Alias = "Whitebeard", Race = "Human", Status = "Captain", ProfileImageUrl = ImgPath + @"whitebeardLogo.jpg", Crew = Faction.Whitebeard },
   38                                    };
   39         }
   40     }
   41 
   42     /// <summary>
   43     /// Enumeration specifying which pirate crew each contact belongs to.
   44     /// </summary>
   45     public enum Faction
   46     {
   47        Strawhat,
   48        Whitebeard
   49     }
   50 }

Listing 2: The Contact class which implements the IContact interface

The View

The view as you would guess, is independent of the model. There isn't much to say here except to note that the DataContext property is set to a resource value which defines an instance of the ViewModelLocator class that will be discussed shortly. The templates and styles used here are defined in a ResourceDictionary is part of the package available for download.
Listing 3 shows the view for this project.

    1 <Window x:Class="DragDropUsingMvvmLight01.MainWindow" 
    2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4         xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4"
    5         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    6         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    7         xmlns:local="clr-namespace:DragDropUsingMvvmLight01"
    8         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    9         Title="MainWindow" Height="400"
   10         mc:Ignorable="d">
   11     <Window.Resources>
   12         <local:FactionDataTemplateSelector x:Key="dataTemplateSelector" />
   13         <local:ListBoxStyleSelectors x:Key="styleSelector" />
   14     </Window.Resources>
   15     <Window.DataContext>
   16         <Binding Path="Main" Source="{StaticResource Locator}" />
   17     </Window.DataContext>
   18 
   19 
   20     <Grid x:Name="LayoutRoot" Background="AliceBlue">
   21         <Grid.RowDefinitions>
   22             <RowDefinition Height="Auto" />
   23             <RowDefinition Height="Auto" />
   24             <RowDefinition Height="Auto" />
   25             <RowDefinition Height="Auto" />
   26             <RowDefinition Height="Auto" />
   27             <RowDefinition Height="Auto" />
   28             <RowDefinition Height="Auto" />
   29             <RowDefinition Height="Auto" />
   30         </Grid.RowDefinitions>
   31 
   32         <TextBlock Grid.Row="0" 
   33                    Background="White"
   34                    FontSize="18"
   35                    Text="Listbox to drag from" />
   36         <ListBox x:Name="dragSource" 
   37                  Grid.Row="1"
   38                  MinWidth="100"
   39                  MinHeight="40"
   40                  Margin="0,0,0,0"
   41                  AllowDrop="True"
   42                  Background="AliceBlue"
   43                  ItemContainerStyleSelector="{DynamicResource styleSelector}"
   44                  ItemsPanel="{DynamicResource SourceListBoxItemsPanelTemplate}"
   45                  ItemsSource="{Binding Contacts}"
   46                  ItemTemplateSelector="{DynamicResource dataTemplateSelector}"
   47                  Style="{DynamicResource ListBoxStyle1}">
   48             <i:Interaction.Triggers>
   49                 <i:EventTrigger EventName="PreviewMouseLeftButtonDown">
   50                     <cmd:EventToCommand Command="{Binding PreviewMouseLeftButtonDownCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   51                 </i:EventTrigger>
   52                 <i:EventTrigger EventName="DragOver">
   53                     <cmd:EventToCommand Command="{Binding DragOverCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   54                 </i:EventTrigger>
   55                 <i:EventTrigger EventName="Drop">
   56                     <cmd:EventToCommand Command="{Binding DropSourceCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   57                 </i:EventTrigger>
   58             </i:Interaction.Triggers>
   59         </ListBox>
   60 
   61         <Border Grid.Row="2" Height="20" />
   62 
   63         <TextBlock Grid.Row="3" 
   64                    Background="White"
   65                    FontSize="18"
   66                    Text="Listbox to drop to" />
   67 
   68         <ListBox x:Name="dropTarget" 
   69                  Grid.Row="4"
   70                  MinWidth="100"
   71                  MinHeight="117"
   72                  Margin="0,0,0,0"
   73                  AllowDrop="True"
   74                  Background="#FFE4F3FD"
   75                  ItemContainerStyleSelector="{DynamicResource styleSelector}"
   76                  ItemsPanel="{DynamicResource SourceListBoxItemsPanelTemplate}"
   77                  ItemsSource="{Binding TargetContacts}"
   78                  ItemTemplateSelector="{DynamicResource dataTemplateSelector}"
   79                  Style="{DynamicResource ListBoxStyle1}">
   80             <i:Interaction.Triggers>
   81                 <i:EventTrigger EventName="Drop">
   82                     <cmd:EventToCommand Command="{Binding DropTargetCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   83                 </i:EventTrigger>
   84                 <i:EventTrigger EventName="DragOver">
   85                     <cmd:EventToCommand Command="{Binding DragOverCommand, Mode=OneWay}" PassEventArgsToCommand="True" />
   86                 </i:EventTrigger>
   87             </i:Interaction.Triggers>
   88         </ListBox>
   89         <Button Grid.Row="5" 
   90                 Content="Reset Collections"
   91                 Template="{DynamicResource ResourceKey=ButtonTemplate}">
   92             <i:Interaction.Triggers>
   93                 <i:EventTrigger EventName="Click">
   94                     <cmd:EventToCommand Command="{Binding ClickCommand, Mode=OneWay}" />
   95                 </i:EventTrigger>
   96             </i:Interaction.Triggers>
   97         </Button>
   98     </Grid>
   99 </Window>
  100

Listing 3: The main view of the application

The ViewModels

The MvvmLight provides a ViewModelBase class. When a new MvvmLight project is created, two view models are also created, the ViewModelLocator and the MainViewModel which derives from ViewModelBase which takes care of implementing INotifyPropertyChanged so you don't need to keep doing boilerplate work over again.

The next interesting piece of generated code is the ViewModelLocator class which can
be thought of as a centralized place for dealing with view models. You can instantiate your ViewModels in the locator class and use the ViewModelLocator as the DataContext of the view. By doing this, you will have access to all view models defined and exposed as properties in the locator class. For instance, in this case, the MainViewModel is exposed as the Main property as shown below in Listing 4.

    1 namespace DragDropUsingMvvmLight01.ViewModel
    2 {
    3     /// <summary>
    4     /// This class contains static references to all the view models in the
    5     /// application and provides an entry point for the bindings.
    6     /// </summary>
    7     public class ViewModelLocator
    8     {
    9         private static MainViewModel _main;
   10 
   11         /// <summary>
   12         /// Initializes a new instance of the ViewModelLocator class. This instance will further be used to 
   13         /// create the MainViewModel
   14         /// </summary>
   15         public ViewModelLocator()
   16         {
   17             CreateMain();
   18         }
   19 
   20         /// <summary>
   21         /// Gets the Main property.
   22         /// </summary>
   23         public static MainViewModel MainStatic
   24         {
   25             get
   26             {
   27                 if (_main == null)
   28                 {
   29                     CreateMain();
   30                 }
   31 
   32                 return _main;
   33             }
   34         }
   35 
   36         /// <summary>
   37         /// Gets the Main property.
   38         /// </summary>
   39         [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance", "CA1822:MarkMembersAsStatic", Justification = "This non-static member is needed for data binding purposes.")]
   40         public MainViewModel Main
   41         {
   42             get
   43             {
   44                 return MainStatic;
   45             }
   46         }
   47 
   48         /// <summary>
   49         /// Provides a deterministic way to delete the Main property.
   50         /// </summary>
   51         public static void ClearMain()
   52         {
   53             _main.Cleanup();
   54             _main = null;
   55         }
   56 
   57         /// <summary>
   58         /// Provides a deterministic way to create the Main property.
   59         /// </summary>
   60         public static void CreateMain()
   61         {
   62             if (_main == null)
   63             {
   64                 _main = new MainViewModel();
   65             }
   66         }
   67 
   68         /// <summary>
   69         /// Cleans up all the resources.
   70         /// </summary>
   71         public static void Cleanup()
   72         {
   73             ClearMain();
   74         }
   75     }
   76 }

Listing 4: Everything here is automatically provided when creating a MvvmLight project

An instance of the ViewModelLocator is created in the App.xaml file in the Resources section as shown in Listing 2.

    1 <Application x:Class="DragDropUsingMvvmLight01.App"
    2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4              xmlns:vm="clr-namespace:DragDropUsingMvvmLight01.ViewModel"
    5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    6              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    7              StartupUri="MainWindow.xaml"
    8              mc:Ignorable="d">
    9     <Application.Resources>
   10         <ResourceDictionary>
   11             <ResourceDictionary.MergedDictionaries>
   12                 <ResourceDictionary Source="ResourceDictionary1.xaml"/>
   13             </ResourceDictionary.MergedDictionaries>
   14             <!--Global View Model Locator-->
   15             <vm:ViewModelLocator x:Key="Locator"
   16                 d:IsDataSource="True" />
   17         </ResourceDictionary>
   18     </Application.Resources>
   19 </Application>
   20

Listing 5: Instantiation of the ViewModelLocator

Notice that the ViewModelLocator class exposes a Main property which is set at the DataContext of the MainWindow.

   15 <Window.DataContext>
   16     <Binding Path="Main" Source="{StaticResource Locator}" />
   17 </Window.DataContext>

As the application is started, when the DataContext property is initialized, it is seen that it is binding and the application walks up the logical tree looking for the named resource which is eventually found in the App.xaml file. Properties in the MainViewModel can now be bound to as the Locator is used as the gateway to the rest of the properies in the view model. The plumbing of associating a view model with a view has been taken care of.

A MainViewModel which derives from ViewModelBase is also created for you. This is where most of the logic for this application takes place as shown in Listing 6.

    1 using System.Collections.ObjectModel;
    2 using System.Windows;
    3 using System.Windows.Controls;
    4 using System.Windows.Documents;
    5 using System.Windows.Input;
    6 using System.Windows.Media;
    7 using GalaSoft.MvvmLight;
    8 using GalaSoft.MvvmLight.Command;
    9 using DragDropUsingMvvmLight01.Model;
   10 
   11 namespace DragDropUsingMvvmLight01.ViewModel
   12 {
   13     /// <summary>
   14     /// This class contains properties that the main View can data bind to.
   15     /// </summary>
   16     public class MainViewModel : ViewModelBase
   17     {
   18         #region Private Fields
   19         private ObservableCollection<Contact> _contacts;
   20         private ObservableCollection<Contact> _targetContacts;
   21         private readonly IContact _contact;
   22 
   23         private ListBoxItem _listBoxItem;   // adorned element
   24         private Grid _topLevelGrid;         // element to get adorner layer from
   25         private DraggedAdorner _draggedAdorner;
   26         #endregion
   27 
   28         #region Public Properties
   29         // collections
   30         public ObservableCollection<Contact> Contacts
   31         {
   32             get { return _contacts; }
   33             set
   34             {
   35                 if (_contacts == value)
   36                     return;
   37                 _contacts = value;
   38                 RaisePropertyChanged("Contacts");
   39             }
   40         }
   41         public ObservableCollection<Contact> TargetContacts
   42         {
   43             get { return _targetContacts; }
   44             set
   45             {
   46                 if (_targetContacts == value)
   47                     return;
   48                 _targetContacts = value;
   49                 RaisePropertyChanged("TargetContacts");
   50             }
   51         }
   52 
   53         // commands
   54         public RelayCommand<MouseButtonEventArgs> PreviewMouseLeftButtonDownCommand { get; private set; }
   55         public RelayCommand<DragEventArgs> DragOverCommand { get; private set; }
   56         public RelayCommand<DragEventArgs> DropTargetCommand { get; private set; }
   57         public RelayCommand<DragEventArgs> DropSourceCommand { get; private set; }
   58         public RelayCommand<DragEventArgs> ClickCommand { get; private set; }
   59         #endregion
   60 
   61         /// <summary>
   62         /// Initializes a new instance of the MainViewModel class.
   63         /// </summary>
   64         public MainViewModel()
   65         {
   66             _contact = new Contact();
   67             _contacts = _contact.GetContacts();
   68             _targetContacts = new ObservableCollection<Contact>();
   69 
   70             #region CommandInvocations
   71 
   72             PreviewMouseLeftButtonDownCommand = new RelayCommand<MouseButtonEventArgs>(
   73                     e =>
   74                     {
   75                         // get dragged listbox
   76                         ListBox listBox = e.Source as ListBox;
   77                         ListBoxItem listBoxItem = VisualHelper.FindAncestor<ListBoxItem>((DependencyObject)e.OriginalSource);
   78 
   79                         // set up shared states
   80                         _listBoxItem = listBoxItem;         // adorned element
   81                         _topLevelGrid = GetTopLevelGrid(e); // element to get an adorner layer from higher up the logical tree than the listboxitem
   82 
   83                         // Find the data behind the listBoxItem
   84                         if (listBox == null || listBoxItem == null) return;
   85 
   86                         Contact contact = (Contact)listBox.ItemContainerGenerator.ItemFromContainer(listBoxItem);
   87 
   88                         AddAdorner(listBoxItem, _topLevelGrid);
   89 
   90                         // Initialize the drag & drop operation
   91                         DataObject dragData = new DataObject("myContactData", contact);
   92                         DragDrop.DoDragDrop(listBoxItem, dragData, DragDropEffects.Move);
   93                     }
   94                 );
   95 
   96             DragOverCommand = new RelayCommand<DragEventArgs>(
   97                 e =>
   98                     {
   99                         if (!e.Data.GetDataPresent("contact"))
  100                         {                          
  101                             e.Effects = DragDropEffects.None;
  102                         }
  103 
  104                         var currentMousePosition = e.GetPosition(_topLevelGrid);
  105 
  106                         if (_topLevelGrid != null && _draggedAdorner != null)
  107                             _draggedAdorner.UpdateAdornerPosition(_topLevelGrid, currentMousePosition);
  108                     }
  109                 );
  110 
  111             DropTargetCommand = new RelayCommand<DragEventArgs>(
  112                 e =>
  113                     {
  114                         if(!e.Data.GetDataPresent("myContactData")) return;
  115                         Contact contact = e.Data.GetData("myContactData") as Contact;
  116 
  117                         _targetContacts.Add(contact); // add to new collection
  118                         _contacts.Remove(contact);    // remove from source collection
  119 
  120                         // pass in the root grid since its adorner layer was used to add ListBoxItems adorners to
  121                         RemoveAdorner(_listBoxItem, _topLevelGrid);
  122                     });
  123 
  124             // if dropping on the source list, remove the adorner
  125             DropSourceCommand = new RelayCommand<DragEventArgs>(e => RemoveAdorner(_listBoxItem, _topLevelGrid));
  126 
  127             ClickCommand = new RelayCommand<DragEventArgs>(
  128                 e =>
  129                     {
  130                         Contacts = _contact.GetContacts();
  131                         TargetContacts = new ObservableCollection<Contact>();
  132                     }
  133                 );
  134 
  135             #endregion
  136         }
  137 
  138         private Grid GetTopLevelGrid(MouseEventArgs mouseEventArgs)
  139         {
  140             var sourceElement = mouseEventArgs.Source as DependencyObject;
  141             var topLevelWindow = VisualHelper.FindAncestor<Grid>(sourceElement);
  142             return topLevelWindow;
  143         }
  144 
  145         #region Helper Methods
  146 
  147         /// <summary>
  148         /// Adds an adorner to an element. 
  149         /// </summary>
  150         /// <param name="elementToAdorn">Element to add an adorner to.</param>
  151         /// <param name="elementToGetAdornerLayerFrom">Element to get the AdornerLayer from.</param>
  152         /// <example>In the case of the ListBox, if you want to adorn each ListBoxItem and the adorner layer of the 
  153         /// containing ListBox is used, then the adorner object gets clipped as it is moved out of the ListBox. In this case,
  154         /// you need a layer that is higher up the visual tree to allow the adorner to be visible anywhere and not be clipped.
  155         /// </example>
  156         public void AddAdorner(UIElement elementToAdorn, Visual elementToGetAdornerLayerFrom)
  157         {
  158             // get the adorner layer to attach the adorner to
  159             var adornerLayer = AdornerLayer.GetAdornerLayer(elementToGetAdornerLayerFrom);
  160             _draggedAdorner = new DraggedAdorner(elementToAdorn);
  161             adornerLayer.Add(_draggedAdorner);
  162         }
  163 
  164         /// <summary>
  165         /// Removes an adorner from an element.
  166         /// </summary>
  167         /// <param name="adornedElement">The element that has an adorner associated with it.</param>
  168         /// /// <param name="elementToGetAdornerLayerFrom">Element to get the AdornerLayer from.</param>
  169         public void RemoveAdorner(UIElement adornedElement, Visual elementToGetAdornerLayerFrom)
  170         {
  171             var adornerLayer = AdornerLayer.GetAdornerLayer(elementToGetAdornerLayerFrom);
  172             var adorners = adornerLayer.GetAdorners(adornedElement);
  173 
  174             if (adorners == null) return;
  175 
  176             var dragAdorner = adorners[0] as DraggedAdorner;
  177             if (dragAdorner != null)
  178             {
  179                 adornerLayer.Remove(dragAdorner);
  180             }
  181         }
  182         #endregion
  183     }
  184 }

Listing 6: The MainViewModel where most of the logic between the view and model happen

Two properties are created to hold the collections of data for both of the dragging from and dropping to listboxes. Following that a number of RelayCommands are defined which are mapped to events related to the Drag and Drop infrastructure. In the constructor, the logic for the commands are exposed and can be easily followed from the documentation provided in the form of comments. Finally some adorner related helper methods are defined.

Note: The constructor is also a good place to inject dependencies. For instance, if my Contact class was not of static data, but is coming from a database or something like that, then you could have passed in the IContact interface as a constructor parameter. By doing this, you can pass in any type that implements this interface which means that you can write a test to pass in a mock implementation. Perhaps I will add this functionality on later.

[2010.12.07] Installing Microsoft Surface SDK 1.0 SP1

2010-12-07T23:55:00.001-05:00

Installing the SDK on a Virtual Machine running Vista

Tools Required:

Windows Vista SP1 or higher
Visual Studio 2008 Express or higher (does not work in VS2010 as far as I can tell)
Virtual PC 2007 SP1 (if you are not actually running Vista)
VMWare 7.1 Workstation Edition (highly recommended alternative to VPC 2007
XNA 2.0 Framework
Surface SDK v1.0 SP1

Now that the Surface SDK v1.0 SP1 is public it is the right time to get familiar with it. Of course, getting it up and running was a bit more entailed that I had anticipated so I thought I would share my experience and hopefully you would have an easier time with it. I ran into a few issues which I wanted to highlight.

First off, Microsoft says that the Surface SDK needs to be installed on a Vista SP1 machine. Since I was running Windows 7 x64, I tried installing and of course it did not work. Stupid me, instead of checking the web immediately for Windows 7 related solutions, I continued to follow the rest of the install steps which was to use a Virtual Machine to host Vista.

[1.1] Installing Virtual PC and Vista

Again, MS recommended Virtual PC 2007 SP1 which can be downloaded for free. I have not had the need to for VPC before so this was the first time I am using one. Either way, installing Virtual PC on Windows 7 went off without a hitch. While it took forever to get the Vista Ultimate x32 image created, that was also painless. However, there is a hotfix which takes VPC from version 6.0.192.0 to 6.0.210.0 and a security update (KB969856) which follows the fix . I found that after installing the hotfix and the security update, VPC fails to recognize the Vista image and it even complains that there is some problem recognizing the host OS (Win 7). Uninstalling both made VPC works as it did before. Basically DO NOT install the hotfix or security update unless you really need them.

Due to the age of Virtual PC, you will find some limitations when it comes to dealing with graphics and widescreen support. In addition, I have tried out VMWare 7.1 Workstation Edition and it does a phenomenal job. The issues I describe below are non-existent and you can easily resize the guest OS as you would a normal window. I would recommend this over VPC if you can get it.

[1.2] Installing the XNA 2.0 Framework

The next bit that you would need is the XNA 2.0 Redistributable. As of this writing XNA 4.0 is out but the SDK will complain loudly as in Fig. 1 if it does not find 2.0 on the machine. Since XNA 2.0 is prerequisite, installing this on the Vista VPC did not go as smoothly as I had hoped as shown in Fig. 2.

Fig.1 XNA 2.0 Required even though 4.0 was installled

Fig.2 Running XNA 2.0 msi package does nothing

As shown, you get the dialog:
"Please wait while the installer finishes determining your disk space requirements."
To get around this issue, you need to use the command line utility in Administrator mode to get this running. In most cases you can find the Command Prompt in the Accessories folder, Right Click one the prompt icon and choose "Run as Administrator" as in Fig. 2.

Fig.3 Command Promt run as Administrator

Now navigate to where the XNA 2.0 package (xnafx20_redist.msi) is and invoke it with the following command:
msiexec /package xnafx20_redist.msi /qr
This will skip the checking space requirement and install the framework to its default location.

[1.3] Installing the Surface SDK

I ran into the same issue as I did with the XNA msi installer, in that, it was stuck checking the space requirements. This is shown in Fig. 4.

Fig.4 Surface SDK does not install normally

The solution is the same as the XNA case - simply run the msi package as indicated above from an elevated command prompt.

Fig. 5 shows the results of everything after installation. Note the Surface project templates in Visual Studio 2008 SP1.

Fig.5 Surface project template in Visual Studio 2008

[2009.11.20] How to Download PDC2009 Videos using Firefox and DownThemAll!

2009-11-20T01:01:00.001-05:00

This is a quick little post on how to download all the PDC 2009 videos in one go (well almost) with Firefox.

All you need is the DownThemAll! extension for Firefox and you are good to go. In case the link changes in the future just search for it on Mozilla's website.

Steps:

Install DownThemAll!
Go to the videos section on the PDC2009 main page
Right click and select DownThemAll! from the context menu as in Fig. 1.

Fig. 1

Set the location of the downloaded files (1) and add a filter (2) for the types of files you want to get. In this case, I wanted the high definition versions of the videos, but all the videos end with .wmv. The hi-def files are in the wmvhigh folder so by using that as the filter, I can only grab the ones I wanted. You can also change the filter to get the pptx files as well. This is in Fig. 2.
NOTE: Make sure you have a few gigs of hard drive space and time, because it will take a while to get them all.

Fig. 2

Once the download starts (you can change the number of simultaneous downloadable files) you will see something like Fig. 3. Don't worry about the incompletes or failed files, you can always go back and resume getting them. Notice also that the files are named in the format of CL00.wmv and FT00.wmv. The PDC website has a renamer batch file you can download to change the names of the files once they are downloaded. [Get the file and instructions]

Fig. 3

[2009.11.01] I spent a Week in PRISM

2009-11-01T20:39:00.001-05:00

I had heard of Prism a while ago but never really investigated. When I did take a look at it about a month ago, in all honesty I felt overwhelmed. However, recently I had two interesting conversations and that prompted me to sit down and really get into Prism. I am glad I did as I have learned so much and it has shown me how much more I need to learn as well.

I suppose I am more of a code monkey rather than an architect or a designer. That will change from now on. There is no point in me banging out code when I am only aware of part of the system I am writing for. Going through the Prism docs touches on a lot of concepts that I was not familiar with in the first place. All in all, I know I can't get it all in one reading of the doc, but it's a start. I am much more comfortable with terms like Inversion of Control, Dependency Injection, Delegate Commands (well I got this from learning about Model-View-ViewModel), Event Aggregator, Modules, Bootstrapper, and some Design Patterns. Thus far, all I have done is the basic Hello World in Prism but I hope to do more in the near future. I would like to reference some additional resources that in my opinion, will supplement learning not just Prism, but design and architecture in general.

Prism Related

Composite Application Guidance (Prism) October 2009
Prism on Channel 9
Channel 9 Screencast Series: Creating a modular application using Prism V2
  Part 1/4: Creating a shell and modules
  Part 2/4: Visual Composition
  Part 3/4: Implementing views and services
  Part 4/4: Decoupled Communication
Tame Your Software Dependencies for More Flexible Apps by James Kovacs [MSDN Magazine March 2008]
Patterns For Building Composite Applications With WPF by Glenn Block [MSDN Magazine September 2008]
Brian Noyes on Prism [dnrTV! Screencast 124]
Brian Noyes on Prism Events and Commands [dnrTV! Screencast 132]
James Kovacs' Roll-your-own IoC Container [dnrTV! Screencast 126]
Glenn Block and Brian Noyes on Prism [.NETRocks Audiocast 374]
Build Composite WPF and Silverlight Applications by Claudio Lassala [CODE Magazine July/August 2009]

Supplemental Information

Understanding Routed Events and Commands In WPF by Brian Noyes [MSDN Magazine September 2008]
An Introduction To Domain-Driven Design by David Laribee [MSDN Magazine February]
WPF Apps With The Model-View-ViewModel Design Pattern by Josh Smith [MSDN Magazine February]
Jean Paul Boodhoo on Test Driven Development Part 1 Part 2 [dnrTV! Screencast 10 and 11]
Jean-Paul Boodhoo on Demystifying Design Patterns Part 1 Part 2 Part 3 Part 4 Part 5 Part 6 [dnrTV! Screencast 63, 65, 68, 71, 92]
David Hayden on the Unity Framework [.NETRocks Audiocast 393]
Test Driven Development with Jean Paul Boodhoo [.NETRocks Audiocast 168]
Layered Architecture, Dependency Injection, and Dependency Inversion by Jean Paul Boodhoo [CODE Magazine May/June 2007]
The Zen of Inversion of Control by Jon Stonecash [CODE Magazine March/April 2009]

Some Books

Application Architecture Guide 2.0 The Book [Microsoft Patterns and Practices]
Design Patterns: Elements of Reusable Object-Oriented Software
Domain-Driven Design: Tackling Complexity in the Heart of Software
C# 3.0 Design Patterns

[2009.10.12] WPF: Change the color of the selected item in a ListBox control

2009-10-12T12:07:00.003-04:00

A question that may come up at some point in the life of a WPF developer is: "How to change the color of the selected item in a ListBox control?". Going with just the word "selected" you would imagine that there is some property with that name that lives in ListBox. Close, but no dice.

There is, however, an IsSelected dependency property registered to the ListBoxItem control. Recall that ListBox implicitly wraps each of its items in a ListBoxItem, which is a ContentControl.

There are three ways that I know of that you can accomplish what you want - the first two requires knowledge of the template that makes up the ListBoxItem, whereas the last one, not so much. Let's look at the first two. Since the template is necessary, let's start by taking a look at the template for a ListBoxItem in Listing 1. I have removed the parts that are not relevant to the problem at hand so you are just seeing a slimmed down version of the real thing.
Note: I am using a tool called Show Me The Template! Feel free to use whatever works.

  1: <ControlTemplate TargetType="ListBoxItem"

  2:                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3:                      xmlns:s="clr-namespace:System;assembly=mscorlib"

  4:                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  5:     <Border BorderThickness="{TemplateBinding Border.BorderThickness}"

  6:                 Padding="{TemplateBinding Control.Padding}"

  7:                 BorderBrush="{TemplateBinding Border.BorderBrush}"

  8:                 Background="{TemplateBinding Panel.Background}"

  9:                 Name="Bd" SnapsToDevicePixels="True">

 10:         <ContentPresenter Content="{TemplateBinding ContentControl.Content}"

 11:                               ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"

 12:                               ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"

 13:                               HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"

 14:                               VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"

 15:                               SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />

 16:     </Border>

 17:     <ControlTemplate.Triggers>

 18:         <Trigger Property="Selector.IsSelected">

 19:             <Setter TargetName="Bd"

 20:                     Property="Panel.Background"

 21:                     Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />

 22:         </Trigger>

 23:     </ControlTemplate.Triggers>

 24: </ControlTemplate>

Listing 1. Slimmed down control template for a ListBoxItem

We are interested in Lines 18-21.

What we have in Line 18 is that when the IsSelected dependency property is triggered, it sets the Value of the Background property of the Border (with Name="Bd") to some predefined system level resource called HighLightBrushKey. Now we know that this refers to the ugly blue color we see when we select something from a ListBox.

At this stage you have a handle as to the structure of the template, and what property you need to modify to change the color. Now let's look at the ways in which we can go about accomplishing our little task.

[1] Override the HighLightBrushKey resource

This is by far the most painless method as it can be done in the Resources section of your Window or Page. Listing 2 shows how this is done using a LinearGradientBrush and the result is in Fig. 1. Pay special attention to the highlighted portion of the code in Line 7.

  1: <Window x:Class="WpfUnleashed01.Window1"

  2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4:         xmlns:gundam="clr-namespace:WpfUnleashed01"

  5:         Title="Changing ListBox color selection" Height="100" Width="300">

  6:     <Window.Resources>

  7:         <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"

  8:                              StartPoint="0,0" EndPoint="0,1">

  9:             <GradientStop Offset="0" Color="LightPink" />

 10:             <GradientStop Offset="0.3" Color="Red" />

 11:             <GradientStop Offset="0.7" Color="Red" />

 12:             <GradientStop Offset="0.9" Color="LightPink" />

 13:         </LinearGradientBrush>

 14:     </Window.Resources>

 15:     <StackPanel>

 16:         <ListBox>

 17:             <TextBlock Text="Using a LinearGradientBrush" />

 18:             <TextBlock Text="to change the color of" />

 19:             <TextBlock Text="the ListBox selected item" />

 20:         </ListBox>

 21:     </StackPanel>

 22: </Window>

Listing 2. Overriding a predefined resource

Fig. 1. Using the override method

Basically that is all there is to it - a super quick, easy way to change the selection color!

[2] Modifying the ControlTemplate of ListBoxItem

This method goes a bit deeper as it actually tweaks the default template that is used to render the ListBoxItem. The code is pretty simple to follow as shown in Listing 3. The result is shown in Fig. 3.

  1: <Window x:Class="WpfUnleashed01.Window1"

  2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

  3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  4:         xmlns:gundam="clr-namespace:WpfUnleashed01"

  5:         Title="Template Editing" Height="100" Width="300">

  6:     <Window.Resources>

  7:         <!--style will automatically apply to ListBoxItems-->

  8:         <Style TargetType="{x:Type ListBoxItem}">

  9:             <!--modify the Template property-->

 10:             <Setter Property="Template">

 11:                 <Setter.Value>

 12:                     <ControlTemplate TargetType="{x:Type ListBoxItem}">

 13:                         <Border Name="Bd" Padding="2" SnapsToDevicePixels="True">

 14:                             <ContentPresenter />

 15:                         </Border>

 16:                         <ControlTemplate.Triggers>

 17:                             <Trigger Property="IsSelected" Value="True">

 18:                                 <Setter TargetName="Bd" Property="Background" Value="Yellow" />

 19:                             </Trigger>

 20:                         </ControlTemplate.Triggers>

 21:                     </ControlTemplate>

 22:                 </Setter.Value>

 23:             </Setter>

 24:         </Style>

 25:     </Window.Resources>

26:

 27:     <StackPanel>

 28:         <ListBox>

 29:             <TextBlock Text="Using a LinearGradientBrush" />

 30:             <TextBlock Text="to change the color of" />

 31:             <TextBlock Text="the ListBox selected item" />

 32:         </ListBox>

 33:     </StackPanel>

 34: </Window>

Listing 3. Just changing the Value property in Line 18 produces the desired results

Fig. 2. Editing the ControlTemplate of the ListBoxItem

While this method was a bit more involved, it nonetheless did what you wanted to do, plus since you were editing the structure of the control's template, you also have the freedome to do a lot more.

[3] Using Expression Blend

The last method I will look at is using Expression Blend to make the necessary changes to the template to get the desired result. This may appeal to those who live in Blend most of their time and aren't too keen on coding in XAML.

After starting your new Blend project, select the ListBox control from the Asset Panel and put it where ever you want in your project. This is shown in Fig. 3. Once you are done making the tweaks you can delete the item. In addition, I have added two TextBlocks to the ListBox for testing purposes.

Fig. 3. Getting a ListBox from the Asset panel

With our ListBox in place, the next step is to edit the template. However, ListBox has several templates. If you right click on the ListBox either in the Objects and Timeline panel or on the object in the scene, you will see two menus giving you access to the templates you can modify as in Fig. 4.

Fig. 4. ListBox template options

The first choice is Edit Template, but we don't want this as this is the template for the ListBox. Recall from above that the property we are seeking lives in the ListBoxItem control, which ListBox uses to wrap items added to its collection. The second submenu, Edit Additional Templates has what we are looking for, namely the Edit Generated Item Container (ItemContainerStyle). Refer to Fig. 5.

Fig. 5. Editing the ListBoxItem's ControlTemplate via a Style

Actually, we are doing Step 2 in Blend! We are using a style to modify the underlying template to suit our needs. Either way, choose Edit a Copy..., name it and choose whether to place it in the Resource collection of the Window, Application or added to a ResourceDictionary. Feel free to choose any option, I will leave mine with the default settings as in Fig. 6.

Fig. 6. Adding a resource to your project in Blend

Now Blend switches to template editing mode as in Fig. 7.

Fig. 7. Template mode

What we are interested in is the Trigger menu and the IsSelected = true property setting. If you click on that (the red box in Fig. 7), you will notice two things:

The main work area has a red border with the heading:
IsSelected = True trigger recording is on
The IsSelected = true now had a red "recording light" next to itself which basically says that whatever changes we make to this property will wipe out its old value and "record" our new choice (you still have to Save your project of course!)

Fig. 8 illustrates this.

Fig. 8. Changing the property trigger

The Properties when active heading is our focus, namely the second option:

Bd.Background = {x:Static SystemColors.HighlighBrushKey}. If you click this option while recording is on, the Properties tab shows the brush that is used to set the Background property of an element called Bd (it's actually a Border). Refer to Fig. 9 to see what I am talking about.

Fig. 9. Default brush used

Now you can simply turn off that brush, as in Fig. 10 and select your own.

Fig. 10. Turn off default brush

You are free to now add whatever you want. For example, I will add a simple RadialGradientBrush as my new Background property. See Fig. 11.

Fig. 11. Changing the default brush to a radial gradient

At this point you can click the "record light" button either in the main work area or under the Triggers tab to turn off recording. In addition, you can jump out of Template Editing Mode as shown in Fig. 12.

Fig. 12. Back to normal mode

Build and run the application to see the results in Fig. 13.

Fig. 13. Running to application - new selected color!

Now if you add another ListBox to your window and you want to add that style for the ListBoxItem, right click on the ListBox and follow the highlights indicated in Fig. 14.

Fig. 14. Adding the style to another ListBox

Have fun, happy coding (or not).

[2009.10.11] JAOO 2009: An Introduction to F# by Don Syme

2009-10-11T02:24:00.001-04:00

JAOO 2009: An Introduction to F# by Don Syme

Abstract:
F# is a succinct and expressive typed functional programming language for the .NET platform, and Microsoft will be supporting F# as a first class language in Visual Studio 2010. We'll take a look at what you need to know to start having fun with F#, and how to use it productively. We'll also look at some sample applications of F# and functional programming and cover aspects of parallel, reactive and asynchronous programming with F#.

Get the slides, code, etc from Don's Blog.

[2009.10.01] Some Haskell features for F#

2009-10-01T21:14:00.002-04:00

I learned a bit of both Haskell and F#. I love them both but I don't think I am going to get a job with either of them anytime soon! Either way, in my quest for knowledge, there were some features of Haskell I wished were in F#. Of course, I am sure the F# folks have their reasons why things are the way they are. Moving on...

[1] Function signature and definition

In Haskell, you can simply write down your function definition and follow that with your implementation as shown in Line 1

  1: fibonacci :: Int -> Int

  2: fibonacci 0 = 0

  3: fibonacci 1 = 1

  4: fibonacci n = fibonacci(n-1) + fibonacci(n-2)

In F# however, you cannot add the function definition at the start of the function implementation. Instead, you need to add it to a separate F# Signature File. As such the same definition in F# is:

  1: let rec fibonacci = function

  2:     | 0 -> 0

  3:     | 1 -> 1

  4:     | n -> fibonacci(n-1) + fibonacci(n-2)

[2] Haskell is more explicit about side effects

If you want to deal with Input/Output (IO) in Haskell, you have to be explicit about it. For instance, the definition of the putStrLn function is given as: String -> IO() This clearly states that this function has side effects and it is identified from the get go by the IO parameter. However, in F# you can write a function that has side effects but the function signature may not tell you that.

[3] Functions as equations

Looking back at the two fibonacci functions defined both in Haskell and F#, I can say I prefer the Haskell way of doing things. While the F# way is very close, I like the fact that in Haskell I can set up function conditions as a set of equations. You cannot use the same function name more than once in F# as in Haskell.

This was just a short post based on some of my observations. With that said, it's time to get back into the F# game.

[2009.09.21] The Periodic Table in WPF using MVVM

2009-09-21T22:02:00.003-04:00

When the idea of doing this project came to me, at first I thought I would do it the same way as I did my previous WPF Writing one. I am doing this to simply to put into practice some of the concepts I have learnt previously. But using the same methods would not really prove much - at least to me. Since then I have learned much more and as such I wanted to use newer/updated tools, technologies and concepts to build this application.

Download the Code!

Technologies and Concepts used in this project:

Visual Studio 2008 SP1 + .NET Framework 3.5 SP1
Microsoft Expression Blend 3 + Sketchflow
Model-View-ViewModel (MVVM)
Actions, Behaviors and Triggers
Visual State Manager
Data binding
User Controls
Styles
Templates

The Prototype

Before an application is written, it may be helpful to have a decent, working prototype to sort of pitch/sell the idea of the project. Expression Blend 3 SketchFlow is the tool for the job. It will let you do rapid prototyping and provide a means to provide feedback on the initial prototype. My design will not be very complicated as this particular application will not have a whole lot of navigational needs. Basically the main window will show each element, a mouse over will bring up a summary for the element and clicking the control representing the element will bring up a details pane. Again, not a ton of interaction.

First, let's take a look at what the main UI may look like with a little bit of interaction in Fig. 1. Basically each element will have an attached GoToStateAction which will vary the Opacity of the SummaryUserControl. The states will react to the MouseEnter and MouseLeave events of the control.

Fig. 1. SketchFlow of the Main UI

If the user wants detailed information on the particular element, then clicking the control that represents the element will navigate to a Details window as in Fig. 2.

Fig. 2. SketchFlow of the Details UI

Fig. 3 is the SketchFlow map of the overall project. Notice that the MainUI screen has the SummaryUserControl Component linked to it and the DetailsUI has the Details Component linked to itself. The MainUI screen is also linked to the DetailsUI and the DetailsUI is linked back to the MainUI. As such you can use the NavigateForwardAction and NavigateBackAction to move between the screens.

Fig. 3. SketchFlow Map of the project

The Design and Implementation

Fig. 4 is the Class Diagram of the overall application. Based on that, I will talk about each subsection as necessary. Fig. 5 is the hierarchy of the project.

Fig. 4. Class Diagram

Fig. 5. Project Hierarchy

Given that my prototype passed and I have all the feedback necessary, then I would want to design next. This is where I would want to put some patterns and industry practices into play. I will use the Model-View-ViewModel pattern here, which I feel is appropriate for an application of this scale. Also, I want to use it to better acquaint myself with the pattern.

Model

The raw data would be an XML file that I have made up using the properties for the particular element. Since I have not used a lot of LINQ or XML processing in .NET, instead of using attributes and nested nodes, I have opted to use one level of nesting for all the nodes. Fig. 6 shows this.

Fig. 6. XML Data File

The MVVM pattern completely separates the data from the rest of the application, so in order to expose the XML data, I have created a public class, ElementModel.cs whose sole purpose is to expose the data (nodes) of the XML data file as a set of public properties which can then be manipulated and data bound to. All this class does is declare a set of properties which mirror the data from the XML file. It supplies a single constructor that takes all these parameters in to create an instance of the class. In addition, there is a helper class called ElementModelFileLoader.cs which provides a single method that returns a List of ElementModel by using LINQ to load, parse and create the list. The List<ElementModel> can then be referenced by the ViewModel sections to be interacted with.

View

The MVVM kit will automatically create a MainView.xaml for a MVVM application. I will keep that view and add user controls and additional views as necessary. So the MainView will contain several ElementUserControl which will make up the periodic table. In addition, I have a second window called DetailsView.xaml which is loaded and displayed if the user clicks on an ElementUserControl. This window holds a DetailsUserControl.xaml. Both of these user controls use Data Binding to populate the necessary TextBlock fields that make them up.

Since I am on the topic, I have used Actions and Behaviors, some new features of Blend 3, as well as the Visual State Manager, to quickly add interactivity to my user controls. An Action is just a piece of code that runs after being triggered. For instance, Blend has a GoToStateAction which as its name implies, transitions the element it is attached to go to a specified state as defined by the VSM. For example, I have defined some states that will make the Border surrounding the ElementUserControl changes its Opacity property by listening for MouseEnter and MouseLeave events. See Fig. 7.

Fig. 7. Using Actions in Blend 3

I have an earlier blog post that has more information on Actions and Behaviors.

According to the MVVM pattern, a View will have a reference to its corresponding ViewModel, which it can set to be its data context ( myView.DataContext = myViewModelInstance ). In this way, bindings defined in the View, which references properties exposed by the ViewModel will be resolved. I will go into more detail when I discuss the ViewModels. Fig. 8 shows a representation of the MainView and Fig. 9 that of the DetailsView.

Fig. 8. The MainView view of the application

Fig. 9. The DetailsView view of the application

ViewModel

Ideally, each of the Views listed above would have their own corresponding ViewModel file, which would be pure C# as shown in Fig. 5 above. Actually, I did not need a separate ViewModel for the DetailsView, but I added one one to bind to commands that is relevant to the DetailsView only. However, as of this writing, it is a redundant class as its functionality was not what I expected. I hope to fix it in the future.

Since most of the action happens in the MainViewModel, I will talk about that. Since this is what the View is bound to, it is the ViewModel that exposes properties and commands for the view to bind to. In this case, the MainViewModel wraps each List<ElementModel> into an ObservableCollection<ElementModelViewModel>. This may seem a bit confusion but the ElementModelViewModel is actually the ViewModel which represents the ElementModel. If you recall, the ElementModel was the class that exposes the data in the XML file. However, in the ElementModelViewModel you can choose exactly what properties you want to expose to your Views. For example, ElementModel could expose 10 properties, but out of those 10, the ElementModelViewModel class chooses only exposes 5 to its View. Since the View cannot "see" the model, then all it knows about is the 5 properties it is allowed to bind to.

In addition to custom object properties, the ViewModel also exposes Commands that the View can bind to. So in summary, the MainViewModel class exposes the properties of the Model as a collection and commands.

Since the code has lots of comments you can easily understand what is happening. A good deal of plumbing magic takes place in the OnStartup() event handler of the App code behind file - App.xaml.cs file. This is shown in Listing 1.

  1: using System.Collections.ObjectModel;

  2: using System.Windows;

  3: using PeriodicTable.ViewModels;

  4: using PeriodicTable.Views;

5:

  6: namespace PeriodicTable

  7: {

  8:     /// <summary>

  9:     /// Interaction logic for App.xaml

 10:     /// </summary>

 11:     public partial class App : Application

 12:     {

 13:         MainView view;

 14:         MainViewModel mainViewModel;

 15:         DetailsView detailsView;

 16:         DetailsViewViewModel detailsViewModel;

17:

 18:         public App()

 19:         {

 20:             view = new MainView();

 21:             mainViewModel = new MainViewModel();

22:

 23:             detailsView = new DetailsView();

 24:             detailsViewModel = new DetailsViewViewModel();

25:

 26:         }

 27:         private void OnStartup(object sender, StartupEventArgs e)

 28:         {

 29:             // Call the Load method in the MainViewModel call

 30:             // This finds the XML file, loads the data, create a CLR object

 31:             //  to represent the XML data, create a collection of these

 32:             //  objects and create a public property to expose this collection

 33:             mainViewModel.LoadElementsFromFile(@"Models\periodicTable.xml");

34:

 35:             ObservableCollection<ElementModelViewModel> col = mainViewModel.ElementCollection;

36:

 37:             // Since my user controls for the elements are not in a container

 38:             //  that knows how to bind each element as an item in the container

 39:             //  I have to manually iterate and set each control's data context property

 40:             //  (ex: ListBox - if you set the ItemsSource to the property exposing

 41:             //       the ObservableCollection, then each ListBoxItem is bound to

 42:             //       one item in the collection)

 43:             for (int i = 0; i < col.Count; i++)

 44:             {

 45:                 // use data binding to populate each user control

 46:                 ElementUserControl euc = (ElementUserControl)view.elementsGrid.Children[i];

 47:                 if (euc.Name == col[i].ElementName)

 48:                 {

 49:                     euc.DataContext = col[i];

 50:                     euc.symbolText.Text = col[i].Symbol;

 51:                     euc.atomicNumberText.Text = col[i].AtomicNumber;

52:

 53:                     // respond to these events to do some bindings

 54:                     euc.MouseEnter += new System.Windows.Input.MouseEventHandler(euc_MouseEnter);

 55:                     euc.MouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler(euc_MouseLeftButtonDown);

 56:                 }

 57:             }

58:

 59:             // set a higer level datacontext to get acccess to the Commands

 60:             // defined in the ViewModel

 61:             view.DataContext = mainViewModel;

62:

 63:             view.Show(); // show the main window

 64:         }

65:

 66:         // Handler for the MouseLeftButtonDown event which will show the DetailsView window

 67:         void euc_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

 68:         {

 69:             //detailsView.LayoutRoot.DataContext = (sender as ElementUserControl).DataContext;

 70:             detailsView.Owner = view;

 71:             if (detailsView == null)

 72:             {

 73:                 detailsView = new DetailsView();

 74:                 detailsView.Show();

 75:             }

 76:             else

 77:             {

 78:                 detailsView.Show();

 79:             }

 80:         }

81:

 82:         // Handler for the MouseEnter event which set the data context of each

 83:         //  both the Summary and Detail UserControls

 84:         void euc_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)

 85:         {

 86:             view.summaryUC.DataContext = (sender as ElementUserControl).DataContext;

 87:             detailsView.LayoutRoot.DataContext = (sender as ElementUserControl).DataContext;

 88:         }

 89:     }

 90: }

Listing 1: App code behind

In the constructor of the App class, instances of both the MainView and the DetailsView views are created and instantiated. Within the OnStartup() handler, the XML file is loaded, the collection of data is created and each ElementUserControl in the MainView has some of its compositional control values bound to properties of the objects in the collection of data items (Lines 43-51). The code is pretty much self explanatory.

Fig. 10 shows the overall operation of the application.

Fig. 10. The app in action

Current unresolved problems

The first problem I ran into was having a command execute when a certain event fires. I got around this problem using the CommandBehavior from Tor Langlo. The problem after was that I wanted a CloseCommand that the DetailsView can bind to, which will cause the details window to close. Even though the command works when I tested it out in the main window, it does not work here.

The second problem was even though the CloseCommand did not work, I resolved to use an event in the DetailsView code behind (yes, I know) to close the window. However, once the window was closed, I could not reopen it. I found a workaround by responding to the Closing event and injecting a Hide() method on the application dispatcher queue. Basically, instead of closing the details window, I merely hide it until it is requested to be shown again. I am not satisfied with this but it will do for now.

Finally, this project was done with the idea that it can be extended. The fact is, I do not have any desire to create a complete XML file to represent periodic table elements. Thus far all I have are two elements. The infrastructure is there is anyone wants to add to the XML file. An idea to remedy this would be to add a window that will allow a user to add to the XML file. Maybe in the future I will add this.