如何在Windows UWP App中制作径向量规

Question

im making a OBD scanner in Universal Windows platform (UWP) It has fake readouts right now for fuel level and air temperature Right now it just reads in text but i want to make it read in radial gauges

Can someone show me how to do so? this is a personal project of mine so i appreciate the help

The radial gauges im trying to add: https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/radialgauge

my Xaml page so you can make changes to it or atleast see what im talking about :

<Page
x:Class="StandaloneEngineReadoutSystem.UwpApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:StandaloneEngineReadoutSystem.UwpApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Loaded="Page_Loaded">


<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock>Airtemperature</TextBlock>
    <TextBlock Text="{Binding AirTemp}"></TextBlock>

    <TextBlock>FuelLevel</TextBlock>
    <TextBlock Text="{Binding FuelLevel}"></TextBlock>
</StackPanel>

thanks in advance everyone! if you need more information just let me know!

Answer 1

how to make radial gauges in windows UWP app

For using RadialGauge , you need install Microsoft.Toolkit.Uwp.UI.Controls nuget package first. Then make a RadialGauge instance in xaml page.

<Grid>
    <controls:RadialGauge
        IsInteractive="True"
        Maximum="100"
        Minimum="0"
        NeedleBrush="DarkOrchid"
        NeedleWidth="2"
        ScaleTickBrush="Red"
        ScaleWidth="10"
        TickBrush="DarkOliveGreen"
        TickLength="10"
        TickSpacing="1"
        Unit="temp"
        Value="{x:Bind AirTemp, Mode=TwoWay}"
        />
</Grid>

Create bind property in code behind.

public sealed partial class MainPage : Page, INotifyPropertyChanged
{
    public MainPage()
    {
        this.InitializeComponent();
        SetFakeData();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        if (PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

    }

    private int _airTemp;
    public int AirTemp
    {
        get
        {
            return _airTemp;
        }
        set
        {
            _airTemp = value;
            OnPropertyChanged();
        }
    }

    private void SetFakeData()
    {
        var timer = new DispatcherTimer();
        timer.Interval = TimeSpan.FromSeconds(0.5);
        timer.Tick += Timer_Tick;
        timer.Start();
    }

    private void Timer_Tick(object sender, object e)
    {
        do
        {
            AirTemp += 1;

        } while (AirTemp > 100);

    }
}

Finally, bind Value with AirTemp property. And I use a DispatcherTimer to make fake data.

Value="{x:Bind AirTemp, Mode=TwoWay}"