时间戳

首页 > 解决方案 > 如何在 Windows UWP 应用程序中制作径向仪表

c# - 如何在 Windows UWP 应用程序中制作径向仪表

问题描述

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

提前谢谢大家！如果您需要更多信息，请告诉我！

标签： c#uwpuwp-xaml

解决方案

如何在 Windows UWP 应用程序中制作径向仪表

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

<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属性绑定。我用 aDispatcherTimer来制作假数据。

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

推荐阅读