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分離，交互與數據分離，動畫同步，單元測試