--- title: "Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge" published_at: "2022-08-18T10:30:53+00:00" modified_at: "2026-01-15T08:10:35+00:00" url: "https://www.syncfusion.com/blogs/post/design-a-car-dashboard-like-a-pro-using-the-winui-radial-gauge" excerpt: "The Syncfusion 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..." taxonomy_category: - "Desktop" - "Development" - "Syncfusion" - "UI" - "WinUI" taxonomy_post_tag: - "dashboard" - "desktop" - "Radial Gauge" - "UI" - "WinUI" --- # Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge [Vignesh Ramesh](https://www.syncfusion.com/blogs/author/vignesh-ramesh) ![Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Design-a-Car-Dashboard-Like-a-Pro-Using-the-WinUI-Radial-Gauge.png) The Syncfusion [WinUI Radial Gauge](https://www.syncfusion.com/winui-controls/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. ![Designing a Car Dashboard using the WinUI Radial Gauge Control](https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Designing-a-Car-Dashboard-using-the-WinUI-Radial-Gauge-Control.png) Designing a Car Dashboard using the WinUI Radial Gauge Control ## 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) . ``` ``` 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) contain a collection of [RadialAxis](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RadialAxis.html) 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) and [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_Maximum) 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) and [MinorTickStyle](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAxis.html#Syncfusion_UI_Xaml_Gauges_GaugeAxis_MinorTickStyle) 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) 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) 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) property. Refer to the following code example. ``` ``` ![Adding a Speed Scale in the Car Dashboard Using the WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Adding-Speed-Scale-in-the-Car-Speed-Dashboard-Using-the-WinUI-Radial-Gauge.png) Adding a Speed Scale in the Car Dashboard Using the WinUI Radial Gauge **Note:** For more details, refer to the [Axis in WinUI Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/axes) . ### 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) 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) and [EndValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_EndValue) 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) and [EndWidth](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeRange.html#Syncfusion_UI_Xaml_Gauges_GaugeRange_EndWidth) properties. Refer to the following code example. ``` ``` ![Adding a Safe Speed Range in the Car Dashboard Using the WinUI Radial Gauge](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) Adding a Safe Speed Range in the Car Dashboard Using the WinUI Radial Gauge **Note:** For more details, refer to the [Range in WinUI Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/ranges) . ### 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) 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) property. A [needle pointer](https://help.syncfusion.com/winui/radial-gauge/needle-pointer) 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) and [NeedleLengthUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.NeedlePointer.html#Syncfusion_UI_Xaml_Gauges_NeedlePointer_NeedleLengthUnit) properties. In this car dashboard design, we’ll also use a [range pointer](https://help.syncfusion.com/winui/radial-gauge/range-pointer) 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) , [WidthUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RangePointer.html#Syncfusion_UI_Xaml_Gauges_RangePointer_WidthUnit) , [PointerOffset](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RangePointer.html#Syncfusion_UI_Xaml_Gauges_RangePointer_PointerOffset) , and [OffsetUnit](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.RangePointer.html#Syncfusion_UI_Xaml_Gauges_RangePointer_OffsetUnit) properties. Refer to the following code example. ``` ``` ![Adding Speed Indicator in the Car Dashboard Using the WinUI Radial Gauge](https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Adding-Speed-Indicator-in-the-Car-Speed-Dashboard-Using-the-WinUI-Radial-Gauge.png) Adding Speed Indicator in the Car Dashboard Using the WinUI Radial Gauge **Note:** For more details, refer to the [Pointers in WinUI Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/pointers) . ### 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) 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) and [DirectionValue](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_DirectionValue) properties. The [PositionFactor](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_PositionFactor) 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) 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) property. Refer to the following code example. ``` ``` ![Adding Annotation (Speed Unit) in the WinUI Radial Gauge](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) Adding Annotation (Speed Unit) in the WinUI Radial Gauge **Note:** For more details, refer to the [Annotation in WinUI Radial Gauge documentation](https://help.syncfusion.com/winui/radial-gauge/annotation) . 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) . ## 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) 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) and examples in this [GitHub location](https://github.com/syncfusion/winui-demos/tree/master/radialgauge) . 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) . The Syncfusion Radial Gauge is also available for [Angular](https://www.syncfusion.com/angular-ui-components/angular-circular-gauge) , ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/circular-gauge) , [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/circular-gauge) , [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/circular-gauge) ), [Blazor](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) , [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge) , [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-circular-gauge) , [.NET MAUI](https://www.syncfusion.com/maui-controls/maui-radial-gauge) , [React](https://www.syncfusion.com/react-ui-components/react-circular-gauge) , [UWP](https://www.syncfusion.com/uwp-ui-controls/radial-gauge) , [Vue](https://www.syncfusion.com/vue-ui-components/vue-circular-gauge) , [WinForms](https://www.syncfusion.com/winforms-ui-controls/radial-gauge) , [WPF](https://www.syncfusion.com/wpf-controls/radial-gauge) , and [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-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) page. If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out these features. 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/winui) . 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) - [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) - [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) - [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)