1. Development workflow
Working with Avalonia is a pleasure, the preview in Visual Studio, VS Code and Jetbrains’ Rider work great; and the compilation speed makes the test-and-tweak process incredibly smooth! Not to mention the Avalonia DevTools available at runtime when pressing F12, where you can inspect the logical and visual trees of the app, just like you’d do with a web browser dev tools panel.
2. Style Selectors
The
selectors set Avalonia apart from its XAML platforms neighbors in terms of style capabilities. It’s true that you can customize everything from a control with ControlTemplates (just like WPF), but this goes beyond that! It has the CSS flexibility of applying styles to elements based on a wide range of criteria.
A simple example of this (there are many in the app!) is that we defined a set of animations for AnimatedImage depending on a pseudo class (storm, sunny, windy, etc).
<StyleSelector="ctl|AnimatedImage:sunny">
<Style.Animations>.
<Animation ...
</Animation>
</Style.Animations>
</Style>
This way, we can animate images just by setting a pseudo class, regardless of what other style the control may have applied.
3 . The Tab Control
The main dashboard navigation uses Avalonia’s TabControl. Here we must highlight both the huge styling flexibility the templates provide to change entirely how the control should look, and also that by using DataTemplates to display content, it automatically becomes a lazy loading control, meaning that the UI on tabs won’t load until the user selects them. All that with the out-of-the-box control!
4. Reusable User Controls
Creating UserControls felt just like working in WPF, it’s a straightforward and very powerful way of building reusable controls. A good example of these are the widgets used in the main Dashboard, each box is a custom UserControl with properties to load the data. A concrete example worth mentioning is the RadiationIndicator which has these properties: Value, MinValue, MaxValues, and a PillColor; and gets reused 3 times.
5. Style organization
App-scoped styles are well organized in the Resources.axaml file that contains the color palette and the styles of general controls like Buttons and Menus. The styles for texts and specific controls are located in Styles.axaml, which again, leverage the power of Selectors to make a flexible set of visual settings used everywhere.
6. MVVM Community Toolkit
The
MVVM Toolkit provides all the necessary tools to follow the Model-View-ViewModel pattern. It integrates perfectly with Avalonia. The use of attributes to define ViewModel properties and commands saves time prevents errors. The other option to help you craft an MVVM app is
Reactive UI, which also integrates perfectly with Avalonia.
7. Charts
The app uses Gauges from
LiveCharts2 to compose the Humidity and Wind dashboard widgets. They work great. If you need charts we strongly recommend checking them out!
8. Routing
Since the MVVM Community Toolkit doesn’t have over a navigation routing mechanism, we crafted a simple one for the app that we hope it’s helpful as reference.You can check this out in the Controls/RouterPresenter folder.
9. App modes
The application has 2 modes: connected and simulated. The connected option gets actual data from
Ambient Weather API to obtain current information, and also gets data from
Mateomatics API to load the forecast. Nota that both require an API. On the other hand, the simulated mode loads sample data from a JSON file and simulates changes with timers. While the first mode does show how to consume an actual service, the other provides a safe playground to test the application.
10. AOT
Enabling
Ahead of Time Compilation (AOT) can improve the performance of the app noticeably. AOT has a few limitations though, so to make the app work, we had to replace Newtonsoft.Json by System.Text.Json, and made a couple of other tweaks that are explained in detail in the documentation that we included with the code.
