--- title: "Introducing the New .NET MAUI Linear Gauge Control" published_at: "2022-04-13T12:52:53+00:00" modified_at: "2025-03-21T11:37:29+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-the-new-net-maui-linear-gauge-control" excerpt: "We at Syncfusion are glad to announce the inclusion of the new .NET MAUI Linear Gauge control in the 2022 Volume 1 release. The .NET MAUI Linear Gauge is a multipurpose data visualization control. It shows numerical values on a..." taxonomy_category: - ".NET MAUI" - "Desktop" - "Syncfusion" - "UI" - "What's new" taxonomy_post_tag: - ".NET MAUI" - "desktop" - "Linear Guage" - "UI" - "What's New" --- # Introducing the New .NET MAUI Linear Gauge Control [Sheik Syed](https://www.syncfusion.com/blogs/author/sheiksyedm) ![Introducing the New .NET MAUI Linear Gauge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Introducing-the-New-.NET-MAUI-Linear-Gauge-Control.png) We at Syncfusion are glad to announce the inclusion of the new [.NET MAUI Linear Gauge control](https://www.syncfusion.com/maui-controls/maui-linear-gauge) in the [2022 Volume 1](https://www.syncfusion.com/forums/174125/essential-studio-2022-volume-1-main-release-v20-1-0-47-is-available-for-download) release. The .NET MAUI Linear Gauge is a multipurpose data visualization control. It shows numerical values on a linear scale in horizontal or vertical orientations. You can use this control to design a value indicator, linear progress bar, thermometer, bullet chart, ruler, and more. The Linear Gauge control comes with the following, entirely customizable, features: - [Axis](#linear-axis) - [Range](#linear-range) - [Bar pointer](#bar-pointer) - [Shape marker pointer](#shape-pointer) - [Content marker pointer](#content-pointer) - [Mirror gauge](#mirror-linear-gauge) - [Animation](#pointer-animation) - [Pointer interaction](#pointer-interaction) Let’s explore these features. ## Linear axis The [Linear Gauge axis](https://help.syncfusion.com/maui/linear-gauge/scale) is a linear scale on which a set of values is plotted. It has three sub-elements: axis lines, ticks, and labels. **Axis line**: A linear line with customizable thickness, color, corner radius, and edge corner styles. Its fill color can be either solid or a linear gradient. **Ticks**: Set two types of tick marks, major and minor. Customize the tick line styles and positions. **Labels**: Add numeric content to depict the values in the scale. Customize the label styles, positions, and value formats. Refer to the following image. ![Axis Customization in .NET MAUI Linear Gauge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Axis-Customization-in-.NET-MAUI-Linear-Gauge-Control.png) Axis Customization in .NET MAUI Linear Gauge Control ## Linear range The [Linear Gauge range](https://help.syncfusion.com/maui/linear-gauge/range) is a visual color element that helps you quickly visualize where the values fall on an axis. It denotes the selected range of values using the start and endpoints in an axis. We can add any number of ranges with different styles to a gauge and customize the range shape to be convex or concave. You can also choose whether the range should be flat or curved. Customize the range position, thickness, and color with a gradient. Refer to the following image. ![Range Customization in .NET MAUI Linear Gauge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Range-Customization-in-.NET-MAUI-Linear-Gauge-Control.png) Range Customization in .NET MAUI Linear Gauge Control ## Bar pointer A [bar pointer](https://help.syncfusion.com/maui/linear-gauge/bar-pointer) is an accenting line that can be placed on a Linear Gauge to mark the current value in the axis. It always starts from the minimum value of the axis and ends at a specified value. We can customize the bar pointer’s thickness, color, corner styles, and bar position. ![Bar Pointer Customization in .NET MAUI Linear Gauge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Bar-Pointer-Customization-in-.NET-MAUI-Linear-Gauge-Control.png) Bar Pointer Customization in .NET MAUI Linear Gauge Control ## Marker pointer Marker pointers indicate specific values on the axis. There are two types of marker pointers available: shape and content pointer. ### Shape pointer The [shape marker pointer](https://help.syncfusion.com/maui/linear-gauge/shape-marker-pointer) supports the following predefined shapes: - Triangle - Inverted triangle - Circle - Diamond - Rectangle We can easily customize the size, position, and color of the shape marker pointer. ![Shape Marker Pointer in .NET MAUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Shape-Marker-Pointer-in-.NET-MAUI-Linear-Gauge.png) Shape Marker Pointer in .NET MAUI Linear Gauge ### Content pointer If the predefined shapes in the shape marker pointer do not meet your needs, use the [content marker pointer](https://help.syncfusion.com/maui/linear-gauge/content-marker-pointer) . It enables you to use any content, like text or an image, as a marker pointer. ![Content Marker Pointer in .NET MAUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Content-Marker-Pointer-in-.NET-MAUI-Linear-Gauge.png) Content Marker Pointer in .NET MAUI Linear Gauge ## Mirror linear gauge The Linear Gauge elements can be mirrored by just setting the [IsMirrored](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.SfLinearGauge.html#Syncfusion_Maui_Gauges_SfLinearGauge_IsMirrored) property to true. ![Mirror Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Mirror-Linear-Gauge-1.png) ## Pointer animation You can animate the Linear Gauge elements in a visually appealing way when they are loading or when their values change. You can also use various pointer easing animations. ![Pointer Animation in .NET MAUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Pointer-Animation-in-.NET-MAUI-Linear-Gauge.gif) Pointer Animation in .NET MAUI Linear Gauge ## Pointer interaction You can easily drag a bar or marker pointer from one value to another at run time. Refer to the following GIF image. ![Interacting with Pointers in .NET MAUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Interacting-with-Pointers-in-.NET-MAUI-Linear-Gauge.gif) Interacting with Pointers in .NET MAUI Linear Gauge ## Real-time examples Using the .NET MAUI Linear Gauge control, you can easily design a thermometer, water tracker, height calculator, ruler, value indicator, and more. The following are some examples. **Thermometer** **![Thermometer UI using .NET MAUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Thermometer-UI-using-.NET-MAUI-Linear-Gauge.gif)Water tracker** ![Water tracker UI using .NET MAUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Water-tracker-UI-using-.NET-MAUI-Linear-Gauge.gif) **Height calculator** ![Height calculator UI using .NET MAUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Height-calculator-UI-using-.NET-MAUI-Linear-Gauge.gif) ## Add the .NET MAUI Linear Gauge to your application Let’s see how to create a simple .NET MAUI app with our Linear Gauge control to demonstrate its basic usage. ### Step 1: Create a .NET MAUI app. First, [create a new .NET MAUI app](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android) in [Visual Studio](https://visualstudio.microsoft.com/) . ### Step 2: Install the NuGet packages. The Syncfusion .NET MAUI controls are available in the [NuGet Gallery](https://www.nuget.org/) . To add the SfLinearGauge control to your project, open the NuGet package manager in Visual Studio. Search for **Syncfusion.Maui.Gauges** and then install it. ### Step 3: Handler registration. The **Syncfusion.Maui.Core** NuGet package is a dependent package for all our Syncfusion .NET MAUI controls. In the ** MauiProgram.cs** file, register the handler for Syncfusion Core using the ** ConfigureSyncfusionCore**() method. Refer to the following code. ``` public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp() .ConfigureSyncfusionCore() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); }); return builder.Build(); } ``` ### Step 4: Import the namespace. Then, import the control namespace **Syncfusion.Maui.Gauges** in your XAML or C# code. ``` xmlns:gauge="clr-namespace:Syncfusion.Maui.Gauges;assembly=Syncfusion.Maui.Gauges" ``` ### Step 5: Initialize the Linear Gauge. Now, initialize the SfLinearGauge control. The default axis range is 0 to 100. ``` ``` ![Image](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Adding-Linear-Gauge-to-the-.NET-MAUI-Application.png) Adding Linear Gauge to the .NET MAUI Application ### Step 6: Add a range to the Linear Gauge. Ranges contain a list of range elements. Add any number of ranges inside the linear axis. You can specify the start value, end value, and background color for ranges using the [StartValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.LinearRange.html#Syncfusion_Maui_Gauges_LinearRange_StartValue) , [EndValue](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.LinearRange.html#Syncfusion_Maui_Gauges_LinearRange_EndValue) , and [Fill](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.LinearRange.html#Syncfusion_Maui_Gauges_LinearRange_Fill) properties like in the following code example. ``` ``` ![Adding a Range to the .NET MAUI Linear Gauge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Adding-a-Range-to-the-.NET-MAUI-Linear-Gauge-Control.png) Adding a Range to the .NET MAUI Linear Gauge Control ### Step 7: Add a pointer to the Linear Gauge. Pointers contain a list of pointer elements. You can add different kinds of gauge pointers, such as a [BarPointer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.BarPointer.html) , [LinearShapePointer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.LinearShapePointer.html) , or [LinearContentPointer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.LinearContentPointer.html) inside the scale and set the [Value](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Gauges.LinearPointer.html#Syncfusion_Maui_Gauges_LinearPointer_Value) property to indicate the pointer value. Refer to the following code example. ``` ``` ![Adding a Pointer to the .NET MAUI Linear Gauge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Adding-a-Pointer-to-the-.NET-MAUI-Linear-Gauge-Control.png) Adding a Pointer to the .NET MAUI Linear Gauge Control ## GitHub reference For more details, refer to our [.NET MAUI Linear Gauge Getting Started demo project.](https://github.com/SyncfusionExamples/.NET-MAUI-Linear-Gauge-Getting-Started) ## Conclusion Thanks for reading! I hope you enjoyed learning about the Syncfusion [.NET MAUI Linear Gauge](https://www.syncfusion.com/maui-controls/maui-linear-gauge) control and its features from the [2022 Volume 1](https://www.syncfusion.com/forums/174125/essential-studio-2022-volume-1-main-release-v20-1-0-47-is-available-for-download) release. This control was developed with restructured APIs and the .NET MAUI graphics library, taking into consideration various use cases and performance aspects. For more details, check out the [.NET MAUI Linear Gauge NuGet package](https://www.nuget.org/packages/Syncfusion.Maui.Gauges/20.1.47-preview) and [user guide](https://help.syncfusion.com/maui/linear-gauge/getting-started) . If you need any specific feature in our .NET MAUI Linear Gauge, please let us know in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms) . We are always happy to assist you! ## Related blogs - [Syncfusion Essential Studio® 2022 Volume 1 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-1-is-here.aspx) - [What’s New in .NET MAUI: 2022 Volume 1](https://www.syncfusion.com/blogs/post/whats-new-in-net-maui-2022-volume-1.aspx) - [How to Add an Alert Notification UI to Your .NET MAUI App](https://www.syncfusion.com/blogs/post/how-to-add-an-alert-notification-ui-to-your-net-maui-app.aspx) - [Creating a Menu Bar UI with .NET MAUI Preview 14](https://www.syncfusion.com/blogs/post/creating-a-menu-bar-ui-with-net-maui-preview-14.aspx)