MAUI Environment Ribbon - Intro and basic UI (Part 1)

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

As part of the MAUIUIJULY 24 event I decided to take a look at creating a UI control that is need in almost every project and I wanted to unify it and create a universal solution.

Anytime we deliver a project for a customer and get back some feedback we need to somehow identify the environment and version from which the feedback came. If it's collected automatically by logs or some crash reporting we can add the data into the reports quite easily. But it happens quite often that we get a bug report containing a screenshot with very little additional information and we're not sure what environment or app version it came from.

For these cases there's usually some kind of a banner included somewhere in the application's UI to display the environment directly on screen. So let's see how we can make a universal solution for MAUI apps that would take care of this issue.

Let's take a look at what we want to accomplish:

I know that the cat is adorable, but we need to shift our focus on the upper right corner where the green ribbon with "1.0" is - this is our desired outcome (there will be more cats going forward ??)

Further more - we want to achieve some customizability with the ribbon - to be able to set the color, text, place it in different positions like so:

Creating the UI

First of all let's focus on the UI of the control itself. I'm not gonna beat around the bush here and I'll just admit - I like the UI of the debug banner in Flutter. I don't really enjoy the banner as it gives me very little information - I don't really care if the app is launched in debug mode. But I think it's nice and quite non-obtrusive so that it can be used for this purpose quite well.

We'll call our control EnvironmentRibbon and here's the UI code:

<Grid x:Class="MauiEnvironmentRibbon.Controls.EnvironmentRibbon"
      xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      HorizontalOptions="End"
      VerticalOptions="Start">
    <Path x:Name="TrianglePath" StrokeThickness="0"
          Fill="Red">
        <Path.Data>
            <PathGeometry Figures="M 0,0 L 20,0 L 50,30 L 50,50 Z"/>
        </Path.Data>
    </Path>

    <Label x:Name="EnvironmentLabel"
           HorizontalOptions="Center"
           VerticalOptions="Center"
           Text="Dev"
           TextColor="White"
           FontSize="10"
           Rotation="45"
           TranslationX="6"
           TranslationY="-6"/>
</Grid>

This is what the control looks like when rendered:

The control is quite simple, we have:

• Path that draws the shape of the ribbon
• Label that is rotated and placed within the path
• The control itself is placed in the upper right corner

There are some limits to the length of the text that can be displayed (so that it still looks good). We will take a look at the customizability options in one of the future posts.

Next chapter