UWP UserControl 及其自己的 ViewModel 以及使用模板 10 的依赖属性

Question

我正在使用模板 10 和 MVVM 创建 UWP 应用程序。我的要求是创建 UserControl，它将拥有自己的依赖属性以及自己的 ViewModel。

我的要求：

单击按钮时调用父 ViewModel 命令。
从 UserControl ViewModel 绑定 TexBlock 文本

我的用户控件如下所示：

  <vm:MyUserControl1  AddItem="{Binding MyCommand}"   Component="{Binding}"  RelativePanel.Below="abc" />

用户控制XAML:

<StackPanel>
            <TextBlock Text="{x:Bind Component.Text, Mode=OneWay}"/>
            <Button x:Name="Button" Content="Click Me" Command="{x:Bind AddItem}">
            </Button>
</StackPanel>

这是代码后面的 UserControl 代码：

 public sealed partial class MyUserControl1 : UserControl
    {
        public MyUserControl1()
        {
            this.InitializeComponent();
            //   mygrid.DataContext = this;
            (this.Content as FrameworkElement).DataContext = this;
        }

        public static readonly DependencyProperty AddItemProperty =
          DependencyProperty.Register(
              "AddItem",
              typeof(ICommand),
              typeof(MyUserControl1), new PropertyMetadata(null));

        public ICommand AddItem
        {
            get { return (ICommand)GetValue(AddItemProperty); }
            set { SetValue(AddItemProperty, value); }
        }

        public static readonly DependencyProperty ComponentProperty = DependencyProperty.Register("Component",typeof(MyViewModel),typeof(MyUserControl1),new PropertyMetadata(null));

        public MyViewModel Component
        {
            get { return (MyViewModel)GetValue(ComponentProperty); }
            set { SetValue(ComponentProperty, value); }
        }

    }

用户控件视图模型：

public class MyViewModel:ViewModelBase
    {
        public MyViewModel()
        {

        }
        public string Text => "ABC";
    }

父视图模型：

  public class SettingsPartViewModel : ViewModelBase
  {
        DelegateCommand _MyCommand;

        public DelegateCommand MyCommand
            => _MyCommand ?? (_MyCommand = new DelegateCommand(async () =>
            {
                await Task.Run(() => {
                  ///Some Code  
                });
            }));
     }

每当我运行代码时，我都会收到以下错误：

 Unable to cast object of type 'WindowsApp2.ViewModels.SettingsPartViewModel' to type 'WindowsApp2.ViewModels.MyViewModel'.

这里出了什么问题？

Answer 1

我认为你在这里弄错了 Component="{Binding}"。您直接将组件设置为父视图的 DataContext 即 WindowsApp2.ViewModels.SettingsPartViewModel 而不是 WindowsApp2.ViewModels.MyViewModel.

为了使其正常工作，您需要在 SettingsPartViewModel 中创建 MyViewModel 的实例并将其绑定到 Component。

试试下面的示例：

在 SettingsPartViewModel 中：

private MyViewModel myViewModelInstance = new MyViewModel();

public MyViewModel MyViewModelInstance
{
    get { return myViewModelInstance; }
    set { myViewModelInstance = value; //Raise NotifyPropertyChanged }
}

在SettingsPart.xaml中：

<vm:MyUserControl1  AddItem="{Binding MyCommand}"   Component="{Binding MyViewModelInstance}"  RelativePanel.Below="abc" />

UWP UserControl 及其自己的 ViewModel 以及使用模板 10 的依赖属性

UWP UserControl with its own ViewModel as well as Dependency Properties using Template 10

mvvm

data-binding

user-controls

uwp

template10