How to create the vertical gauge in WinUI Linear Gauge (SfLinearGauge)?

The article describes how to create a vertical gauge using the WinUI Linear Gauge control.

Step 1: Create the SfLinearGauge control by referring to this getting started link.

Step 2: To display the vertical scale, set the Orientation to Vertical along with the required axis customization as shown in the following code sample.

XAML

<gauge:SfLinearGauge Orientation="Vertical">
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Maximum="50"
                          Interval="5">
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

Step 3: To display the different ranges, add the multiple LinearGaugeRange as shown in the below code sample.

XAML

<gauge:LinearAxis.Ranges>
    <gauge:LinearGaugeRange StartValue="0"
                            EndValue="20"
                            Background="#f44336"/>
    <gauge:LinearGaugeRange StartValue="20"
                            EndValue="35"
                            Background="#ff9900"/>
    <gauge:LinearGaugeRange StartValue="35"
                            EndValue="50"
                            Background="#4caf4f"/>
</gauge:LinearAxis.Ranges>

Step 4: There are 3 types of pointers in SfLinearGauge. Those are used to represent the required values on a scale. The below code example shows how to use bar and shape pointers to represent the values.

XAML

<gauge:LinearAxis.BarPointers>
    <gauge:BarPointer Value="30"
                      Offset="-9"
                      Background="#0075e3"
                      CornerStyle="EndCurve"/>
</gauge:LinearAxis.BarPointers>
<gauge:LinearAxis.MarkerPointers>
    <gauge:LinearShapePointer Value="40"
                              IsInteractive="True"
                              Fill="#757575"
                              OffsetPoint="-13,0"/>
</gauge:LinearAxis.MarkerPointers>

Output

View sample in the GitHub.

See also

How to customize the Axis?

How to customize the Range?

How to customize the Shape Pointer?

How to customize the Bar Pointer?

Conclusion

Hope you enjoyed learning about how to create the vertical gauge in WinUI Linear Gauge (SfLinearGauge).

You can refer to our WinUI Linear Gauge’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Linear Gauge documentation to understand how to present and manipulate data.

For current customers, you can check out our WinUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinUI Linear Gauge and other WinUI components.

If you have any queries or require clarifications,please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!