[UWP]使用Popup建構UWP Picker

原文: [UWP]使用Popup建構UWP Picker 在上一篇博文《 [UWP]不那麼好用的ContentDialog

》中我們講到了ContentDialog在複雜場景下使用的幾個令人頭疼的弊端。那麼，就讓我們在這篇博文裡開始愉快的造輪子之旅吧！

首先要向大家說明：這篇博文主要還是寫的建構Picker時的思考過程，如果不感興趣的，可以直接略過這篇，閱讀下一篇《

[UWP]如何使用Picker實作一個簡單的ColorPicker彈窗

》。

首先針對上篇文章中講到的ContentDialog的幾個缺點，先來梳理一下我們對新的彈窗層元件的需求：

• 能實作正常Dialog的彈出關閉流程（必須的，不然怎麼來替代ContentDialog？）；
• 可以支援同時彈出多層彈窗（解決ContentDialog的弊病）；
• 适用于MVVM架構，提供給ViewModel層調用接口（越簡單越友好越好，松耦合）；
• 友好的傳回值（友善調用方直接擷取想要的結果）；
• 要實作ContentDialog類似的可定制化能力（彈出位置，自定義UI,動畫等）。

下面的文章裡，為了友善描述，我把實作上訴功能的新彈窗層元件稱之為Picker（類似于UWP檔案選擇器的叫法）。

簡化一下需求，我們的Picker主要有三個功能規劃：

1. Picker的調用呈現方式為彈出一個類似于ContentDialog的彈窗，但是可以多層級的調用（即多層彈窗）；
2. Picker的業務邏輯實作層遵循共同的調用限制（即實作Picker定義的相關接口），基于此限制實作的MVVM頁均可實作Picker的調用方式；
3. 實作Picker限制的相關類本身實作獨立的Pick功能（即調用後傳回特定類型值）。

我們簡單的類比下，上面對Picker的功能規劃其實有點類似于Windows系統中的檔案檢視邏輯。

在Windows系統中，可以處理某類格式檔案（例如.mp4檔案）的程式可以向系統申明支援該格式，當系統需要處理這類檔案時（例如輕按兩下打開.mp4檔案），将會調用這個程式（或者詢問使用者使用哪一個支援該類檔案的程式）來處理該檔案。

有了明确的功能規劃，我們就可以來思考如何實作了。

如何實作Picker的界面層呈現

我們已經說過了，ContentDialog的内部實作其實是依賴Popup，是以我們同樣可以用Popup來承載Picker的界面顯示。

Popup本身是一個非常基礎的元件（UWP中另外一個常用的元件Flyout也是基于Popup實作的），它在UWP應用的可視化樹中是處于最頂層的（PopupRoot），且呈現在應用最前面（可以了解為具有最大值的ZIndex）。基于Popup我們可以實作很多不依賴程式主界面的UI功能，并且不受ContentDialog隻能同時顯示一個的限制。

這樣的話就非常簡單了，我們可以建構一個ObjectPicker類，它提供類似ContentDialog類中ShowAsync的方法，調用此方法時建立一個新的Popup，然後将我們要顯示的界面元素作為其Child添加到界面上（實際上，結合MVVM架構邏輯，我們使用Frame裝載目标頁面），在使用者完成Pick操作後關閉Popup,并且傳回操作結果。

呈現過程的核心，三句代碼足以：

var popup = new Popup();
    //ToDo 裝載Picker界面
    popup.IsOpen = true;
    //ToDo 處理Pick互動操作
    popup.IsOpen = false;           

當然，涉及到具體實作時，由于我們要考慮到界面呈現的UI互動、位置及動畫，實際代碼會更多一點。

ObjectPicker類隻負責呈現目标頁面，它不負責處理任何的業務邏輯。

如何實作Picker的業務邏輯

在我們的規劃中，Picker的實際業務邏輯是在Picker頁面的邏輯層代碼，即ViewModel層中實作的。這樣的話，什麼時候Picker可以關閉是由其ViewModel決定的。為了使ViewModel的處理結果可以通知到Picker，我們需要讓實作Picker功能的ViewModel遵循一個共同的限制。

我們定義這樣一個泛型接口：

public interface IObjectPicker<T>
{
    event EventHandler<ObjectPickedEventArgs<T>> ObjectPicked;
    event EventHandler Canceled;
}           

其中T代表這個ViewModel支援的Pick對象類型，當使用者完成Pick操作時觸發ObjectPicked事件，使用者取消Pick操作時觸發Canceled事件，ObjectPicker類将在Show的時候注冊這兩個事件來接受ViewModel的處理結果。

如何優雅的調用Picker

當我們實作了一個Picker以後，如何來調用它呢？使用最簡單的方法，直接在需要調用Picker的地方new一個ObjectPicker，然後調用ShowAsync來擷取傳回值？

這看起來沒什麼問題，但是實際應用中，我們的Picker可能有很多個（文字輸入框，顔色選取器等）。我們希望有一個類似于Windows系統系統資料庫的服務，它提供：

• 不同類型的Picker注冊接口及管理；
• 提供簡單友好的Picker調用接口，并且傳回Pick結果。

這樣的話，我們可以簡單的實作一個ObjectPickerService，通過它，我們的調用邏輯會非常的簡單：

var pickRet = await pickerService.PickSingleObjectAsync<Color>(typeof(TestColorPickerViewModel).FullName);           

這個例子可以在我的開源項目HHChaosToolkit中的Picker部分看到（

GitHub連結點這裡

），同時也是我的下篇博文的主要内容。

這篇文章到這裡就結束了，主要還是講如何建構Picker元件的思考過程，以及我基于對MVVM結構的了解，如何來梳理Picker的架構。下一篇文章我将結合例子介紹一下Picker的執行個體實作及其調用流程。

寫這篇博文着實有些難産，如果有什麼地方寫的不夠好，或者難以了解，歡迎大家指正！謝謝閱讀！