Thursday, June 25, 2009

Detecting DesignMode in XAML

I was trying to build a control that has a border around it only in design mode. You do have the static class DesignerProperties and its method GetIsInDesignMode(DependencyObject element) to detect that in code, and you do have a property DesignMode on Components, but one that is not a Dependency property. How can you detect DesignMode in XAML?

Well, looking at the source for DesignerProperties I noticed that it does two things:
  1. Register an attached property called IsInDesignMode to itself
  2. Get/Set that dependency property in the GetIsInDesignMode/SetIsInDesignMode methods

More on how to create attached properties here: How to Create an Attached Property and here: Showing Attached Properties in the Cider/Visual Studio WPF Designer.

So, all I had to do is use a trigger on the IsInDesignMode attached property. For that, these steps must be followed:
  • Add the ComponentModel namespace to your XAML: xmlns:ComponentModel="clr-namespace:System.ComponentModel;assembly=PresentationFramework"
  • Use ComponentModel:DesignerProperties.IsInDesignMode in your Triggers as the Property
  • Use (ComponentModel:DesignerProperties.IsInDesignMode) in your DataTriggers as the Path of Bindings

Please take notice of the brackets around the property when used in Binding Path mode. It is the only way to use attached properties there. It also gives you more advanced intellisense and warnings and a faster type resolution at runtime.

Another thing to take into consideration is that (at least in Silverlight) this mechanism is buggy, at least that's what I found in this blog post.


Anonymous said...

Very useful!! That helped me a lot

Just noticed that you miss the "L" at the end of "ComponentMode" in the example given


Siderite said...

Thank you! I've updated the post.

Benoit Rocco said...

Thank you, good tip !