一起搭WPF架构之livechart的MVVM使用介绍

一起搭WPF架构之livechart使用介绍


前言

简单的架构搭建已经快接近尾声了,考虑设计使用图表的形式将SQLite数据库中的数据展示出来。前期已经介绍了livechart的安装,今天就详细介绍一下livechart的使用!


Model

新建Model文件,定义数据写入的对象。而这里需要注意,livechart有对应的用于存储图表数据的类,可以使用ChartValues进行定义。

csharp 复制代码
public ChartValues<double> Num { get; set; } = new ChartValues<double>();

ViewModel

新建ViewModel文件,在这里新建一个Model实例,这里的实例可以调用到刚刚Model中定义的对象Num。

csharp 复制代码
public Model Datamodel { get; set; } = new Model();

除了这个定义,我们在这里对Datamodel需要赋值,这里简单使用随机变量进行演示。利用随机变量给Num赋值。

csharp 复制代码
Random random = new Random();
Datamodel.Num.Add(random.Next(0, 100));

View

界面设计

csharp 复制代码
<lvc:CartesianChart>
    <lvc:CartesianChart.Series>
        <lvc:LineSeries Values="{Binding Datamodel.Num}" />
    </lvc:CartesianChart.Series>
</lvc:CartesianChart>

这里需要注意的使用,绑定的层级问题,如果使用ViewModel的形式,界面实例化ViewModel,那么界面的数据来源就是ViewModel的实例定义,也就是我们在ViewModel实例化使用的Datamodel。因此界面上直接使用到Datamodel这一层,而不是ViewModel这一层。这里决定着实际数据绑定的层级,会影响数据显示!

界面后端

csharp 复制代码
this.DataContext = new DataViewModel();

这里是给界面进行数据输入的来源,很多时候忘记这一步,界面就缺少数据来源,不会实现数据绑定!

效果

这里的数据与随机生成数据的程序有一点点的出入,我在ViewModel中读取了SQLite数据库表中的价格信息,通过界面按钮切换后,会主动更新折线图的数据。

在ViewModel中可以将Datamodel.Num的数据来源替换成读取SQLite数据库中表的数据,就可以完成价格数据的展现!


总结

以上就是今天要讲的内容,本文仅仅简单介绍了livechart的使用,以及我是如何通过MVVM的形式将数据绑定到折线图中的,也记录一下自己的使用过程!

相关推荐
一水鉴天2 小时前
整体设计 逻辑系统程序 之17 Source 容器(Docker)承载 C/P/D 三式的完整设计与双闭环验证 之1
架构·量子计算·认知科学·公共逻辑
程序猿DD7 小时前
将 GPU 级性能带到企业级 Java:CUDA 集成实用指南
java·架构
迎風吹頭髮7 小时前
Linux内核架构浅谈2- Linux内核与硬件交互的底层逻辑:硬件抽象层的作用
linux·架构·交互
可触的未来,发芽的智生7 小时前
触摸未来2025.10.10:记忆的种子,当神经网络拥有了临时工作区,小名喜忆记系统
人工智能·python·神经网络·机器学习·架构
wuty0077 小时前
记录一下 WPF进程 SendMessage 发送窗口消息进行进程间通信,存在进程权限无法接受消息的问题
wpf·进程间通信·sendmessage·进程权限
老葱头蒸鸡8 小时前
(2)Kafka架构原理与存储机制
分布式·架构·kafka
Yeats_Liao8 小时前
遗留系统微服务改造(一):遗留系统改造策略与实战场景分析
微服务·云原生·架构
kura_tsuki9 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
绝无仅有9 小时前
某大厂跳动Java面试真题之问题与解答总结(三)
后端·面试·架构
陈敬雷-充电了么-CEO兼CTO11 小时前
DeepSeek vs ChatGPT 技术架构、成本与场景全解析
人工智能·chatgpt·架构