WPF MVVM UI分离之《交互与数据分离》

在我们使用WPF过程中，不可避免并且超级喜欢使用MVVM框架。

那么，使用MVVM的出发点是视觉与业务逻辑分离，即UI与数据分离

诸如下面的问题：

删除操作，假如需要先执行一部分数据的处理，然后删除界面列表中的子项，之后再执行其它数据的处理。请问此业务该放置于Xaml.cs文件，还是ViewModel中呢？

再如弹窗，提示框，设置列表的滚动等等。

此上一些操作，我们不应该把业务代码直接挪到cs文件中，因为删除操作绝大部分的代码都是数据的处理。所以，数据的部分放置在ViewModel中，一些交互放在cs文件中，就是很合理及有必要了。

单元测试，UI与交互的那部分mock模拟有点难度，也没必要去模拟。那么，我们是应该把数据与交互拆开，减少之间的耦合性。这样添加单元测试则更容易。

交互与数据分离 - 描述

首先MVVM，通过View与ViewModel的绑定，我们实现了UI与业务逻辑的分离。通俗一点，我们熟悉的Xaml与ViewModel文件中，代码之间的隔离。在此不详述~

而MVVM，不只是界面与逻辑，其实逻辑还可以拆分成交互与数据

即：Xaml 》Xaml.cs 》ViewModel

是的，按照上面的结构图，我们分成三部分：

• 界面 用于界面呈现 ---- 如页面/控件/样式/模板等其它资源的初始化，动画的触发等。
• 交互 用于与用户确认的交互或者界面复杂逻辑的处理 ---- 如弹窗/提示框/复杂动画的处理/设置列表的滚动等其它界面元素的视觉处理。
• 数据 只是数据的处理 ---- 增删改查导入导出保存等只针对数据的操作，界面状态属性的保存与触发更改（绑定）。

交互与数据分离是怎样的？比如删除：

1. 界面删除按钮，绑定ViewModel中的DeleteCommand，当我们点击删除时，触发DeleteCommand.Execute

2. ViewModel中，先执行数据状态的判断，然后执行交互通知ShowDeleteWaringAction，调用xaml.cs文件中的确认提示框

3. 在Xaml.cs中添加依赖属性ShowDeleteWaring，绑定ViewModel中的ShowDeleteWaringAction.Progress。在属性更改中，处理提示框确认逻辑。

4. ViewModel中，等待ShowDeleteWaring弹框完成后，继续执行下面的业务。

5. 还有类似上面步骤的删除动画。。。

交互与数据分离 - 实现

使用场景：在WPF框架下开发时，一种基于MVVM的UI分离方案

解决方案：在业务逻辑处理过程中，新建一个交互处理线程，通知界面完成交互处理，同时后台逻辑保持同步等待。界面完成交互处理后，回调并执行后续的业务逻辑。

实现方案：

• View中的依赖属性DependencyProperty，绑定ViewModel中属性“UIDelegateOperation”中的交互处理进度“UIDelegateProress”
• 每次在ViewModel执行业务逻辑需要调用交互处理时，由UIDelegateOperation创建一个新的交互进度“UIDelegateProress”，触发属性变更，并设置“UIDelegateOperation”同步等待。
• 当View中的属性变更事件执行完成后，回调并唤醒”UIDelegateOperation“，继续完成后面的业务逻辑。

1. 界面

在Xaml中添加附加属性，删除动画DeleteCoursewaresAnimation，删除确认框ShowDeleteWaring。并绑定ViewModel中对应的属性

 <UserControl.Style>
  <Style TargetType="editing:CloudListView">
      <Setter Property="DeleteCoursewaresAnimation" Value="{Binding DeleteCoursewaresAnimation.DelegateProgress}" />
      <Setter Property="ShowDeleteWaringShow" Value="{Binding ShowDeleteWaring.DelegateProgress}" />
  </Style>
 </UserControl.Style>

界面ListBox，列表子项ListBoxItemr的DataTemplate模板中，删除按钮绑定ViewModel中的DeleteCommand

 <Button x:Name="DeleteButton"
         Command="{Binding ElementName=TheCloudDocsList,Path=DataContext.DeleteCommand}"
         CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent},Path=DataContext }"
         Content="删除" Style="{StaticResource Style.Button}" />

 2. ViewModel

ViewModel调用UIDelegateOperation交互处理时，根据是否需要同步等待，调用不同的函数 Start()，StartAsync()，StartWithResult()，StartWithResultAsync();

删除业务中，除了数据处理，还有俩个交互(删除确认框，删除元素动画)。

通过在同步调用删除确认框/删除元素动画后，再继续往下执行业务。

属性和字段字义：

定义命令

自定义命令，可以详细之前写的博客：自定义Command

 private DelegateCommand<CoursewareListItem> _deleteCommand = null;
 /// <summary>
 /// 删除
 /// </summary>
 public DelegateCommand<CoursewareListItem> DeleteCommand
 {
     get
     {
         if (_deleteCommand == null)
         {
             _deleteCommand = new DelegateCommand<CoursewareListItem>(DeleteCourseware_OnExecute);

         }
         return _deleteCommand;
     }
 }

提示框确认交互/删除动画交互

 /// <summary>
 /// 弹出删除确认窗口
 /// </summary>
 public IUIDelegateOperation<List<CoursewareListItem>, MessageResult> ShowDeleteWaring { get; set; } = new IUIDelegateOperation<List<CoursewareListItem>, MessageResult>();

 /// <summary>
 /// 删除动画
 /// </summary>
 public IUIDelegateOperation<List<CoursewareListItem>> DeleteCoursewaresAnimation { get; set; } = new IUIDelegateOperation<List<CoursewareListItem>>();

删除逻辑：

 /// <summary>
 /// 删除
 /// </summary>
 /// <param name="item"></param>
 /// <returns></returns>
 private async void DeleteCourseware_OnExecute(CoursewareListItem item)
 {
     await DeleteCoursewares(new List<CoursewareListItem>() { item });
 }
 private async Task DeleteCoursewares(List<CoursewareListItem> items)
 {
     if (items.Count == )
     {
         return;
     }

     //弹出删除确认窗口
     var messageResult = await ShowDeleteWaringShow.ExecuteWithResultAsync(items);
     if (messageResult == MessageResult.Positive)
     {
         //删除服务器数据
         Response deleteResponse = await WebService.DeleteItemAsync(items);

         //删除失败
         if (!deleteResponse.Success)
         {
             Notification.ShowInfo(deleteResponse.Message);
             return;
         }
         //删除动画
         await DeleteCoursewaresAnimation.ExecuteAsync(items);

         //界面删除子项
         items.ForEach(item => ItemsSource.Remove(item));

         //退出编辑模式
         if (DocListState == EditStatus.Editing)
         {
             DocListState = EditStatus.Normal;
         }
     }
 }

3. Xaml.cs后台

• 添加依赖属性后，通过属性变更触发，来完成弹出提示框/删除动画等交互。
• 执行交互时，需要同步等待时，应将动画执行等转化为同步逻辑。

添加依赖属性 - 删除窗口

属性变更触发方法，应该是一个异步方法，里面的逻辑应该为同步执行。这样ViewModel中才能同步等待交互的完成，并执行之后的逻辑。

 /// <summary>
 /// 删除窗口
 /// </summary>
 public static readonly DependencyProperty ShowDeleteWaringShowProperty = DependencyProperty.Register(
     "ShowDeleteWaringShow", typeof(UIDelegateProgress<List<CoursewareListItem>, MessageResult>), typeof(CloudListView), new PropertyMetadata(default(UIDelegateProgress<List<CoursewareListItem>, MessageResult>),
         (d, e) => ((UIDelegateProgress<List<CoursewareListItem>, MessageResult>)e.NewValue)?.StartAsync(((CloudListView)d).ShowDeleteWaringShow)));

 private async Task<MessageResult> ShowDeleteWaringShow(List<CoursewareListItem> items)
 {
     var cmd = await DeleteWaringShow(items);
     return cmd.Result;
 }

 public static void SetShowDeleteWaringShow(DependencyObject element, UIDelegateProgress<List<CoursewareListItem>, MessageResult> value)
 {
     element.SetValue(ShowDeleteWaringShowProperty, value);
 }

 public static UIDelegateProgress<List<CoursewareListItem>, MessageResult> GetShowDeleteWaringShow(DependencyObject element)
 {
     return (UIDelegateProgress<List<CoursewareListItem>, MessageResult>)element.GetValue(ShowDeleteWaringShowProperty);
 }

添加依赖属性 - 删除动画

 public static readonly DependencyProperty DeleteCoursewaresAnimationProperty = DependencyProperty.Register(
     "DeleteCoursewaresAnimation", typeof(UIDelegateProgress<List<CoursewareListItem>>), typeof(CloudListView), new PropertyMetadata(default(UIDelegateProgress<List<CoursewareListItem>>),
         (d, e) => ((UIDelegateProgress<List<CoursewareListItem>>)e.NewValue)?.StartAsync(((CloudListView)d).ExecuteDeleteCoursewaresAnimation)));

 private async Task ExecuteDeleteCoursewaresAnimation(List<CoursewareListItem> coursewares)
 {
     List<Storyboard> storyboards = new List<Storyboard>();
     foreach (var courseware in coursewares)
     {
         var listBoxItem = DocumentsControl.ItemContainerGenerator.ContainerFromItem(courseware) as ListBoxItem;
         var border = listBoxItem?.VisualDescendant<Border>();
         var storyboard = (Storyboard)border?.Resources["ItemRemovedStoryboard"];
         if (storyboard == null)
         {
             //如果找不到storyBoard，则中断动画的执行。因为删除多个Item，只执行一半的动画，界面会闪现俩次。
             return;
         }
         storyboards.Add(storyboard);
     }
     //删除界面课件
     await AsynchronousTransferHelper.ExecuteStoryboradAsync(storyboards);
 }

 public static void SetDeleteCoursewaresAnimation(DependencyObject element, UIDelegateProgress<List<CoursewareListItem>> value)
 {
     element.SetValue(DeleteCoursewaresAnimationProperty, value);
 }

 public static UIDelegateProgress<List<CoursewareListItem>> GetDeleteCoursewaresAnimation(DependencyObject element)
 {
     return (UIDelegateProgress<List<CoursewareListItem>>)element.GetValue(DeleteCoursewaresAnimationProperty);
 }

动画的执行，怎么转为有同步等待呢？动画完成只有通过触发事件Completed才能确定。

如何将动画转化为同步，可参考之前写的博客：C# 异步转同步

 /// <summary>
 /// 执行动画
 /// </summary>
 /// <param name="storyboard"></param>
 /// <returns></returns>
 public static async Task ExecuteStoryboradAsync([NotNull] Storyboard storyboard)
 {
     if (storyboard == null) throw new ArgumentNullException(nameof(storyboard));

     AutoResetEvent autoResetEvent = new AutoResetEvent(false);

     storyboard.Completed += OnStoryboardCompleted;
     storyboard.Begin();

     void OnStoryboardCompleted(object sender, EventArgs e)
     {
         storyboard.Completed -= OnStoryboardCompleted;
         autoResetEvent.Set();
     }

     await Task.Run(() => { autoResetEvent.WaitOne(); });
 }

4. 交互处理辅助类 UIDelegateOperation 

在UIDelegateOperation内部，每次调用时，都会新建一个UIDelegateProgress(委托进度)。委托进度，是界面交互的处理~

UIDelegateOperation:

 /// <summary>
     /// UI交互处理-提供可调用UI交互的操作
     /// </summary>
     public class UIDelegateOperation : BindableObject, IUIDelegateAction
     {
         private UIDelegateProgress _delegateProgress;

         public UIDelegateProgress DelegateProgress
         {
             get => _delegateProgress;
             private set
             {
                 _delegateProgress = value;
                 OnPropertyChanged();
             }
         }

         /// <summary>
         /// 执行
         /// </summary>
         public void Execute()
         {
             var delegateProgress = new UIDelegateProgress();
             delegateProgress.ProgressCompleted += () =>
             {
                 _delegateProgress = null;
             };
             DelegateProgress = delegateProgress;
         }

         /// <summary>
         /// 异步执行
         /// 交互处理完成并回调
         /// </summary>
         public async Task ExecuteAsync()
         {
             AutoResetEvent autoResetEvent = new AutoResetEvent(false);

             var delegateProgress = new UIDelegateProgress();
             delegateProgress.ProgressCompleted += () =>
             {
                 _delegateProgress = null;

                 autoResetEvent.Set();
             };
             DelegateProgress = delegateProgress;
             await Task.Run(() => { autoResetEvent.WaitOne(); });
         }
     }

     /// <summary>
     /// UI交互处理-提供可同步调用UI交互的操作
     /// </summary>
     /// <typeparam name="T">输入/输出类型</typeparam>
     public class UIDelegateAction<T> : BindableObject, IUIDelegateAction<T>
     {
         private UIDelegateProgress<T> _delegateProgress;

         public UIDelegateProgress<T> DelegateProgress
         {
             get => _delegateProgress;
             private set
             {
                 _delegateProgress = value;
                 OnPropertyChanged();
             }
         }
         /// <summary>
         /// 执行
         /// </summary>
         public void Execute(T parameter)
         {
             var delegateProgress = new UIDelegateProgress<T>(parameter);
             delegateProgress.ProgressCompleted += () =>
             {
                 _delegateProgress = null;
             };
             DelegateProgress = delegateProgress;
         }
         /// <summary>
         /// 异步执行
         /// 交互处理完成并回调
         /// </summary>
         public async Task ExecuteAsync(T parameter)
         {
             AutoResetEvent autoResetEvent = new AutoResetEvent(false);

             var delegateProgress = new UIDelegateProgress<T>(parameter);
             delegateProgress.ProgressCompleted += () =>
             {
                 _delegateProgress = null;

                 autoResetEvent.Set();
             };
             DelegateProgress = delegateProgress;

             await Task.Run(() => { autoResetEvent.WaitOne(); });
         }

         /// <summary>
         /// 异步执行并返回结果
         /// </summary>
         public async Task<T> ExecuteWithResultAsync()
         {
             AutoResetEvent autoResetEvent = new AutoResetEvent(false);

             var delegateProgress = new UIDelegateProgress<T>();
             delegateProgress.ProgressCompleted += () =>
             {
                 _delegateProgress = null;

                 autoResetEvent.Set();
             };
             DelegateProgress = delegateProgress;

             await Task.Run(() => { autoResetEvent.WaitOne(); });

             return delegateProgress.Result;
         }
     }

     /// <summary>
     /// UI交互处理-提供可同步调用UI交互的操作
     /// </summary>
     /// <typeparam name="TInput">输入类型</typeparam>
     /// <typeparam name="TOut">输出类型</typeparam>
     public class UIDelegateAction<TInput, TOut> : BindableObject, IUIDelegateAction<TInput, TOut>
     {
         private UIDelegateProgress<TInput, TOut> _delegateProgress;

         public UIDelegateProgress<TInput, TOut> DelegateProgress
         {
             get => _delegateProgress;
             private set
             {
                 _delegateProgress = value;
                 OnPropertyChanged();
             }
         }
         /// <summary>
         /// 执行
         /// </summary>
         public void Execute(TInput parameter)
         {
             var delegateProgress = new UIDelegateProgress<TInput, TOut>(parameter);
             delegateProgress.ProgressCompleted += () =>
             {
                 _delegateProgress = null;
             };
             DelegateProgress = delegateProgress;
         }

         /// <summary>
         /// 执行并返回结果
         /// </summary>
         public TOut ExecuteWithResult(TInput parameter)
         {
             var delegateProgress = new UIDelegateProgress<TInput, TOut>(parameter);
             delegateProgress.ProgressCompleted += () =>
             {
                 _delegateProgress = null;
             };
             DelegateProgress = delegateProgress;
             return delegateProgress.Result;
         }

         /// <summary>
         /// 异步执行并返回结果
         /// </summary>
         public async Task<TOut> ExecuteWithResultAsync(TInput parameter)
         {
             var delegateProgress = new UIDelegateProgress<TInput, TOut>(parameter);
             await SetDelegateProgress(delegateProgress);
             return delegateProgress.Result;
         }
         private async Task SetDelegateProgress(UIDelegateProgress<TInput, TOut> delegateProgress)
         {
             AutoResetEvent autoResetEvent = new AutoResetEvent(false);

             delegateProgress.ProgressCompleted += () =>
             {
                 _delegateProgress = null;
                 autoResetEvent.Set();
             };
             DelegateProgress = delegateProgress;
             await Task.Run(() => { autoResetEvent.WaitOne(); });
         }
     }

     /// <summary>
     /// UI交互处理接口
     /// </summary>
     public interface IUIDelegateAction
     {

         UIDelegateProgress DelegateProgress { get; }

         /// <summary>
         /// 执行
         /// </summary>
         void Execute();

         /// <summary>
         /// 异步执行
         /// </summary>
         Task ExecuteAsync();
     }

     /// <summary>
     /// UI交互处理接口
     /// </summary>
     /// <typeparam name="T">输入/输出类型</typeparam>
     public interface IUIDelegateAction<T>
     {
         UIDelegateProgress<T> DelegateProgress { get; }

         /// <summary>
         /// 执行
         /// </summary>
         void Execute(T parameter);

         /// <summary>
         /// 异步执行
         /// </summary>
         Task ExecuteAsync(T parameter);

         /// <summary>
         /// 异步执行并返回结果
         /// </summary>
         Task<T> ExecuteWithResultAsync();
     }

     /// <summary>
     /// UI交互处理接口
     /// </summary>
     /// <typeparam name="TInput">输入类型</typeparam>
     /// <typeparam name="TOut">输出类型</typeparam>
     public interface IUIDelegateAction<TInput, TOut>
     {
         UIDelegateProgress<TInput, TOut> DelegateProgress { get; }

         /// <summary>
         /// 执行
         /// </summary>
         void Execute(TInput parameter);

         /// <summary>
         /// 执行并返回结果
         /// </summary>
         TOut ExecuteWithResult(TInput parameter);

         /// <summary>
         /// 异步执行并返回结果
         /// </summary>
         Task<TOut> ExecuteWithResultAsync(TInput parameter);
     }

UIDelegateProgress:

     /// <summary>
     /// 委托进度
     /// </summary>
     public class UIDelegateProgress
     {
         public event Action ProgressCompleted;

         /// <summary>
         /// UI委托处理
         /// </summary>
         /// <param name="uiTask"></param>
         public async void StartAsync(Func<Task> uiTask)
         {
             try
             {
                 await uiTask.Invoke();
             }
             catch (InvalidOperationException e)
             {
                 Log.Error("UI交互处理，产生异常！", e);
             }
             finally
             {
                 ProgressCompleted?.Invoke();
             }
         }

         /// <summary>
         /// UI委托处理
         /// </summary>
         /// <param name="uiTask"></param>
         public void Start(Action uiTask)
         {
             try
             {
                 uiTask.Invoke();
             }
             catch (InvalidOperationException e)
             {
                 Log.Error("UI交互处理，产生异常！", e);
             }
             finally
             {
                 ProgressCompleted?.Invoke();
             }
         }
     }

     /// <summary>
     /// 委托进度
     /// </summary>
     public class UIDelegateProgress<T>
     {
         public event Action ProgressCompleted;

         /// <summary>
         /// 输入参数
         /// </summary>
         public T Parameter { get; set; }

         /// <summary>
         /// 输出参数
         /// </summary>
         public T Result { get; set; }

         public UIDelegateProgress()
         {

         }
         public UIDelegateProgress(T parameter)
         {
             Parameter = parameter;
         }

         /// <summary>
         /// UI委托处理
         /// </summary>
         /// <param name="uiTask"></param>
         public void Start(Action<T> uiTask)
         {
             try
             {
                 uiTask.Invoke(Parameter);
             }
             catch (InvalidOperationException e)
             {
                 Log.Error("UI交互处理，产生异常！", e);
             }
             finally
             {
                 ProgressCompleted?.Invoke();
             }
         }

         /// <summary>
         /// UI委托处理
         /// </summary>
         /// <param name="uiTask"></param>
         public async void StartAsync(Func<T, Task> uiTask)
         {
             try
             {
                 await uiTask.Invoke(Parameter);
             }
             catch (InvalidOperationException e)
             {
                 Log.Error("UI交互处理，产生异常！", e);
             }
             finally
             {
                 ProgressCompleted?.Invoke();
             }
         }

         /// <summary>
         /// UI委托处理
         /// </summary>
         /// <param name="uiTask"></param>
         public void Start(Func<T> uiTask)
         {
             try
             {
                 Result = uiTask.Invoke();
             }
             catch (InvalidOperationException e)
             {
                 Log.Error("UI交互处理，产生异常！", e);
             }
             finally
             {
                 ProgressCompleted?.Invoke();
             }
         }

         /// <summary>
         /// UI委托处理
         /// </summary>
         /// <param name="uiTask"></param>
         public async void StartAsync(Func<Task<T>> uiTask)
         {
             try
             {
                 Result = await uiTask.Invoke();
             }
             catch (InvalidOperationException e)
             {
                 Log.Error("UI交互处理，产生异常！", e);
             }
             finally
             {
                 ProgressCompleted?.Invoke();
             }
         }
     }

     /// <summary>
     /// 委托进度
     /// </summary>
     public class UIDelegateProgress<TInput, TOut>
     {
         public event Action ProgressCompleted;

         /// <summary>
         /// 输入参数
         /// </summary>
         public TInput Parameter { get; set; }

         /// <summary>
         /// 输出参数
         /// </summary>
         public TOut Result { get; set; }

         public UIDelegateProgress(TInput parameter)
         {
             Parameter = parameter;
         }

         /// <summary>
         /// UI委托处理
         /// </summary>
         /// <param name="uiTask"></param>
         public async void StartAsync(Func<TInput, Task<TOut>> uiTask)
         {
             try
             {
                 Result = await uiTask.Invoke(Parameter);
             }
             catch (InvalidOperationException e)
             {
                 Log.Error("UI交互处理，产生异常！", e);
             }
             finally
             {
                 ProgressCompleted?.Invoke();
             }
         }

         /// <summary>
         /// UI委托处理
         /// </summary>
         /// <param name="uiTask"></param>
         public void Start(Func<TOut> uiTask)
         {
             try
             {
                 uiTask.Invoke();
             }
             catch (InvalidOperationException e)
             {
                 Log.Error("UI交互处理，产生异常！", e);
             }
             finally
             {
                 ProgressCompleted?.Invoke();
             }
         }

         /// <summary>
         /// UI委托处理
         /// </summary>
         /// <param name="uiTask"></param>
         public void Start(Func<TInput, TOut> uiTask)
         {
             try
             {
                 Result = uiTask.Invoke(Parameter);
             }
             catch (InvalidOperationException e)
             {
                 Log.Error("UI交互处理，产生异常！", e);
             }
             finally
             {
                 ProgressCompleted?.Invoke();
             }
         }
     }

Demo中，举例了界面的删除操作

https://github.com/Kybs0/MVVM.DataAndInteractionIsolation

InvokeCommandAction

详细请参考Command篇

通过InvokeCommandAction 的使用，WPF任意事件都可以绑定Command，将业务逻辑放在ViewModel中。如：

 <TextBlock>
     <i:Interaction.Triggers>
         <i:EventTrigger EventName="MouseLeftButtonDown">
             <i:InvokeCommandAction Command="{Binding MouseLeftButtonDownCommand}"/>
         </i:EventTrigger>
     </i:Interaction.Triggers>
 </TextBlock>

关键字：UI分离，交互与数据分离，动画同步，单元测试