"xaml+cs"桌面客戶端跨平臺初體驗
阿新 • • 發佈:2020-04-01
# "Xaml+C#"桌面客戶端跨平臺初體驗
## 前言
隨著 .Net 5的到來,微軟在 .Net 跨平臺路上又開始了一個更高的起點。回顧.Net Core近幾年的成果,可謂是讓.Net重生了一次.
Asp .Net Core跨平臺解決了Windows伺服器昂貴的費用和不能長時間待機的問題,讓Asp程式能夠跑在Linux甚至Mac上。從部落格園裡.Net分類可以看到,每天都可以湧現大批Asp .Net Core的技術文章,越來越多的開發者或者公司開始嘗試這個船新的跨平臺框架。
然鵝,Asp的跨平臺是能夠使用html作為UI,C#作為後臺程式碼完成的,html本來就是原生支援跨平臺的語言。如果要到達在客戶端方面的跨平臺,仍需要走很長一段路。
早些年的時候。微軟使用鈔能力收購了移動客戶端跨平臺開發的大佬Mono,並組建了新的Xamarin,一次開發就可以生成Android,iOS,UWP平臺的App,但也僅僅停留在移動客戶端跨平臺。同樣在民間一些大佬的努力下,也創造出了很多PC跨平臺的輪子,比如:Electron.Net,GTK#,Qt#等等,這些框架都是使用Html或者Mono平臺的內容達到UI跨平臺的,而今天我則要推薦一款新的跨平臺方案[AvaloniaUI](http://avaloniaui.net/ "官網")。
## 準備
- 一個Linux的機器
這裡推薦使用windows 10下的linux子系統,可以快速的在windows上操作linux子系統的檔案目錄,用來快速上傳編譯的程式到linux。詳細操作可以看這篇文章[啟用Windows10的Linux子系統並安裝圖形介面](https://www.cnblogs.com/oboth-zl/p/10315500.html "啟用Windows10的Linux子系統並安裝圖形介面")。
當然使用實體機,或者伺服器都可以。總之最終目的就是有一個可以連線帶圖形化介面的Linux系統。
- 安裝.Net Core Runtime
微軟官方給出了在Ubutnu安裝.Net Core的方法,這裡我以Ubuntu為例,其他發行版本使用對應的包管理命令
> 1.註冊 Microsoft 金鑰和源
~~~ shell
wget https://packages.microsoft.com/config/ubuntu/19.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
~~~
>2.安裝.Net Core 3.1 Runtmime
~~~ shell
sudo apt-get update
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-runtime-3.1
~~~
更多詳情可參考[Microsoft Docs :Ubuntu 19.04 包管理器 - 安裝 .NET Core](https://docs.microsoft.com/zh-cn/dotnet/core/install/linux-package-manager-ubuntu-1904 "在Ubuntu安裝.Net Core")。
- 安裝VS拓展
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401162218242-1584551543.png)
如果VS拓展下載太慢,可以使用下面的網盤連結下載。
> 連結: https://pan.baidu.com/s/1sYnpC37IcH2VKQKjmqBALw 提取碼: wyqn
- WPF/UWP的經驗
1. Xaml的語法
2. C#
3. 最好了解MVVM模式或者ReactiveUI
## Code
- 建立一個AvaloniaUI的專案
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401162638672-1357349994.png)
> 瞭解WPF/UWP通知模式的童鞋可以使用MVVM
- 專案結構
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401162853036-577208278.png)
和WPF/UWP很相似的結構,但是不同的是Program.cs被重寫了
~~~ c#
class Program {
// Initialization code. Don't use any Avalonia, third-party APIs or any
// SynchronizationContext-reliant code before AppMain is called: things aren't initialized
// yet and stuff might break.
public static void Main(string[] args) => BuildAvaloniaApp()
.StartWithClassicDesktopLifetime(args);
// Avalonia configuration, don't remove; also used by visual designer.
public static AppBuilder BuildAvaloniaApp()
=> AppBuilder.Configure()
.UsePlatformDetect()
.LogToDebug()
.UseReactiveUI();
}
~~~
- MainWindow.Xaml
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401163252075-1354334621.png)
可以說和WPF/Xaml大致一模一樣了,但是體驗不太好地就是在Xaml標籤頁的智慧提示和顯示內容體驗,以及右側的實時渲染視窗是一幀一幀地重新整理整個頁面。
- ViewModel
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401163610040-394674108.png)
>Avalonia UI使用地是ReactiveUI來做的介面繫結和響應。和以往使用MVVMLight不同,繫結命令不用RelayCommand,而是直接在xaml繫結一個後臺的方法名。
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401163801544-1163151375.png)
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401163846829-1947990681.png)
- 釋出
編碼完成在windows上測試通過之後,就可以把程式打包發到其他平臺上測試了。這裡以Linux為例:
Alt+B-->選擇釋出
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401164205049-238717929.png)
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401164254702-1211509855.png)
根據目標平臺選擇配置儲存。
點擊發布,稍等片刻。。。。。。
- 跨平臺執行
以linux為例:
1. 將Publish的資料夾上傳到Linux上
2. 找到對應的程式名(沒有任何字尾),更改許可權為”允許此檔案作為程式執行“
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401164549682-2075105279.png)
3. 雙擊執行,即可看到和Windows上一模一樣的效果。
## 問題
> 由於AvaloniaUI不是微軟官方出品,而是民間團隊開發,且目前仍處於預覽。我羅列一些自己遇到問題時的解決方案
1.嘗試Nuget把AvaloniaUI的包更新到最新
2.保證開發的.netcore配置比執行環境的.net core版本低
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401165058747-1255574387.png)
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401165419360-969978555.png)
3.*字型渲染問題
這個問題是我遇到的最嚴重的問題,直接導致程式都不能渲染出來。如果有遇到這個問題的同學,可以首先在Program.cs下的Main函式裡面加兩行程式碼:
~~~ C#
Console.WriteLine(SKTypeface.Default.FamilyName);
Console.WriteLine(SKTypeface.FromFamilyName("Sans").FamilyName);
~~~
然後在linux裡使用控制檯來執行程式,定位到程式目錄,更改程式許可權為可執行程式
~~~ shell
chmod -x 程式名
~~~
執行程式
~~~ shell
./程式名
~~~
如果出現許可權不足的可以使用如下
~~~ shell
chmod 777 程式名
~~~
如果執行程式後,控制檯列印了NullRefrence的錯誤,那就是缺少預設字型。估計是AvaloniaUI的團隊設定了程式的預設字型”Sans“。
只需要替換軟體預設字型就可以了,這裡我使用微軟雅黑
~~~ xml
微軟雅黑
~~~
並且需要在linux安裝微軟雅黑的字型
~~~ shell
sudo apt-get install ttf-mscorefonts-installer
~~~
>部落格園之前也有一位大佬體驗AvaloniaUI時候遇到字型的問題,可是他的樹莓派是可以渲染出窗體只是沒有文字,但是我測試了好幾個發行版本都是窗體都不渲染。大家可以參考一下他的文章[樹莓派 Raspberry Pi 4,.net core 3.0 ,Avalonia UI 開發](https://www.cnblogs.com/drzhong/p/11678701.html "樹莓派 Raspberry Pi 4,.net core 3.0 ,Avalonia UI 開發")
## 執行效果
- 我嘗試使用Face++的 API介面,測試寫了一個有網路請求的摳圖程式
Windows:
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172523359-829315085.png)
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172620412-709114858.png)
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172658082-841271798.png)
Linux:
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172912844-2026689150.png)
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401173039886-82489931.png)
![](https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172821416-547413659.png)
## 其他
貼出一些參考網站給大家
- 官網 http://avaloniaui.net/
- GitHub https://github.com/AvaloniaUI/Avalonia
- 樹莓派使用AvaloniaUI https://www.cnblogs.com/drzhong/p/11678701.html
- Mac使用AvaloniaUI https://www.cnblogs.com/seamas/p/11245348.html
【文章為大頭BigHead原創,轉載請註明出處】