欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

"Xaml+C#"桌面客户端跨平台初体验

程序员文章站 2022-05-28 23:10:17
使用Xaml+C#,使WPF/UWP运行在Linux和Mac上 ......

"xaml+c#"桌面客户端跨平台初体验

前言

  随着 .net 5的到来,微软在 .net 跨平台路上又开始了一个更高的起点。回顾.net core近几年的成果,可谓是让.net重生了一次.

  asp .net core跨平台解决了windows服务器昂贵的费用和不能长时间待机的问题,让asp程序能够跑在linux甚至mac上。从博客园里.net分类可以看到,每天都可以涌现大批asp .net core的技术文章,越来越多的开发者或者公司开始尝试这个船新的跨平台框架。

  然鹅,asp的跨平台是能够使用html作为ui,c#作为后台代码完成的,html本来就是原生支持跨平台的语言。如果要到达在客户端方面的跨平台,仍需要走很长一段路。

  早些年的时候。微软使用钞能力收购了移动客户端跨平台开发的大佬mono,并组建了新的xamarin,一次开发就可以生成android,ios,uwp平台的app,但也仅仅停留在移动客户端跨平台。同样在民间一些大佬的努力下,也创造出了很多pc跨平台的*,比如:electron.net,gtk#,qt#等等,这些框架都是使用html或者mono平台的内容达到ui跨平台的,而今天我则要推荐一款新的跨平台方案avaloniaui

"Xaml+C#"桌面客户端跨平台初体验

准备

  • 一个linux的机器
      这里推荐使用windows 10下的linux子系统,可以快速的在windows上操作linux子系统的文件目录,用来快速上传编译的程序到linux。详细操作可以看这篇文章启用windows10的linux子系统并安装图形界面
      当然使用实体机,或者服务器都可以。总之最终目的就是有一个可以连接带图形化界面的linux系统。

  • 安装.net core runtime
      微软官方给出了在ubutnu安装.net core的方法,这里我以ubuntu为例,其他发行版本使用对应的包管理命令

1.注册 microsoft 密钥和源

wget https://packages.microsoft.com/config/ubuntu/19.04/packages-microsoft-prod.deb -o packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb

2.安装.net core 3.1 runtmime

sudo apt-get update
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-runtime-3.1

    更多详情可参考microsoft docs :ubuntu 19.04 包管理器 - 安装 .net core

  • 安装vs拓展
    "Xaml+C#"桌面客户端跨平台初体验
    如果vs拓展下载太慢,可以使用下面的网盘链接下载。

链接: https://pan.baidu.com/s/1synpc37ich2vkqkjmqbalw 提取码: wyqn

  • wpf/uwp的经验
  1. xaml的语法
  2. c#
  3. 最好了解mvvm模式或者reactiveui

code

  • 创建一个avaloniaui的项目
    "Xaml+C#"桌面客户端跨平台初体验

了解wpf/uwp通知模式的童鞋可以使用mvvm

  • 项目结构
    "Xaml+C#"桌面客户端跨平台初体验

和wpf/uwp很相似的结构,但是不同的是program.cs被重写了

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);

        // avalonia configuration, don't remove; also used by visual designer.
        public static appbuilder buildavaloniaapp()
            => appbuilder.configure<app>()
                .useplatformdetect()
                .logtodebug()
                .usereactiveui();
    }
  • mainwindow.xaml
    "Xaml+C#"桌面客户端跨平台初体验

可以说和wpf/xaml大致一模一样了,但是体验不太好地就是在xaml标签页的智能提示和显示内容体验,以及右侧的实时渲染窗口是一帧一帧地刷新整个页面。

  • viewmodel
    "Xaml+C#"桌面客户端跨平台初体验

avalonia ui使用地是reactiveui来做的界面绑定和响应。和以往使用mvvmlight不同,绑定命令不用relaycommand,而是直接在xaml绑定一个后台的方法名。

"Xaml+C#"桌面客户端跨平台初体验
"Xaml+C#"桌面客户端跨平台初体验

  • 发布
    编码完成在windows上测试通过之后,就可以把程序打包发到其他平台上测试了。这里以linux为例:
    alt+b-->选择发布
    "Xaml+C#"桌面客户端跨平台初体验
    "Xaml+C#"桌面客户端跨平台初体验

根据目标平台选择配置保存。
点击发布,稍等片刻。。。。。。

  • 跨平台运行
    以linux为例:
  1. 将publish的文件夹上传到linux上
  2. 找到对应的程序名(没有任何后缀),更改权限为”允许此文件作为程序运行“
    "Xaml+C#"桌面客户端跨平台初体验
  3. 双击运行,即可看到和windows上一模一样的效果。

问题

由于avaloniaui不是微软官方出品,而是民间团队开发,且目前仍处于预览。我罗列一些自己遇到问题时的解决方案

1.尝试nuget把avaloniaui的包更新到最新
2.保证开发的.netcore配置比运行环境的.net core版本低
"Xaml+C#"桌面客户端跨平台初体验

"Xaml+C#"桌面客户端跨平台初体验

3.*字体渲染问题
这个问题是我遇到的最严重的问题,直接导致程序都不能渲染出来。如果有遇到这个问题的同学,可以首先在program.cs下的main函数里面加两行代码:

console.writeline(sktypeface.default.familyname);
console.writeline(sktypeface.fromfamilyname("sans").familyname);

然后在linux里使用控制台来运行程序,定位到程序目录,更改程序权限为可执行程序

chmod -x 程序名

运行程序

./程序名

如果出现权限不足的可以使用如下

chmod 777 程序名

如果运行程序后,控制台打印了nullrefrence的错误,那就是缺少默认字体。估计是avaloniaui的团队设置了程序的默认字体”sans“。

只需要替换软件默认字体就可以了,这里我使用微软雅黑

<application
    x:class="avaloniatest.app"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:avaloniatest">
    <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}" />
        </style>
    </application.styles>
</application>

并且需要在linux安装微软雅黑的字体

sudo apt-get install ttf-mscorefonts-installer

博客园之前也有一位大佬体验avaloniaui时候遇到字体的问题,可是他的树莓派是可以渲染出窗体只是没有文字,但是我测试了好几个发行版本都是窗体都不渲染。大家可以参考一下他的文章树莓派 raspberry pi 4,.net core 3.0 ,avalonia ui 开发

运行效果

  • 我尝试使用face++的 api接口,测试写了一个有网络请求的抠图程序

windows:
"Xaml+C#"桌面客户端跨平台初体验
"Xaml+C#"桌面客户端跨平台初体验
"Xaml+C#"桌面客户端跨平台初体验

linux:
"Xaml+C#"桌面客户端跨平台初体验
"Xaml+C#"桌面客户端跨平台初体验
"Xaml+C#"桌面客户端跨平台初体验

其他

贴出一些参考网站给大家

【文章为大头bighead原创,转载请注明出处】