Creating Custom property editors for Blend & Orcas

Explaining how to create custom property editors for Blend & Orcas using WPF features.

Requirements

• A latest version of Blend.Preferably May 2007 CTP
• Microsoft's new design dll .This is in .net3.5.You may also use this with 3.0.

I am taking famous Clock control from codeproject and implementing the custom property editor

Steps

1. Get the sample from code project.
2. Open the sample and make a reference to new design dll.If you already have orcas 1(3.5) it would be in your machine.Else download from here.
3. Prepare the DataTemplate of the property editor.Better save in the generic.xaml file itself.An eg given below

   
   <DataTemplate x:Key="TimeEditorDataTemplate">
   <Grid>
   <Grid.ColumnDefinitions>
   <ColumnDefinition Width="*"/>
   <ColumnDefinition Width="Auto"/>
   </Grid.ColumnDefinitions>>
   <TextBox Text="{Binding Path=Value, Mode=TwoWay}"/>
   <PropertyEditing:EditModeSwitchButton Grid.Column="1" Content="Change"/>
   </Grid>
   </DataTemplate>
   

4. Create our own editor by inheriting from Microsoft.Windows.Design.PropertyEditing.DialogPropertyValueEditor
5. Set the DataTemplates..See the below code

   public class TimeEditor : Microsoft.Windows.Design.PropertyEditing.DialogPropertyValueEditor {
   
   public TimeEditor(): base() {
   //This is to get the DataTemplate of editor from generic.xaml file Uri
   
   resourceLocator = new Uri("MyControls" + @";component/themes/generic.xaml", UriKind.RelativeOrAbsolute);
   ResourceDictionary rd = (ResourceDictionary)Application.LoadComponent(resourceLocator);
   DataTemplate dt = rd["TimeEditorDataTemplate"] as DataTemplate;
   this.InlineEditorTemplate = dt;
   this.DialogEditorTemplate = dt; } }

6. Now set the editor into desired property
   

   
   [Editor(typeof(TimeEditor), typeof(DialogPropertyValueEditor))]
   public DateTime MyTime {
   get{ return (DateTime) GetValue(MyTimeProperty); }
   set{ SetValue(MyTimeProperty, value); }
   }

7. Yes.Thats it.Instantiate your control in Blend and see the PROPERTYEDITOR

Download full sample here

Its a great design time experience with designers (Visusl studio ExpressionBlend). Right?

More details

http://blogs.msdn.com/jnak/archive/2007/08/10/adding-design-time-metadata-to-cider-and-blend.aspx