Software and UX

Today I decided to encapsulate the circular progress indicator I use in Scrum Sprint Monitor in a reusable behavior. This served as a learning experience as well, since I had not yet had the chance to play with attached behaviors. My requirements were the following:

• Have a behavior that displays an animation during long running operations. It should dim out a defined region in the UI, optionally preventing input into that region. All state transitions must be animated.
• Have minimal impact on the logical tree.
• Allow configuration of parameters, such as dim brush, transition duration, etc.

This problem turned out to be a perfect candidate to writing a behavior, and I needed only a few hours to crank it out. Here is a short video demoing it:

This behavior makes use of the simple and great Circular Progress Bar control by Sasha Barber, up on CodeProject. You can easily replace the control used for the animation though, should you require a different one.

Usage

The behavior has a simple requirement, that it can only be attached to a Grid element (I believe that is a requirement that can easily be satisfied, in most projects). The only required property is the BusyState property, which tells the behavior when to do its work:

<Grid DataContext="{Binding Path=ConfigurationViewModel, Source={StaticResource serviceLocator}}"
      Behaviors:BusyIndicatorBehavior.BusyState="{Binding IsBusy}"
      Behaviors:BusyIndicatorBehavior.TargetVisual="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}">

The behavior works by adding a Visual Tree at runtime under the attached DependencyObject (the Grid). You connect your Busy state flag by providing a Binding to the BusyState attached property. There are a few other optional properties you can use, to customize things such as the dimming brush, the transition duration, margins, etc.

The source code is available for download from the Microsoft Expression Community Gallery. Do leave some feedback if you have any suggestions, or if you just find it useful.

If you want to take a look at source code that uses this behavior, head to the Scrum Sprint Monitor project at CodePlex, and search for Behaviors:BusyIndicatorBehavior.

As I was going through the UI of the Scrum Sprint Monitor to introduce animations to the larger UI elements, one type of property was proving difficult to animate: the dynamic background color of some elements which were bound to Brush (or Color) properties of the ViewModel.

Picture this: you have a Color property that is currently Green. At some point it changes to Red. You would like the UI to update smothly, so you would not see the color jump from Green to Red. You are not able to do this in XAML with triggers and storyboards directly. The problem lies in the fact is that the Animation objects in XAML cannot be bound to dynamic values (see instances here and here), as they must be frozen for performance and thread safety reasons.

<DataTemplate DataType="{x:Type ViewModels:BuildStatusBackgroundViewModel}">
    <Grid Background="{Binding Path=BuildStatusColor}" />
</DataTemplate>

Therefore there is no point in trying to introduce triggers (be it EventTriggers or DataTriggers) in this Grid element. What I ended up doing is deriving a class from Grid and spawning the animation from code behind.

<DataTemplate DataType="{x:Type ViewModels:BuildStatusBackgroundViewModel}">
    <Controls:BuildStatusBorder />
</DataTemplate>

See the code-behind example here. I did encounter a pitfall while developing this approach. I ran into a “Cannot freeze this Storyboard timeline tree for use across threads” exception, when the animation was kicked off. I fixed this by cloning the existing property value, essentially removing any data binding from the property.

Hope this helps someone who is running into the same problem of animating transitions between databound properties!

UPDATE: The same functionality is now available out of the box using the Blend 3 SDK, through the FluidMoveBehavior. Just drag that behavior to your container panel, and set the Duration and AppliesTo properties! The only difference is that easing functions are not yet supported in WPF. We will need to wait until WPF 4 is released.

Last evening I finally implemented a long awaited feature (by me!) in the Scrum Sprint Monitor: animated WPF panels. As the team members in the Sprint move up and down the list (an ObservableCollection<>), get added or removed, I always wished that change could be animated. My current knowledge of the WPF layout mechanism wasn’t sufficient to finish on that endeavor within a few hours, though.

I finally found a blog post that set me on the right path, on Ed Foh’s blog. Ed in turn was inspired by Kevin Moore’s WPF Bag of Tricks, which also includes an Animating Tile Panel.

Here is a video demonstrating the enhanced behavior of my AnimatedUniformGrid:

Why those two solutions didn’t work for me

Both of the aforementioned solutions contained hardwired positioning logic, though. I simply needed to add the animation behavior to StackPanel, WrapPanel and UniformGrid, not a completely custom panel. Ideally, the solution would be a behavior that could be added on top of those containers. That particular aspect wasn’t realized, and I ended up deriving classes for each of these panels, prefixing the new classes with “Animated”. It is still a pretty acceptable solution. UPDATE: I eventually found this was the same approach taken by at least one commercial offer.

