Windows 加速度计数据的通用应用实时图表

Question

我正在编写我的第一个通用 windows 应用程序，目前正在试验加速度计。目前我在屏幕上显示它的读数为数字，但我还想显示一个图形来直观地描述这些值。我在网上看过一些图表示例，但 none 接受实时数据流并在数据进入时显示它。

基本上，我想要的是时域上的图表，该图表绘制了一条代表加速度计输出值的线。

这是我第一次尝试 windows 编程，我正在使用 C#。

有没有 'proper' 方法来做这样的事情？普遍接受的方法？

Answer 1

XAML:

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="10*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Charting:Chart x:Name="chart1" Grid.Row="0">
            <Charting:LineSeries ItemsSource="{Binding Data}" 
                                 DependentValuePath ="Accel"
                                 IndependentValuePath ="Timestamp" Margin="0"/>
        </Charting:Chart>
        <Button x:Name="btnStart" Content="START" Grid.Row="1" Click="btnStart_Click" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Button>
        <Button x:Name="btnStop" Content="STOP" Grid.Row="2" Click="btnStop_Click" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Button>
    </Grid>
</Page>

主页：

public sealed partial class MainPage : Page
{
    MyViewModel vm;

    public MainPage()
    {
        this.InitializeComponent();
    }

    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        vm = new MyViewModel();
        DataContext = vm;
    }

    private void btnStart_Click(object sender, RoutedEventArgs e)
    {
        vm.Start();
    }

    private void btnStop_Click(object sender, RoutedEventArgs e)
    {
        vm.Stop();
    }
}

ViewModel:

public class MyViewModel
{
    private Timer accelerometer;
    private Random r;

    private ObservableCollection<MyAccelModel> data;
    public ObservableCollection<MyAccelModel> Data { get { return data; } }

    public MyViewModel()
    {
        data = new ObservableCollection<MyAccelModel>();
        r = new Random(DateTime.Now.Millisecond);
    }

    public void Start()
    {
        accelerometer = new Timer(AccelDataCallback, null, 100, 500);
    }

    public void Stop()
    {
        accelerometer.Dispose();
    }

    private async void AccelDataCallback(object state)
    {
        await CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
            () =>
            {
                data.Add(new MyAccelModel { Timestamp = DateTime.Now, Accel = r.NextDouble() });
            });
    }
}

Windows 加速度计数据的通用应用实时图表

Windows universal app live chart of accelerometer data

c#

charts

xaml

accelerometer

win-universal-app