Introducing Grid Index And Color XAML Adornments

MFractor 4.0.4 is now available and introduces two small but very powerful features; grid index and color adornments.

Adornments are small UI elements placed alongside code that give extra contextual information. They reduce cognitive load by making it easier to understand the code at a glance.

Let's dive in and take a look each new feature.

Grid Index Adornments

Grids are a powerful layout provided by Xamarin.Forms that we can use to build complex, overlapping layouts.

When working with grids, we define rows and columns definitions that we then referenced by index like so:

Grid.Row="0"

This introduces a problem; we now need to know the index of our rows and columns to place our elements correctly. This means we need to count the rows/columns by eye and/or maintain a comment for each row/column that indicates it index.

To remove this hassle, MFractor now injects the index of that row or column when it defined:

These annotations enable us to look at the definitions and instantly see the index for a given row or column. You can also click on the adornment to copy the row/column lookup code to the clipboard.

For further information on grid adornments, read the full documentation article.

Inline Color Previews

When working with colors in Xamarin.Forms, it's tricky to understand what a color value looks like without copy/pasting the color literal into your favourite image software.

To simplify this, MFractor now injects a small preview of the color. This lets you, at a glance, understand what a color value refers to and how it will render when your app is running.

Color adornments are supported for hexadecimal colors, named color values (EG: Red etc) and also for static resource expressions that return a color.

By default, color adornments are not enabled for the XAML editor. Due to rendering constraints, color adornments can have an adverse impact on IntelliSense performance.

To enable color adornments, open MFractors Preferences and then go to Settings -> Feature Flags and toggle Color Adornments.

For further information on color adornments, read the full documentation article.

Summary

Adornments are currently available in MFractor for Visual Studio Mac and are coming soon to Visual Studio Windows.

Available in both MFractor Lite and Professional, adornments give you extra information about your code and make developing XAML just that little bit easier.