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

文章速览

• 1、技术栈
• 实现步骤
• • 1、创建WPF工程项目
  • [2、引入框架 Caliburn.Micro、数据可视化库ScottPlot.WPF](#2、引入框架 Caliburn.Micro、数据可视化库ScottPlot.WPF)
  • [3、创建文件夹，并创建相应的View & ViewModel](#3、创建文件夹，并创建相应的View & ViewModel)
  • 4、创建启动类
  • 5、将启动类设置为启动项
  • 6、编写View
  • 7、编写VM
  • 8、将VM和View中的图表进行绑定
  • 9、备注
• 示例效果

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

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的基础设置，并指定应用程序的启动视图。

        public Bootstrapper()
        {
            Initialize();
        }

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

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

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

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>                    
                <local:Bootstrapper x:Key="Bootstrapper" />
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

6、编写View

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

        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命名空间

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中的图表进行绑定

(DataContext as ChartViewModel)!.PlotControl = WpfPlot1;

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

9、备注

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

示例

var windowManager = new WindowManager();
windowManager.ShowDialogAsync(vm);

示例效果