【.NET6+WPF+Avalonia】開發支援跨平臺的WPF應用程式以及基於ubuntu系統的演示

WeskyNet發表於2022-03-15

前言:隨著跨平臺越來越流行,.net core支援跨平臺至今也有好幾年的光景了。但是目前基於.net的跨平臺,大多數還是在使用B/S架構的跨平臺上;至於C/S架構,大部分人可能會選擇QT進行開發,或者很早之前還有一款Mono可以支援.NET開發者進行開發跨平臺應用。

至於WPF的跨平臺,很多小夥伴一聽到,可能是表示震驚:納尼?WPF也可以跨平臺?答案是,WPF是可以跨平臺,而且還可以使用它(WPF)特色的MVVM模式。以下內容,我使用Avalonia UI框架來開發支援可以跨平臺的WPF程式。

 

前提準備:

開發環境:Win10+VS2022企業版

執行環境:Win10 & Ubuntu20.04 LTS

.NET環境: .NET 6

 

以下,正文:

0、在開始之前,需要新增一個擴充,名稱叫 Avalonia for Visual Studio xxxx。

安裝完成以後,需要關閉所有當前執行的VS,然後會提示安裝。選擇安裝即可。

 

1、新增擴充成功以後,在建立新專案裡面,建立WPF專案時候,會多出兩個專案選項。一個是無雙向繫結的專案,另一個是基於MVVM雙向繫結的專案。此處,我選擇基於VVM雙向繫結的專案。

 

2、配置專案時候,最好對專案名稱進行小寫。大寫可能Linux系統在識別的時候會有某些意想不到的bug(人品好的可能沒有,人品不好的可以自行測試)。此處我的專案名稱命名為linuxwpf

 

3、新建的專案,初始專案檔案以及程式碼,如下圖所示。

 

4、直接執行,執行以後的畫面,如下圖所示。

 

5、我們們改造一下,寫一個按鈕,然後點選彈出提示框,意思一下。此處需要引入nuget包:MessageBox.Avalonia

 

6、引入nuget包以後,對主窗體頁面進行改寫,提供了個button,並且在對應的VM裡面,新增一個Running方法,用於當做點選觸發的繫結方法。同時方法裡面提供了一個彈出訊息提示框的功能。

 

7、執行,驗證一下,結果如圖所示。

 

8、按鈕繫結的方法,還可以傳輸引數,如下圖所示。跟往常傳統的WPF雙向繫結基本一致。

 

以上程式碼:VM部分:

 public class MainWindowViewModel : ViewModelBase
    {
     //   public string Greeting => "Welcome to Avalonia!";

        public void Running(string msg)
        {
            var message = MessageBox.Avalonia.MessageBoxManager.GetMessageBoxStandardWindow("標題",msg);
            message.Show();
        }

    }

axaml部分:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:linuxwpf.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="linuxwpf.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Title="linuxwpf">

    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <!--<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>-->
    <Button Command="{Binding Running}"  CommandParameter="Hello World" Content="點我" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Window>

 

 

9、執行結果,如下圖所示。

 

10、接下來,我們們把它部署到Linux系統上去實驗一下。需要先建立個 xxx.desktop檔案,用於指定可執行檔案路徑、快捷圖示路徑有關。其中,png圖片隨便搞一個就行。同時,需要對新增的這倆檔案,屬性設定為“始終複製”。

 

以上配置程式碼:

[Desktop Entry]
Name=linuxwpf
Type=Application
Exec=/usr/share/ linuxwpf/linuxwpf
Icon=/usr/share/icons/linuxwpf.png

 

 

11、在專案檔案裡面,新增上面倆檔案的有關配置,如圖所示。

 

新增的配置程式碼:

<ItemGroup>
    <Content Include="linuxwpf.png" CopyToPublishDirectory="PreserveNewest">
        <LinuxPath>/usr/share/icons/linuxwpf.png</LinuxPath>
    </Content>
    <Content Include="linuxwpf.desktop" CopyToPublishDirectory="PreserveNewest">
        <LinuxPath>/usr/share/applications/linuxwpf.desktop</LinuxPath>
    </Content>
</ItemGroup>

 

 

12、然後,在程式包管理器下,或者shell視窗,或者dos視窗,輸入  dotnet tool install --global dotnet-deb

該命令的作用是,用於安裝一個可以對.net專案進行打包成deb檔案的工具。deb格式檔案是linux系統下的一種安裝包格式之一。

 

13、指定到在專案目錄下,準備進行專案打包。

 

14、先輸入 dotnet deb install 命令,用於下載 deb 工具。

 

15、然後輸入  dotnet restore -r linux-x64 命令,用於重置指定的程式執行目標環境,例如 linux-x64  

 

 

16、最後輸入 以下如圖所示的命令,進行釋出程式。該命令會在根目錄下生成release資料夾。其中,指定操作方式是建立Deb檔案,目標環境是.net6.0,以及執行時是 linux-x64環境。

 

17、在根目錄下,可以看到生成了一個deb檔案,只需要把該檔案拷貝到指定的linux系統上即可(前提是linux系統是帶有圖形介面的那種)

 

18、在遠端ubuntu系統上,新建一個測試用的資料夾叫wpf,用於存放上面的deb檔案

 

19、使用命令,遠端直接拷貝到指定的路徑。遠端拷貝命令說明:

命令:scp -v 遠端使用者 1@遠端地址 1:/檔案路徑 1/檔案 1 遠端使用者 2@遠端地址 2:/檔案路徑 2

解釋:從遠端伺服器 1 上面的檔案 1 拷貝到遠端伺服器2 的檔案路徑 2 資料夾下

 

20、拷貝完成,可以開始安裝了。

 

21、使用 dpkg -i xxx.deb命令,即可開始安裝。如果沒有dpkg命令可以用,需要先通過命令 (需要sudo許可權)  apt-get install -f 進行安裝一些基礎的元件先。

 

22、此處安裝完成以後,沒有顯示桌面圖示,說明有點小問題,可能原因是xxx.desktop桌面圖示檔案裡面配置的字元編碼不是 UTF-8或者某個路徑或配置檔案配置不標準,大佬們可以自行去研究。

此處沒有桌面圖示,可以進入到安裝路徑下,在 /usr/shard/程式名稱資料夾/ 下,可以找到對應的程式檔案,直接執行即可。例如此處我的程式名稱是linuxwpf,則直接執行,即開啟程式視窗。通過點選按鈕,彈出符合預期的提示框,說明該跨平臺方案是成功的。

 

以上就是該部落格的所有內容,如果有幫助,歡迎點贊、留言或轉發。轉發請註明出處:https://www.cnblogs.com/weskynet/

如果有想法進行技術交流,也可以掃下面的二維碼新增我個人微信,我可以拉入專屬部落格群進行答疑,或不定時進行其他技術分享。或者點選我的部落格欄上的QQ群連結,加入QQ群,也是可以的。

 

再次感謝大家觀看!祝大家寫程式碼寫的開心~~

 

相關文章