Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
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.
<!-- 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>
// 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();
}
}
Windows Community Toolkit feedback
Windows Community Toolkit is an open source project. Select a link to provide feedback:
Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowTraining
Module
Create a UI that uses data binding in .NET MAUI. - Training
Create a UI with data binding. Your UI automatically updates based on the latest data, while the data updates in response to changes in the UI.