[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的實例實現及其調用流程。

寫這篇博文着實有些難產，若是有什麼地方寫的不夠好，或者難以理解，歡迎你們指正！謝謝閱讀！