The following is the code required to instantiate the uniform grid (note how you simple need to prefix the panel class with Wpf:Animated):

<ItemsControl ItemsSource="{Binding TeamMembersIncludingUnassigned}">
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
         <Wpf:AnimatedUniformGrid Duration="00:00:01" />
      </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
</ItemsControl>

Adding animation to an existing panel control class

The workflow for converting an existing Panel to an AnimatedPanel is pretty easy:

1. derive a new class from the desired panel class (prefix it with Animated);
2. override the ArrangeOverride method in the new class (don’t call the base class implementation);
3. using .NET Reflector, extract the ArrangeOverride method contents from the base class implementation, and simply substitute the element.Arrange call that is performed for each child for a call to the AnimatedPanelHelper.ArrangeChild() static method.

That is all you need to do!

Acknowledgements

Thanks to Ed Foh and Kevin Moore for their great work.

Download the source code here.

Recently, in developing the Scrum Sprint Monitor, I came across a situation that deviated my ClickOnce deployment from the standard. I needed to add an “AddIns” subfolder to the deployment folder, in order to isolate my MEF addins from my Prism modules (they seem not to play nice together, since my Prism setup will enumerate the deployment folder, loading all DLLs into memory, and on the other hand, MEF will not try to load imports from DLLs that are already loaded into memory).

In any case, I had no choice but to isolate the DLLs in separate folders, and I didn’t really want to have to learn the nuts and bolts of ClickOnce just to solve this one problem.

The problem

I have two deployment scenarios: xcopy deployment and ClickOnce deployment. On the ClickOnce scenario, I deploy a fixed set of addins – non-configurable, for simplicity reasons. I wanted to start deploying a single known DLL (generated by a dependent project), into the AddIns\ServerAdapters folder. I initially had the app project set up to include a reference to the addin project, in order to have the addin DLL included in the deployment. Unfortunately, there is no way to choose the folder the DLL will end up in. It will just be deployed alongside the application, on the root folder. Moving the DLL elsewhere seemed to require me to start editing the manifest file, instead of relying on Visual Studio to maintain it for me – not something I was looking forward to at this point.

After scouring the web for information, I gathered some bits and pieces that got me to a workable, and simple solution: if you add a file to your deployment project and mark it as “Build Action: Content”, Visual Studio 2008 will include that file in the Publish|Install Mode and Settings|Application Files dialog. While I have seen other people include a DLL in the project in order to have Visual Studio include it in the deployment, inserting a link seemed like a cleaner solution (and it actually worked!):

1. Right-click on the folder you wish to add the DLL to;
   
2. Click Add|Existing Item…
   
3. Select the file in question and click in the drop-down arrow of the Add button:
   
4. Select “Add As Link”.
5. Now you have the target DLL listed in your project:
6. Next, you’ll need to set the properties for the DLL, marking it as ”Build Action: Content”. This will make it a part of the deployment.
    

After that I could see the DLL listed in Application Files:

I only had to take care not to accept TFS’ suggestion to add the DLL to source control (just Undo Pending Changes for that file). This solved my deployment problem, and I managed to avoid having to use a tool like mageui.exe or ManifestManagerUtility just to accomplish this seemingly simple task.

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 finally decided to see what the fuss is all about and joined the Tweeple. Right now, I’m using Blu from Thirteen23 as the desktop client, and Tiny Twitter, as the mobile client. Tiny Twitter is a great piece of software!

You can follow me at @pombeiro.

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!

Whitney Hess wrote a nice article about what UX is not. Have a peek at http://mashable.com/2009/01/09/user-experience-design/.

A very interesting documentary is due out in March. From the author:

“Objectified is a documentary about industrial design; it’s about the manufactured objects we surround ourselves with, and the people who make them. On an average day, each of us uses hundreds of objects. (Don’t believe it? Start counting: alarm clock, light switch, faucet, shampoo bottle, toothbrush, razor…) Who makes all these things, and why do they look and feel the way they do? All of these objects are “designed,” but how can good design make them, and our lives, better?
One reason that I’m delving into the world of objects in this film is that I, admittedly, am obsessed by them. Why do I salivate over a shiny new piece of technology, or obsess over a 50-year-old plywood chair? What does all the stuff I accumulate say about me, and do I really need any of it in the first place?”

You can watch the trailer at http://www.youtube.com/watch?v=S9E2D2PaIcI.