MAUI Environment Ribbon - Optimization and wrap up (Part 5)

Chapters in this series:

1. Intro and basic UI
2. Shell integration
3. NavigationPage integration
4. UI customization
5. Optimization and wrap up
6. Download the code

Performance optimization

One thing that we haven't addressed so far is that the environment ribbon gets added everytime a navigation occurs in Shell. This means that even if the ribbon is already added to a page we add another one and also add another Grid. Even though we established that this control is not going to be used in production, we still don't need to add it multiple times to a single page.

We can solve this pretty easily by using an attached property so let's add it to our control.

public partial class EnvironmentRibbon
{
    public static readonly BindableProperty IsEnvironmentRibbonAddedProperty = BindableProperty.CreateAttached(
    "IsEnvironmentRibbonAdded",
    typeof(bool),
    typeof(EnvironmentRibbon),
    false);

    public static bool GetIsEnvironmentRibbonAdded(BindableObject view)
    {
        return (bool)view.GetValue(IsEnvironmentRibbonAddedProperty);
    }

    public static void SetIsEnvironmentRibbonAdded(BindableObject view, bool value)
    {
        view.SetValue(IsEnvironmentRibbonAddedProperty, value);
    }

    // ...
}

Now whenever we are adding the control to a page we can check if this property is already set and determine whether we want to add it to the page or not. We have only 1 method where we handle the creation of our control so we can simply enhance our AddEnvironmentRibbonToPage method

public class EnvironmentRibbonService
{
    //...

    public static void AddEnvironmentRibbonToPage(Page? page)
    {
        if (page?.GetValue(EnvironmentRibbon.IsEnvironmentRibbonAddedProperty) is true)
        {
            return;
        }

        // ...

        page?.SetValue(EnvironmentRibbon.IsEnvironmentRibbonAddedProperty, true);
    }
}

First off, we check if the value is already set to true for the page that we're handling. If so, we can just skip the page as it already has the environment ribbon displayed. If it's not set we continue with the code that adds it. Once we're successfully done we can set the the attached property to true, thus marking the page as already having the environment ribbon.

Wrap up

To wrap this series of posts up we can take a look at our result

We created a control that visually displays the basic data needed for determining environment type and application version from screenshots. It's easy to add it to an existing project simply by using the AddEnvironmentRibbon() method and has presets ready for Dev, Alpha and Beta environments as well as support for custom configuration.

This way it doesn't force us to rewrite our code and can be easily integrated. We can determine our environment in whatever way that we used until now - whether we use appsettings.json, build configurations or any other mechanism.

Next up - take the code for a spin. Check it out here and take it for a spin. Looking forward to all feedback and hope that it helps you in your project!

Previous chapter Download the code