.NET 跨平台框架Avalonia UI: 填坑指北(一)：熟悉UI操做

时间 2020-08-17 标签跨平台框架 avalonia ui 填坑指北一熟悉 ui 操做

Avalonia 是一个跨平台的 .NET UI 框架，支持 Windows、Linux、Mac OSX... (以及Android IOS soon..)html

本篇主要介绍Avalonia开发过程和Linux适配环节的几个疑难点..linux

avalonia for vs安装和.deb安装包部署可参考:http://www.noobyard.com/article/p-fckurrfv-mv.htmlapp

与WPF相似，Avalonia使用XAML来设计UI...但也有几处比较坑的地方，如下作一些梳理:框架

1.基本的使用方法

axaml中定义后台找到并设置对象

在WPF中，当你在xaml文件中定义完UI并设置x:Name就能够在后台中直接使用对象名称进行操做.那是由于vs在你设计时自动生成了.g.i.cs文件(你能够在/obj中看到)布局

而ava中不一样，你须要在后台中本身Get到这个UI对象(与Android相似): 例如:ui

axaml中定义一个名称为 TB_Title的TextBlock文本标签:this

<TextBlock x:Name="TB_Title" HorizontalAlignment="Center" Foreground="White" FontSize="14" VerticalAlignment="Center" Margin="10,0,0,10" Text="My Avalonia Desktop App"/>

在cs中定义并更改标签内容:spa

TextBlock TB_Title = this.Get<TextBlock>("TB_Title");
TB_Title.Text = "嘻嘻";

这里就用到了this.Get<T>(string Name)方法.net

T:表示对象类型 Name:为x:Name中定义的名称设计

注意:在后台查找UI对象若不是局部变量应需考虑时序问题不然在使用时对象多是null

建议将全部的控件优先查找出来(若是你控制得比较好能够不用..)

事件

详细的介绍能够看官方文档:http://avaloniaui.net/docs/input/events

有几点比较坑的地方:

1.直接在axaml中定义事件有时候不会成功,能够在后台中定义,例如:

<Button x:Name="btn" Click="Btn_Click">Click Me</Button>

void Btn_Click(object sender, RoutedEventArgs args)
{
   //...
}

若不成功能够:

this.Get<Button>("btn").Click+=Btn_Click;

---------------------------------------

2.WPF中的MouseDown/Up事件和Preview事件哪去了?

ava中替换成了 Tapped(轻敲?) 事件

以及 PointerPressed (指针按下至关于WPF 中的MouseDown) 和 PointerReleased (指针释放至关于WPF中MouseUp)

为控件注册一个Preview事件:

你的控件名.AddHandler(PointerReleasedEvent,事件名称, RoutingStrategies.Tunnel);

----------------------------------------

3.竟然没有MessageBox....(能够到nuget中下载第三方的包)

2.神奇的UI布局

在avalonia中StackPanel是有问题的，它并不会为每个控件设置宽度或高度而是优先控件（WPF中不是这样）：

举个例子:

例如在StackPanel中放置若干个TextBlock,你会看到TextBlock延伸到了StackPanel外部而并无按照stackpanel的宽度来...

ava中的模式是这样:

若是控件原宽度没有超出则设为stackpanel的宽度

若是超出了...就随它去吧......(??)

此时你就须要手动设置宽度(两种方法):

1.设置绑定: Width="{Binding Width , ElementName=MyStackPanel(是控件x:Name)}"

2.在后台遍历设置宽度:

ava中并无给SizeChanged的事件而是将全部依赖属性改变的事件放到了一个：

 PropertyChanged += MainWindow_PropertyChanged;

 private void MainWindow_PropertyChanged(object sender, AvaloniaPropertyChangedEventArgs e){
    if (e.Property == WidthProperty){
       foreach (Control a in e.Children) {
          a.Width = Width;
       }
    }
  }

(十分嫌弃 ..)

神奇的属性Bounds：

若是你仔细一看，会发现各类你找不到的原WPF属性都在这里面:

例如元素的真实高宽：Bounds.Height/Width

元素相对于父控件的位置:Bounds.Position.X/Y

设置ListBox.Items的两种方式:

若是你熟悉了WPF，那么确定会疑问 ListBox.Items.Add哪去了??

1.数据绑定

文档中展现了比较友好的绑定方式:http://avaloniaui.net/docs/controls/listbox

能够在axaml中设置绑定，将数据放到全局变量中，或者直接对items进行赋值

可是只能有单一的类型...

2.使用UserControls 并将它们放在List合集中对items直接赋值..

----------------------------分割线------------------------------

目前发现的坑就有这么多.....可是axaml中的style和animation不是很友好..(animation能够说是辣鸡)

我的看来avalonia还还没有成熟但足以使用到普通需求中...

下一篇将讲avalonia跑到linux上的一些坑

有啥问题Q俺：2728578956