Software and UX

Now that we have our mock data showing up in Expression Blend, let’s get it working under Cider (the VS 2008 WPF designer). If you are really lucky, you might have hit all the right notes necessary to get it working the first time. If you fall under the other 99%, then follow the tips below:

Cider does not like the Window control for design-time data binding…

That’s right. This one actually took me the longest to figure out. It only hit me because I had one UserControl working correctly, so I started with a stripped down Window to determine the root cause. Turns out, if I change the Window to a UserControl, Cider is happy to do the data binding. So there are two ways you could get around this limitation:

• Create an intermediate UserControl, and host that inside your Window; or
• Add the DataContext to the root container element in your Window (e.g. a Grid). That seems to sidestep the Window data binding problem.

Put UserControl.DataContext after UserControl.Resources! … And,  declare the serviceProvider on the UserControl.Resources too!

I was getting erratic behavior hosting different controls from within the same project in my main Window. It ended up originating from a missing serviceProvider declaration. The hosted control is not able to find my App.xaml declarations, apparently. Therefore, if you host your UserControl Foo inside Control Bar, the designer will cough out the error "Could not create an instance of type ‘Foo" when you open Bar in the designer. Fortunately, you are able to define it in both App.xaml and on the UserControl, and it will not create problems in both Cider or Blend.

Sometimes, Cider calls IValueConverters with strange data

I have had Cider call a ValueConverter with a string, when I was expecting a business object instance. This caused the designer to catch an exception. The solution was to ignore unexpected types when in design mode (and this is actually suggested in a Microsoft Cide blog). Easy enough.

Now, for the final step…

Even though the previous steps should get the mock data showing up in Cider as well, you still have a problem: the design data will show up at run-time as well. There is an easy way to fix this:

public TeamMemberDataUserControl()
{
    InitializeComponent();

    if (!DesignerProperties.GetIsInDesignMode(this))
    {
        // Clear the design time data context
        ClearValue(DataContextProperty);
    }
}

You just clear the DataContext in the constructor of your control. That will execute at run-time, and reset the DataContext as if the XAML declaration wasn’t there.

As Eduardo pointed out to me, this has the side benefit of fixing another issue, as you will see in a bit. There are two different situations where you can see a control in design-mode. The simplest one is when you open the control file (let’s call it A.xaml) directly. The other one is when you open a control (B.xaml) which hosts A.xaml. In the latter situation, the designer will pass in the DataContext to the hosted control, but only if it does not already have a DataContext assigned already. Clearing the DataContext property in the constructor seems to do the trick. Eduardo also worked in a cleaner solution using attached properties, so he might blog a bit about that approach.

Wrap up

By following the steps in these two posts, you should be able to get your application showing design time data both in Expression Blend and Cider. You should not only be able to get that data in simple UserControls, but also Windows that nest other UserControls. If you would like to see the source code for an application that puts this into practice, take a look at the Scrum Sprint Monitor source code at CodePlex. Hope this is useful to you!

Recently, I have been trying to populate my WPF design-time controls with mock data in order to have real-time feedback of the UI, as I am tweaking the XAML. I first saw this in action at a session with Richard Griffin, Felix Corke, and Ian Griffiths at Tech Ed Barcelona 2008, and I was blown away by the prospects of it. This has been the Holy Grail of form design for me, ever since the first releases of Visual Studio came out (think Win32, MFC, Windows Forms), and now it seemed Microsoft nailed it! The gang even got this working with an IoC container! This was a Silverlight project though, and not WPF, so I wasn’t sure how easy it would be to transition the same experience.

After a few tries, and looking at articles like this one and this one, it seemed that the road was going to be a bumpy one. Even though I got it working with Expression Blend initially, it seemed much harder to get it to work consistently under the Visual Studio 2008 designer (Cider). In this blog post, I will outline the gotchas I have found along the way to a solution that works both in Expression Blend 2 SP1 and Visual Studio 2008 SP1, without modification:

The solution I am using involves creating a ServiceLocator object, which exposes my ViewModels as properties:

public class ServiceLocator
{
    static ServiceLocator()
    {
        SingletonContainer.Setup(new NinjectContainerAbstraction());
    }

    public IMainViewViewModel MainWindowViewModel
    {
        get { return SingletonContainer.Resolve<IMainViewViewModel>(); }
    }
}

After adding it to my App.xaml file:

<Application.Resources>
  <local:ServiceLocator x:Key="serviceLocator" />
</Application.Resources>

… I can then bind to a ViewModel like this:

