距離2013年開源GGTalk以來，7年已經過去了，GGTalk現在有了完整的PC版、安卓版、iOS版，以及Xamarin版本。接下來GGTalk将推出國産化版本，以支援Linux/Ubuntu、中标麒麟、UOS等國産作業系統。我們標明了Avalonia架構作為GGTalk Linux版本的UI技術。
在考察了衆多的Linux上的UI技術之後，我們標明了現在很主流的Avalonia架構作為GGTalk的用戶端版本的UI技術。
距離2013年開源GGTalk以來，7年已經過去了，GGTalk現在有了完整的PC版、安卓版、iOS版（即将釋出），以及Xamarin版本。
然而，時代一直在變化，在今天，有個趨勢越來越明顯，那就是政府系統将逐漸遷移到Linux以及國産化的作業系統和資料庫上面來。
是以，GGTalk也将随順這一必然的趨勢，服務端将推出Linux（CentOS）版本，用戶端也将支援Linux/Ubuntu、中标麒麟、UOS等國産作業系統。
基于.NET Core，服務端的遷移相對容易；而用戶端的遷移則繁瑣很多，其主要在于界面UI部分需要完全重寫。
在考察了衆多的Linux上的UI技術之後，我們標明了現在很主流的Avalonia架構作為GGTalk的用戶端版本的UI技術。
在使用Avalonia開發GGTalk用戶端linux版本的過程中，我們遇到了很多坑，也積累了很多經驗，接下來我們将通過“Avalonia跨平台UI開發”這個系列，将這些過坑的經驗分享出來，為後來者提供參考。
那下面先從Avalonia簡介開始吧。
一. Avalonia簡介
Avalonia是一個基于WPF XAML的跨平台UI架構，并支援多種作業系統：Windows（.NET Framework，.NET Core），Linux（GTK），MacOS，Android和iOS。
通過Avalonia，可以使用XAML标記來實作應用程式的外觀，同時使用代碼來實作其行為。
Avalonia官網：https://avaloniaui.net/
Avalonia開源位址：https://github.com/AvaloniaUI/Avalonia
1.開發準備
VS 2019安裝擴充 https://marketplace.visualstudio.com/items?itemName=AvaloniaTeam.AvaloniaforVisualStudio
安裝之後就有了Avalonia開發模闆。
選擇 Avalonia MVVM Application ，就可以建立一個項目。
2. GGTalk 登入界面示例
建立一個基礎項目GGTalk，在MainWindow.xaml 添加圖檔、按鈕、輸入框等控件，就是WPF XAML 的文法，直接可以實作對應布局。
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:myoneavalonia.ViewModels;assembly=myoneavalonia"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="430" d:DesignHeight="330"
x:Class="myoneavalonia.Views.MainWindow"
Icon="/Assets/avalonia-logo.ico"
Title="GGTalk"
Width="430"
Height="340"
CanResize="False"
WindowStartupLocation="CenterScreen">
<Design.DataContext>
<vm:MainWindowViewModel/>
</Design.DataContext>
<Window.Styles >
<Style Selector="TextBox.tb1">
<Setter Property="Margin" Value="0,-40,0,0"/>
<Setter Property="Height" Value="26"/>
<Setter Property="Width" Value="250"/>
<Setter Property="Watermark" Value="賬号"/>
<Setter Property="BorderBrush" Value="#80c0ff"/>
</Style>
<Style Selector="TextBox.tb2">
<Setter Property="Margin" Value="0,35,0,0"/>
<Setter Property="Height" Value="26"/>
<Setter Property="Width" Value="250"/>
<Setter Property="Watermark" Value="密碼"/>
<Setter Property="BorderBrush" Value="#80c0ff"/>
<Setter Property="PasswordChar" Value="*"/>
</Style>
<!--######<TextBox标簽>######-->
<Style Selector="Image.img1">
<Setter Property="Margin" Value="0,-250,0,0"/>
<Setter Property="Width" Value="430"/>
</Style>
<Style Selector="Image.img2">
<Setter Property="Margin" Value="0,-190,0,0"/>
<Setter Property="Width" Value="73"/>
<Setter Property="Height" Value="73"/>
</Style>
<!--######<Image标簽>######-->
<Style Selector="TextBlock.tbk1">
<Setter Property="Margin" Value="5,5,0,0"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style Selector="TextBlock.tbk2">
<Setter Property="Margin" Value="292,213,0,0"/>
<Setter Property="Foreground" Value="#0c7ab9"/>
<Setter Property="Cursor" Value="Hand"/>
</Style>
<Style Selector="TextBlock.tbk3">
<Setter Property="Margin" Value="275,305,0,0"/>
<Setter Property="Foreground" Value="#696969"/>
</Style>
<!--######<TextBlock标簽>######-->
<Style Selector="Button.bt1">
<Setter Property="Margin" Value="0,195,0,0"/>
<Setter Property="Width" Value="250"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Background" Value="#407cff"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="17"/>
</Style>
<!--######<Button标簽>######-->
<Style Selector="CheckBox.cbx1">
<Setter Property="Margin" Value="89,105,0,0" />
<Setter Property="BorderBrush" Value="#3c9fc5"/>
</Style>
<Style Selector="CheckBox.cbx2">
<Setter Property="Margin" Value="190,105,0,0"/>
<Setter Property="BorderBrush" Value="#3c9fc5"/>
</Style>
<!--######<CheckBox标簽>######-->
</Window.Styles>
<StackPanel>
<Border Background="White"
BorderBrush="Gray"
BorderThickness="1"
Padding="0"
Width="430"
Height="340">
<Grid>
<Image Classes="img1" Source="D:\yzy\avaloniafiles\myoneavalonia\Resources\image_sign.png" ></Image>
<Image Classes="img2" Source="D:\yzy\avaloniafiles\myoneavalonia\Resources\8.png" />
<TextBlock Classes="tbk1">GGTalk 2020</TextBlock>
<TextBlock Classes="tbk2">注冊登入</TextBlock>
<TextBlock Classes="tbk3">GGTalk 企業即時通訊系統</TextBlock>
<TextBox Classes="tb1"/>
<TextBox Classes="tb2"/>
<CheckBox Classes="cbx2" >自動登入</CheckBox>
<CheckBox Classes="cbx1" >記住密碼</CheckBox>
<Button Classes="bt1">登入</Button>
</Grid>
</Border>
</StackPanel>
</Window> 如果熟悉WPF XAML，那麼上面的代碼了解起來就非常容易了。
二. 運作程式
我們在Ubuntu和中标麒麟上運作這個程式，效果如下所示（還不錯吧）：
（在Ubuntu上運作的效果）
（在中标麒麟上運作的效果）
三. 在使用Avalonia時遇到的坑
在開發這個登入界面的時候，遇到了三個坑。
（1）當将<Textbox>輸入框标簽的height屬性設定為小于或等于25時，在輸入框的右邊，會多出一個下拉框。
研究了半天才發現跟輸入框高度有關，瞬間淚崩......
（2）官方文檔中有一些控件無法正常使用，提示無法解析該類型，在運作時會報錯，比如：
解決方案：在官網（https://avaloniaui.net/）上下載下傳對應的控件，然後引入項目中就不會報錯了。
（3）另外，在Ubuntu上運作Avalonia項目後如果沒有顯示界面，這時就需要去修改/etc/apt/sources.list檔案，更新軟體源後就能夠顯示界面了。
更換軟體源的步驟：
Ubuntu 的源存放在在 /etc/apt/ 目錄下的 sources.list 檔案中，修改前我們先備份，在終端中執行以下指令：
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bcakup 然後執行下面的指令打開 sources.list 檔案，清空裡面的内容
sudo gedit /etc/apt/sources.list 把下面阿裡雲與清華大學的 Ubuntu 源複制進去，儲存後退出
# 阿裡雲源
deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
##測試版源
deb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
# 源碼
deb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
##測試版源
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
# 清華大學源
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
##測試版源
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse
# 源碼
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
##測試版源
deb-src http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse 接着在終端上執行以下指令更新軟體清單，檢測出可以更新的軟體：
sudo apt-get update 最後在終端上執行以下指令進行軟體更新：
sudo apt-get upgrade 到這裡，GGTalk的登入界面就實作完成了。同樣的，我們會将GGTalk的Linux/國産化作業系統的版本的源碼全部放出來給大家參考，敬請期待。