Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge
Tags: csharp, dotnet, winui
Published: 2022-08-18 13:13:20

---
title: Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge
published: true
date: 2022-08-18 10:30:53 UTC
tags: csharp, dotnet, winui
canonical_url: https://www.syncfusion.com/blogs/post/design-a-car-dashboard-like-a-pro-using-the-winui-radial-gauge.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l88flifmejgc03mj795i.png
---

The Syncfusion [WinUI Radial Gauge](https://www.syncfusion.com/winui-controls/radial-gauge "WinUI Radial Gauge") is a multipurpose data visualization control that displays numerical values on a circular scale. Its rich feature set includes axes, ranges, pointers, and annotations that are fully customizable and extendable. We can use the Radial Gauge to create speedometers, temperature monitors, dashboards, meter gauges, multi-axis clocks, watches, activity gauges, compasses, and more.

In this article, we’ll see how to design a car dashboard application with the vivid features of the WinUI Radial Gauge control.
<figure>
  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Designing-a-Car-Dashboard-using-the-WinUI-Radial-Gauge-Control.png" alt="Designing a Car Dashboard using the WinUI Radial Gauge Control" style="width:100%">
  <figcaption>Designing a Car Dashboard using the WinUI Radial Gauge Control</figcaption>
</figure>
## Basic requirements

To create a car dashboard, we need the following features of the WinUI Radial Gauge control:

- **Axes** to define the speed, revolutions per minute (RPM), fuel level, temperature, and torque values in numbers from start to end with tick marks.
- **Ranges** to indicate the safe speed scope, alerts, etc. using multicolored range indicators.
- **Pointers** to point out the current speed, RPM, fuel level, temperature, and torque values.
- **Annotations** to show the current speed, RPM, fuel, temperature, torque values, and info about the design.

We are going to design a speed indicator dashboard for a car by customizing the appearance of the WinUI Radial Gauge control.

## Designing a speed indicator dashboard for a car with WinUI Radial Gauge

Follow these steps to design a speed indicator dashboard using the WinUI Radial Gauge control.

### Step1: Creating a Radial Gauge

First, create a Radial Gauge by referring to the [WinUI Radial Gauge getting started documentation](https://help.syncfusion.com/winui/radial-gauge/overview "WinUI Radial Gauge Overview").

```xml
<gauge:SfRadialGauge>
 <gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis>
  </gauge:RadialAxis>
 </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
```

The gauge elements, such as axes, ranges, pointers, and annotations, are arranged relatively using the custom position option to make the gauge responsive in all window sizes.

### Step 2: Add speed scale

Then, design a speed scale by adding axis values as numbers from the minimum, 0, to the maximum, 160, with a specific interval. This is implemented using the axis feature in the WinUI Radial Gauge.

[Axes ](https://help.syncfusion.com/winui/radial-gauge/axes "Axis in WinUI Radial Gauge")contain a collection of [RadialAxis ](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html "RadialAxis Class of WinUI Radial Gauge")elements. You can add any number of radial axes inside the Radial Gauge. An axis contains labels and tick marks, the positions and values of which can be easily customized. In the Radial Gauge, you can display the speed labels from 0 to 160 using the [Minimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Minimum "Minimum property of WinUI Radial Gauge") and [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Maximum "Maximum property of WinUI Radial Gauge") properties.

RadialAxis supports two types of tick marks:

- **Major ticks** : Support displaying labels and help us to specify the primary value intervals.
- **Minor ticks** : Don’t support displaying labels and help us to define the space inside the primary value intervals.

The WinUI Radial Gauge allows you to customize the ticks’ appearance using the [MajorTickStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_MajorTickStyle "MajorTickStyle property of WinUI Radial Gauge") and [MinorTickStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_MinorTickStyle "MinorTickStyle property of WinUI Radial Gauge") properties.

You can customize the intervals of the labels and major ticks using the [Interval](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Interval "Interval property of WinUI Radial Gauge") property. The number of minor ticks can be set per interval in an axis using the [MinorTicksPerInterval](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_MinorTicksPerInterval "MinorTicksPerInterval property of WinUI Radial Gauge") property.

Also, you can customize the position of axes, ticks, and labels using the corresponding offset properties. Values for offset properties are either set as factors from 0 to 1 (gauge center position to edge) or in pixels, and they are determined by the [OffsetUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html#Syncfusion_UI_Xaml_Gauges_RadialAxis_OffsetUnit "OffsetUnit property of WinUI Radial Gauge") property.

Refer to the following code example.

```xml
<gauge:SfRadialGauge x:Name="SpeedGauge">
 <gauge:SfRadialGauge.Axes>
  <gauge:RadialAxis UseRangeColorForAxis="True"
                    AxisLineFill="#FFBBBBBB"
                    AxisLineWidth="4"
                    TickPosition="Cross"
                    StartAngle="140"
                    MinorTicksPerInterval="0"
                    EndAngle="400"
                    Minimum="0"
                    Maximum="160"
                    Interval="20"
                    MajorTickLength="10">
 
   <gauge:RadialAxis.MajorTickStyle>
    <Style TargetType="Line">
     <Setter Property="Stroke"
             Value="#FFBBBBBB"></Setter>
     <Setter Property="StrokeThickness"
             Value="3"></Setter>
    </Style>
   </gauge:RadialAxis.MajorTickStyle>
  </gauge:RadialAxis>
 </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Adding-Speed-Scale-in-the-Car-Speed-Dashboard-Using-the-WinUI-Radial-Gauge.png" alt="Adding a Speed Scale in the Car Dashboard Using the WinUI Radial Gauge" style="width:100%">

  <figcaption>Adding a Speed Scale in the Car Dashboard Using the WinUI Radial Gauge</figcaption>

</figure>


**Note:** For more details, refer to the [Axis in WinUI Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/axes "Axis in WinUI Radial Gauge").

### Step 3: Add speed range indicator

Once the speed axis design is completed, add the safe speed range indicator. To do so, we’ll use the range support in the WinUI Radial Gauge.

A [range](https://help.syncfusion.com/winui/radial-gauge/ranges "Range in WinUI Radial Gauge") is a visual element that helps you see where a value falls on a radial axis. It contains a collection of range elements. You can add any number of ranges inside the axis.

We can use ranges to display speeds with different color indicators. In our project, we will use a single range on the axis to indicate the safe speed level.

You can specify the start and end values of a range using the [StartValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_StartValue "StartValue property of WinUI Radial Gauge") and [EndValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_EndValue "EndValue property of WinUI Radial Gauge") properties. Also, you can customize the width of a range using the [StartWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_StartWidth "StartWidth property of WinUI Radial Gauge") and [EndWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_EndWidth "EndWidth property of WinUI Radial Gauge") properties.

Refer to the following code example.

```xml
<gauge:RadialAxis.Ranges>
 <gauge:GaugeRange StartValue="0"
                   EndValue="100"
                   StartWidth="4"
                   EndWidth="4"
                   Background="#FF719836" />
</gauge:RadialAxis.Ranges>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Adding-Safe-Speed-Range-in-the-Car-Speed-Dashboard-Using-the-WinUI-Radial-Gauge.png" alt="Adding a Safe Speed Range in the Car Dashboard Using the WinUI Radial Gauge" style="width:100%">

  <figcaption>Adding a Safe Speed Range in the Car Dashboard Using the WinUI Radial Gauge</figcaption>

</figure>


**Note:** For more details, refer to the [Range in WinUI Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/ranges "Range in WinUI Radial Gauge").

### Step 4: Add speed indicators

Next, we’ll add a needle pointer to indicate the current speed value. To achieve this, use the pointer support in the WinUI Radial Gauge.

[Pointers](https://help.syncfusion.com/winui/radial-gauge/pointers "Pointers in WinUI Radial Gauge") contain a collection of pointer elements, and you can add any number of pointers inside the axis. There are four types of pointers available in the WinUI Radial Gauge:

- Range
- Needle
- Shape
- Content

The value of a pointer is set using the [Value](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugePointer.html#Syncfusion_UI_Xaml_Gauges_GaugePointer_Value "Value property of WinUI Radial Gauge") property.

A [needle pointer](https://help.syncfusion.com/winui/radial-gauge/needle-pointer "Needle Pointer in WinUI Radial Gauge") is a highly customizable element that takes the appearance of a needle and points out an exact value in the axis. It is represented with knob (rounded ball) and tail (rectangle at the end of the knob) elements. We can customize the length of the needle pointer using the [NeedleLength](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_NeedleLength "NeedleLength property of WinUI Radial Gauge") and [NeedleLengthUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_NeedleLengthUnit "NeedleLengthUnit property of WinUI Radial Gauge") properties.

In this car dashboard design, we’ll also use a [range pointer](https://help.syncfusion.com/winui/radial-gauge/range-pointer "Range Pointer in WinUI Radial Gauge") to point out the current speed. A range pointer shades in the area from the gauge’s start value to the current value.

You can customize the width and position of the pointer using the [PointerWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RangePointer.html#Syncfusion_UI_Xaml_Gauges_RangePointer_PointerWidth "PointerWidth property of WinUI Radial Gauge"), [WidthUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RangePointer.html#Syncfusion_UI_Xaml_Gauges_RangePointer_WidthUnit "WidthUnit property of WinUI Radial Gauge"), [PointerOffset](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RangePointer.html#Syncfusion_UI_Xaml_Gauges_RangePointer_PointerOffset "PointerOffset property of WinUI Radial Gauge"), and [OffsetUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RangePointer.html#Syncfusion_UI_Xaml_Gauges_RangePointer_OffsetUnit "OffsetUnit property of WinUI Radial Gauge") properties.

Refer to the following code example.

```xml
<gauge:RadialAxis.Pointers>
 <gauge:NeedlePointer x:Name=”SpeedPointer”
                        KnobSizeUnit=”Pixel”
                        KnobRadius=”12.5”
                        KnobFill=”#FF719836”
                        NeedleFill=”#FF719836”
                        NeedleStartWidth=”3”
                        NeedleEndWidth=”3”
                        NeedleLength=”0.44”
                        Value=”{Binding Speed}”
                        NeedleLengthUnit=”Factor” />
 
 <gauge:RangePointer PointerWidth=”0.15”
                     WidthUnit=”Factor”
                     Background=”#FF719836”
                     OffsetUnit=”Factor”
                     Value=”{Binding Speed}”
                     PointerOffset=”0.4” />
</gauge:RadialAxis.Pointers>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Adding-Speed-Indicator-in-the-Car-Speed-Dashboard-Using-the-WinUI-Radial-Gauge.png" alt="Adding Speed Indicator in the Car Dashboard Using the WinUI Radial Gauge" style="width:100%">

  <figcaption>Adding Speed Indicator in the Car Dashboard Using the WinUI Radial Gauge</figcaption>

</figure>


**Note:** For more details, refer to the [Pointers in WinUI Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/pointers "Pointers in WinUI Radial Gauge").

### Step 5: Annotate the unit of measurement

Finally, we need to display the unit of measurement details on the gauge. To do so, use the annotation support in the WinUI Radial Gauge.

[Annotations](https://help.syncfusion.com/winui/radial-gauge/annotation "Annotation in WinUI Radial Gauge") contain a collection of annotation elements, and you can add any number of annotations inside the Radial Gauge. To display the speed unit, use the **TextBlock** control to display the text value over the radial gauge.

You can customize the position of annotations using the [PositionFactor](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_PositionFactor "PositionFactor property of WinUI Radial Gauge")and [DirectionValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_DirectionValue "DirectionValue property of WinUI Radial Gauge") properties. The [PositionFactor](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_PositionFactor "PositionFactor property of WinUI Radial Gauge") property is used to move annotations from the center of the gauge to the specified distance from it. The [DirectionValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_DirectionValue "DirectionValue property of WinUI Radial Gauge") property places the annotation in the specified angle direction or axis value based on the [DirectionUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_DirectionUnit "DirectionUnit property of WinUI Radial Gauge") property.

Refer to the following code example.

```xml
<gauge:RadialAxis.Annotations>
 <gauge:GaugeAnnotation PositionFactor="0.6"
                        DirectionValue="90">
  <TextBlock Foreground="#FF8B8181"
             FontSize="12"
             Text="SPEED in MPH" />
 </gauge:GaugeAnnotation>
</gauge:RadialAxis.Annotations>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Adding-Annotation-Speed-Unit-in-the-Car-Speed-Dashboard-Using-the-WinUI-Radial-Gauge.png" alt="Adding Annotation (Speed Unit) in the WinUI Radial Gauge" style="width:100%">

  <figcaption>Adding Annotation (Speed Unit) in the WinUI Radial Gauge</figcaption>

</figure>


**Note:** For more details, refer to the [Annotation in WinUI Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/annotation "Annotation in WinUI Radial Gauge").

Repeat this procedure to add other gauges to the dashboard that measure things like RPM, temperature, fuel, and torque values.

## GitHub reference

You can download the complete example code for [designing a car dashboard using the Syncfusion WinUI Radial Gauge control on GitHub](https://github.com/SyncfusionExamples/How-to-design-a-car-dashboard-using-WinUI-Radial-Gauge "Designing a car dashboard using WinUI Radial Gauge GitHub demo").

## Conclusion

Thanks for reading! In this blog, we learned how easy it is to design a speedometer for a car dashboard using the Syncfusion [WinUI Radial Gauge](https://www.syncfusion.com/winui-controls/radial-gauge "WinUI Radial Gauge") control. Try out the instructions provided in this blog and leave your feedback in the comments section below.

For more details, check out the [Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/overview "WinUI Radial Gauge Overview") and examples in this [GitHub location](https://github.com/syncfusion/winui-demos/tree/master/radialgauge "WinUI Radial Gauge GitHub demos"). Additionally, you can check out our [demo app in the App Center](https://install.appcenter.ms/orgs/syncfusion-demos/apps/winui-demos/distribution_groups/release "Syncfusion WinUI Demos on the App Center").

The Syncfusion Radial Gauge is also available for [Angular](https://www.syncfusion.com/angular-ui-components/angular-circular-gauge "Angular Circular Gauge"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/circular-gauge "ASP.NET Core Circular Gauge"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/circular-gauge "ASP.NET MVC Circular Gauge"), [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/circular-gauge "ASP.NET Web Forms Circular Gauge")), [Blazor](https://www.syncfusion.com/blazor-components/blazor-circular-gauge "Blazor Circular Gauge"), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge "Flutter Radial Gauge"), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-circular-gauge "JavaScript Circular Gauge"), [.NET MAUI](https://www.syncfusion.com/maui-controls/maui-radial-gauge ".NET MAUI Radial Gauge"), [React](https://www.syncfusion.com/react-ui-components/react-circular-gauge "React Circular Gauge Chart Control"), [UWP](https://www.syncfusion.com/uwp-ui-controls/radial-gauge "UWP Radial Gauge"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-circular-gauge "Vue Circular Gauge Chart Control"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/radial-gauge "WinForms Radial Gauge"), [WPF](https://www.syncfusion.com/wpf-controls/radial-gauge "WPF Radial Gauge"), and [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-circular-gauge "Xamarin.Forms Circular Gauge") platforms.

For current customers, the new Essential Studio version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. 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.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/winui "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Design an Airfare Calendar to Display the Lowest Fares Using the WinUI Scheduler](https://www.syncfusion.com/blogs/post/design-an-airfare-calendar-to-display-the-lowest-fares-using-the-winui-scheduler.aspx "Blog: Design an Airfare Calendar to Display the Lowest Fares Using the WinUI Scheduler")
- [Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1](https://www.syncfusion.com/blogs/post/advantages-of-using-syncfusion-winui-controls-over-framework-controls-part-1.aspx "Blog: Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1")
- [Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control](https://www.syncfusion.com/blogs/post/achieve-google-like-autosuggestions-with-the-winui-autocomplete-control.aspx "Blog: Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control")
- [What’s New in 2022 Volume 2: WPF and WinUI](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-2-wpf-and-winui.aspx "Blog: What’s New in 2022 Volume 2: WPF and WinUI")