Databinding between two custom UserControls

Question

I have two custom NumberUpDown user controls that need to interact with each other. The maximum value of the one on the left needs to be the minimum of the one on the right. To accomplish this I put them in another user control which contains both and has all the required data members.

The xaml the container user control looks like

<controls:NumberBox x:Name="LeftNumberBox" HorizontalAlignment="Right" Width="50" Min="{Binding Min}" Current="{Binding Left}" Max="{Binding Right}"/>
<controls:NumberBox x:Name="RightNumberBox" Grid.Column="2" HorizontalAlignment="Left" Width="50" Min="{Binding Left}" Current="{Binding Right}" Max="{Binding Max}"/>

and its cs file looks like

public ThresholdBox()
{
    InitializeComponent();
}

public int Min
{
    get
    {
        return (int)GetValue(MinIntProperty);
    }
    set
    {
        SetValue(MinIntProperty, value);
    }
}

public static readonly DependencyProperty MinIntProperty =
    DependencyProperty.Register("Min", typeof(int), typeof(ThresholdBox), new PropertyMetadata(0));

public int Max
{
    get
    {
        return (int)GetValue(MaxIntProperty);
    }
    set
    {
        SetValue(MaxIntProperty, value);
    }
}

public static readonly DependencyProperty MaxIntProperty =
    DependencyProperty.Register("Max", typeof(int), typeof(ThresholdBox), new PropertyMetadata(100));

public int Left
{
    get
    {
        return LeftNumberBox.Current;
    }
    set
    {
        LeftNumberBox.Current = value;
    }
}

public int Right
{
    get
    {
        if(RightNumberBox != null)
        {
            return RightNumberBox.Current;
        }
        else
        {
            return 10;
        }
    }
    set
    {
        RightNumberBox.Current = value;
    }
}

and the NumberBox aka NumberUpDown user control cs file looks like

public NumberBox()
{
    InitializeComponent();
    NUDTextBox.Text = Current.ToString();

    Min = 0;
    Current = 10;
    Max = 100;
}

public int Min
{
    get
    {
        return (int)GetValue(MinIntProperty);
    }
    set
    {
        SetValue(MinIntProperty, value);
    }
}

public static readonly DependencyProperty MinIntProperty =
    DependencyProperty.Register("Min", typeof(int), typeof(NumberBox), new PropertyMetadata(0));

public int Current
{
    get
    {
        return (int)GetValue(CurrentIntProperty);
    }
    set
    {
        SetValue(CurrentIntProperty, value);
    }
}

public static readonly DependencyProperty CurrentIntProperty =
    DependencyProperty.Register("Current", typeof(int), typeof(NumberBox), new PropertyMetadata(10));

public int Max
{
    get
    {
        return (int)GetValue(MaxIntProperty);
    }
    set
    {
        SetValue(MaxIntProperty, value);
    }
}

public static readonly DependencyProperty MaxIntProperty =
    DependencyProperty.Register("Max", typeof(int), typeof(NumberBox), new PropertyMetadata(100));

I didn't include the button logic because it works as expected

The container is called with

<controls:ThresholdBox Left="10" Right="90" Min="0" Max="100" Padding="0,20,0,20"/>

Unfortunately the code doesn't work as expected. Both NumberBoxes start at 10, the left one will go down to 0 and up to 10, while the right one goes up to 100 and no lower than 10, even if I lower the left NumberBoxes value to 0 in the UI.

I thought this might be a two way binding problem but that causes as StackOverFlow Exception. What am I missing in my binding code to make both NumberBoxes use/modify the container's Left and Right properties respectively?

Answer 1

If "The maximum value of the one on the left needs to be the minimum of the one on the right", why don't those two properties bind to the same value? Add a new property to your ViewModel:

public int Intermediate { get; set; }

Then bind left Max and right Min to this property.

<controls:NumberBox x:Name="LeftNumberBox" HorizontalAlignment="Right" Width="50" Min="{Binding Min}" Current="{Binding Left}" Max="{Binding Intermediate}"/>
<controls:NumberBox x:Name="RightNumberBox" Grid.Column="2" HorizontalAlignment="Left" Width="50" Min="{Binding Intermediate}" Current="{Binding Right}" Max="{Binding Max}"/>