PropertyGrid does not have built-in support for passwords. If your data has password property that you want to allow the user to edit, you will need to create a custom editor. This article describes one such custom editor.

Creating custom editors for PropertyGrid is a matter of defining a new Style for the editor control that is embedded inside the PropertyGridItem associated with the property which is to be edited. The simplest solution for making a password editor is to base it on the PasswordBox control that is part of WPF.

First thing to note is that PasswordBox does not allow binding to its Password property. We can get around that with a behavior. A behavior is simply an AttachedDependencyProperty that does something in response to a change in value. Here is such a behavior, which can be copied and pasted into your application somewhere:

public static class PasswordBoxBehavior
{
    private const string _UnsetValue = "UnsetValue";

    /// <Summary>
    /// Implements a behavior which allows binding a PasswordBox to its Password value.
    /// </Summary>
    public static readonly DependencyProperty PasswordProperty =
        DependencyProperty.RegisterAttached("Password", typeof(String), typeof(PasswordBoxBehavior), new PropertyMetadata(_UnsetValue,
            (s, e) =>
            {
                var passwordBox = (PasswordBox)s;

                if (Equals(e.OldValue, _UnsetValue))
                    passwordBox.PasswordChanged += PasswordBox_PasswordChanged;
                else if (Equals(e.NewValue, _UnsetValue))
                    passwordBox.PasswordChanged -= PasswordBox_PasswordChanged;

                if (!Equals(passwordBox.Password, e.NewValue))
                    passwordBox.Password = (string)e.NewValue;
            }));


    public static String GetPassword(PasswordBox obj)
    {
        return (String)obj.GetValue(PasswordProperty);
    }
    public static void SetPassword(PasswordBox obj, String value)
    {
        obj.SetValue(PasswordProperty, value);
    }

    static void PasswordBox_PasswordChanged(object sender, RoutedEventArgs e)
    {
        var passwordBox = (PasswordBox)sender;
        SetPassword(passwordBox, passwordBox.Password);
    }
}

WARNING: PasswordBox does not allow binding to its Password property for security reasons. Use the above behavior to circumvent that restriction at your own risk!

Next, we define a Style that targets DevComponents.WPF.Controls.PropertyGridEditor and uses a PasswordBox with the above behavior. This style needs to be accessible by the PropertyGrid. A good place for it would be in the Resources of the Window (or Page, or UserControl) where the PropertyGrid is located. Here is the style (note ctrls = DevComponents.WPF.Controls)

<Style x:Key="PasswordEditorStyle" TargetType="ctrls:PropertyGridEditor">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ctrls:PropertyGridEditor">
                <Border Name="Bdr" Background="Transparent" BorderThickness="1">
                    <PasswordBox BorderThickness="0" VerticalContentAlignment="Center"
                                 local:PasswordBoxBehavior.Password="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                 Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Bdr" Property="BorderBrush" 
                             Value="{DynamicResource {x:Static ctrls:PropertyGridEditor.TextBoxMouseOverBorderBrushKey}}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter
>
</
Style
>

Finally, we need a PropertyDefinition that links up the editor for the password property with the style defined above. Assuming that the property in question is named “Password”, this would look something like:

<ctrls:PropertyGrid ....>
    <ctrls:PropertyGrid.PropertyDefinitions>
        <ctrls:PropertyDefinition TargetPropertyName="Password" 
                                 EditorStyle="{StaticResource PasswordEditorStyle}" />
    </ctrls:PropertyGrid.PropertyDefinitions
>
</
ctrls:PropertyGrid
>

That’s It!!

Related posts:

  1. PropertyGrid Quick Start Guide
  2. Brush Control Quick Start Guide
  3. Rating Control for WPF Quick Start Guide
  4. WPF Color Control Quick Start Guide
  5. Circular Progress Control (WPF) Quick Start Guide