Library of controls for Avalonia UI

CAD Delta Design is a domestic ECAD system from the company EREMEX for the design of electronic devices with a ten-year history. The version of Delta Design that is now publicly available is a classic Windows Forms application for the .Net Framework. For the last year, our team has been working on creating a cross-platform version of Delta Design for .NET 6. Avalonia UI was chosen as the user interface framework, since the team had extensive experience working with the WPF platform, of which Avalonia UI is essentially a development.

As you know, electronic devices are assembled from microcircuits and components. Likewise, the user interface is usually created from standard blocks, controls, which are usually called Controls.

In the process of developing a new version of Delta Design, our team had to create our own set of controls, which supports both Windows OS and a number of Linux systems, including Russian AstraLinux, RedOs, as well as their modifications for Elbrus.

The creation of a single control library, EremexControls.NET, allowed the company to significantly speed up the pace of development and show the multi-platform version of Delta Design ahead of schedule. The use of ready-made standard blocks allowed engineers to focus on the subject area without being distracted by other tasks. Currently, the library of controls is used in three internal projects of the company.

A unified design system was developed to create a consistent visual presentation within the entire line of controls. Currently, there is support for dark and light themes, which the user can switch on the fly.

The Delta Design user interface required our team to create a variety of controls, both simple and complex, which can be roughly divided into three groups:

• For working with data: TreeList, DataGrid, PropertyGrid and ListView.

• Navigation: Toolbars & Menus, Docking, TabControl.

• Editors: TextEditor, ButtonEditor, CheckEditor, ColorEditor, DateEditor, ComboBoxEditor, SpinEditor, HyperlinkEditor, and SegmentedEditor.

Tree List

Shows and organizes work with hierarchical tabular data. It supports both flat data sources, where records are linked into a hierarchy like a self-referencing table, and data sources where the hierarchy is organized using nested collections. Thanks to the virtualization mechanism, TreeList can display a collection of data of any size without visible delays.

TreeList is a multi-column control, i.e. you can create one or multiple columns to display fields from your data source.

The main implemented characteristics of the TreeList control include the following:

• Sorting by one or multiple columns. Sorting changes the order of rows within each level of the hierarchy.

• The operating mode without binding to a data source (unbound mode) allows you to manually create a hierarchy of rows in control.

• Separate columns, not tied to a source, are used to display arbitrary data.

• Data search panel.

• A special line for filtering values ​​in columns (auto-filter row).

• Embedding editors (editors from the EremexControls.NET library and third-party controls) into cells.

• A validation mechanism for checking data entered by the user and already existing in the source.

• Built-in context menus and the ability to create your own menus.

• Support for Data Annotation attributes at the data source level to control column initialization.

• Select rows by highlighting or using built-in check boxes.

The line of controls also includes a single-column version of TreeList, which is called TreeView. This control, which also supports dynamic loading of data when nodes are expanded, is used in Delta Design functional panels.

Data Grid

DataGrid provides high-performance display and work with large multi-column tabular data. But unlike TreeList, DataGrid only supports “flat” collections and displaying a set of objects in the form of a table. The main characteristics of the control coincide with the functionality of TreeList. What makes DataGrid stand out is the grouping of data into any number of columns.

Like TreeList, DataGrid updates values ​​on the fly when the data in the source changes (provided that the appropriate notifications are implemented). It also supports columns that are not tied to a source, allowing you to display arbitrary information on the screen.

DataGrid can automatically recognize and work with all standard data types in the source. For example, a column bound to boolean data is visualized using the CheckEditor (checkbox).

By the way, for the CheckEditor you can enable support for a third (undefined) state to represent null values.

List View

Visualizes a collection of objects in the form of cards, which are customized using templates. The control supports selecting one or more elements, as well as grouping by one or more fields.

And one more example of using ListView. In Delta Design, this control is used in the graphic symbol selection dialog.

Property Grid

This control allows you to view and modify the properties of an object or set of objects. Once bound, the PropertyGrid can automatically create rows based on the object’s public properties. This takes into account special attributes (Data Annotation attributes) that you can apply to the object to control row generation.

The main characteristics of the control are highlighted below:

• Automatic and manual creation of strings.

• Support for nested properties in the source.

• Editing values ​​in rows using default or specially assigned editors.

• Built-in search bar.

• Categories are special strings for grouping rows of data. Categories can be generated automatically based on attributes in the source.

