MAUI Environment Ribbon - UI customization (Part 4)

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

It was mentioned in the first post of this series that we want our ribbon to be configurable. We will address this in 3 ways:

• Setting the color
• Setting the text value
• Adjusting the control's position

Here are some different variants that we will be able to achieve:

Position

If we want to place the control in different corners we need to draw the Path a bit different as it touches the individual corners and contains Label that rotates differently than the Path.

We first add an enum to list our positonal options

Next we add a method that handles the positioning to the EnvironmentRibbon control

The lines of the Path and the position of the Label are adjusted based on the corner where the ribbon should be added and the ribbon itself is placed in the corner by using HorizontalOptions and VerticalOptions.

Colors & Text

Next we add a configuration record to contain all of our customization needs

To use it in the EnvironmentRibbon control we can modify the constructor to require a configuration as parameter

The place where we initialize instances of EnvironmentRibbon is in EnvironmentRibbonService. So we need to get a configuration there and use it in the AddEnvironmentRibbonToPage method.

We also need to set the configuration when we are initializing shell and different page types, here's the Shell implementation:

And now we can create our customized EnvironmentRibbon in App

Add EnvironmentRibbonType

Last but not least - we can add some presets so that it's easier to use and the developers don't need to figure out the texts and colors if they just want to use the control without worrying about this aspect. The default behavior would be that we use the background color to display the environment and the text to use the application version - to get more information out of the control.

We first add an enum

Now we enrich the EnvironmentRibbonService by adding support for the defaults for each type

In the code we use AppInfo.Current.VersionString to get the application's version.

When we have this we again add the support to the extension methods for shell and the pages. Here's the Shell version:

And we're ready to use our ribbon with a preset configuration

Previous chapter Next chapter