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

時間 2019-11-12

標籤樹莓 raspberry core 3.0 avalonia 開發简体版

原文原文鏈接

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

Avaloniaui :

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

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

第一步：github

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

第二步：windows

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 運行時最新的下載地址app

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解壓的目錄ssh

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

建立環境變量地址軟連接curl

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

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

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上安裝：

一、到win10下複製字體（C:\Windows\Fonts）
雅黑：msyh
等等你要的字體

二、將要的字體複製到 /usr/share/fonts/chinese/TrueType 目錄下（su cp /fonts/* //usr/share/fonts/chinese/TrueType/*）

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

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

mkfontscale
mkfontdir
fc-cache -fv

五、重啓，便可使用。