国产化即时通信系统开发 -- 使用Avalonia实现GGTalk的UI界面(Linux、Ubuntu、UOS、中标麒麟)

距离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/国产化操作系统的版本的源码全部放出来给大家参考,敬请期待。

 

posted @ 2020-10-22 10:08  C#开源即时通讯GGTalk  阅读(2068)  评论(0编辑  收藏  举报