WPFMVVM模式下的彈窗

獨立觀察員 2020 年 7 月 15 日

一、總體展示

首先看看使用者控制元件在設計頁面的大致效果：

中間部分自然就是確認彈框了，由標題、內容、確認按鈕、取消按鈕、倒計時、關閉按鈕組成，指定了大小範圍：

外層還有個 Grid，沒有指定大小，所以使用時會鋪滿容器，再配上帶透明度的背景色，可以當作蒙版，避免使用者繼續操作後面的介面，達到模態彈窗的效果：

確認彈框，手動關閉、點選取消按鈕、超時關閉這三種情況下會輸出相關資訊（需傳入記錄資訊的委託方法），點選確認按鈕則可以繼續執行業務方法。

還有一種是資訊彈框，區別是不用於執行業務方法，也不輸出資訊 (操作結果)，只是用於提示使用者，且預設標題和預設超時時間不同（可修改）：

二、使用者控制元件前端

新建 WPF 使用者控制元件後，貼入以下程式碼：

<Grid Background="#905F9EA0">
    <Grid Background="Gainsboro" MinWidth="300" MinHeight="200" MaxWidth="400" MaxHeight="300">
        <Grid.RowDefinitions>
            <RowDefinition Height="28"></RowDefinition>
            <RowDefinition 
 
Height="28"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>

        <DockPanel Height="28" Background="SteelBlue">
            <TextBox Text="
 
{Binding DialogTitle, TargetNullValue=' 注意 ', FallbackValue=' 注意 '}" Height="26" Width="Auto" Background="SteelBlue" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="White" FontSize="16" Focusable="False" IsHitTestVisible="False" IsTabStop="False" VerticalContentAlignment="Center" Padding="2,0,0,0">
            </TextBox>
            <Button x:Name="BtnClose" Command="{Binding CloseCommand}" Height="26" Width="26" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="16" Background="Transparent" Foreground="White" BorderThickness="0" >X</Button>
        </DockPanel>

        <StackPanel Grid.Row="1" Orientation="Horizontal" FlowDirection="RightToLeft">
            <TextBox VerticalContentAlignment="Center" Text="{Binding LeftTime, FallbackValue=20, TargetNullValue=20}" FontSize="16" Background="Transparent" Foreground="Coral" BorderThickness="0" Margin="5,0"></TextBox>
        </StackPanel>

        <TextBlock Grid.Row="2" FontSize="16" Text="{Binding DialogMessage, FallbackValue=' 是否確認操作？', TargetNullValue=' 是否確認操作？'}" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>

        <StackPanel Grid.Row="3" Orientation="Horizontal" FlowDirection="RightToLeft" VerticalAlignment="Center" Margin="0, 10">
            <Button x:Name="BtnConfirm" Command="{Binding ConfirmCommand}" Content="{Binding DialogConfirmBtnText, TargetNullValue=' 確認 ', FallbackValue=' 確認 '}" FontSize="16" Background="SteelBlue" Foreground="White" Margin="10, 0" Width="120"></Button>
            <Button x:Name="BtnCancel" Command="{Binding CancelCommand}" Content="{Binding DialogCancelBtnText, TargetNullValue=' 取消 ', FallbackValue=' 取消 '}" FontSize="16" Background="SteelBlue" Foreground="White" Margin="10, 0" Width="120"></Button>
        </StackPanel>
    </Grid>
</Grid>

就是簡單做了下佈局和樣式，然後做了資料繫結和命令繫結，我們移步到後臺來看。

三、使用者控制元件後臺

由於使用了MVVM模式，所以頁面的後臺程式碼中沒多少內容：

/// <summary>
/// [dlgcy] WPF MVVM 確認彈框；
/// </summary>
public partial class UC_ConfirmBox : UserControl
{
    public UC_ConfirmBox ()
    {
        InitializeComponent ();
    }

    /// <summary>
    /// 繫結 VM 中的 IsShowDialog
    /// </summary>
    public bool IsShowDialog
    {
        get { return (bool) GetValue (IsShowDialogProperty); }
        set { SetValue (IsShowDialogProperty, value); }
    }

    public static readonly DependencyProperty IsShowDialogProperty = DependencyProperty.Register ("IsShowDialog", typeof (bool), typeof (UC_ConfirmBox), new PropertyMetadata (false, (obj, args) =>
    {
        if (args.NewValue is bool newValue)
        {
            try
            {
                var control = obj as UC_ConfirmBox;
                control.Visibility = newValue ? Visibility.Visible : Visibility.Collapsed;
            }
            catch (Exception ex)
            {
                Console.WriteLine (ex.ToString ());
                MessageBox.Show ($"{ex.Message}");
            }
        }
    }));
}

