如何在 MVVM 中的 UserControl 之间进行通信 - WPF 应用程序

Question

我想创建一个左侧菜单的应用程序，该菜单将更改右侧的内容。 为此，我有一个带有两个 ContentControl 的 MainWindow（一个将内容 UserControl 'Menu'，另一个将内容选定的 UserControl 'Red' 或 'Green'。

问题是右边的Content没有改变……

我进行了一些研究并看到了诸如依赖注入、委托、事件、消息总线、ViewModelLocator 之类的概念...... 但我不知道在这种情况下哪个最合适以及如何实现它。 （我不想使用 MVVMLight 或任何类似的插件）

感谢您的关注。

为此，我使用 MVVM 模式和 DataTemplate 绑定：

App.xaml

<Application.Resources>
    <DataTemplate DataType="{x:Type viewModel:MainViewModel}">
        <view:MainWindow />
    </DataTemplate>
    <DataTemplate DataType="{x:Type viewModelMenu:LeftViewModel}">
        <viewMenu:Left />
    </DataTemplate>
    <DataTemplate DataType="{x:Type viewModelContent:RedViewModel}">
        <viewContent:Red />
    </DataTemplate>
</Application.Resources>

ViewModel.cs

public abstract class ViewModel : INotifyPropertyChanged
{
    #region Properties

    private ViewModel _mainContent;

    public ViewModel MainContent
    {
        get => _mainContent;
        set
        {
            _mainContent = value;
            OnPropertyChanged();
            MessageBox.Show(nameof(MainContent));
        }
    }

    #endregion Properties

    public ViewModel()
    {
        InitCommands();
    }

    protected abstract void InitCommands();

    #region Factory Method - CreateCommand

    protected ICommand CreateCommand(Action execute, Func<bool> canExecute)
    {
        return new RelayCommand(
            execute: execute,
            canExecute: canExecute
            );
    }

    protected ICommand CreateCommand<T>(Action<T> execute, Predicate<T> canExecute)
    {
        return new RelayCommand<T>(
            execute: execute,
            canExecute: canExecute
            );
    }

    #endregion Factory Method - CreateCommand

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

MainViewModel.cs

internal class MainViewModel : ViewModel
{
    private ViewModel _leftMenu;
    public ViewModel LeftMenu
    {
        get => _leftMenu;
        set
        {
            _leftMenu = value;
            OnPropertyChanged();
        }
    }

    public MainViewModel()
    {
        LeftMenu = new LeftViewModel();
    }

    protected override void InitCommands()
    {
    }

LeftViewModel.cs

internal class LeftViewModel : ViewModel
{
    public ICommand ChangeContentToRed { get; set; }
    public ICommand ChangeContentToGreen { get; set; }

    protected override void InitCommands()
    {
        ChangeContentToRed = new RelayCommand(
            execute: () => MainContent = new RedViewModel(),
            canExecute: () => !(MainContent is RedViewModel)
            );

        ChangeContentToGreen = new RelayCommand(
            execute: () => MainContent = new GreenViewModel(),
            canExecute: () => !(MainContent is GreenViewModel)
            );
    }
}

RedViewModel 和 GreenViewModel 是空的，所以我不显示代码，而是扩展 ViewModel

Window.xaml

 <Window.DataContext>
    <viewModel:MainViewModel />
</Window.DataContext>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>

    <ContentControl Grid.Column="0" Content="{Binding Path=LeftMenu}" />
    <ContentControl Grid.Column="1" Content="{Binding Path=MainContent}" />
</Grid>

Left.xaml

<UserControl.DataContext>
    <viewModel:LeftViewModel />
</UserControl.DataContext>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Button
        Grid.Row="0"
        Command="{Binding Path=ChangeContentToRed}"
        Content="Red" />
    <Button
        Grid.Row="1"
        Command="{Binding Path=ChangeContentToGreen}"
        Content="Green" />
</Grid>

Red 和 Green 只是两个带有红色和绿色网格的 UserControl

Answer 1

当你有像这样的 DataTemplate 时

<DataTemplate DataType="{x:Type viewModelMenu:LeftViewModel}">
    <viewMenu:Left />
</DataTemplate>

然后将 LeftViewModel 类型的值赋给 ContentControl 的 Content 属性，如

<ContentControl Content="{Binding Path=LeftMenu}"/>

DataTemplate 被赋值给 ContentControl 的 ContentTemplate，实例化的 DataTemplate 中的元素（即你的 UserControl）继承 ContentControl 的 ControlTemplate 中 ContentPresenter 的 DataContext，然后保存 Content 值。

但是，这仅在您未显式分配 UserControl 的 DataContext 并因此破坏 DataContext 属性的值继承时才有效。

您必须从 UserControl 中删除显式 DataContext 分配，即：

<UserControl.DataContext>
    <viewModel:LeftViewModel />
</UserControl.DataContext>