Gauge controls for video games? Yes! Health bars, hit strength, energy or mana bars, progress indicators. These are all gauges! See how to use them in .NET MAUI.
I’ll admit it—in my free time, I love playing video games. 🎮 And what matters most to me is knowing how I’m performing during the match. It feels so exciting to understand my progress in just a few seconds, especially when a graphic explains it to me with colors—no need to stop and read numbers, because that would cost me precious time to beat my opponents.😎
All of this is part of the experience that game developers and designers create to make players feel comfortable. And for that reason, I also see it as my responsibility to replicate this kind of experience in the apps I build.
There’s a component that lets us represent numeric values within a defined range in a graphical and intuitive way. Unlike simply showing a number on the screen, this visualization conveys valuable information through shapes, colors and movement. It’s perfect for gaming scenarios where you need a quick view of what’s happening without losing time.
Today, you’ll get to know the .NET MAUI Gauge Chart from the Progress Telerik UI for .NET MAUI component library. ☕ Grab a coffee (or hot chocolate if that’s more your vibe), and let’s explore it together!
The Telerik UI for .NET MAUI Gauge Chart is one of the main data visualization controls for .NET MAUI. Its primary purpose is to represent numeric values within a defined range in a clear, animated and intuitive way. In addition, it supports multiple visualization styles—vertical, horizontal and radial (or circular)—allowing it to adapt to different types of scenarios.
Here’s an example of how it would look in each of its different styles:
✍️ This control is part of the Telerik UI for .NET MAUI library, which offers more than 60 professionally designed UI components—ideal for building modern, cross-platform applications with a polished user experience.
The ability to capture data at the exact moment it happens, process it immediately and provide feedback is what we call real-time performance.
When you’re in a video game, the magic of real-time performance is that you get instant feedback about what’s happening with your character. That immediacy makes all the difference: you know right away if your health bar drops, if your energy is running out or if your progress is moving forward. There’s no guessing or waiting—everything flows in sync with your actions, making the experience far more immersive and exciting.
So, how can Gauge Controls really make a difference in a video game?
Gauge controls have HUGE potential 🚀 because they allow us to deliver processed information in real time—which is exactly what a player needs to understand instantly, instead of pausing to read digits on a screen. But let’s talk about some specific use cases you can measure if your app integrates a gauge control:
Yeahh!! As we saw earlier, there are different gauge styles, and each one works for different scenarios. Here, the circular gauge is perfect. I love how I can see my avatar’s energy just through colors. Imagine it going quickly from green → yellow → red … although, of course, I’d always prefer to keep it green, haha. That helps me know when I can perform certain actions in the game!
This is the strength to run, jump or perform special actions. Every time the player uses this energy, the gauge goes down, and when they rest, it fills back up again.
A gauge that fills up as you advance through a level or a world. When it reaches 100%, you’ve completed the goal! Personally, I love this one because it tells me how much I still have left before winning (or losing, haha).
And of course, we could keep mentioning many other scenarios, but the key point is to see how—with just one control—you can unlock so many possibilities. It gives your users a highly satisfying experience, because imagine playing a game without knowing your progress, your energy or your health. 😅 It just wouldn’t be that exciting!
After exploring different use cases for the .NET MAUI Gauge, let’s take a deeper look at how to implement each one of them!
The Radial Gauge is responsible for displaying a range of values in a circular form (like a speedometer or tachometer).
Depending on your needs, you may not always want a full circle—you may need a half circle or even a quarter. You can control this behavior with four key properties:
Below is an example of how you could implement this in code:
<telerik:RadRadialGauge x:Name="gauge">
<telerik:RadRadialGauge.Axis>
<telerik:GaugeLinearAxis Maximum="200"
Minimum="0"
Step="25" />
</telerik:RadRadialGauge.Axis>
<telerik:RadRadialGauge.Indicators>
<telerik:GaugeNeedleIndicator Offset="30" Value="60" />
</telerik:RadRadialGauge.Indicators>
<telerik:RadRadialGauge.Ranges>
<telerik:GaugeRangesDefinition>
<telerik:GaugeRange Color="Green"
From="0"
To="150" />
<telerik:GaugeGradientRange From="150" To="200">
<telerik:RadGradientStop Offset="150" Color="Yellow" />
<telerik:RadGradientStop Offset="200" Color="Red" />
</telerik:GaugeGradientRange>
</telerik:GaugeRangesDefinition>
</telerik:RadRadialGauge.Ranges>
</telerik:RadRadialGauge>
The Vertical Gauge is responsible for displaying values along a linear scale with a vertical orientation.
Below is an example of how you could implement this in code:
<telerik:RadVerticalGauge x:Name="gauge">
<telerik:RadVerticalGauge.Axis>
<telerik:GaugeLinearAxis Maximum="200"
Minimum="0"
Step="25" />
</telerik:RadVerticalGauge.Axis>
<telerik:RadVerticalGauge.Indicators>
<telerik:GaugeShapeIndicator Value="90" />
</telerik:RadVerticalGauge.Indicators>
<telerik:RadVerticalGauge.Ranges>
<telerik:GaugeRangesDefinition>
<telerik:GaugeRange Color="Green"
From="0"
To="150" />
<telerik:GaugeGradientRange From="150" To="200">
<telerik:RadGradientStop Offset="150" Color="Yellow" />
<telerik:RadGradientStop Offset="200" Color="Red" />
</telerik:GaugeGradientRange>
</telerik:GaugeRangesDefinition>
</telerik:RadVerticalGauge.Ranges>
</telerik:RadVerticalGauge>
The Horizontal Gauge is responsible for displaying values along a linear scale with a horizontal orientation.
Below is an example of how you could implement this in code:
<telerik:RadHorizontalGauge x:Name="gauge">
<telerik:RadHorizontalGauge.Axis>
<telerik:GaugeLinearAxis Maximum="200"
Minimum="0"
Step="25" />
</telerik:RadHorizontalGauge.Axis>
<telerik:RadHorizontalGauge.Indicators>
<telerik:GaugeShapeIndicator Value="90" />
</telerik:RadHorizontalGauge.Indicators>
<telerik:RadHorizontalGauge.Ranges>
<telerik:GaugeRangesDefinition>
<telerik:GaugeRange Color="Green"
From="0"
To="150" />
<telerik:GaugeGradientRange From="150" To="200">
<telerik:RadGradientStop Offset="150" Color="Yellow" />
<telerik:RadGradientStop Offset="200" Color="Red" />
</telerik:GaugeGradientRange>
</telerik:GaugeRangesDefinition>
</telerik:RadHorizontalGauge.Ranges>
</telerik:RadHorizontalGauge>
✨ See how in just a few seconds you’ve learned about the Gauge control? This kind of approach helps us discover scenarios we might not have even thought about, yet they’re incredibly useful when building apps!
I invite you to explore it and try out new experiences with this control! Give Telerik UI for .NET MAUI a try—it comes with a free 30-day trial:
If you have any questions, feel free to leave a comment or reach out—I’m happy to help!
See you in the next one! 🙋♀️💚
The code explanations have been taken from the official documentation:
Leomaris Reyes is a Software Engineer from the Dominican Republic, with more than 5 years of experience. A Xamarin Certified Mobile Developer, she is also the founder of Stemelle, an entity that works with software developers, training and mentoring with a main goal of including women in Tech. Leomaris really loves learning new things! 💚💕 You can follow her: Twitter, LinkedIn , AskXammy and Medium.