C＃uwp中的双重绑定

Question

I have a problem. I created 2 controls for my application: a BottomMenu control and ResultBox. ResultBox is contained in BottomMenu so the order goes like this: Page -> BottomMenu -> ResultBox. I created a dependency property in ResultBox called Result of type string.

    public ResultBox()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }

    /// <summary>
    /// Property used to store the result of the calculation
    /// </summary>
    public static readonly DependencyProperty ResultProperty = DependencyProperty.Register(
        "Result",
        typeof(string),
        typeof(ResultBox),
        new PropertyMetadata(null)
        );

    /// <summary>
    /// String holding the text assigned to the Result
    /// </summary>
    public string Result
    {
        get => (string)GetValue(ResultProperty);
        set => SetValue(ResultProperty, value);
    }

The binding is as follows:

<TextBlock  Style="{StaticResource DefaultTextBlockStyle}"
                        Text="{Binding Result}"/>

Then I created identical dependency property in the BottomMenu so thatcan set it directly from the page.

    public BottomMenu()
    {
        this.InitializeComponent();
        this.DataContext = this;
    }
    /// <summary>
    /// Property used to store the result of the calculation
    /// </summary>
    public static readonly DependencyProperty ResultProperty = DependencyProperty.Register(
        "Result",
        typeof(string),
        typeof(BottomMenu),
        new PropertyMetadata(null)
        );

    /// <summary>
    /// String holding the text assigned to the Result
    /// </summary>
    public string Result
    {
        get => (string)GetValue(ResultProperty);
        set => SetValue(ResultProperty, value);
    }

And binding:

<local:ResultBox Grid.Row="1" Margin="0 0 0 10"
                        Result="{Binding Result}"
                        />

Unfortunately, the text only shows up if I directly input it in the declaration of ResultBox. When I do the double binding and input it in the page,

<local:BottomMenu Grid.Row="2"                              
                            Result="13"/>

it doesn't work. I'm learning binding and I'd like to know where I'm doing it wrong, or if it's even the proper way to do this thing.

Edit: Binding in ResultBox should't contain Source, fixed now.

Answer 1

You should almost never use this.DataContext = this ; inside controls. Always define the DataContext at the top level page and let it flow down to each control along the way.

So first remove

this.DataContext = this;

You have defined the dependency property Result correctly. To bind the TextBlock 's Text to it, you can name your control and use ElementName binding, or more efficiently (UWP only), use x:Bind like the following

<TextBlock Style="{StaticResource DefaultTextBlockStyle}" Text="{x:Bind Result, Mode=OneWay}"/>

Same goes to this

<local:ResultBox Grid.Row="1" Margin="0 0 0 10" Result="{x:Bind Result, Mode=OneWay}" />

Hope this helps.

Answer 2

Here, instead of setting this.DataContext = this; , we should use (this.Content as FrameworkElement).DataContext = this; like the following:

public BottomMenu()
{
    this.InitializeComponent();
    (this.Content as FrameworkElement).DataContext = this;
}

public ResultBox()
{
    this.InitializeComponent();
    (this.Content as FrameworkElement).DataContext = this; 
}

In the code above we don't set the data context of the user control, we set the data context of the first child in the user control. After this, the ResultBox inside BottomMenu can inherit down the data context from BottomMenu and its Result property can be set properly. For more info, please see Jerry Nixon's blog: Walkthrough: Two-way binding inside a XAML User Control .