如何在windows UWP app中制作径向测量仪

Question

我正在做一个通用Windows平台(UWP)的OBD扫描仪，它现在有虚假的油位和空气温度读数，现在它只是在文本中读取，但我想让它在径向表中读取

有人能教我怎么做吗？这是我个人的项目，所以我很感谢你的帮助

我尝试添加的径向量规：https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/radialgauge

我的Xaml页面，这样你就可以对它进行修改，或者至少看看我在说什么：

<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>

​

提前感谢大家！如果您需要更多信息，请让我知道！

Answer 1

如何在windows UWP app中制作径向测量仪

要使用RadialGauge，您需要先安装Microsoft.Toolkit.Uwp.UI.Controls nuget包。然后在xaml页面中创建一个RadialGauge实例。

<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>

在后台代码中创建绑定属性。

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);

    }
}

最后，将Value与AirTemp属性绑定。我用DispatcherTimer来伪造数据。

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