WPF MVVM 模式下的彈窗

WPF?MVVM?模式下的彈窗

獨立觀察員 2020 年 7 月 15 日

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

?

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

?

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

?

確認彈框，手動關閉、點擊取消按鈕、超時關閉這三種情況下會輸出相關信息（需傳入記錄信息的委托方法），點擊確認按鈕則可以繼續(xù)執(zhí)行業(yè)務方法。

?

還有一種是信息彈框，區(qū)別是不用于執(zhí)行業(yè)務方法，也不輸出信息 (操作結果)，只是用于提示用戶，且默認標題和默認超時時間不同（可修改）：

?

新建 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" >XButton>        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>

?

就是簡單做了下布局和樣式，然后做了數(shù)據(jù)綁定和命令綁定，我們移步到后臺來看。

?

由于使用了?MVVM?模式，所以頁面的后臺代碼中沒多少內(nèi)容：

///?<summary>/// [dlgcy] WPF MVVM 確認彈框；/// public partial class UC_ConfirmBox : UserControl{    public UC_ConfirmBox ()    {        InitializeComponent ();    }
    /// 
    /// 綁定 VM 中的 IsShowDialog    /// 
    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 關聯(lián) ViewModel，而是要在使用用戶控件時再綁定（大家覺得我做得對嗎），這個后面還會說到。

?

這里代碼比較多，就不貼出來了，最后會給出代碼托管地址。ViewModel 整體結構如下：

?

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

?

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

先來看看 “成員” 部分：

?

有個線程同步對象 AutoResetEvent，缺省設置為阻塞線程，由上圖可見，在彈框隱藏時會取消阻塞，那么阻塞的時機自然就是彈框顯示后：

?

上圖顯示的確認框幫助類的 “彈出確認框” 方法中，由于是使用異步調(diào)用，所以阻塞不會影響 UI 線程。阻塞方法可以指定超時時間，超時或者用戶沒有點擊確認按鈕則直接返回，否則，則執(zhí)行傳入的委托方法，即實際的業(yè)務方法。

?

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

?

(2) 倒計時

上一小節(jié)開頭處給出的” 成員圖” 中，還有一個定時器類型對象 _timer，就是用于倒計時功能的。計時器在彈窗彈出時開始啟動，代碼位于 IsShowDialog 屬性的 Set 方法中（見” 成員圖”）。

計時器的執(zhí)行方法在構造函數(shù)中綁定，執(zhí)行方法內(nèi)部，每隔一秒（聲明時設定）將剩余時間減 1，減為 0 時停止，并執(zhí)行關閉命令。此處和彈窗阻塞超時那里可能有功能冗余，當然，從另一方面來說，也可以看作是雙重保險。

?

(3) 其它

“Bindable” 區(qū)域中剩余的屬性都沒有做特殊處理。

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

?

使用時，引入用戶控件命名空間之后，將其與主界面平級擺放，實際就是覆蓋在主界面上方，然后設置其 Visibility 屬性為 “Collapsed”，不可見也不占用空間，避免影響主界面的開發(fā)：

?

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

?

調(diào)用的時候要注意異步的問題，使用輔助類 ConfirmBoxHelper 中的兩個方法即可：

?

給出文字版：

//?前臺；<uc:UC_ConfirmBox DataContext="{Binding DialogVm}" Visibility="Collapsed" IsShowDialog="{Binding IsShowDialog}">
// ViewModel;public ConfirmBoxViewModel DialogVm { get; set; } = new ConfirmBoxViewModel ();
//?使用；await?ConfirmBoxHelper.ShowMessage?(DialogVm,?"操作前通知",?6);
await ConfirmBoxHelper.ShowConfirm (DialogVm, "您確定要進行此操作嗎？", () =>{    #region 業(yè)務方法
    //。。。#endregion
}, ShowInfo);
await ConfirmBoxHelper.ShowMessage (DialogVm, "操作后通知");

?

這個是在 XMPP 通信 Demo 項目中寫的，項目地址為：

https://gitee.com/dlgcy/XmppPractice

Dotnet9網(wǎng)站常駐編輯。

長按關注我，

歡迎技術交流！

點擊閱讀原文，查看Dotnet9站點更多關于WPF的博文。