How to create a Dependency Property for Binding

Question

I'm working on a "simple" case. I like to create a new custom control which implements a DependencyProperty. In the next step I like to create a binding for updating the properties in both directions. I've builded a simple sample for this case, but the binding doesn't seem to work. I've found a way for updating the DPControl's property by using the FrameworkPropertyMetadata, but I don't know whether it's also a good idea to use the OnPropertyChanged event.

HERE is my sample project:

My control contains simply a Label

<UserControl x:Class="WPF_MVVM_ListBoxMultiSelection.DPControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WPF_MVVM_ListBoxMultiSelection"
             mc:Ignorable="d" Height="84.062" Width="159.641">
    <Grid Margin="0,0,229,268">
        <Label Content="TEST" x:Name="label" Margin="0,0,-221,-102"/>
    </Grid>
</UserControl>

and implement a custom dependency property. Currently, I have also implemented the PropertyChanged method for the FramePropertyMetadata and set in this method the label's content, but I like to get it work in both directions.

public partial class DPControl : UserControl
{
    public DPControl()
    {
        InitializeComponent();
    }

    public string MyCustomLabelContent
    {
        get { return (string)GetValue(MyCustomLabelContentProperty);}
        set
        {
            SetValue(MyCustomLabelContentProperty, value);
        }
    }

    private static void OnMyCustomLabelContentPropertyChanged(DependencyObject source,
    DependencyPropertyChangedEventArgs e)
    {
        DPControl control = (DPControl)source;
        control.label.Content = e.NewValue;
    }

    public static readonly DependencyProperty MyCustomLabelContentProperty = DependencyProperty.Register(
          "MyCustomLabelContent",
          typeof(string),
          typeof(DPControl),
          new FrameworkPropertyMetadata(null,
              OnMyCustomLabelContentPropertyChanged
          )
        );

I use this control simply in a Window by:

<local:DPControl MyCustomLabelContent="{Binding MyLabelContent, Mode=TwoWay}" Margin="72,201,286,34"/>

MyLabelContent is a property in the ViewModel, which has implemented also the INotifyPropertyChanged interface.

public class ViewModel_MainWindow:NotifyPropertyChanged
{

    private string _myLabelContent;

    public string MyLabelContent
    {
        get { return _myLabelContent; }
        set { _myLabelContent = value;
            RaisePropertyChanged();
        }
    }...

So how can I get it work: Using the binding feature with my new control on custom properties.

15ee8f99-57ff-4f92-890c-b56153 15ee8f99-57ff-4f92-890c-b56153 · Accepted Answer · 2017-06-06T15:15:16

In your UserControl:

<Label 
    Content="{Binding MyCustomLabelContent, RelativeSource={RelativeSource AncestorType=UserControl}}"
    x:Name="label" Margin="0,0,-221,-102"/>

And get rid of that property-changed callback. All you need is the Binding.

I like to get it work in both directions

To make the dependency property two-way by default:

public static readonly DependencyProperty MyCustomLabelContentProperty = 
    DependencyProperty.Register(
        "MyCustomLabelContent",
        typeof(string),
        typeof(DPControl),
        new FrameworkPropertyMetadata(null, 
            FrameworkPropertyMetadataOptions.BindsTwoWayByDefault)
    );

I omitted the unnecessary property change handler.

It can't usefully be two-way now, because Label.Content can't generate its own value. If you want your UserControl to set the value in its codebehind, that's easy:

MyCustomLabelContent = "Some arbitrary value";

If you did the binding like I showed you, that will update the Label in the UserControl XAML as well as the viewmodel property bound to the UserControl's dependency property.

If you want the XAML to set it, you'll need to

Lastly, this:

Margin="0,0,-221,-102"

Is not a good way to do layout. WPF layout with Grid, StackPanel, etc. is much easier and more robust.

How to create a Dependency Property for Binding

1 Answers