用户控件上的WPF按钮属性未在属性窗格中显示属性

Question

I've been beating my head against the wall over this for days now and I can't seem to find any info that fits my problem.

So, I have this toolbar Usercontrol that's meant to be dropped in to an application. This toolbar has a property exposed called "FullExtentButton" which is a reference to the button. What I want is to expose the properties of this button in the designer properties pane on the toolbar user control so the developers can set the properties directly from the designer.

In WinForms, this was very easy to do. WPF, not so much (unless I'm just blind).

In my tool bar code:

[Category("Standard Buttons")]
[Browsable(true)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)]
public MyToolbarButton FullExtentButton
{
    get;
    private set;
}

This value is set in the constructor the user control:

public MyToolbar()
{
    InitializeComponent();

    FullExtentButton = new MyToolbarButton("FullExtent", "/Utilities;component/Resources/full_extent_16x16.png");
}

The button itself is quite simple:

public class MyToolbarButton
    : Freezable
{
    #region Dependency Properties.
    /// <summary>
    /// Dependency property for the <see cref="IsVisible"/> property.
    /// </summary>
    public static DependencyProperty IsVisibleProperty =     DependencyProperty.Register("IsVisible", typeof(bool), typeof(MyToolbarButton),
                                                                                                 new FrameworkPropertyMetadata(true,
                                                                                                                           FrameworkPropertyMetadataOptions
                                                                                                                           .BindsTwoWayByDefault, Visible_Changed));
/// <summary>
/// Dependency property for the <see cref="IsEnabled"/> property.
/// </summary>
public static DependencyProperty IsEnabledProperty = DependencyProperty.Register("IsEnabled", typeof(bool), typeof(MyToolbarButton),
                                                                                 new FrameworkPropertyMetadata(true,
                                                                                                               FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, Enabled_Changed));

/// <summary>
/// Dependency property for the <see cref="ToolTip"/> property.
/// </summary>
public static DependencyProperty ToolTipProperty = DependencyProperty.Register("ToolTip", typeof(string), typeof(MyToolbarButton),
                                                                                 new FrameworkPropertyMetadata(string.Empty,
                                                                                                               FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, ToolTip_Changed));

/// <summary>
/// Dependency property for the <see cref="Glyph"/> property.
/// </summary>
public static DependencyProperty GlyphProperty = DependencyProperty.Register("Glyph", typeof(ImageSource), typeof(MyToolbarButton),
                                                                                 new FrameworkPropertyMetadata(null,
                                                                                                               FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, Glyph_Changed));

/// <summary>
/// Dependency property for the <see cref="ID"/> property.
/// </summary>
public static DependencyProperty IDProperty = DependencyProperty.Register("ID", typeof(string), typeof(MyToolbarButton),
                                                                          new FrameworkPropertyMetadata(string.Empty,
                                                                                                        FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

/// <summary>
/// Dependency property for the <see cref="ClickedCommand"/> property.
/// </summary>
public static DependencyProperty ClickedCommandProperty = DependencyProperty.Register("ClickedCommand", typeof(IMyRelayCommand<string>), 
    typeof(MyToolbarButton),
    new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
#endregion

#region Variables.
// The default image source for the button glyph.
private readonly Uri _defaultImageSource;
#endregion

#region Properties.
/// <summary>
/// Property to set or return the command to execute when the button is clicked.
/// </summary>
public IMyRelayCommand<string> ClickedCommand
{
    get
    {
        return (IMyRelayCommand<string>)GetValue(ClickedCommandProperty);
    }
    set
    {
        SetValue(ClickedCommandProperty, value);
    }
}


/// <summary>
/// Property to set or return the ID of the button.
/// </summary>
public string ID
{
    get
    {
        object value = GetValue(IDProperty);

        return value == null ? string.Empty : value.ToString();
    }
    set
    {
        SetValue(IDProperty, value);
    }
}

/// <summary>
/// Property to set or return the glyph for this button.
/// </summary>
public ImageSource Glyph
{
    get
    {
        return GetValue(GlyphProperty) as ImageSource;
    }
    set
    {
        SetValue(GlyphProperty, value);
    }
}

/// <summary>
/// Property to set or return the tool tip for the button.
/// </summary>
public string ToolTip
{
    get
    {
        object value = GetValue(ToolTipProperty);

        return value == null ? string.Empty : value.ToString();
    }
    set
    {
        SetValue(ToolTipProperty, value);
    }
}

/// <summary>
/// Property to set or return whether the button is visible or not.
/// </summary>
public bool IsVisible
{
    get
    {
        return (bool)GetValue(IsVisibleProperty);
    }
    set
    {
        SetValue(IsVisibleProperty, value);
    }
}

/// <summary>
/// Property to set or return whether the button is enabled or not.
/// </summary>
public bool IsEnabled
{
    get
    {
        return (bool)GetValue(IsEnabledProperty);
    }
    set
    {
        SetValue(IsEnabledProperty, value);
    }
}
#endregion

#region Methods.
/// <summary>
/// Function to handle a change to the <see cref="GlyphProperty"/>.
/// </summary>
/// <param name="sender">The sender of the event.</param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
private static void Glyph_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
    // TODO
}

/// <summary>
/// Function to handle a change to the <see cref="IsVisibleProperty"/>.
/// </summary>
/// <param name="sender">The sender of the event.</param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
private static void Visible_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
    // TODO
}

/// <summary>
/// Function to handle a change to the <see cref="IsEnabledProperty"/>.
/// </summary>
/// <param name="sender">The sender of the event.</param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
private static void Enabled_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
    // TODO
}

/// <summary>
/// When implemented in a derived class, creates a new instance of the <see cref="T:System.Windows.Freezable" /> derived class.
/// </summary>
/// <returns>The new instance.</returns>
protected override Freezable CreateInstanceCore()
{
    return new MyToolbarButton();
}
#endregion

#region Constructor/Finalizer.
/// <summary>
/// Initializes a new instance of the <see cref="MyToolbarButton"/> class.
/// </summary>
/// <param name="buttonID">The ID of the button being clicked.</param>
/// <param name="defaultImageSource">The default image source URI for the glyph used by the button.</param>
internal MyToolbarButton(string buttonID, string defaultImageSource)
{
    ID = buttonID;
    IsVisible = true;
    IsEnabled = true;
    ToolTip = string.Empty;

    if (!string.IsNullOrWhiteSpace(defaultImageSource))
    {
        _defaultImageSource = new Uri(defaultImageSource, UriKind.Relative);
    }
}

/// <summary>
/// Initializes a new instance of the <see cref="MyToolbarButton"/> class.
/// </summary>
public MyToolbarButton()
{
    // This is here to keep the XAML designer from complaining.         
}
#endregion

But, when I view the button property on my user control in the XAML designer, and expand its properties I get this:

As you can see, there are no properties under that property in the XAML designer. What I want is to have the properties for that button appear under the "FullExtentsButton" property so that my developers can modify the properties, but not be able to create/remove the instance that's already there.

I've tried making the FullExtentButton property on my UserControl a DependencyProperty, but that didn't fix anything.

This is part of a standard toolbar that we want to use across applications, so enforcing consistency is pretty important for us. Plus it will allow our devs to focus on other parts of applications rather than reimplementing the same thing over and over (which is what we're having to do right now).

So, that said, I'm at my wits end here, what am I doing wrong?

Answer 1

Using this code which I had to change somewhat to get it to compile....

/// <summary>
/// Interaction logic for MyToolBarButton.xaml
/// </summary>
public partial class MyToolBarButton : UserControl
{
    public MyToolBarButton()
    {
        InitializeComponent();
    }
      #region Dependency Properties.
    /// <summary>
    /// Dependency property for the <see cref="IsVisible"/> property.
    /// </summary>
    public static DependencyProperty IsVisibleProperty = DependencyProperty.Register("IsVisible", typeof(bool), typeof(MyOldToolBarButton),
                                                                                                 new FrameworkPropertyMetadata(true,
                                                                                                                           FrameworkPropertyMetadataOptions
                                                                                                                           .BindsTwoWayByDefault, Visible_Changed));
    /// <summary>
    /// Dependency property for the <see cref="IsEnabled"/> property.
    /// </summary>
    public static DependencyProperty IsEnabledProperty = DependencyProperty.Register("IsEnabled", typeof(bool), typeof(MyOldToolBarButton),
                                                                                     new FrameworkPropertyMetadata(true,
                                                                                                                   FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, Enabled_Changed));

    /// <summary>
    /// Dependency property for the <see cref="ToolTip"/> property.
    /// </summary>
    public static DependencyProperty ToolTipProperty = DependencyProperty.Register("ToolTip", typeof(string), typeof(MyOldToolBarButton),
                                                                                     new FrameworkPropertyMetadata(string.Empty,
                                                                                                                   FrameworkPropertyMetadataOptions.BindsTwoWayByDefault,
                                                                                                                      new PropertyChangedCallback(ToolTipPropertyChanged)));

    private static void ToolTipPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        throw new NotImplementedException();
    }



    /// <summary>
    /// Dependency property for the <see cref="Glyph"/> property.
    /// </summary>
    public static DependencyProperty GlyphProperty = DependencyProperty.Register("Glyph", typeof(ImageSource), typeof(MyOldToolBarButton),
                                                                                     new FrameworkPropertyMetadata(null,
                                                                                                                   FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, Glyph_Changed));

    /// <summary>
    /// Dependency property for the <see cref="ID"/> property.
    /// </summary>
    public static DependencyProperty IDProperty = DependencyProperty.Register("ID", typeof(string), typeof(MyOldToolBarButton),
                                                                              new FrameworkPropertyMetadata(string.Empty,
                                                                                                            FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

    /// <summary>
    /// Dependency property for the <see cref="ClickedCommand"/> property.
    /// </summary>
    public static DependencyProperty ClickedCommandProperty = DependencyProperty.Register("ClickedCommand", typeof(string),
        typeof(MyOldToolBarButton),
        new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
    #endregion

    #region Variables.
    // The default image source for the button glyph.
    public Uri _defaultImageSource { private set; get; }
    #endregion

    #region Properties.



    /// <summary>
    /// Property to set or return the ID of the button.
    /// </summary>

    [Category("Configuration")]
    public string ID
    {
        get
        {
            object value = GetValue(IDProperty);

            return value == null ? string.Empty : value.ToString();
        }
        set
        {
            SetValue(IDProperty, value);
        }
    }

    /// <summary>
    /// Property to set or return the glyph for this button.
    /// </summary>

    [Category("Configuration")]
    public ImageSource Glyph
    {
        get
        {
            return GetValue(GlyphProperty) as ImageSource;
        }
        set
        {
            SetValue(GlyphProperty, value);
        }
    }

    /// <summary>
    /// Property to set or return the tool tip for the button.
    /// </summary>
    /// 

    [Category("Configuration")]
    public string ToolTip
    {
        get
        {
            object value = GetValue(ToolTipProperty);

            return value == null ? string.Empty : value.ToString();
        }
        set
        {
            SetValue(ToolTipProperty, value);
        }
    }

    /// <summary>
    /// Property to set or return whether the button is visible or not.
    /// </summary>
    /// 
    [Category("Configuration")]
    public bool IsVisible
    {
        get
        {
            return (bool)GetValue(IsVisibleProperty);
        }
        set
        {
            SetValue(IsVisibleProperty, value);
        }
    }

    /// <summary>
    /// Property to set or return whether the button is enabled or not.
    /// </summary>
    /// 
    [Category("Configuration")]
    public bool IsEnabled
    {
        get
        {
            return (bool)GetValue(IsEnabledProperty);
        }
        set
        {
            SetValue(IsEnabledProperty, value);
        }
    }
    #endregion

    #region Methods.
    /// <summary>
    /// Function to handle a change to the <see cref="GlyphProperty"/>.
    /// </summary>
    /// <param name="sender">The sender of the event.</param>
    /// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
    private static void Glyph_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        // TODO
    }

    /// <summary>
    /// Function to handle a change to the <see cref="IsVisibleProperty"/>.
    /// </summary>
    /// <param name="sender">The sender of the event.</param>
    /// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
    private static void Visible_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        // TODO
    }

    /// <summary>
    /// Function to handle a change to the <see cref="IsEnabledProperty"/>.
    /// </summary>
    /// <param name="sender">The sender of the event.</param>
    /// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
    private static void Enabled_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        // TODO
    }

    /// <summary>
    /// When implemented in a derived class, creates a new instance of the <see cref="T:System.Windows.Freezable" /> derived class.
    /// </summary>
    /// <returns>The new instance.</returns>
    protected  Freezable CreateInstanceCore()
    {
        return new MyOldToolBarButton();
    }
    #endregion

    #region Constructor/Finalizer.
    /// <summary>
    /// Initializes a new instance of the <see cref="MyOldToolBarButton"/> class.
    /// </summary>
    /// <param name="buttonID">The ID of the button being clicked.</param>
    /// <param name="defaultImageSource">The default image source URI for the glyph used by the button.</param>
    internal void MyOldToolBarButton(string buttonID, string defaultImageSource)
    {
        ID = buttonID;
        IsVisible = true;
        IsEnabled = true;
        ToolTip = string.Empty;

        if (!string.IsNullOrWhiteSpace(defaultImageSource))
        {
            _defaultImageSource = new Uri(defaultImageSource, UriKind.Relative);
        }
    }

    /// <summary>
    /// Initializes a new instance of the <see cref="MyOldToolBarButton"/> class.
    /// </summary>
    public void MyOldToolBarButton()
    {
        // This is here to keep the XAML designer from complaining.         
    }
    #endregion
}

And adding it to another "parent" control... The properties look like this:

Is this what you are looking for?