Evgeny Pokhilko's Weblog

Programmer's den

Customize property editor in the VS designer


Sometimes, the VS property grid in the XAML designer (the code name is Cider) is not enough for custom WPF controls. Once, I needed to update a property of my control automatically depending on a value of another property. First, I searched for an example of such an action in WPF controls of the framework. I found nothing similar. The property grid in VS is plain and one property never depends on another. However the property grid in Expression Blend is much more interesting. Therefore, there should be a way to extend the designer. The way starts from the CategoryAttribute and EditorAttribute atributes. Let’s see an example of a custom WPF control that extends Label. The extended control renders Content and adds prefix before the content and suffix after the content. So our control has two additional properties: Prefix and Suffix. The control is for names. Therefore, Prefix can only be “Mr” or “King”. When the user selects Prefix, Suffix gets an initial value depending on the selected Prefix. Then the user can edit Suffix if she is not happy with the value set automatically. Say the prefix “Mr” correspons to the suffix “Junior” and the prefix “King” corresponds to the suffix “III”. So if the user inputs “Arthur” to Content and selects the prefix “King”, the suffix will be set to “III” automatically. See the picture of the control at runtime below:

It looks identically in the designer. The following picture is the part of the property grid containing Content, Prefix and Suffix:

Note, Suffix can be edited after selecting Prefix because the king is not necessary III. He can be I, II or even IV. But if you set the prefix to Mr, the edited value of suffix will be overriden with Junior.

Let’s see the class declaration of the custom control (Control1).

 [Editor(typeof(ExtCategoryEditor), typeof(ExtCategoryEditor))]
    public class Control1 : Label
    {

The Editor attribute says that we provide a editor that can be embedded into the VS property grid for the control. In fact the part of the property grid under “Ext” is a grid that ExtCategoryEditor provides. Our editor is only for the Ext category. In Control1 class we also need to say which properties correspond to “Ext ” category, so that they may get into our editor. We simply mark properties with CategoryAttribute for this:

        [Category("Ext")]
        public string Prefix
        {
            get { return (string)GetValue(PrefixProperty); }
            set { SetValue(PrefixProperty, value); }
        }

You probably think that ExtCategoryEditor is the class that contains the Grid control we see in the property grid. That’s not right. ExtCategoryEditor is a class derived from CategoryEditor that has a set of methods. One of them gives DataTemplate containing the Grid control. Look at the ExtCategoryEditor class:

    internal class ExtCategoryEditor : CategoryEditor
    {
        public override bool ConsumesProperty(PropertyEntry property)
        {
            string[] properties = new string[]
            {
                "Prefix",
                "Suffix",
                "Self"
            };

            if (properties.Contains(property.PropertyName))
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        public override DataTemplate EditorTemplate
        {
            get
            {
                return (DataTemplate)EditorTempaleForExt.Current["ExtDataTemplate"];
            }
        }

        public override object GetImage(System.Windows.Size desiredSize)
        {
            return null;
        }

        public override string TargetCategory
        {
            get { return "Ext"; }
        }
    }

EditorTemplate is the method giving Grid, which is in EditorTemplate. The Editor template is declared in ResourceDictionary EditorTemplateForExt. Its XAML declaration is below:

    <DataTemplate x:Key="ExtDataTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="Prefix"/>
            <ComboBox Grid.Row="0" Grid.Column="1"
                      DisplayMemberPath="Text"
                      SelectedValuePath="Text"
                      SelectedValue="{Binding Prefix, ElementName=uiPropertyCourier}"
                      SelectionChanged="ComboBox_SelectionChanged">
                <ComboBox.Items>
                    <TextBlock Text="King"/>
                    <TextBlock Text="Mr"/>
                </ComboBox.Items>
            </ComboBox>

            <TextBlock Grid.Row="1" Grid.Column="0" Text="Suffix"/>
            <TextBox Name="uiSuffix" Grid.Row="1" Grid.Column="1" Text="{Binding Suffix, ElementName=uiPropertyCourier}" />

            <local:PropertyCourier  x:Name="uiPropertyCourier"
                Visibility="Collapsed"
                Prefix="{Binding [Prefix].PropertyValue.Value}"
                Suffix="{Binding [Suffix].PropertyValue.Value}">

            </local:PropertyCourier>
        </Grid>

    </DataTemplate>

You can see that “Binding [<Property name>].PropertyValue.Value” in Microsoft’s examples. It means that DataContext of your DataTemplate and the elements inside it is an instance of some internal Microsoft class. The class has an Indexer that receives string as a parameter. It actually gets the property name. I won’t write the names of those Microsoft classes because they declared with internal keyword and are not supposed to be used by developers outside Microsoft. However you can see them in the debugger. Just add watch to the DataContext property.

This is ComboBox_SelectionChanged method:

        private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ComboBox comboBox = (ComboBox)sender;
            PropertyCourier propertyCourier =
                (PropertyCourier)comboBox.FindName("uiPropertyCourier");
            string value = (string)comboBox.SelectedValue;
            switch (value)
            {
                case "King":
                    propertyCourier.Suffix = "III";
                    break;
                case "Mr":
                    propertyCourier.Suffix = "Junior";
                    break;
            }
        }


PropertyCourier is an empty FrameworkElement with two dependency properties: Prefix and Suffix. It is just an intermediate object that pass over values from our controls to the instances of the internal microsoft classes. The point is that you can not update properties in Control1 directly because of two reasons. Firstly, It is not convenient to get access to the Control1 object from the method. Secondly, the values won’t be serialized. Values should pass through internal Cider classes to be serialized. I use PropertyCourier as a convenient way to update values through Cider classes.

For more details download the code.

June 29, 2008 - Posted by | .NET, WPF | , , , , ,

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: