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 == 0)
    {
        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分离，交互与数据分离，动画同步，单元测试