建了個依賴屬性，用於使用使用者控制元件時繫結。這個是繫結 ViewModel 中的同名屬性 IsShowDialog 的（是否顯示彈窗），實際上，不用這個依賴屬性而直接用 Visibility 繫結 IsShowDialog（ViewModel 中的），然後加上相關轉換器也可以，但那樣對使用者不太友好，所以這裡直接在依賴屬性中進行 Visibility 的判斷。（關於依賴屬性的使用可以看本人之前的文章《WPF使用者控制元件的自定義依賴屬性在MVVM模式下的使用備忘》）。

然後注意一點，這裡並沒有直接將 DataContext 關聯 ViewModel，而是要在使用使用者控制元件時再繫結（大家覺得我做得對嗎），這個後面還會說到。

四、使用者控制元件對應的 ViewModel

這裡程式碼比較多，就不貼出來了，最後會給出程式碼託管地址。ViewModel 整體結構如下：

ConfirmBoxViewModel 上有個特性 AddINotifyPropertyChangedInterface，這個是一個第三方的包 PropertyChanged.Fody提供的，加上之後，類的公共自動屬性就具有了屬性變動通知功能。那麼為什麼還要繼承 BindableBase （實現了 InotifyPropertyChanged 的基類，參考《WPF 原生繫結和命令功能使用指南》）呢？ 原因是，如果在屬性的 get/set 中做了一些操作的話，Fody 對該屬性好像就不起作用了，所以補救一下。

(1) 彈框時阻塞業務流程

先來看看 “成員” 部分：

有個執行緒同步物件 AutoResetEvent，預設設定為阻塞執行緒，由上圖可見，在彈框隱藏時會取消阻塞，那麼阻塞的時機自然就是彈框顯示後：

上圖顯示的確認框幫助類的 “彈出確認框” 方法中，由於是使用非同步呼叫，所以阻塞不會影響 UI 執行緒。阻塞方法可以指定超時時間，超時或者使用者沒有點選確認按鈕則直接返回，否則，則執行傳入的委託方法，即實際的業務方法。

另一個 “彈出訊息框” 方法則相較簡單，只是簡單阻塞了一段 “訊息框超時時間”：

(2) 倒計時

上一小節開頭處給出的” 成員圖” 中，還有一個定時器型別物件 _timer，就是用於倒計時功能的。計時器在彈窗彈出時開始啟動，程式碼位於 IsShowDialog 屬性的 Set 方法中（見” 成員圖”）。

計時器的執行方法在建構函式中繫結，執行方法內部，每隔一秒（宣告時設定）將剩餘時間減 1，減為 0 時停止，並執行關閉命令。此處和彈窗阻塞超時那裡可能有功能冗餘，當然，從另一方面來說，也可以看作是雙重保險。

(3) 其它

“Bindable” 區域中剩餘的屬性都沒有做特殊處理。

命令的使用可以參考前文提到的文章，命令的處理邏輯則比較簡單，就是設定是否顯示和是否確認：

五、使用

使用時，引入使用者控制元件名稱空間之後，將其與主介面平級擺放，實際就是覆蓋在主介面上方，然後設定其 Visibility 屬性為 “Collapsed”，不可見也不佔用空間，避免影響主介面的開發：

IsShowDialog=”{Binding IsShowDialog}” 也是固定這樣設定即可，用於配合 DataContext 控制顯示隱藏，而 DataContext 則是綁定了主頁面 ViewModel 中相關的使用者控制元件的 ViewModel 物件。

呼叫的時候要注意非同步的問題，使用輔助類 ConfirmBoxHelper 中的兩個方法即可：

給出文字版：

// 前臺；
<uc:UC_ConfirmBox DataContext="{Binding DialogVm}" Visibility="Collapsed" IsShowDialog="{Binding IsShowDialog}"></uc:UC_ConfirmBox>

// ViewModel;
public ConfirmBoxViewModel DialogVm { get; set; } = new ConfirmBoxViewModel ();

// 使用；
await ConfirmBoxHelper.ShowMessage (DialogVm, "操作前通知", 6);

await ConfirmBoxHelper.ShowConfirm (DialogVm, "您確定要進行此操作嗎？", () =>
{
    #region 業務方法

    //。。。   

　　#endregion

}, ShowInfo);

await ConfirmBoxHelper.ShowMessage (DialogVm, "操作後通知");

六、地址

這個是在 XMPP 通訊 Demo 專案中寫的，專案地址為：

https://gitee.com/dlgcy/XmppPractice

同步首發：

http://dlgcy.com/wpf-mvvm-confirm-dialog/

微信訂閱號