在 ViewModel 中访问用户控件

Question

视图：我有用户控件，它有一个文本框和一个标签。当“Enter”键按下时，我希望使用文本框的值更新标签。为了这个例子，我创建了一个 CarUserControl。我将在 MainWindow 的 ItemsControl 中托管这些列表。

模型：我有 Car 类，这将是模型。

ViewModel：我没有 CarUserControl 和 Car 的 ViewModel。我有一个用于 MainWindow - 我们称之为 MainViewModel。

我可以获取从单个用户控件传播到 MainViewModel 的命令，但我不确定从 MainViewModel 中的文本框中获取值？

以下是我从网上阅读的有关 MVVM 的内容中做出的一些假设（当然有一些消息来源说这些假设是错误的）。

1] 用户控件不应有 ViewModel。

2] 用户控件应该只公开依赖属性，而不是带有 INotifyChanged 或事件的公共属性。

所以，问题是，如何更新标签，并访问 MainViewModel 中的 TextBox 值。

这里是测试代码：

-----CarUserControl.xaml----

<UserControl x:Class="TestMVVM.CarUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:TestMVVM"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="300" x:Name="thisUC">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0">--</Label>
        <TextBox Grid.Column="1" Background="#FFE8D3D3" BorderThickness="0">
            <TextBox.InputBindings>
                <KeyBinding Key="Enter" 
                                Command="{Binding KeyDownCommand, ElementName=thisUC}" 
                                CommandParameter="{Binding}"/>
            </TextBox.InputBindings>
        </TextBox>
    </Grid>
</UserControl>

-----CarUserControl.cs-----

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace TestMVVM
{
    /// <summary>
    /// Interaction logic for CarUserControl.xaml
    /// The Usercontrol
    /// </summary>
    public partial class CarUserControl : UserControl
    {
        private static readonly DependencyProperty StrValueProperty = DependencyProperty.Register("StrValue", typeof(float), typeof(CarUserControl), new PropertyMetadata(null));
        private static readonly DependencyProperty KeyDownCommandProperty = DependencyProperty.Register("KeyDownCommand", typeof(ICommand), typeof(CarUserControl), new PropertyMetadata(null)); //Enter key down in the text box

        public CarUserControl()
        {
            InitializeComponent();
        }

        public string StrValue
        {
            get { return (string)GetValue(StrValueProperty); }
            set { SetValue(StrValueProperty, value); }
        }

        /// <summary>
        /// "Enter" key down
        /// </summary>
        public ICommand KeyDownCommand
        {
            get { return (ICommand)GetValue(KeyDownCommandProperty); }
            set { SetValue(KeyDownCommandProperty, value); }
        }


    }
}

//---模型--Car.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TestMVVM
{
    /// <summary>
    /// A simple model
    /// </summary>
    class Car : INotifyPropertyChanged
    {
        public Car(string name) {
            this.name = name;
        }

        private string name;
        public event PropertyChangedEventHandler PropertyChanged;

        public string Name
        {
            get { return name; }
            set
            {
                name = value;
                OnPropertyChanged("Name");
            }
        }
        public void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }

    }
}

-----主视图模型---

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace TestMVVM
{
    /// <summary>
    /// The Main View Model
    /// </summary>
    class MainViewModel : INotifyPropertyChanged
    {
        /// <summary>
        /// The main view model
        /// </summary>
        public MainViewModel()
        {
            //Create some test data
            cars = new ObservableCollection<Car>();
            cars.Add(new Car("Audi"));
            cars.Add(new Car("Toyota"));
            cars.Add(new Car("Subaru"));
            cars.Add(new Car("Volvo"));
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private ObservableCollection<Car> cars; //List of tensioner spools
        private ICommand enterDownCommand;

        public ObservableCollection<Car> Cars
        {
            get { return cars; }
            set
            {
                cars = value;
                OnPropertyChanged("Cars");
            }
        }

        public ICommand EnterDownCommand
        {
            get
            {
                if (enterDownCommand == null)
                {
                    enterDownCommand = new RelayMCommand<Car>(OnEnterDownCommand);
                }
                return enterDownCommand;
            }
        }

        /// <summary>
        /// Called when "Enter" key is down. 
        /// </summary>
        /// <param name="obj"></param>
        private void OnEnterDownCommand(Car obj)
        {
            //How do I get the text box value here?
            Console.Write(">>"+obj.Name);
        }

        public void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(name));
            }
        }
    }
}

-----主窗口---

  <Window x:Class="TestMVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestMVVM"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainViewModel x:Name ="MainVM"/>
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Viewbox>
                <ItemsControl ItemsSource="{Binding Cars}" Margin="5" Width="200">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <local:CarUserControl Margin="5"
                                                  KeyDownCommand="{Binding Path=DataContext.EnterDownCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical" IsItemsHost="True" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </Viewbox>
        </Grid>
    </Grid>

</Window>

---中继命令---

   using System;
using System.Threading;
using System.Windows.Input;

namespace TestMVVM
{
    /// <summary>
    /// Same as the Relay Command, except this handles an array of generic type <T>
    /// </summary>
    /// <typeparam name="T">Generic type parameter</typeparam>
    public class RelayMCommand<T> : ICommand
    {
        private Predicate<T> _canExecute;
        private Action<T> _execute;

        public RelayMCommand(Action<T> execute, Predicate<T> canExecute = null)
        {
            _execute = execute;
            _canExecute = canExecute;
        }

        private void Execute(T parameter)
        {
            _execute(parameter);
        }

        private bool CanExecute(T parameter)
        {
            return _canExecute == null ? true : _canExecute(parameter);
        }

        public bool CanExecute(object parameter)
        {
            return parameter == null ? false : CanExecute((T)parameter);
        }

        public void Execute(object parameter)
        {
            _execute((T)parameter);
        }

        public event EventHandler CanExecuteChanged;

        public void RaiseCanExecuteChanged()
        {
            var temp = Volatile.Read(ref CanExecuteChanged);
            if (temp != null)
            {
                temp(this, new EventArgs());
            }
        }
    }
}

Answer 1

UserControl 可以从父窗口或ItemsControl 中的当前项继承其DataContext。

因此，如果您将ItemsControl 绑定到IEnumerable<Car>，则CarUserControl 的每个实例都可以直接绑定到相应Name 对象的Name 属性：

<TextBox Text="{Binding Name}" 
            Grid.Column="1" Background="#FFE8D3D3" BorderThickness="0">
    <TextBox.InputBindings>
        <KeyBinding Key="Enter" 
                    Command="{Binding KeyDownCommand, ElementName=thisUC}" 
                    CommandParameter="{Binding}"/>
    </TextBox.InputBindings>
</TextBox>

这是因为UserControl 自动从其父元素继承DataContext，在这种情况下，它是ItemsControl 中对应的Car 对象。