In addition to the classic grouping of properties using categories, PropertyGrid can organize properties in the form of tabs, which allows you to reduce the vertical size of the control and place logically related groups of properties nearby.

Toolbars & Menus

To create classic toolbars and menus, we needed to create a separate Toolbars & Menus library. It ensures the implementation and operation of all menus in the application: the main menu, toolbars, status bar, as well as context menus for any controls. All elements of toolbars and context menus are displayed in the same style, and their behavior is the same as in Microsoft Visual Studio and earlier versions of Microsoft Office.

Toolbars can be placed along all sides of the container, and, if necessary, anywhere in the window to create local command panels. Of course, support for floating panels is also implemented.

In addition to the capabilities mentioned, the main characteristics of the Toolbars & Menus library include:

• Supported element types: button, toggle button, submenus (submenus), editors, and text labels.

• Drag&drop toolbars by the user.

• “Quick setup” of panels for dragging commands while holding down the ALT key.

• Toolbar Customization Form, designed to activate customization mode and access hidden commands and panels.

• In configuration mode, you can drag and drop commands between panels, submenus, and configuration forms.

• Horizontal and vertical orientation of panels.

• Commands are automatically hidden and shown when the panel size is changed. Temporarily hidden commands are available through a drop-down list by clicking a button.

• Context menus for controls.

• Serialization (saving and restoring the location of panels and commands between application launches).

Docking – Managing Panels and Documents

No CAD application can do without function panels and “documents” that define the main content of the workspace. The Docking library is designed to create such an interface and provide functionality for managing the layout of panels and “documents” both through code and to users. Perhaps one of the best implementations in Microsoft Visual Studio was taken as an example of such an interface.

The main features of the Docking library include:

• Placing panels on the sides of the container.

• Floating panels.

• Automatically hide panels.

• Combining panels into groups and tab groups.

• Combining documents into tab groups.

• Multiple monitor support.

• Tips for dragging panels in MS Visual Studio style.

• Serialization (saving and restoring the layout of panels).

Editors

To display and edit simple data types (numeric, text, boolean, date, etc.), a set of editor controls was created, one of the tasks of which is also input validation.

Editors support two ways to visualize errors caused by validation rules:

• Showing an icon inside the editor and a tooltip.

• Show error description under the editor.

Editors can function both in standalone mode and be built into other controls (TreeList, DataGrid, PropertyGrid). In particular, these modes differ in rendering, since in embedding mode it is necessary to hide external decorative elements.

When used as part of complex controls, editors use a lightweight mode for displaying inactive cells. It ensures fast rendering of complex controls even with a large number of rows and columns visible on the screen.

Currently the line of editors includes: TextEditor, ButtonEditor, CheckEditor, ColorEditor, DateEditor, ComboBoxEditor, SpinEditor, HyperlinkEditor and SegmentedEditor.

One of the difficult editors to implement was ComboBox. It supports the selection of one or more elements at the same time in a drop-down list. For multiple selection, built-in check boxes are used.

Below are the main characteristics of the ComboBox control:

• The data source for the dropdown window can be a list of strings, enum values, or a collection of business objects.

• When bound to a collection of business objects, ComboBox allows you to specify individual properties of the business object that are used for display and data binding.

• Auto-completion mode.

• Templates for visualizing drop-down list elements.

Another interesting editor is SegmentedEditor, which visualizes elements from a data source as horizontally arranged segments and allows the user to select one of the segments or select “nothing”.

SegmentedEditor supports the same data sources as ComboBox, allows you to set templates for displaying segments and, like all editors, can be embedded in cells of complex controls (for example, DataGrid).

Demo

So that you can evaluate our library of controls for Avalonia UI in action, we have written a test application that presents all the main components and implements popular scenarios for their use:

https://github.com/Eremex/controls-demo

Along with the application there is a demo version of the controls, which is no different in functionality from the pro version, except for displaying small watermarks.

You can create your own application for Avalonia UI based on the demo version of the components using the Visual Studio 2022 or JetBrains Rider 2021.3+ development environment. Try the library of controls in your existing projects to evaluate their functionality in a specific environment.

Conclusion

In this article, we looked at our most visible and large components of the EremexControls.NET library for Avalonia UI. Our team is currently working on developing a line of controls and expanding their functionality.

We are convinced that only high-quality multifunctional components underlie complex interfaces, and we will be happy to help you create a professional cross-platform UI for your project.

Download a demo application with the EremexControls.NET control library: https://github.com/Eremex/controls-demo

Ask the team a question: https://t.me/emxControls