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

时间:2019-03-20 02:52:28

标签: c# uwp uwp-xaml

im在通用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>

提前感谢大家!如果您需要更多信息,请告诉我!

1 个答案:

答案 0 :(得分:0)

  

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

要使用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);

    }
}

最后,将ValueAirTemp属性绑定。然后我用DispatcherTimer来制作假数据。

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