UWP UserControl со своей собственной ViewModel, а также свойствами зависимостей с использованием шаблона 10

Я создаю приложение UWP, используя шаблон 10 и MVVM. Мое требование состоит в том, чтобы создать UserControl, который будет иметь свои собственные свойства зависимостей, а также собственную ViewModel.

Мое требование:

  1. Вызовите команду Parent ViewModel при нажатии кнопки.
  2. Привязать текст TexBlock из UserControl 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>

Это код 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'.

Что здесь не так?


mvvm data-binding uwp user-controls template10
person Mangesh Kulkarni    schedule 21.08.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что вы ошибаетесь здесь Component="{Binding}". Вы напрямую устанавливаете компонент в DataContext родительского представления, то есть WindowsApp2.ViewModels.SettingsPartViewModel вместо WindowsApp2.ViewModels.MyViewModel.

Чтобы он работал правильно, вам нужно создать экземпляр MyViewModel в вашем SettingsPartViewModel и привязать его к Component.

Попробуйте следующий образец:

В настройкахPartViewModel:

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" />
person ViVi    schedule 22.08.2016
comment
Большое спасибо за ваше решение. Теперь он работает, как и ожидалось. Но единственная проблема, с которой я сталкиваюсь сейчас, это если я изменю значение свойства MyViewModel, не отражающееся на пользовательском интерфейсе. Я пытался сделать Component={Binding MyViewModelInstance,Mode=OneWay}, но все равно не повезло. Можете ли вы помочь - person Mangesh Kulkarni; 22.08.2016
comment
Не видя вашего кода, я не могу вам помочь. Попробуйте Mode=TwoWay, а также проверьте, правильно ли вы реализовали интерфейс INotifyPropertyChanged. - person ViVi; 22.08.2016
comment
Сделанный. Установка режима свойств компонента на OneWay решила проблему Text={x:Bind Component.Text,Mode=OneWay}. Все работает как шарм. Спасибо, приятель! - person Mangesh Kulkarni; 22.08.2016