AlterNET UI Beta 2 - Layout system, dependency property, data binding, and more

AlterNET UI Beta 2 represents a significant milestone towards a production-ready cross-platform .NET UI framework for developing desktop applications on Windows, macOS, and Linux.

In this release, we have introduced some major features primarily adopted from the WPF framework.

Layout System

In Beta 2, we refined how the layout system functions in AlterNET UI. The Layout API is inspired by the simplicity of positioning controls in Windows Forms applications; at the same time, we brought powerful layout containers such as Grid and StackPanel from WPF. The layout system automatically detects relevant property changes and repositions all the affected controls. Together with performance optimizations, the layout system allows developers to create rich user interfaces.

View fullsize

Windows

View fullsize

macOS

View fullsize

Linux

Dependency Properties

We have implemented the dependency properties system closely resembling WPF, following the same approach of computing property values based on other inputs or data. Dependency properties give a higher-order abstraction over regular CLR properties and allow for automatic change tracking and value inheritance based on a control’s parent-child relationships. The attached dependency properties allow defining additional properties on any DependencyObject from UIXML.

To give a glimpse of what the dependency properties look like, here are a code and UIXML snippets that define dependency properties:

Code

public static readonly DependencyProperty IsSpinningProperty = DependencyProperty.Register(
    "IsSpinning", typeof(bool),
    typeof(MyObject)
    );

public bool IsSpinning
{
    get => (bool)GetValue(IsSpinningProperty);
    set => SetValue(IsSpinningProperty, value);
}

UIXML

<MyObject IsSpinning="True"/>

Data Binding

Data binding is also a concept taken from the WPF world and is built on top of dependency properties. Data binding is the process that establishes a connection between an app’s UI and the data it displays. Suppose the binding has the correct settings and the data provides the proper notifications. In that case, when the data changes its value, the elements bound to it reflect changes automatically. Data binding can also mean that if an outer representation of the data in an element changes, the underlying data can be automatically updated to reflect the change.

The following pair of C# and UIXML code snippets illustrate a typical scenario of data-binding usage:

Code

public MainWindow()
{
    InitializeComponent();

    DataContext = new Employee
    {
        FirstName = "Alice",
        LastName = "Jameson"
    };
}

UIXML

<Window>
  <TextBox Text="{Binding FirstName}"/>
  <TextBox Text="{Binding LastName}"/>
</Window>

Keyboard and Mouse Input, Routed Events

Keyboard and mouse input API provides functionality for input events related to key presses, mouse buttons, mouse wheel, mouse movement, and mouse capture.

Routed events are another technology adopted from WPF and allows for cascade-style handling when an event can "travel" up and down the control hierarchy. The concept of routed events is related to the keyboard and mouse input. The following example illustrates how you can handle the same mouse event on different levels in a window:

UIXML

<StackPanel Orientation="Vertical" PreviewMouseDown="StackPanel_PreviewMouseDown" MouseDown="StackPanel_MouseDown"/>
  <Border MouseDown="Border_MouseDown"/>
      <Label Text="Click me."/>
  </Border>
</StackPanel>    

Other Improvements

In Beta 2, we have also added new components and controls - Timer and PictureBox- and implemented many improvements, such as exception handling, additional functionality of DrawingContext, updated documentation, and new example projects.

Subscribe to our newsletter and stay tuned for more AlterNET UI news.