. net cross platform framework Avalonia UI: fill the pit and point north (1): familiar with UI operation

Time:2020-12-3

Avalonia is a cross platform. Net UI framework that supports windows, Linux, Mac OSX… (as well as Android IOS soon…)

This article mainly introduces the Avalonia development process and several difficult points in Linux adaptation

For the Avalonia for vs installation and. DEB installation package deployment, please refer to: https://www.cnblogs.com/Fengyinyong/p/13346642.html

 

Similar to WPF, Avalonia uses XAML to design UI… But there are also several pitfalls. Here are some of the details:

1. Basic usage

In axaml, define the background to find and set the object

In WPF, when you define the UI in XAML file and set X: name, you can directly use the object name to operate in the background. That’s because vs automatically generates the. G.i.cs file at your design time (you can see it in / obj)

Different from AVA, you need to get the UI object yourself in the background (similar to Android): for example:

Axaml defines a name TB_ TextBlock text label for Title:

Define and change the label content in CS:

TextBlock TB_Title = this.Get("TB_Title");
TB_ Title.Text  ="Hee hee";

I’ll use it here this.Get(string name) method

T: Represents the object type name: is the name defined in X: name

Note: if the UI object is not a local variable in the background, the timing problem should be considered. Otherwise, the object may be null in use

It is recommended to find out all the controls first (if you control them well, you can not use..)

event

Detailed introduction can be found in the official documents: http://avaloniaui.net/docs/input/events

There are several pitfalls:

1. Sometimes defining events directly in axaml will not succeed. It can be defined in the background, for example:

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

If not, you can:

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

—————————————

2. Where are the MouseDown / up event and preview event in WPF?

AVA was replaced with a tapped event

And pointerpressed(pointer pressed is equivalent to MouseDown in WPF) andPointerreleased (pointer released is equivalent to mouseup in WPF)

 

Register a preview event for the control:

Your control name. Addhandler (pointerreleasedevent, event name, RoutingStrategies.Tunnel );

—————————————-

3. There is no message box

 

2. Magical UI layout

In Avalonia, StackPanel is problematic. It doesn’t set the width or height for each control, but it takes precedence(not in WPF)

for instance:

For example, if you place several textblocks in the StackPanel, you will see that textblocks extend to the outside of the StackPanel without following the width of the StackPanel

The pattern in AVA is as follows:

If the original width of the control does not exceed, it is set to the width of the StackPanel

If it goes beyond… Let it go

 

At this point, you need to manually set the width (two ways)

1. Set binding: width = {binding width, elementname = mystackpanel (is control X: name)} “

2. Traverse and set the width in the background:

AVA does not give sizechanged events, but places all events that depend on property changes into one:

 PropertyChanged += MainWindow_PropertyChanged;

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

(dislike very much)

 

Magical properties borders:

If you take a closer look, you will find that all kinds of original WPF properties you can’t find are in this:

For example, the true height and width of an element: Bounds.Height/Width

Element position relative to parent control: Bounds.Position .X/Y

 

set up ListBox.Items In two ways:

If you’re familiar with WPF, you’ll be in doubt ListBox.Items.Add Where is it??

1. Data binding

The document shows a friendly binding method: http://avaloniaui.net/docs/controls/listbox

You can set the binding in axaml, put the data into a global variable, or assign a value to items directly

But there can only be a single type

2. Use UserControls and place them in the list collection. Assign values to items directly

 

—————————-Dividing line——————————

So many pits have been found so far… But the style and animation in axaml are not very friendly

Personally, Avalonia is not mature yet, but it can be used in common needs

The next article will talk about Avalonia running into some of the holes in Linux

 

Q an: 2728578956