独自のViewModelを持つUWP UserControlとテンプレート10を使用する依存関係プロパティ

Question

テンプレート10とMVVMを使用してUWPアプリケーションを作成しています。私の要件は、独自のViewModelを持つだけでなく、独自の依存プロパティを持つUserControlを作成することです。

私の要件：ボタンのクリックで

1. コール親ViewModelにコマンド。
2. バインドTexBlockテキストからユーザーコントロールのViewModel

私のユーザーコントロールは、次のようになります。

<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> 

です

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

親ビューモデル：ここで間違って行くいただきまし

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

：

public class SettingsPartViewModel : ViewModelBase 
    { 
     DelegateCommand _MyCommand; 

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

私は、コードを実行するたびに、私はエラーを次のですか？

Answer 1

ここで間違っていると思います。Component="{Binding}"親ビューのDataContextに直接コンポーネントを設定しています。つまり、WindowsApp2.ViewModels.MyViewModelではなくWindowsApp2.ViewModels.SettingsPartViewModelです。

正しく動作させるには、SettingsPartViewModelにMyViewModelのインスタンスを作成してComponentにバインドする必要があります。サンプル以下

試してみてください。SettingsPartViewModelで

：SettingsPart.xamlで

private MyViewModel myViewModelInstance = new MyViewModel(); 

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

：

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