[UWP]使用Popup構建UWP Picker

来源:https://www.cnblogs.com/hhchaos/archive/2018/11/15/9961249.html
-Advertisement-
Play Games

在上一篇博文《 "[UWP]不那麼好用的ContentDialog" 》中我們講到了ContentDialog在複雜場景下使用的幾個令人頭疼的弊端。那麼,就讓我們在這篇博文里開始愉快的造輪子之旅吧! 首先要向大家說明:這篇博文主要還是寫的構建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的實例實現及其調用流程。

寫這篇博文著實有些難產,如果有什麼地方寫的不夠好,或者難以理解,歡迎大家指正!謝謝閱讀!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、collections collections模塊主要封裝了一些關於集合類的相關操作。比如,iterable,Iteratort等等,除此之外,collections還提供了一些除基本數據類型以外的數據集合類型。Counter,deque,OrderDict,defaultdict以及named ...
  • 本節主要內容: 1.模塊的簡單認識 2.collections模塊 3.time時間模塊 4.random模塊 5.os模塊 6.sys模塊 一.模塊的簡單認識 模塊:就是我們把裝有特定功能的代碼進行歸類的結果. 引入模塊的方式 1.import 模塊 2.from xxx import 模塊 二. ...
  • Input Output 題意:給你一顆樹,選擇一個三個點構成的集合,使得這三個點不在一條直線上(意思就是 從一個點出發,用一條不回頭的線不能將這三個點連起來)問一共有多少個這樣的集合 思路 :先求出一共有多少個集合,就是Cn3 (n-2)*(n-1)*n/6 ; 然後再求不符合條件的個數 求不符合 ...
  • 本項目是一個通用響應式管理後臺,導入開發環境安裝就能直接運行,界面也非誠漂亮,在PC端和移動端也是自適應的。非常適合企業或者個人搭建各種商城後臺,博客後臺,網站管理後臺等。 源碼啟動後的截圖 需要這套源碼的朋友聯繫作者微信(同電話):18629374628 ...
  • 一.ORM欄位 | 類型 | 說明 | | | | | AutoField | 一個自動增加的整數類型欄位。通常你不需要自己編寫它,Django會自動幫你添加欄位:\ ,這是一個自增欄位,從1開始計數。如果你非要自己設置主鍵,那麼請務必將欄位設置為\ 。Django在一個模型中只允許有一個自增欄位, ...
  • 引入模塊的方式: 1. import 模塊 2. from xxx import 模塊 一、collections 模塊 1.Counter() counter是一個計數器,主要用來計數,計算一個字元串中每個字元出現的次數 1 from collections import Counter 2 s ...
  • Python中的邏輯運算符 not, and, or and 與運算 兩者為真則為真 >>>True and True True 其中一個為假,則為假 >>>True and False False or 或運算 兩者為假則為假 >>>False or False False 其中一個為真,則為真 ...
  • ASP.NET -- 一般處理程式ashx 如果在一個html頁面向伺服器端請求數據,可用ashx作為後臺頁面處理數據。ashx適合用作數據後臺處理,相當於WebForm中的aspx.cs文件或aspx.vb文件。 入門案例:html頁面向ashx頁面請求數據,ashx作為後臺頁面返回數據。 前端h ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...