/maui-environment-ribbon

Environment Ribbon control for .NET MAUI apps

Primary LanguageC#MIT LicenseMIT

Environment Ribbon is a simple control that lets us add basic information that visually shows environment in the app. We can just call the extension method AddEnvironmentRibbon() on Shell or NavigationPage. The control gets automatically propagated to all the subsequent pages whether we use Shell or NavigationPage for navigation.

Environment Ribbon is intended to be used in non-production environments such as development, alpha, beta to visually determine which environment the app is running in. The easiest way to use it is to use the overload with EnvironmentRibbonType as first parameter and EnvironmentRibbonPosition as second parameter i.e.:

.AddEnvironmentRibbon(EnvironmentRibbonType.Alpha, EnvironmentRibbonPosition.TopRight)

This way it represents the environment (alpha) as background color (orange) and uses the application version as the displayed text.

If we want to modify it further we can use the overload with EnvironmentRibbonConfiguration as parameter and that way we can specify:

  • Position (top-left, top-right, bottom-left, bottom-right)
  • Text
  • Text color
  • Background color

The control can be seen in action here - it displays just below the navigation bar if it's used on the page:

image

The project was created as part of the MAUIUIJULY initiative

More about the control can be found in the associated blog posts here:

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