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

2022 年 3 月 15 日
筆記
.NET 6, .NET Core, Avalonia, WPF, 跨平台

前言：隨着跨平台越來越流行，.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="//github.com/avaloniaui"
        xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:linuxwpf.ViewModels"
        xmlns:d="//schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="//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>