樹莓派 Raspberry Pi 4，.net core 3.0 ,Avalonia UI 開發

雖說.net core3.0已經可以用於開發wpf和winform程序，可是遺憾的時目前這core下的wpf還是只能運行在windows下，想要在linux下運行wpf估計還要等一段時間。

Avaloniaui :

直接用官網的一句話來描述吧：A cross platform XAML Framework for .NET Framework, .NET Core and Mono

在樹莓派 4 B上允許Avaloniaui 簡單的步驟:

第一步：

燒錄樹莓派最新的系統Raspbian ，最新的Raspbian 下載地址

第二步：

Install curl, libunwind8, gettext and apt-transport-https. The curl and apt-transport-https often are up-to-date.

sudo apt-get install curl libunwind8 gettext apt-transport-https

下載.net core 3.0  arm32 運行時 最新的下載地址

curl -sSL -o dotnet.tar.gz https://download.visualstudio.microsoft.com/download/pr/0c5e013b-fa57-44dc-85bf-746885181278/58647e532fcc3a45209c13cdfbf30c74/dotnet-runtime-3.0.0-linux-arm.tar.gz

創建dotnet解壓的目錄

sudo mkdir -p /opt/dotnet && sudo tar zxf dotnet.tar.gz -C /opt/dotnet

創建環境變量地址軟鏈接

sudo ln -s /opt/dotnet/dotnet /usr/local/bin

在終端中檢測 dotnet core環境是否配置完成

dotnet

 

第三步：

參考官方在win10上創建一個 avalonia 的項目。

•  安裝最新版本的avalon包 ，參考地址
• 修改Program.cs

• namespace wf
  {
      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);//.Start(AppMain, args);
  
          // Avalonia configuration, don't remove; also used by visual designer.
          public static AppBuilder BuildAvaloniaApp()
              => AppBuilder.Configure<App>()
  
                  .UsePlatformDetect()
                  .UseReactiveUI();
      }
  }

• 修改 App.Xaml.cs

• namespace wf
  {
      public class App : Application
      {
          public override void Initialize()
          {
              AvaloniaXamlLoader.Load(this);
          }
  
  
          public override void OnFrameworkInitializationCompleted()
          {
              if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
                  desktop.MainWindow = new MainWindow()
                  {
                      DataContext = new MainWindowViewModel(),
                  };
  //            else if (ApplicationLifetime is ISingleViewApplicationLifetime singleView)
  //                singleView.MainView = new MainView();
              base.OnFrameworkInitializationCompleted();
          }
      }
  }
  

  　　

安裝作者分鍾的在 arm32 linux機器上編譯后的skia包

 

https://www.nuget.org/packages/Avalonia.Skia.Linux.Natives/1.68.0.2

PM> Install-Package Avalonia.Skia.Linux.Natives -Version 1.68.0.2

 

打開MainWindow.xaml在頁面上加幾個按鈕和文本

  <StackPanel>
    <TextBlock Text="{Binding Greeting}"  HorizontalAlignment="Center" VerticalAlignment="Center"/>
    
    <Button  Classes="btn" Command="{Binding Go}"   Content="click me"></Button>
    <ContentControl Content="{Binding SubContent}"></ContentControl>
  </StackPanel>

對應的 MainWindowViewModel.cs

namespace wf.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        private object _subContent;
        public string Greeting => "Welcome to Avalonia!";


        public object SubContent
        {
            get => _subContent;
            set => this.RaiseAndSetIfChanged(ref _subContent, value);
        }

        public void Go()
        {
            SubContent = new Uc();
        }

        public void Go2()
        {
            SubContent = new Uc();
        }
    }
}

　其中 UC是一個自定義的控件，

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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="wf.Views.Uc">
  <StackPanel>
    <TextBlock Text="我是子控件" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Button    Content="biubiubiu"></Button>
    <Calendar></Calendar>
  </StackPanel>
</UserControl>

在window上按F5運行程序，如下圖所示

cmd到項目根目錄輸入如下命令完成 linux下的項目發布

dotnet publish -r linux-arm -f netcoreapp3.0

把 \bin\Debug\netcoreapp3.0\linux-arm 下的 publish 上傳到樹莓派上，在樹莓派終端打開輸入如下命令

chmod +x publish/xxx
./xxx

稍等片刻會打開窗體，但是發現窗體上的文字沒有被渲染出來，如下所示

 

 經過在作者github上的詢問得知 是因為字體問題，我不知道avalonia ui用的什么字體，但是我們可以全局修改它的字體，具體步驟如下：

ssh到樹莓派執行如下命令安裝微軟的字體。這里我們主要使用的是微軟雅黑的字體

sudo apt-get install ttf-mscorefonts-installer

打開項目的App.Xam參考下面的代碼修改

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:wf"
             x:Class="wf.App">
    <Application.DataTemplates>
        <local:ViewLocator/>
    </Application.DataTemplates>

  <Application.Resources>
    <FontFamily x:Key="yh">微軟雅黑</FontFamily>
  </Application.Resources>
    <Application.Styles>
        <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
        <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/>
      <Style  Selector="Window">
        <Setter Property="FontFamily" Value="{StaticResource yh}"></Setter>
      </Style>
    </Application.Styles>
</Application>

　　

重新編譯，發送的樹莓派上執行，即可打開窗口，畢業字體也可以渲染出來。

 

 

如果字體還是沒有渲染出來，建議把windows下的微軟雅黑的字體拷貝到linux上安裝：

 

1、到win10下復制字體（C:\Windows\Fonts）
雅黑：msyh 
等等 你要的字體 

2、將要的字體復制到 /usr/share/fonts/chinese/TrueType 目錄下 （su cp /fonts/* //usr/share/fonts/chinese/TrueType/*）

3、修改字體權限，使root以外的用戶可以使用這些字體。

4、建立字體緩存，命令：cd /usr/share/fonts/chinses/TrueType

mkfontscale
mkfontdir 
fc-cache -fv 

5、重啟，即可使用。