WPF-遵循MVVM框架创建图表的显示【保姆级】

文章速览

坚持记录实属不易,希望友善多金的码友能够随手点一个赞。
共同创建氛围更加良好的开发者社区!
谢谢~

1、技术栈

WPF、MVVM、WPF开发框架Caliburn.Micro、开源的数据可视化库ScottPlot.WPF。

ScottPlot.WPF 是一个开源的数据可视化库,用于在WPF应用程序中创建高品质的绘图和图表。它基于ScottPlot库的WPF版本,提供了简单易用的API,使开发人员能够通过简单的代码创建各种类型的图表,如折线图、散点图、柱状图、饼图等。

Caliburn.Micro是一个微软开发的用于构建WPF,Silverlight和Windows Phone应用程序的MVVM(模型-视图-视图模型)框架。

实现步骤

1、创建WPF工程项目

2、引入框架 Caliburn.Micro、数据可视化库ScottPlot.WPF


3、创建文件夹,并创建相应的View & ViewModel

注意:开发框架Caliburn.Micro 会根据名称自动匹配View 和ViewModel,因此命名空间以及创建的xmal名和对应的vm名称需要符合 【**View、**ViewModel】的规则

4、创建启动类

创建一个Bootstrapper类,继承开发框架Caliburn.Micro中的BootstrapperBase类,用于配置Caliburn.Micro的基础设置,并指定应用程序的启动视图。

csharp 复制代码
        public Bootstrapper()
        {
            Initialize();
        }

        protected override void OnStartup(object sender, StartupEventArgs e)
        {
            DisplayRootViewForAsync<ChartViewModel>();
        }

5、将启动类设置为启动项

打开App.xmal文件,删除其中的StartupUri代码行,并将我们创建的Bootstrapper设置为程序启动项

csharp 复制代码
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>                    
                <local:Bootstrapper x:Key="Bootstrapper" />
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

6、编写View

引入程序集ScottPlot.WPF,并添加UI元素WpfPlot,用以绘制图表

csharp 复制代码
        xmlns:ScottPlot="clr-namespace:ScottPlot.WPF;assembly=ScottPlot.WPF"
        <ScottPlot:WpfPlot x:Name="WpfPlot1"/>

7、编写VM

VM需要继承Caliburn.Micro程序集中的Screen类,才可以使用我们引入的Caliburn.Micro MVVM框架

创建一个公开的WpfPlot类型的属性,用以绑定View上的UI元素,需要引用ScottPlot.WPF命名空间

csharp 复制代码
using ScottPlot.WPF;
private WpfPlot _PlotControl = new WpfPlot();
//图表清空
PlotControl.Plot.Clear();
//增加一个点
PlotControl.Plot.Add.Scatter(x,y);
//自动轴距
PlotControl.Plot.Axes.AutoScale();
//图表刷新
PlotControl.Refresh();

8、将VM和View中的图表进行绑定

csharp 复制代码
(DataContext as ChartViewModel)!.PlotControl = WpfPlot1;

其中的Load方法需要在xmal中进行声明并绑定

9、备注

如果不设置为启动项,而需要点击按钮打开我们的创建的MVVM框架的视图,可以通过Caliburn.Micro命名空间中的WindowManager...ShowDialogAsync(vm);进行打开

示例

csharp 复制代码
var windowManager = new WindowManager();
windowManager.ShowDialogAsync(vm);

示例效果

相关推荐
β添砖java12 分钟前
vivo响应式官网
前端·css·html·1024程序员节
程序员爱钓鱼2 小时前
Python编程实战 · 基础入门篇 | 元组(tuple)
后端·python·ipython
程序员爱钓鱼2 小时前
Python编程实战 · 基础入门篇 | 列表(list)
后端·python·ipython
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
掘金码甲哥6 小时前
两张大图一次性讲清楚k8s调度器工作原理
后端
间彧6 小时前
Stream flatMap详解与应用实战
后端
Baklib梅梅7 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_7 小时前
Chrome开发者工具
前端·chrome