<UserControl.DataContext>
  <Binding Path="MainWindowViewModel" Source="{StaticResource serviceLocator}"/></UserControl.DataContext>

I am then able to start using the ViewModel directly on the XAML:

<Label Content="{Binding Path=CurrentSprintName}">

The serviceLocator will be configured with the design-time mock data, or the run-time data, depending on whether we’re hosted inside a designer. This check is accomplished through DesignerProperties.GetIsInDesignMode. However, as noted in Delay’s Blog, there is a bug in that implementation, so I’m using his recommended workaround.

This should be enough to get the data to show up in Blend. And this is what a lot of articles floating on the Internet will tell you. However, as you will find in part II of this installment, VS2008 is much pickier in what it decides to chew up.

I have published the first release of the Scrum Sprint Monitor (v1.0.0.32). Get it at http://www.codeplex.com/scrumsprintmonitor/Release/ProjectReleases.aspx, and let me know your thoughts about it.

Recently, I have been giving some thought on the fact that it is hard to get a picture of how an Agile sprint is doing overall, without configuring and running TFS reports every now and then. In addition, that information should be available to the whole team, all the time.

I looked around the web for some kind of application that I could run on a dedicated LCD monitor. The only thing I could find, however, was a Build Monitor. That only gave me an idea of how the build and integration tests were doing. I wanted to know if we were on track to meet the sprint deadline.

Therefore, I set out to create such an application, in the form of a screensaver, so that I could leave it running on our file server connected to an LCD monitor.

At a glance at the LCD monitor, you are be able to tell, among other things:

• Latest build status (provided as the background of the screensaver);
• How much work has been done;
• Team remaining workload;
• Team available time (bonus: excluding busy time in Outlook);
• Team member status (color-coded);
• How many work items remain unassigned.

I have uploaded the project to http://www.codeplex.com/scrumsprintmonitor. Please drop by to give it a whirl (remember to first customize the sprint configuration file and TFS server name), and do leave any suggestions or requests to participate in its development.

I took this opportunity to implement design-time data binding with an IoC container, as described in http://jonas.follesoe.no/YouCardRevisitedImplementingDependencyInjectionInSilverlight.aspx. That made a world of difference in the ease of designing the UI!

Our team recently decided to move from the Light Weight Scrum TFS template to the much richer Conchango Scrum V2.2 template. We found that this template has a very faithful representation of the Scrum methodology, and certain available tools such as the WPF taskboard and EpiServer’s open source Scrum dashboard make it even more appealing.

As you might already know, there are currently no tools available out-of-the-box to migrate projects between templates (especially while maintaining history). The only effort currently underway (albeit a very significant one) is the TFS to TFS migration tool, based on the TFS Migration and Synchronization Toolkit, both being developed by TFS team members. However, those tools will not take care of the logic of migrating work items’ custom fields between templates (especially also following workflow rules).

Therefore, and given that we felt it was important to keep project and work item history, I decided to set out to craft out a tool to perform that migration. The basic idea is to iterate each changeset, and each work item revision on the source project, and repeating those operations on the target project. While migrating the work items, we also migrate attachments (easy), and links (not quite as easy). The results up to now have been very encouraging.

I believe that it might be beneficial to the community if a tool such as this was published on CodePlex, since there is not much information out there on how to perform a large task like this, and what little information exists is scattered in bits and pieces (mostly originating from the TFS team). This tool could be adapted to other templates with relative ease. Considering the amount of work involved in documenting this project and turning it into a blog series, I would ask you to leave a comment here if you are interested in having access to the tool. If there is sufficient interest, I will try to put this tool up on CodePlex, and write up a few blog posts detailing its inner workings.

Check out my first project at CodePlex, Active Statement Generator. OFX stands for Open Financial Exchange, and is a standard used by Microsoft Money and Intuit Quicken to download statements from financial institutions. This project aims to bridge the gap between FI which don’t yet provide OFX files (also known as Active Statements) and those personal finance packages. It is fully extensible and relies on the following components:

- a Statement Retriever (Clipboard is currently implemented in release 0.1);
- a Statement Interpreter (currently Via Verde and BESnet credit card statements are supported);
- a Statement Serializer (where the Statement is serialized to XML);
- a Statement OFX Converter (where the XML is converted to OFX);
- a Statement Action (where the OFX is opened in the finance package).

Any of these areas is open for extension, through the use of a Inversion of Control Container – in this case, Castle Windsor. I also make use of LINQ to Objects, LINQ to XML and Regular Expressions.

I have placed the source code for ToggleBluetoothSync in CodePlex, under the umbrella project Windows Mobile Micro Utilities. Enjoy!