C# 在 WPF 中绑定 CustomControl 属性

Question

I'm using this as a guideline to try to create a extend a control. This extended control has to be used in a user control.

The custom control extends the Button and has a DependencyProperty Length :

public class SquareButton : Button
{
    static SquareButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(SquareButton),
            new FrameworkPropertyMetadata(typeof(SquareButton)));
    }

    public static readonly DependencyProperty LengthProperty = DependencyProperty.Register(
        "Length",
        typeof(double),
        typeof(SquareButton),
        new FrameworkPropertyMetadata(20));

    public double Length
    {
        get => (double) this.GetValue(LengthProperty);
        set => this.SetValue(LengthProperty, value);
    }
}

The Themes/Generic.xaml merges the resource dictionary xaml file for this control:

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary
        Source="/OwnControls;component/Input/CustomControl/SquareButton.xaml" />
</ResourceDictionary.MergedDictionaries>

The file SquareButton.xaml is defined in a ResourceDictionary and tries to set a width property:

<Style
    TargetType="local:SquareButton"
    BasedOn="{StaticResource {x:Type Button}}">
    <Setter
        Property="Width"
        Value="100">
    </Setter>
</Style>

Now I need to bind the Width property to the dependency property `Length of the SquareButton control but I don't know how and I can't find it. Things I've tried:

<Setter
    Property="Width"
    Value="{Binding Path=Length, RelativeSource={RelativeSource TemplatedParent}, 
    Mode=OneWay}">
</Setter>

but this has no effect on the width of the button. I also tried

<Setter
    Property="Width"
    Value="{TemplateBinding Length}">
</Setter>

but this give a compile error:

'Length' member is not valid because it does not have a qualifying type name.

The SquareButton control is being used in a UserControl like this:

<customControl:SquareButton
    Length="100"
    Content="1" />

How can I bind the Length in SquareButton.xaml to the Length property of the SquareButton extended control?

Answer 1

Since you own the code for SquareButton , you have a lot of power. There are some different techniques you'll learn as you build more custom controls.

One is using property changed callbacks on your custom dependency properties. In the example below, I use one for Length so that I can set Width and Height .

Another is adding property changed callbacks on existing dependency properties that you don't own. This can be done using a DependencyPropertyDescriptor . In the example below I setup callbacks for Width and Height, so I can keep everything in sync.

This little control can make use of both of these techniques. Essentially, you need Length to control Width and Height, but also need to handle changes to Width and Height to keep everything in sync and square!

Here is an example using those techniques:

using System;
using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace WpfApp4
{
    public class SquareButton : Button
    {
        private static bool isSizeChanging;

        static SquareButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(SquareButton), new FrameworkPropertyMetadata(typeof(SquareButton)));
        }

        public SquareButton()
        {
            var widthPropertyDescriptor = DependencyPropertyDescriptor.FromProperty(WidthProperty, typeof(SquareButton));
            widthPropertyDescriptor.AddValueChanged(this, OnWidthChanged);

            var heightPropertyDescriptor = DependencyPropertyDescriptor.FromProperty(HeightProperty, typeof(SquareButton));
            heightPropertyDescriptor.AddValueChanged(this, OnHeightChanged);

        }

        private void OnWidthChanged(object sender, EventArgs e)
        {
            if (isSizeChanging) return;
            isSizeChanging = true;
            Length = Width;
            Height = Width;
            isSizeChanging = false;
        }

        private void OnHeightChanged(object sender, EventArgs e)
        {
            if (isSizeChanging) return;
            isSizeChanging = true;
            Length = Height;
            Width = Height;
            isSizeChanging = false;
        }

        #region Length (DependencyProperty)
        public static readonly DependencyProperty LengthProperty =
            DependencyProperty.Register(
                "Length",
                typeof(double),
                typeof(SquareButton),
                new PropertyMetadata(20d, OnLengthChanged));

        public double Length
        {
            get => (double)GetValue(LengthProperty);
            set => SetValue(LengthProperty, value);
        }

        private static void OnLengthChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (!(d is SquareButton button) || isSizeChanging) return;
            isSizeChanging = true;
            button.Width = button.Length;
            button.Height = button.Length;
            isSizeChanging = false;
        }
        #endregion
    }
}

I hope this helps!