WPF MVVM 模式下的彈窗，包括確認框和信息提示框，MVVM 模式的用戶控制項。 ...

WPF MVVM 模式下的彈窗

一、總體展示

首先看看用戶控制項在設計頁面的大致效果：

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

外層還有個 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/

微信訂閱號