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

  • 2020 年 8 月 11 日
  • 筆記

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

本篇主要介紹Avalonia開發過程和Linux適配環節的幾個疑難點..

avalonia for vs安裝和.deb安裝包部署可參考://www.cnblogs.com/Fengyinyong/p/13346642.html

 

與WPF類似，Avalonia使用XAML來設計UI…但也有幾處比較坑的地方，以下做一些梳理:

1.基本的使用方法

axaml中定義 後台找到並設置對象

在WPF中，當你在xaml文件中定義完UI並設置x:Name就可以在後台中直接使用對象名稱進行操作.那是因為vs在你設計時自動生成了.g.i.cs文件(你可以在/obj中看到)

而ava中不同，你需要在後台中自己Get到這個UI對象(與Android類似): 例如:

axaml中定義一個名稱為 TB_Title的TextBlock文本標籤:

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

在cs中定義並更改標籤內容:

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

這裡就用到了this.Get<T>(string Name)方法

T:表示對象類型  Name:為x:Name中定義的名稱

注意:在後台查找UI對象 若不是局部變數 應需考慮 時序問題 否則在使用時對象可能是null

建議將所有的控制項優先查找出來(如果你控制得比較好可以不用..)

事件

詳細的介紹可以看官方文檔://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.數據綁定

文檔中展示了比較友好的綁定方式://avaloniaui.net/docs/controls/listbox

可以在axaml中設置綁定，將數據放到全局變數中，或者直接對items進行賦值

但是只能有單一的類型…  

2.使用UserControls 並將它們放在List合集中   對items直接賦值..

 

—————————-分割線——————————

目前發現的坑就有這麼多…..但是axaml中的style和animation不是很友好..(animation可以說是辣雞)

個人看來avalonia還尚未成熟    但足以使用到普通需求中…

下一篇將講avalonia跑到linux上的一些坑

 

有啥問題Q俺：2728578956

VirMach 便宜 VPS

QNews

QNews