.NET 跨平臺框架Avalonia UI: 填坑指北(一):熟悉UI操作
Avalonia 是一個跨平臺的 .NET UI 框架,支援 Windows、Linux、Mac OSX... (以及Android IOS soon..)
本篇主要介紹Avalonia開發過程和Linux適配環節的幾個疑難點..
avalonia for vs安裝和.deb安裝包部署可參考:https://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
建議將所有的控制元件優先查找出來(如果你控制得比較好可以不用..)
事件
詳細的介紹可以看官方文件: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