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);

示例效果

相关推荐
像风一样自由202014 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
优创学社21 小时前
基于springboot的社区生鲜团购系统
java·spring boot·后端
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理1 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python