Overview
Avalonia UI is a cross-platform UI framework that is considered a “spiritual successor” to WPF. If you are brand new to Avalonia UI, you should check out this blog, Avalonia UI: Introduction and Initial Impression, to learn the basics of what Avalonia UI is. This blog builds on that foundation and will help you to better understand the noteworthy differences between developing with Avalonia and WPF.
Styling
In Avalonia, a Style is more similar to a CSS style than a WPF style. The Avalonia equivalent of a WPF Style is a Control Theme.
A Style should be used to style a control based on its content or purpose within the application whereas a Control Theme should be used for shared theming between all controls of that type. For example, a TextBlock might have a Control Theme to set a shared font type and font color, but a TextBlock Style would alter the font weight and font size. Examples of both can be seen below:
Having a more layered styling approach in Avalonia is beneficial since it allows you to use Styles to substitute a control’s property values without needing to override the entire theme. Conversely, in WPF, you can get stuck needing to override an entire theme if there is a theme applied to a control without an x:Key defined. If there is an x:Key defined in WPF, you can take advantage of the BasedOn property to build upon a pre-defined theme.
Avalonia Styles are placed in the Styles collection of a control and Control Themes are placed in the Resources collection of a control. Comparatively, in WPF, the Styles are all placed in the Resources collection.
Styles: Conditional Classes
A feature that stood out to me significantly is conditional classes for Avalonia Styles. This allows you to alter Style of a control based on a bound condition. In WPF, doing something similar is overly verbose and complicated and requires the use of a DataTrigger. In Avalonia, there is a lot less markup code that is needed.
The examples below demonstrate conditionally changing the TextBlock foreground based on a bound property.
In Avalonia, the following code will use the Error Style based on the bound property. Since you can conditionally pass in the property, both the DeviceState text and the SystemState text can share the Style with little code.
In WPF, you must rely on a DataTrigger to change the Foreground value. Since the SystemState text and the DeviceState text rely on different bound properties as their condition, they cannot share the Style which leads to less code reuse.
Controls
Controls in Avalonia are very similar to WPF, but there are a few tweaks that make the framework quicker to work with but potentially less feature-rich.
Visualization and Animations
Avalonia does not support the VisualStateManager, and it instead relies on styles and pseudoclasses such as :hover, :focus, and :checked. Additionally, Avalonia does not use Storyboards, but rather it has simpler animations that use Transitions and Animation.
Grid Row and Column Definitions
A low-hanging fruit that Avalonia improved was how to define rows and columns for the Grid control. Instead of using multiple lines to do it, Avalonia has allowed you to do it within one line. The following examples show how to define the same grid layout in Avalonia and WPF.
In Avalonia,
In WPF,
Compiled Bindings
Another nice feature in Avalonia is the choice to use compiled bindings. This can be very helpful since it allows the developer to catch binding errors faster since they are caught at compile time instead of runtime.
There are some limitations with compiled bindings though. For instance, they require a static DataContext and a defined data context type using x:DataType. However, for most use cases, they will be helpful in debugging and development!
Takeaways
When comparing Avalonia and WPF, the running theme is that Avalonia prioritizes flexibility to support multiple platforms and succinct code. This makes Avalonia lighter weight and a great option for cross-platform development. For complex, feature-rich Windows development, WPF has the edge over Avalonia.
At DMC, we are always looking towards the future and learning new technologies to better support the wide variety of needs our customers have. We are excited to continue exploring Avalonia UI to provide expert solutions for cross-platform, desktop development.
Ready to take your Application Development project to the next level? Contact us today to learn more about our solutions and how we can help you achieve your goals.