c# uwp 中的双重绑定

Question

我有问题。我为我的应用程序创建了 2 个控件：一个 BottomMenu 控件和一个 ResultBox。 ResultBox 包含在 BottomMenu 中，因此顺序如下：Page -> BottomMenu -> ResultBox。我在 ResultBox 中创建了一个名为 Result 的字符串类型的依赖属性。

    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);
    }

绑定如下：

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

然后我在底部菜单中创建了相同的依赖属性，以便可以直接从页面设置。

    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);
    }

和绑定：

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

不幸的是，如果我直接在 ResultBox 的声明中输入它，文本才会显示出来。当我进行双重绑定并在页面中输入时，

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

它不起作用。我正在学习绑定，我想知道我在哪里做错了，或者这是否是做这件事的正确方法。

编辑：ResultBox 中的绑定不应包含 Source，现已修复。

Answer 1

你几乎不应该使用this.DataContext = this；内部控制。始终在顶级页面定义DataContext，并让它沿途向下流向每个控件。

所以先删除

this.DataContext = this;

您已经正确定义了依赖属性Result。要将TextBlock 的Text 绑定到它，您可以命名您的控件并使用ElementName 绑定，或者更有效（仅限UWP），使用x:Bind，如下所示

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

这个也一样

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

希望这会有所帮助。

Answer 2

在这里，我们应该使用(this.Content as FrameworkElement).DataContext = this;，而不是设置this.DataContext = this;，如下所示：

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

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

在上面的代码中我们没有设置用户控件的数据上下文，我们设置了用户控件中第一个子控件的数据上下文。在此之后，BottomMenu 内部的ResultBox 可以从BottomMenu 继承数据上下文，并且可以正确设置其Result 属性。有关更多信息，请参阅 Jerry Nixon 的博客： Walkthrough: Two-way binding inside a XAML User Control.