Question

Firstly, apologies for all the XAML. I’ve tried for a few days to resolve this, but I must be missing something. The summary question is that my UserControl dependency property does not appear to data-bind in the code-behind when it is used.

Details: I have the following simple UserControl (in its own dll), where I am using a slider from 0..59 to choose seconds, and the UserControl has a dependency property Value that returns a TimeSpan made up of the seconds selected via the slider:

public partial class TinyTimeSpanControl : UserControl, INotifyPropertyChanged
{
    public TinyTimeSpanControl()
    {
        InitializeComponent();
    }

    private int _seconds;

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
    public int Seconds
    {
        get { return _seconds; }
        set
        {
            if (_seconds == value)
                return;
            _seconds = value;
            RaisePropertyChanged("Seconds");

            var t = Value;
            Value = new TimeSpan(t.Hours, t.Minutes, _seconds);
        }
    }

    public TimeSpan Value
    {
        get { return (TimeSpan) GetValue(ValueProperty); }
        set { SetValue(ValueProperty, value); }
    }

    private static void OnValueChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
    {
        TinyTimeSpanControl control = obj as TinyTimeSpanControl;
        var newValue = (TimeSpan)e.NewValue;

        control.Seconds = newValue.Seconds;
    }

    public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
      "Value", typeof(TimeSpan), typeof(TinyTimeSpanControl), new PropertyMetadata(OnValueChanged));
}

With the simple (elided) xaml:

<UserControl x:Class="WpfControlLibrary1.TinyTimeSpanControl"  x:Name="root">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Slider Name="SecondsSlider"
            Width="120"
            Height="23"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            LargeChange="5"
            SelectionStart="0"
            SmallChange="1"
            Value="{Binding Path=Seconds,
                            ElementName=root}" SelectionEnd="59" Maximum="59" />
    <Label Name="label1"
           Grid.Column="1"
           Content="{Binding ElementName=SecondsSlider,
                             Path=Value}" />
    <Label Name="label2"
           Grid.Column="2"
           Content="Seconds" />
</Grid>
</UserControl>

The binding in the control works fine.

Now when I compile this, then add TinyTimeSpanControl to one of my windows (elided):

    <Window x:Class="WpfControls.MainWindow"
            xmlns:my="clr-namespace:WpfControlLibrary1;assembly=WpfControlLibrary1"
            x:Name="root"
            Closing="root_Closing">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="142*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <my:TinyTimeSpanControl Name="tinyTimeSpanControl1"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Top"
                                    Value="{Binding ElementName=root,
                                                    Path=TheTime}" />
            <Label Name="label1"
                   Grid.Column="1"
                   Content="{Binding ElementName=tinyTimeSpanControl1,
                                     Path=Value}" />
            <Label Name="label2"
                   Grid.Column="2"
                   Content="{Binding ElementName=root,
                                     Path=TheTime}" />

        </Grid>
    </Window>

where my main window:

public partial class MainWindow : Window, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    private TimeSpan _theTime = new TimeSpan(0, 0, 33);
    public TimeSpan TheTime
    {
        get
        {
            return _theTime;
        }
        set
        {
            if (_theTime == value)
                return;

            _theTime = value;
            RaisePropertyChanged("TheTime");
        }
    }

The databinding partially works:

• tinyTimeSpanControl1 is initially set to the value of TheTime property in my code behind of my Main window
• tinyTimeSpanControl1 updates label1 when the slider is moved.

But does not work:

• when the slider moves, label2 remains set to the original version of TheTime

Putting a breakpoint in on the Window_closing event shows that TheTime has not changed.

Am I missing some event that I need to raise in my UserControl?

Thanks, and apologies once again for all the xaml (it’s the minimal case as well).

Answer 1

This is the problem:

Value = new TimeSpan(t.Hours, t.Minutes, _seconds);

This clears out the binding you established in your window and just sets a value. In the UserControl code you should not use SetValue but SetCurrentValue, which keeps bindings on the property intact.

Some other things might be off as well that i did not see yet…