RadialGauge

Mit diesem Steuerelement werden Datenvisualisierungen und Dashboards durch eine reichhaltige Gestaltung und Interaktivität noch ansprechender. Die runden Anzeigen sind leistungsfähig, benutzerfreundlich und in hohem Maße konfigurierbar, um Armaturenbretter für die Anzeige von Uhren, Industrietafeln, Autoarmaturenbretter und sogar Flugzeugcockpits darzustellen.

Das Radial Gauge unterstützt animierte Übergänge zwischen Konfigurationszuständen. Das Steuerelement wird schrittweise animiert, während es Änderungen an der Nadel, der Nadelposition, dem Skalenbereich, dem Farbbereich und mehr nachzeichnet.

<!--  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();
    }
}