用WindowsAppSDK（WASDK）優雅的開發上位機應用-有解無憂

C#開發上位機應用的一些選擇

如果你不想看介紹，可以直接跳到優雅開發示例那里，

1. WASDK（WinUI 3）

Windows 應用 SDK 是一組新的開發人員組件和工具，它們代表著 Windows 應用開發平臺的下一步發展， Windows 應用 SDK 提供一組統一的 API 和工具，可供從 Windows 11 到 Windows 10 版本 1809 上的任何桌面應用以一致的方式使用，

Windows 應用 SDK 不會用 C++ 替換 Windows SDK 或現有桌面 Windows 應用型別，例如 .NET（包括 Windows 表單和 WPF）和桌面 Win32，相反，Windows 應用 SDK 使用一組通用 API 來補充這些現有工具和應用型別，開發人員可以在這些平臺上依賴這些 API 來執行操作，有關更多詳細資訊，請參閱Windows 應用 SDK 的優勢，

這個WASDK目前是微軟主推的開源的，UI部分是結合了WinUI 3，

2. WPF

歡迎使用 Windows Presentation Foundation (WPF) 桌面指南，這是一個與解析度無關的 UI 框架，使用基于矢量的呈現引擎，構建用于利用現代圖形硬體， WPF 提供一套完善的應用程式開發功能，這些功能包括 Extensible Application Markup Language (XAML)、控制元件、資料系結、布局、二維和三維圖形、影片、樣式、模板、檔案、媒體、文本和版式， WPF 屬于 .NET，因此可以生成整合 .NET API 其他元素的應用程式，

目前WPF也已經開源，而且整體上更為成熟，Visual Studio就是WPF 4.x開發的，生態也比較好，

3. WinForms

歡迎使用 Windows 表單的桌面指南，Windows 表單是一個可創建適用于 Windows 的豐富桌面客戶端應用的 UI 框架， Windows 表單開發平臺支持廣泛的應用開發功能，包括控制元件、圖形、資料系結和用戶輸入， Windows 表單采用 Visual Studio 中的拖放式可視化設計器，可輕松創建 Windows 表單應用，

這個也是開源的，Winform算是上手即用的開發框架了，通過拖拉拽可以很輕松的創建出UI和撰寫對應的功能，對于UI美觀程度不太重要的工業領域，這個用來做工具開發很簡單，上手也容易，

4. UWP

UWP 是創建適用于 Windows 的客戶端應用程式的眾多方法之一， UWP 應用使用 WinRT API 來提供強大的 UI 和高級異步功能，這些功能非常適用于 Internet 連接的設備，

微軟對于UWP，只能說曾經愛過，當初UWP可是當紅炸子雞，號稱跨windows全平臺，不過現在也是跨windows全平臺，可惜沒搞好，不過雖然不夠受重視，但是一時半會還是死不掉，畢竟WASDK還不夠成熟，

為什么選擇WASDK

通過上面的介紹，大家對于windows下的原生UI開發框架應該有了一些了解，如果拋開語言限制的話還有更多的選擇，比如QT，各種前端的跨平臺，像微軟自己家的MAUI什么的，我之前還寫了一篇WinUI遷移到即將"過時"的.NET MAUI個人體驗，

最近的微軟Windows App SDK 1.1版本發布了，意味著BUG應該少了很多，也可以正式的在一些專案中使用了，通過官方的WinUI庫，我們可以輕松的構建符合Win11設計規范的UI，由于UWP的種種問題，WPF和WinForms又是只開源，應該不會有大的新特性了，外加本人以前也經常玩玩UWP，通過前景和自己的喜好，肯定是選擇WASDK了，

優雅開發示例

1. 做一個上位機應用

上位機示例圖
上圖為應用的展示圖，采用的WASDK1.1版本開發，目前已經上架了Windows商店，打包方式為MSIX，目前x64和arm64是分開的MSIX包，檔案里提到可以多個MSIX包合成一個集合包，不過我采用上傳多個包，讓商店自動匹配，

此應用是為稚暉君的ElectronBot開發的第三方的上位機，名字就叫電子腦殼，下圖是效果圖展示，結合Surface平板，觸摸體驗良好，個人感覺很優雅，

實物控制

B站演示視頻

2. 整體的開發步驟

ElectronBot本身連接電腦采用的是libusb生成的驅動吧，這個不知道敘述的是否正確，

看下圖大體能明白電腦和ElectronBot通過高速USB進行連接，當我們驅動安裝成功就可以進行操作了，

電子腦殼應用=>ElectronBot.DotNet SDK=>LibUsbDotNet

底層呼叫采用的是LibUsbDotNet這個庫進行底層資料傳輸的操作，我根據稚暉君提供的c++版本的sdk進行了封裝，

目前c#版本的SDKElectronBot.DotNet是開源的，demo示例也是windowsAppSDK的，大家感興趣的可以star一下，

開始創建專案前最好安裝下Template Studio for WinUI

2.1 創建專案

選擇模板進行創建，可以根據需要進行選擇，本人選擇如下，

由于ElectronBot .Net SDK本身已經開源，直接以上位機主體應用做講解，下圖為應用的依賴項，主要包含SDK和OpenCV相關的nuget包，

應用依賴項

應用整體不復雜，通過.Net框架自帶的DI容器進行物件生命周期的管理，通過MVVM進行資料的系結和更新，

