Edit

Share via


RadialGauge

This control will make data visualizations and dashboards more engaging with rich style and interactivity. The round gauges are powerful, easy to use, and highly configurable to present dashboards capable of displaying clocks, industrial panels, automotive dashboards, and even aircraft cockpits.

The Radial Gauge supports animated transitions between configuration states. The control gradually animates as it redraws changes to the needle, needle position, scale range, color range, and more.

XAML
<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="RadialGaugeExperiment.Samples.RadialGaugeSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:RadialGaugeExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <StackPanel HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Orientation="Horizontal">
        <controls:RadialGauge x:Name="RadialGauge"
                              Width="280"
                              IsEnabled="{x:Bind Enabled, Mode=OneWay}"
                              IsInteractive="{x:Bind IsInteractive, Mode=OneWay}"
                              MaxAngle="{x:Bind (x:Int32)MaxAngle, Mode=OneWay}"
                              Maximum="240"
                              MinAngle="{x:Bind (x:Int32)MinAngle, Mode=OneWay}"
                              Minimum="0"
                              NeedleLength="{x:Bind NeedleLength, Mode=OneWay}"
                              NeedleWidth="{x:Bind NeedleWidth, Mode=OneWay}"
                              ScalePadding="{x:Bind ScalePadding, Mode=OneWay}"
                              ScaleTickWidth="{x:Bind ScaleTickWidth, Mode=OneWay}"
                              ScaleWidth="{x:Bind ScaleWidth, Mode=OneWay}"
                              StepSize="{x:Bind StepSize, Mode=OneWay}"
                              TickLength="{x:Bind TickLength, Mode=OneWay}"
                              TickPadding="{x:Bind TickPadding, Mode=OneWay}"
                              TickSpacing="{x:Bind (x:Int32)TickSpacing, Mode=OneWay}"
                              TickWidth="{x:Bind TickWidth, Mode=OneWay}"
                              ValueStringFormat="N0"
                              Value="{x:Bind Value, Mode=OneWay}" />
    </StackPanel>
</Page>
C#
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.

using CommunityToolkit.WinUI.Controls;

namespace RadialGaugeExperiment.Samples;

/// <summary>
/// An example sample page of a custom control inheriting from Panel.
/// </summary>
[ToolkitSampleBoolOption("Enabled", true, Title = "IsEnabled")]
[ToolkitSampleNumericOption("Value", 120, 0, 240, 1, false, Title = "Value")]
[ToolkitSampleNumericOption("StepSize", 30, 5, 30, 1, false, Title = "StepSize")]
[ToolkitSampleBoolOption("IsInteractive", true, Title = "IsInteractive")]
[ToolkitSampleNumericOption("TickSpacing", 15, 10, 30, 1, false, Title = "TickSpacing")]
[ToolkitSampleNumericOption("ScaleWidth", 12, 4, 50, 1, false, Title = "ScaleWidth")]
[ToolkitSampleNumericOption("MinAngle", -150, -150, 360, 1, false, Title = "MinAngle")]
[ToolkitSampleNumericOption("MaxAngle", 150, 0, 360, 1, false, Title = "MaxAngle")]
[ToolkitSampleNumericOption("NeedleWidth", 4, 0, 10, 1, false, Title = "NeedleWidth")]
[ToolkitSampleNumericOption("NeedleLength", 60, 0, 100, 1, false, Title = "NeedleLength")]
[ToolkitSampleNumericOption("TickLength", 6, 0, 30, 1, false, Title = "TickLength")]
[ToolkitSampleNumericOption("TickWidth", 2, 0, 30, 1, false, Title = "TickWidth")]
[ToolkitSampleNumericOption("ScalePadding", 0, 0, 100, 1, false, Title = "ScalePadding")]
[ToolkitSampleNumericOption("TickPadding", 24, 0, 100, 1, false, Title = "TickPadding")]
[ToolkitSampleNumericOption("ScaleTickWidth", 0, 0, 20, 1, false, Title = "ScaleTickWidth")]

[ToolkitSample(id: nameof(RadialGaugeSample), "RadialGauge", description: $"A sample for showing how to create and use a {nameof(RadialGauge)} control.")]
public sealed partial class RadialGaugeSample : Page
{
    public RadialGaugeSample()
    {
        this.InitializeComponent();
    }
}