Everything You Need to Know About WinUI 3 Linear Gauge
Tags: winui, csharp, dotnet
Published: 2021-10-21 12:09:44

---
title: Everything You Need to Know About WinUI 3 Linear Gauge
published: true
date: 2021-10-21 11:11:39 UTC
tags: winui, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/everything-you-need-to-know-about-winui-3-linear-gauge.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ir8h3i6486ki2mwisyrj.png
---

The [WinUI 3 Linear Gauge](https://www.syncfusion.com/winui-controls/linear-gauge "Link to WinUI 3 Linear Gauge") control is a multipurpose data visualization control that displays numerical values on a linear scale horizontally or vertically. It has a rich set of features, such as ranges and pointers, that are fully customizable and extendable. You can use it to create a value indicator, linear progress bar, thermometer, bullet chart, and more.

The WinUI Linear Gauge control’s main features:

- [Linear axis](#linear-axis)
- [Ranges](#linear-range)
- [Bar pointer](#bar-pointer)
- [Shape marker pointer](#shape-marker-pointer)
- [Content marker pointer](#content-marker-pointer)
- [Pointer animation](#pointer-animation)
- [Pointer interaction](#pointer-interaction)

Let’s check these features out and learn how to integrate the WinUI 3 Linear Gauge control into your application.

## Linear axis

The [Linear axis](https://help.syncfusion.com/winui/linear-gauge/axes "Documentation link to Axis in WinUI Linear Gauge") is a linear scale on which a set of values are plotted. It has three sub-elements:

- **Axis line** : A linear line, we can customize its thickness, color, and edge corner styles. Its color can be either solid or a linear gradient.
- **Ticks** : There are two types of ticks, major and minor, and we can easily customize their styles.
- **Labels** : Lables allow you to add numeric content to depict the values in the scale. You can easily customize the label styles and value formats.

![WinUI Linear Gauge Axis Elements Customization](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/WinUI-Linear-Axis-Elements-Customization.png)<figcaption>WinUI Linear Gauge Axis Elements Customization</figcaption>

## Linear range

A [Linear range](https://help.syncfusion.com/winui/linear-gauge/ranges "Documentation link to Range in WinUI Linear Gauge") is a visual element that helps you quickly visualize where a range value falls on the axis track. It will denote the selected range of values using the start and end points in an axis. We can add any number of ranges with different styles to a Linear Gauge. You can also customize the range position, thickness, and color with a gradient.

![Range Customization in WinUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Range-Customization-in-WinUI-Linear-Gauge.png)<figcaption>Range Customization in WinUI Linear Gauge</figcaption>

## Bar pointer

A [bar pointer](https://help.syncfusion.com/winui/linear-gauge/bar-pointer "Documentation link to Bar Pointer in WinUI Linear Gauge") is an accenting line that can be placed on a Linear Gauge to mark the current value in the axis. The bar pointers always start from the minimum value of the axis and end on the specified value.  You can add any number of bar pointers inside the axis to indicate values. You can also customize the bar pointer’s thickness, color, corner styles, and position.

![Bar Pointer Customization in WinUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Bar-Pointer-Customization-in-WinUI-Linear-Gauge.png)<figcaption>Bar Pointer Customization in WinUI Linear Gauge</figcaption>

## Marker pointer

Marker pointers are used to indicate specific values on the axis. There are two types of marker pointers, [shape pointer](https://help.syncfusion.com/winui/linear-gauge/shape-pointer "Documentation link to Shape Pointer in WinUI Linear Gauge") and [content pointer](https://help.syncfusion.com/winui/linear-gauge/content-pointer "Documentation link to Content Pointer in WinUI Linear Gauge").

### Shape pointer

The [shape marker pointer](https://help.syncfusion.com/winui/linear-gauge/shape-pointer "Documentation link to Shape Pointer in WinUI Linear Gauge") has these predefined shapes:

- Triangle
- Inverted triangle
- Circle
- Diamond
- Rectangle

We can customize the size, position, and color of the shape pointer.

![Shape Marker Pointers in WinUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Shape-Marker-Pointers-in-WinUI-Linear-Gauge.png)<figcaption>Shape Marker Pointers in WinUI Linear Gauge</figcaption>

### Content pointer

If the predefined shapes in the shape marker pointer don’t suit your needs, then you can use the content marker pointer. It allows you to use any kind of content such as icons, text, or images as marker pointers, with a complete set of custom options.

![Content Marker Pointer in WinUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Content-Marker-Pointer-in-WinUI-Linear-Gauge.png)<figcaption>Content Marker Pointer in WinUI Linear Gauge</figcaption>

## Pointer animation

The WinUI 3 Linear Gauge control provides visual appeal when the pointer moves from one value to another. It also supports various pointer animations.

![Pointer Animation in WinUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Pointer-Animation-in-WinUI-Linear-Gauge.gif)<figcaption>Pointer Animation in WinUI Linear Gauge</figcaption>

## Pointer interaction

Drag a marker pointer from one value to another to change the value at run time.

![Interacting with Pointer in WinUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Interacting-with-Pointer-in-WinUI-Linear-Gauge.gif)<figcaption>Interacting with Pointer in WinUI Linear Gauge</figcaption>

## Add the WinUI 3 Linear Gauge control to your application

We have seen the features of the WinUI 3 Linear Gauge control. Let’s learn how to create a simple WinUI 3 application with the Linear Gauge control to demonstrate its basic usage.

### Step 1: Create a WinUI 3 application.

First, create a simple project using the instructions provided in the [getting started with WinUI 3 apps](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=desktop-csharp "Link to Create a new project that uses the Windows App SDK") and [Build apps with the Windows App SDK](https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/get-started "Link to Get started with the Windows App SDK") documentation.

### Step 2: Install the NuGet package.

Then, install the latest [Syncfusion.Gauges.WinUI NuGet package](https://www.nuget.org/packages/Syncfusion.Gauge.WinUI/ "Link to the Syncfusion.Gauge.WinUI NuGet package") in the application from [NuGet](https://www.nuget.org/ "Link to NuGet Gallery") or from the installed location, **C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages**.

**Note:** The **xx.x.x.xx** denotes the version of the Syncfusion WinUI 3 – Windows App SDK Gauge package.

### Step 3: Add the namespace and initialize the Linear Gauge control.

Now, import the **Syncfusion.UI.Xaml.Gauges** namespace in the XAML file and initialize the Linear Gauge control as shown in the following code example.

```html
xmlns:gauge="using:Syncfusion.UI.Xaml.Gauges"
…
<gauge:SfLinearGauge />
```

### Step 4: Add axis to the Linear Gauge.

You can set a linear axis for the gauge using the [Axis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_Axis "Link to Axis property of WinUI Linear Gauge") property of the [SfLinearGauge](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html "Link to the Class SfLinearGauge") class. Then, specify the minimum and maximum values of the axis using the [Minimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.LinearAxis.html?tabs=tabid-1#Syncfusion_UI_Xaml_Gauges_LinearAxis_Minimum "Link to Minimum property of WinUI Linear Gauge") and [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.LinearAxis.html#Syncfusion_UI_Xaml_Gauges_LinearAxis_Maximum "Link to Maximum property of WinUI Linear Gauge") properties.

Refer to the following code example.

```html
<gauge:SfLinearGauge>
   <gauge:SfLinearGauge.Axis>
       <gauge:LinearAxis Minimum="0"
                Maximum="140" />
   </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
```

![Rendering Linear Gauge Axis](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Rendering-Linear-Gauge-Axis.png)<figcaption>Rendering Linear Gauge Axis</figcaption>

### Step 5: Add a range to the Linear Gauge.

The range contains a list of range elements. You can add any number of ranges inside the axis. Specify the start value, end value, and background color for a range using the [StartValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.LinearGaugeRange.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeRange_StartValue "Link to the StartWidth property of WinUI Linear Gauge"), [EndValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.LinearGaugeRange.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeRange_EndValue "Link to the EndWidth property of WinUI Linear Gauge"), and Background properties, respectively.

Refer to the following code example.

```html
<gauge:SfLinearGauge>
     <gauge:SfLinearGauge.Axis>
            <gauge:LinearAxis Maximum="140"
                     Interval="10">
                 <gauge:LinearAxis.Ranges>
                      <gauge:LinearGaugeRange StartValue="0"
                                        EndValue="50"
                                        Background="Red" />
                      <gauge:LinearGaugeRange StartValue="50"
                                        EndValue="100"
                                        Background="Orange" />
                      <gauge:LinearGaugeRange StartValue="100"
                                        EndValue="140"
                                        Background="Green" />
                 </gauge:LinearAxis.Ranges>
           </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
```

![Redering Custom Linear Gauge Range](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Redering-Custom-Linear-Gauge-Range.png)<figcaption>Redering Custom Linear Gauge Range</figcaption>

### Step 6: Add a pointer to the Linear Gauge.

Pointers contain a variety of pointer elements, and you can add any kind of pointer – such as bar pointers, shape pointers, and content pointers – to the linear axis to indicate a value. The [Value](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.LinearGaugePointer.html#Syncfusion_UI_Xaml_Gauges_LinearGaugePointer_Value "Link to the Value property of WinUI Linear Gauge") property is used to specify the value of the pointer.

Refer to the following code example.

```html
<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
          <gauge:LinearAxis Maximum="140"
                     Interval="10">
              ...
              <gauge:LinearAxis.BarPointers>
                   <gauge:BarPointer Value="90" />
              </gauge:LinearAxis.BarPointers>

              <gauge:LinearAxis.MarkerPointers>
                 <gauge:ShapePointer Value="90"
                             VerticalAnchor="End"
                             OffsetPoint="0,-8" />

                 <gauge:ContentPointer Value="90"
                               VerticalAnchor="End"
                               OffsetPoint="0,-28">
                     <gauge:ContentPointer.Content>
                         <TextBlock Text="90%" />
                     </gauge:ContentPointer.Content>
                 </gauge:ContentPointer>

            </gauge:LinearAxis.MarkerPointers>
        </gauge:LinearAxis>
   </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
```

![Adding Pointer to WinUI Linear Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Adding-Pointer-to-WinUI-Linear-Gauge.png)<figcaption>Adding Pointer to WinUI Linear Gauge</figcaption>

## GitHub reference

For more information, refer to our [WinUI Linear Gauge Getting Started demo](https://github.com/SyncfusionExamples/WinUI-Linear-Gauge-Getting-Started- "WinUI Linear Gauge getting started demo on GitHub").

## Conclusion

Thanks for reading! I hope you enjoyed learning about the Syncfusion [WinUI 3 Linear Gauge control](https://www.syncfusion.com/winui-controls/linear-gauge "WinUI 3 Linear Gauge") and its features. For more details, refer to our [WinUI Linear Gauge user guide](https://help.syncfusion.com/winui/linear-gauge/overview "WinUI Linear Gauge Overview") and [GitHub demos](https://github.com/syncfusion/winui-demos/tree/master/lineargauge "WinUI Linear Gauge demos on GitHub"). Additionally, you can download and check out [our demo app in the Windows Store](https://www.microsoft.com/en-us/p/syncfusion-winui-controls-gallery/9n0fp16ddc06 "WinUI demos on Windows"). Use this control to design your brightness, volume, and gradient controls.

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out these features.

If you need a specific feature in our WinUI Linear Gauge control, please let us know in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/winui "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [New WinUI Segmented Control Is Here!](https://dev.to/kartik110895/new-winui-segmented-control-is-here-38i-temp-slug-3162889 "Link to New WinUI Segmented Control Is Here! blog")
- [Introducing the New WinUI 3 ComboBox](https://dev.to/kartik110895/introducing-the-new-winui-3-combobox-1p15-temp-slug-5893511 "Link to Introducing the New WinUI 3 ComboBox blog")
- [What’s New in 2021 Volume 3: WinUI and WPF](https://dev.to/sureshmohan/what-s-new-in-2021-volume-3-winui-and-wpf-3d05-temp-slug-8802760 "Link to What’s New in 2021 Volume 3: WinUI and WPF blog")
- [Pick Colors Like a Boss Using Syncfusion Color Controls in WinUI](https://dev.to/syncfusion/pick-colors-like-a-boss-using-syncfusion-color-controls-in-winui-e77 "Link to Pick Colors Like a Boss Using Syncfusion Color Controls in WinUI blog")