結合Win2D和OpenCV進行圖形資料處理，然后通過SDK寫入到usb設備里進行控制和展示，

軟體整體的實作邏輯

2.2 關鍵點代碼講解

下面的代碼是通過切換Combox事件，動態創建不同的表盤并系結到MainWindows的控制元件上，

private ICommand _clockChangedCommand;
public ICommand ClockChangedCommand => 
    _clockChangedCommand ?? (_clockChangedCommand = new RelayCommand(ClockChanged));

private async void ClockChanged()
{
    var clockName = _clockComboxSelect.DataKey;

    if (!string.IsNullOrWhiteSpace(clockName))
    {
        var viewProvider = _viewProviderFactory.CreateClockViewProvider(clockName);

        Element = viewProvider.CreateClockView(clockName);
    }

    await Task.CompletedTask;
}

public UIElement Element
{
    get => _element;
    set => SetProperty(ref _element, value);
}

xaml代碼如下，

通過此操作，能夠正常顯示表盤，資料重繪也能正常使用，

當切換到時鐘模式的時候，另外一個定時器會定時抓取表盤并將xaml轉化成圖片進行傳輸，主要涉及到Win2D庫的使用，代碼如下，

if (_electron.Connect())
{
    var bitmap = new RenderTargetBitmap();
    await bitmap.RenderAsync(Element);
    var pixels = await bitmap.GetPixelsAsync();

    // Transfer the pixel data from XAML to Win2D for further processing.
    using CanvasDevice canvasDevice = CanvasDevice.GetSharedDevice();

    using CanvasBitmap canvasBitmap = CanvasBitmap.CreateFromBytes(
        canvasDevice, pixels.ToArray(), bitmap.PixelWidth, bitmap.PixelHeight, 
        Windows.Graphics.DirectX.DirectXPixelFormat.B8G8R8A8UIntNormalized);

    using IRandomAccessStream stream = new InMemoryRandomAccessStream();

    await canvasBitmap.SaveAsync(stream, CanvasBitmapFileFormat.Png);

    Bitmap image = new Bitmap(stream.AsStream());

    var mat = OpenCvSharp.Extensions.BitmapConverter.ToMat(image);

    var mat1 = mat.Resize(new OpenCvSharp.Size(240, 240), 0, 0, OpenCvSharp.InterpolationFlags.Area);

    var mat2 = mat1.CvtColor(OpenCvSharp.ColorConversionCodes.RGBA2BGR);

    var dataMeta = mat2.Data;

    var data = https://www.cnblogs.com/GreenShade/p/new byte[240 * 240 * 3];

    Marshal.Copy(dataMeta, data, 0, 240 * 240 * 3);

    await Task.Run(() =>
    {
        if (_electron.Connect())
        {
            _electron.SetImageSrc(data);

            _electron.Sync();
        }
    });


}

上面代碼通過RenderTargetBitmap和Win2D將Xaml元素轉化成CanvasBitmap，然后再通過OpenCV將canvasBitmap轉化成下位機可識別的位元組陣列，通過SDK進行傳輸到下位機，

整體的開發程序和UWP很相似，UI部分用到的很多API都是UWP的改名版本，上位機目前沒有開源，所以只能截取部分代碼進行講解了，如果想交流大家可以評論區見，

3. 遇到的一些問題

目前Windows App SDK有一些BUG，在我使用的程序中主要發現使用WinRT的串口監聽事件失效，已在github提了bug，回頭應該能夠修復，還有WinRT里的一些API只認UWP UI Api windows.UI開頭的一些物件，還需要大家多使用多反饋，這樣WASDK開發才能良性回圈，

public async Task InitAsync()
{
    // Target all Serial Devices present on the system
    var deviceSelector = SerialDevice.GetDeviceSelector();

    var myDevices = await Windows.Devices.Enumeration.DeviceInformation.FindAllAsync(deviceSelector);

    deviceWatcher = DeviceInformation.CreateWatcher(deviceSelector);

    deviceWatcher.Added += new TypedEventHandler<DeviceWatcher, DeviceInformation>(this.OnDeviceAdded);
    deviceWatcher.Removed += new TypedEventHandler<DeviceWatcher, DeviceInformationUpdate>(this.OnDeviceRemoved);

}

上面代碼注冊的事件，在目前1.1版本的WASDK不生效，官方已經標注為BUG，當然在UWP里就正常，UWP在有些時候還是挺靠譜的嘛，

個人總結感悟

通過這個上位機應用的開發，也是對WASDK和UWP相關技術的使用能熟練一些了，從WPF到UWP再到WASDK和MAUI，XAML相關的開發都是可繼承的，開發方式很相似，對于技術的遷移來說也算是沒什么障礙吧，經常會聽到很多人說微軟出了這么多技術，都學不動了什么的，其實大家掌握內涵，對于新技術的接受還是很快的，

特別鳴謝以及參考推薦檔案

感謝dino.c大佬的一個番茄鐘，因為我的表盤其實就是抄他番茄鐘的代碼，

感謝h哥和火火給的一些思路，

當然還要感謝超超,畢竟有些代碼還是抄他的，

參考推薦檔案如下

一個番茄鐘

Win2D samples

opencvsharp

WindowsAppSDK

WindowsCommunityToolkit

ElectronBot

ElectronBot.DotNet

LibUsbDotNet

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/497004.html

標籤：.NET Core

上一篇：提交后禁用按鈕后表單未提交

下一篇：Redis 原理 - String