Avalonia UI 學習筆記(2) 專案啟動

一段Avalonia程式碼與wpf畫面

啟動專案

找一個空間或者新增一個乾淨的目錄,在該目錄下開啟命令列工具或者終端機,輸入以下命令

dotnet new avalonia.xplat -o MyApp

其中 MyApp 可以替換成你的專案名稱。

這時候會在該目錄底下新增一個依照你所指定的名稱的目錄,其中目錄結構如下

打開MyApp.sln之後,在Visual Studio中大概會像這樣

若出現下面的畫面,嘗試安裝缺少的元件或套件,來解決紅蚯蚓問題。

當我按下安裝時,會跳出安裝視窗,直接安裝即可

之後會跳出需要接受 Android的授權合約視窗

接受之後,就可以開始開發程式了,方案總管的畫面也會變成這樣:

肥米輸入法

周圍是各種程式碼區塊,畫面右邊則有一個輕鬆的人愉快的看著

一個用 C# 開發的仿蝦咪的輸入法,叫做

肥米輸入法

雖然已經好久沒有更新了,但是其中的開發思路倒是可以參考。

參考資料(轉載自該開源專案的內容)

  • 1. 允許控制台:https://stackoverflow.com/questions/4362111/how-do-i-show-a-console-output-window-in-a-forms-application
  • 2、C#全域Keyhook:https://stackoverflow.com/questions/577411/how-can-i-find-the-state-of-numlock-capslock-and-scrolllock-in-net
  • 3.在其他類別中使用表單小工具:https://stackoverflow.com/questions/12983427/accessing-forms-controls-from-another-class
  • 4.令狀表單可以拖移: https://stackoverflow.com/questions/1592876/make-a-borderless-form-movable
  • 5.半形轉全形:時間啟動序為: https://blog.darkthread.net/blog/strconv-half-full-width-notes
  • 6.JsonValue處理liu.json:https://stackoverflow.com/questions/6620165/how-can-i-parse-json-with-c
  • 7、ini-parser:https://github.com/rickyah/ini-parser
  • 8、sendkey範例:https://www.itread01.com/content/1548344359.html
  • 9、線上語法測試;https://dotnetfiddle.net/

Avalonia UI 學習筆記(1) 專案啟動前的準備

一個白板圍繞著 Avalonia UI 進行一個看板活動的敏捷會議

Avalonia UI 是什麼?

Avalonia UI 是一個在 .Net Core 的框架,具備跨平臺特性,可以做到一次開發多平台使用,可應用於 Windows、Linux、MacOS、Android、iOS以及WebAssembly。

官方表示即將推出 VisionOS 以及 Samsung 的 Tizen OS 支援,因此投資學習 Avalonia 是一個很好的選擇。

開始前的準備

在開始之前,訪問官方網站是一個不錯的開始,跟隨著線上文件開始學習路徑也是一個啟動學習的最佳方式。

我已經將學習過程中找到的相關資料放在 Avalonia UI 學習筆記(0) 相關資料 ,有興趣的可以訪問觀看。

接下來的各種學習紀錄都圍繞 .Net 8 以及 Visual Studio 2022 的開發架構與環境中。

安裝專案範本

打開命令列視窗或終端機
輸入

dotnet new install Avalonia.Templates
將安裝下列範本套件:
   Avalonia.Templates

Avalonia.Templates (版本 11.0.2) 已安裝,將會以 最新版本 取代。
Avalonia.Templates::11.0.2 已成功解除安裝。
警告: NuGet 來源 http://192.168.10.31:5555/v3/index.json 不安全,將不會搜尋。若要包含搜尋的來源,請使用 --force。
成功: Avalonia.Templates::11.0.6 已安裝下列範本:
範本名稱                             簡短名稱                   語言     標記
-----------------------------------  -------------------------  -------  -----------------------------------------
Avalonia .NET App                    avalonia.app               [C#],F#  Desktop/Xaml/Avalonia/Windows/Linux/macOS
Avalonia .NET MVVM App               avalonia.mvvm              [C#],F#  Desktop/Xaml/Avalonia/Windows/Linux/macOS
Avalonia Cross Platform Application  avalonia.xplat             [C#],F#  Desktop/Xaml/Avalonia/Web/Mobile
Avalonia Resource Dictionary         avalonia.resource                   Desktop/Xaml/Avalonia/Windows/Linux/macOS
Avalonia Styles                      avalonia.styles                     Desktop/Xaml/Avalonia/Windows/Linux/macOS
Avalonia TemplatedControl            avalonia.templatedcontrol  [C#],F#  Desktop/Xaml/Avalonia/Windows/Linux/macOS
Avalonia UserControl                 avalonia.usercontrol       [C#],F#  Desktop/Xaml/Avalonia/Windows/Linux/macOS
Avalonia Window                      avalonia.window            [C#],F#  Desktop/Xaml/Avalonia/Windows/Linux/macOS

這裡需要注意的是某些範本只對應某些平台,因此開發之前謹慎選擇範本會讓開發效率較為順暢。

avalonia.xplat 是跨平臺的範本

avalonia.mvvm 是最常用的範本,但不支援移動裝置。

安裝擴充套件

下載擴充套件 Avalonia for Visual Studio 2022 並安裝,安裝後,VS就能讀寫 Avalonia 的 XAML。

開始前的準備工作到這裡大概就差不多了,下一篇將開始建立一個Avalonia專案。

Avalonia UI 學習筆記(0) 相關資料

線上文件

教學影片

參考資料

額外的搭配資料