WPF之View、ViewModel之间的相互交互（一）

最新推荐文章于 2024-05-08 11:02:36 发布

我就是个渴望成长的小菜鸡

最新推荐文章于 2024-05-08 11:02:36 发布

阅读量2.6w

点赞数 12

分类专栏： WPF

本文链接：https://blog.csdn.net/junjunjiao0911/article/details/84891787

版权

WPF 专栏收录该内容

15 篇文章 62 订阅

订阅专栏

MVVM的目标之一就是为了解耦View和ViewModel。View负责视图展示，ViewModel负责业务逻辑处理，尽量保证 View.xaml.cs中的简洁，不包含复杂的业务逻辑代码。

但是在实际情况中是View和ViewModel之间的交互方式还是比较复杂的，View和ViewModel的分离并不是界定的那么清晰。

比如以下两种场景：

1、如果需要某张视图页面弹出对话框、弹出子窗体、处理界面元素，播放动画等。如果这些操作都放在ViewModel中，就会导致ViewModel还是要去处理View级别的元素，造成View和ViewModel的依赖。

最好的办法就是ViewModel通知View应该做什么，而View监听接收到命令，并去处理这些界面需要处理的事情。

2、ViewModel和ViewModel之间也需要通过消息传递来完成一些交互。

而MVVM Light 的 Messenger类，提供了解决了上述两个问题的能力:

Messenger类用于应用程序的通信，接受者只能接受注册的消息类型，另外目标类型可以被指定，用Send<TMessage, TTarget>(TMessage message) 实现，

在这种情况下信息只能被传递如果接受者类型和目标参数类型匹配，message可以是任何简单或者复杂的对象，你可以用特定的消息类型或者创建你自己的类型继承自他们。

Messager类的主要交互模式就是信息接受和发送（可以理解为“发布消息服务”和“订阅消息服务”），是不是想到观察者模式了，哈哈哈。

MVVM Light Messenger 旨在通过简单的设计模式来精简此场景：任何对象都可以是接收端；任何对象都可以是发送端；任何对象都可以是消息。

1、View和ViewModel之间的消息交互

在View和ViewModel中进行消息器注册，相当于订阅服务。包含消息标志、消息参数和消息执行方法。如下：

消息标志token：ViewAlert，用于标识只阅读某个或者某些Sender发送的消息，并执行相应的处理，所以Sender那边的token要保持一致

执行方法Action：ShowReceiveInfo，用来执行接收到消息后的后续工作，注意这边是支持泛型能力的，所以传递参数很方便。

首先我们先熟悉一下基本的流程：

ViewModel代码：

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using GalaSoft.MvvmLight.Messaging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MessengerTest.ViewModel
{
    public class MessengerRegisterForVViewModel:ViewModelBase
    {
        public MessengerRegisterForVViewModel()
        {

        }

        #region 命令
        private RelayCommand sendCommand;
        /// <summary>
        /// 发送命令
        /// </summary>
        public RelayCommand SendCommand
        {
            get
            {
                if (sendCommand == null)
                {
                    sendCommand = new RelayCommand(() => ExcuteSendCommand());
                }
                return sendCommand;
            }
            set
            {
                sendCommand = value;
            }
        }
        #endregion

       private void ExcuteSendCommand()
        {
            Messenger.Default.Send<String>("ViewModel通知View弹出消息框", "ViewAlert");
        }
    }
}

View.xaml.cs 代码如下

using GalaSoft.MvvmLight.Messaging;
using MessengerTest.ViewModel;
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.Shapes;

namespace MessengerTest
{
    /// <summary>
    /// MessagerForView.xaml 的交互逻辑
    /// </summary>
    public partial class MessagerForView : Window
    {
        public MessagerForView()
        {
            InitializeComponent();

            ///消息标志token：ViewAlert，用于标识只阅读某个或者某些Sender发送的消息，
            ///并执行相应的处理，
            ///所以Sender那边的token要保持一致
            ///执行方法Action：ShowReceiveInfo，用来执行接收到消息后的后续工作，
            ///注意这边是支持泛型能力的，所以传递参数很方便。
            Messenger.Default.Register<String>(this, "ViewAlert", ShowReceiveInfo);
            this.DataContext = new MessengerRegisterForVViewModel();
            ///卸载当前(this)对象注册的所有MVVMLight消息
            this.Unloaded += (sender, e) => Messenger.Default.Unregister(this);
        }

        /// <summary>
        /// 接收到消息后的后续工作：根据返回来的信息弹出消息框
        /// </summary>
        /// <param name="msg"></param>
        private void ShowReceiveInfo(String msg)
        {
            MessageBox.Show(msg);
        }
    }
}

View.xaml代码：

<Window x:Class="MessengerTest.MessagerForView"
        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:MessengerTest"
        mc:Ignorable="d"
        Title="MessagerForView" Height="300" Width="300">
    <Grid>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="115,115,0,0">
                <Button Content="弹出对话框" Command="{Binding SendCommand}">
                </Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

结果如下：

2、ViewModel和ViewModel之间的消息交互，ViewModel和ViewModel在很多种场景下也需要通过消息传递来完成一些交互。

比如我打开了两个视图，一个视图是用户信息列表，一个视图是用户信息添加页面，如果想要达到添加信息之后，用户信息列表视图实时刷新，用消息通知无疑是一个很棒的体验。

