Showing Attached Properties in the Cider WPF Designer

If you create a type that defines an attached property, you will notice that this attached property does not show up in the WPF Designer (Cider) Property Browser.  So how do you get it to show up and what level of control do you have over when it shows up?

As it turns out, you can use the following attributes to control how your properties show up in the Property Browser:

AttachedPropertyBrowsableWhenAttributePresentAttribute
AttachedPropertyBrowsableForChildrenAttribute
AttachedPropertyBrowsableForTypeAttribute

You apply them to the get accessor of your attached property definition, like this:

    public class WhenAttributePresentTestControl : Grid
    {
        public static readonly DependencyProperty ShowWhenCustomAttributePresentProperty = DependencyProperty.RegisterAttached(
          "ShowWhenCustomAttributePresent",
          typeof(int),
          typeof(WhenAttributePresentTestControl));

        public static void SetShowWhenCustomAttributePresent(UIElement element, int value)
        {
            element.SetValue(ShowWhenCustomAttributePresentProperty, value);
        }

        [AttachedPropertyBrowsableWhenAttributePresentAttribute(typeof(MyCustomAttribute))]
        public static int GetShowWhenCustomAttributePresent(UIElement element)
        {
            return (int)element.GetValue(ShowWhenCustomAttributePresentProperty);
        }
    }

One thing to keep in mind is that one of the requirements of showing attached properties in the designer is that the owning type needs to have been loaded by the designer.  This happens whenever the designer accesses the type because it is in the XAML source or is a dependency of an element loaded from the XAML source.

Attached to this post is an example of using all 3 of these attributes.

AttachedPropertyBrowsableWhenAttributePresentAttribute

This attribute allows you to specify that your attached property show up in the Property Browser when the selected item has a given attribute applied to it.  If the attribute has a default value, that value also has to be different from the default value.

In the example above that passes in "MyCustomAttribute" as the attribute to look for, when CustomLabel below is selected in the designer, the Property Browser will show the ShowWhenCustomAttribute attached property however it will not when CustomLabelNoCustomAttribute is selected:

    [MyCustomAttribute]
    public class CustomLabel : Label
    {
    }

    public class CustomLabelNoCustomAttribute : Label
    {
    }

AttachedPropertyBrowsableForChildrenAttribute

This attribute indicates that the attached property should be available for the children of the given control.  There are two main flavors for this attribute.  One that includes descendants and one that does not. As you might expect including descendants refers to including all children or simply the direct children of the control.

        [AttachedPropertyBrowsableForChildrenAttribute(IncludeDescendants=true)]
        public static int GetShowForChildrenDeep(UIElement element)
        {
            return (int)element.GetValue(ShowForChildrenDeepProperty);
        }

AttachedPropertyBrowsableForType

This attribute allows you to specify that your attached property show up when a given type or types derived from that type are selected in the designer.  The following sample would make your attached property show up when any Grid, derived Grid, Button or derived Button is selected.

        [AttachedPropertyBrowsableForType(typeof(Grid))]
        [AttachedPropertyBrowsableForType(typeof(Button))]
        public static int GetShowForTypes(UIElement element)
        {
            return (int)element.GetValue(ShowForTypesProperty);
        }

Sample Attached

I have attached a sample to this blog post the shows the usage of all the attributes listed above in the Cider WPF Designer.

AttachedPropertyInDesignerDemo.zip