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

千羽兰 發表於 2020-4-1 17:36:00

<h1 id="xamlc桌面客户端跨平台初体验">"Xaml+C#"桌面客户端跨平台初体验</h1>
<h2 id="前言">前言</h2>
 随着 .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。
<div align="center"><img width="200" height="200" src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401171952764-2033839133.icon"></div>
<h2 id="准备">准备</h2>
<ul>
<li>
一个Linux的机器 
这里推荐使用windows 10下的linux子系统，可以快速的在windows上操作linux子系统的文件目录，用来快速上传编译的程序到linux。详细操作可以看这篇文章启用Windows10的Linux子系统并安装图形界面。 
当然使用实体机，或者服务器都可以。总之最终目的就是有一个可以连接带图形化界面的Linux系统。
</li>
<li>
安装.Net Core Runtime 
微软官方给出了在Ubutnu安装.Net Core的方法，这里我以Ubuntu为例,其他发行版本使用对应的包管理命令
</li>
</ul>
<blockquote>
1.注册 Microsoft 密钥和源
</blockquote>
<pre><code class="language-shell">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
</code></pre>
<blockquote>
2.安装.Net Core 3.1 Runtmime
</blockquote>
<pre><code class="language-shell">sudo apt-get update
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install dotnet-runtime-3.1
</code></pre>
 更多详情可参考Microsoft Docs ：Ubuntu 19.04 包管理器 - 安装 .NET Core。
<ul>
<li>安装VS拓展 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401162218242-1584551543.png" alt="" loading="lazy"> 
如果VS拓展下载太慢，可以使用下面的网盘链接下载。</li>
</ul>
<blockquote>
链接: https://pan.baidu.com/s/1A_gwdiH8EZrgVWLWIhJkXQ 提取码: pn7v 复制这段内容后打开百度网盘手机App，操作更方便哦
</blockquote>
<ul>
<li>WPF/UWP的经验</li>
</ul>
<ol>
<li>Xaml的语法</li>
<li>C#</li>
<li>最好了解MVVM模式或者ReactiveUI</li>
</ol>
<h2 id="code">Code</h2>
<ul>
<li>创建一个AvaloniaUI的项目 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401162638672-1357349994.png" alt="" loading="lazy"></li>
</ul>
<blockquote>
了解WPF/UWP通知模式的童鞋可以使用MVVM
</blockquote>
<ul>
<li>项目结构 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401162853036-577208278.png" alt="" loading="lazy"></li>
</ul>
和WPF/UWP很相似的结构，但是不同的是Program.cs被重写了
<pre><code class="language-c#">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();
}
</code></pre>
<ul>
<li>MainWindow.Xaml 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401163252075-1354334621.png" alt="" loading="lazy"></li>
</ul>
可以说和WPF/Xaml大致一模一样了，但是体验不太好地就是在Xaml标签页的智能提示和显示内容体验，以及右侧的实时渲染窗口是一帧一帧地刷新整个页面。
<ul>
<li>ViewModel 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401163610040-394674108.png" alt="" loading="lazy"></li>
</ul>
<blockquote>
Avalonia UI使用地是ReactiveUI来做的界面绑定和响应。和以往使用MVVMLight不同，绑定命令不用RelayCommand，而是直接在xaml绑定一个后台的方法名。
</blockquote>
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401163801544-1163151375.png" alt="" loading="lazy"> 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401163846829-1947990681.png" alt="" loading="lazy">
<ul>
<li>发布 
编码完成在windows上测试通过之后，就可以把程序打包发到其他平台上测试了。这里以Linux为例： 
Alt+B-->选择发布 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401164205049-238717929.png" alt="" loading="lazy"> 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401164254702-1211509855.png" alt="" loading="lazy"></li>
</ul>
根据目标平台选择配置保存。 
点击发布，稍等片刻。。。。。。
<ul>
<li>跨平台运行 
以linux为例：</li>
</ul>
<ol>
<li>将Publish的文件夹上传到Linux上</li>
<li>找到对应的程序名（没有任何后缀），更改权限为”允许此文件作为程序运行“ 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401164549682-2075105279.png" alt="" loading="lazy"></li>
<li>双击运行，即可看到和Windows上一模一样的效果。</li>
</ol>
<h2 id="问题">问题</h2>
<blockquote>
由于AvaloniaUI不是微软官方出品，而是民间团队开发，且目前仍处于预览。我罗列一些自己遇到问题时的解决方案
</blockquote>
1.尝试Nuget把AvaloniaUI的包更新到最新 
2.保证开发的.netcore配置比运行环境的.net core版本低 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401165058747-1255574387.png" alt="" loading="lazy">
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401165419360-969978555.png" alt="" loading="lazy">
3.*字体渲染问题 
这个问题是我遇到的最严重的问题，直接导致程序都不能渲染出来。如果有遇到这个问题的同学，可以首先在Program.cs下的Main函数里面加两行代码：
<pre><code class="language-C#">Console.WriteLine(SKTypeface.Default.FamilyName);
Console.WriteLine(SKTypeface.FromFamilyName("Sans").FamilyName);
</code></pre>
然后在linux里使用控制台来运行程序，定位到程序目录，更改程序权限为可执行程序
<pre><code class="language-shell">chmod -x 程序名
</code></pre>
运行程序
<pre><code class="language-shell">./程序名
</code></pre>
如果出现权限不足的可以使用如下
<pre><code class="language-shell">chmod 777 程序名
</code></pre>
如果运行程序后，控制台打印了NullRefrence的错误，那就是缺少默认字体。估计是AvaloniaUI的团队设置了程序的默认字体”Sans“。
只需要替换软件默认字体就可以了，这里我使用微软雅黑
<pre><code class="language-xml"><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>
</code></pre>
并且需要在linux安装微软雅黑的字体
<pre><code class="language-shell">sudo apt-get install ttf-mscorefonts-installer
</code></pre>
<blockquote>
博客园之前也有一位大佬体验AvaloniaUI时候遇到字体的问题，可是他的树莓派是可以渲染出窗体只是没有文字，但是我测试了好几个发行版本都是窗体都不渲染。大家可以参考一下他的文章树莓派 Raspberry Pi 4，.net core 3.0 ,Avalonia UI 开发
</blockquote>
<h2 id="运行效果">运行效果</h2>
<ul>
<li>我尝试使用Face++的 API接口，测试写了一个有网络请求的抠图程序</li>
</ul>
Windows: 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172523359-829315085.png" alt="" loading="lazy"> 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172620412-709114858.png" alt="" loading="lazy"> 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172658082-841271798.png" alt="" loading="lazy">
Linux: 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172912844-2026689150.png" alt="" loading="lazy"> 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401173039886-82489931.png" alt="" loading="lazy"> 
<img src="https://img2020.cnblogs.com/blog/1339560/202004/1339560-20200401172821416-547413659.png" alt="" loading="lazy">
<h2 id="其他">其他</h2>
贴出一些参考网站给大家
<ul>
<li>官网 http://avaloniaui.net/</li>
<li>GitHub https://github.com/AvaloniaUI/Avalonia</li>
<li>树莓派使用AvaloniaUI https://www.cnblogs.com/drzhong/p/11678701.html</li>
<li>Mac使用AvaloniaUI https://www.cnblogs.com/seamas/p/11245348.html</li>
</ul>
【文章为大头BigHead原创，转载请注明出处】 
来源：https://www.cnblogs.com/Big-Head/p/12614118.html

頁: [1]

琼殿技术论坛's Archiver

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