【.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>