如何在 Uwp 中使用 mvvm 更新子布局页面内容

Question

我有一个用例，我需要从我使用框架调用的子页面更新布局的椭圆属性（用户控件）。谁能建议，如何从子页面视图模型更新布局页面用户控件数据？我试过可视化树等，但没有运气， testcontrol.xaml

<Grid>
    <Ellipse Fill="MediumPurple" Width="{Binding Radius,Mode=TwoWay}" Height="{Binding Radius,Mode=TwoWay}"/>
</Grid>

//用户控件隐藏代码

public sealed partial class testControl : UserControl,INotifyPropertyChanged
{
    public testControl()
    {
        this.InitializeComponent();
    }
    private double _btnWidth = 50;

    public double Radius
    {
        get { return _btnWidth; }

        set
        {
            _btnWidth = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("Radius"));
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
}

//Layout.xaml

 <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Text="Layout Page" FontSize="16" FontWeight="Bold"/>
    <myControl:testControl  />
    <Frame x:Name="LayoutPageFrame"/>
</Grid>

我想从子页面视图模型（我将从框架导航）持续更新 Radius。

Answer 1

查看示例代码后，我提出以下建议。

RootControl.xaml.cs

将 Radius 更改为依赖项属性:

public double Radius
{
    get { return (double)GetValue(RadiusProperty); }
    set { SetValue(RadiusProperty, value); }
}

public static readonly DependencyProperty RadiusProperty =
    DependencyProperty.Register("Radius", typeof(double), typeof(RootControl), new PropertyMetadata(50.0));

RootControl.xaml

仅使用 OneWay 绑定。

<Ellipse Fill="MediumPurple" Width="{x:Bind Radius, Mode=OneWay}" 
            Height="{x:Bind Radius, Mode=OneWay}"/>

Layout.xaml

因为你的目标页面被包装在一个Frame中，你需要通过框架的Content访问它的数据上下文。再次注意使用 OneWay:

<controls:RootControl Radius="{Binding ElementName=LayoutPageFrame, Path=Content.DataContext.SliderValue, Mode=OneWay}" x:Name="RootControl"/>

ChildPage.xaml

将 EllipseDimention 的所有用法替换为 SliderValue。确保所有绑定都是 OneWay，除了 Slider，它应该是 TwoWay.

ChildPage.xaml.cs

删除 EllipseDimention 属性，仅保留 SliderValue:

public int SliderValue
{
    get
    {
        return _sliderValue;
    }
    set
    {
        Set(ref _sliderValue, value);
    }
}

另请注意，您不必将属性名称作为最后一个参数传递 - 由于 Set 方法中使用的 [CallerMemberName] 属性，编译器会自动完成此操作.

如何在 Uwp 中使用 mvvm 更新子布局页面内容

How to Update Layout Page content from Child Using mvvm in Uwp

c#

xaml

uwp

uwp-xaml