我们来模拟一下：

首先，我们还是先看一下流程

MessengerSenderViewModel代码：

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using GalaSoft.MvvmLight.Messaging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MessengerInfo.ViewModel
{
    public class MessengerSenderViewModel : ViewModelBase
    {
        public MessengerSenderViewModel()
        {

        }

        #region 属性
        private String sendInfo;
        /// <summary>
        /// 发送消息
        /// </summary>
        public String SendInfo
        {
            get { return sendInfo; }
            set { sendInfo = value; RaisePropertyChanged(() => SendInfo); }
        }

        #endregion

        #region 命令

        private RelayCommand sendCommand;
        /// <summary>
        /// 发送命令
        /// </summary>
        public RelayCommand SendCommand
        {
            get
            {
                if (sendCommand == null)
                    sendCommand = new RelayCommand(() => ExcuteSendCommand());
                return sendCommand;

            }
            set { sendCommand = value; }
        }

        private void ExcuteSendCommand()
        {
            Messenger.Default.Send<String>(SendInfo, "Message");
        }

        #endregion
    }
}

MessengerSenderView代码：

using MessengerInfo.ViewModel;
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.Shapes;

namespace MessengerInfo
{
    /// <summary>
    /// MessengerSenderView.xaml 的交互逻辑
    /// </summary>
    public partial class MessengerSenderView : Window
    {
        public MessengerSenderView()
        {
            InitializeComponent();
            this.DataContext = new MessengerSenderViewModel();
        }
    }
}

<Window x:Class="MessengerInfo.MessengerSenderView"
        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:MessengerInfo"
        mc:Ignorable="d"
        Title="MessengerSenderView" Height="300" Width="300">
    <Grid>
        <StackPanel Orientation="Horizontal" Margin="10,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" >
            <TextBox Text="{Binding SendInfo}" Width="150" ></TextBox>
            <Button Command="{Binding SendCommand}" Content="发送消息"  Margin="15,0,0,0"></Button>
        </StackPanel>
    </Grid>
</Window>

MessengerRegisterViewModel 代码

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using GalaSoft.MvvmLight.Messaging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MessengerInfo.ViewModel
{
    public class MessengerRegisterViewModel : ViewModelBase
    {
        public MessengerRegisterViewModel()
        {
            ///Messenger：信使
            ///Recipient：收件人
            Messenger.Default.Register<String>(this, "Message", ShowReceiveInfo);
        }


        #region 属性

        private String receiveInfo;
        /// <summary>
        /// 接收到信使传递过来的值
        /// </summary>
        public String ReceiveInfo
        {
            get { return receiveInfo; }
            set { receiveInfo = value; RaisePropertyChanged(() => ReceiveInfo); }
        }

        #endregion


        #region 启动新窗口

        private RelayCommand showSenderWindow;

        public RelayCommand ShowSenderWindow
        {
            get
            {
                if (showSenderWindow == null)
                    showSenderWindow = new RelayCommand(() => ExcuteShowSenderWindow());
                return showSenderWindow;

            }
            set { showSenderWindow = value; }
        }

        private void ExcuteShowSenderWindow()
        {
            MessengerSenderView sender = new MessengerSenderView();
            sender.Show();
        }

        #endregion


        #region 辅助函数
        /// <summary>
        /// 显示收件的信息
        /// </summary>
        /// <param name="msg"></param>
        private void ShowReceiveInfo(String msg)
        {
            ReceiveInfo += msg + "\n";
        }
        #endregion
    }
}

MessengerRegisterView 代码

using GalaSoft.MvvmLight.Messaging;
using MessengerInfo.ViewModel;
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.Shapes;

namespace MessengerInfo
{
    /// <summary>
    /// MessengerRegisterView.xaml 的交互逻辑
    /// </summary>
    public partial class MessengerRegisterView : Window
    {
        public MessengerRegisterView()
        {
            InitializeComponent();

            this.DataContext = new MessengerRegisterViewModel();
            //卸载当前(this)对象注册的所有MVVMLight消息
            this.Unloaded += (sender, e) => Messenger.Default.Unregister(this);
        }
    }
}

<Window x:Class="MessengerInfo.MessengerRegisterView"
        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:MessengerInfo"
        mc:Ignorable="d"
        Title="MessengerRegisterView" Height="300" Width="300">
    <Grid>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top" >
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Margin="15,15,0,0" >
                <TextBlock Text="接收消息：" ></TextBlock>
                <TextBlock Text="{Binding ReceiveInfo}" FontSize="18" TextWrapping="Wrap" ></TextBlock>
            </StackPanel>

            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"  Margin="15,15,0,0" >
                <Button Content="打开子窗口" Command="{Binding ShowSenderWindow}" ></Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

结果如下：

我就是个渴望成长的小菜鸡

关注

12
点赞
踩
57

收藏

觉得还不错? 一键收藏
1
评论
WPF之View、ViewModel之间的相互交互（一）

MVVM的目标之一就是为了解耦View和ViewModel。View负责视图展示，ViewModel负责业务逻辑处理，尽量保证 View.xaml.cs中的简洁，不包含复杂的业务逻辑代码。但是在实际情况中是View和ViewModel之间的交互方式还是比较复杂的，View和ViewModel的分离并不是界定的那么清晰。比如以下两种场景： 1、如果需要某张视图页面弹出对话框、...
复制链接

扫一扫