SciChart结合Prism实现Spectrugram功能

SciChart结合Prism实现Spectrogram功能

1. 实现的功能

Prism是主流的MVVM框架，所谓MVVM即Model-View-ViewModel，它是一种基于前端开发的表现模式，其核心是提供的View和ViewModel的双向数据绑定，对ViewModel的状态改变可以自动传递给View。ViewModel就MVVM模式的核心。SciChart是一个用于.NET的商业图表库，用于高性能交互式图表。虽然他们有移动（iOS和Android）库，但在这里我们将仔细看看他们的WPF图表库。可以在Windows窗体应用程序中使用ElementHost或更现代的技术使用此控件，但它们的核心产品旨在用于WPF应用程序。
该实验主要实现的功能：
- 在Prism平台实现MVVM的设计，理解模块注入的概念；
- 利用SciChart v8实现Spectrugram的功能，并进行X轴和Y轴的调整；

最后实现的效果如下：

2. 过程描述

2.1 SciChart的安装和License安装

SciChart Demo Sample下载：
https://www.scichart.com/
License的安装分为Trial License 和 Activate License两种安装方式。官网有详细的安装过程， 这时只说明在Prism平台下面如何安装Trial License。
正常情况下创建WPF工程文件后，直接可以把SciChart Trial License Code 放在APP类或startup启动程序中。而在Prism创建的工程文件中Prism对Application进行的重写，所以直接放到App类是无效的。
Prims创建后的文件夹内容：

下载SciChart-Licensing-Wizard.exe，必须在SciChart官网注册账号。安装打开该软件登录账号，即可申请30天的试用License。
添加链接描述

打开App.xaml.cs，此处的App已经被重写，SciChartSurface拷贝到此处是没有用的。

namespace BlankApp1
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App
    {
        protected override Window CreateShell()
        {
            return Container.Resolve<MainWindow>();
            // Set this code once in App.xaml.cs or application startup
            // Set this code once in App.xaml.cs or application startup
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {

        }       
    }
}

尝试几次后，Trial License需要放在此处。

2.2 利用WPF Chart Realtime Spectrogram Demo实现预定功能

在下面链接下载Demo工程文件。
添加链接描述

实例工程文件运行后的效果如上图所示，不满足预定的功能，所以需要对曲线图和瀑布图由上下分布更改为左右分布，同时需要调整两图的X轴和Y轴。
(1) 左右分布调整
也就时说把之前三列两排改成了四列一排。

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>           
        </Grid.RowDefinitions>

(2)X轴和Y轴调整

最开始曲线图坐标调整后，希望顶部Y轴的数值从左到右由小到大，最后采用示例中AxisStyle解决此问题。

左边曲线图坐标参数：

            <s:SciChartSurface.XAxis >
                <s:NumericAxis AxisAlignment="Left"/>
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis  >                
                <s:NumericAxis AxisAlignment="Top" Style="{StaticResource AxisStyle}" FlipCoordinates="True" />
            </s:SciChartSurface.YAxis>

右边瀑布图坐标参数：

            <s:SciChartSurface.XAxis>
                <s:NumericAxis AxisAlignment="Left" Style="{StaticResource AxisStyle}" VisibleRange="{Binding Source={x:Reference Name=sciChart}, Path=XAxis.VisibleRange, Mode=TwoWay}" />
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisAlignment="Top" Style="{StaticResource AxisStyle}" FlipCoordinates="True" />
            </s:SciChartSurface.YAxis>

通用AxisStyle定义：

        <Style x:Key="AxisStyle" TargetType="s:AxisBase">
            <Setter Property="DrawMajorBands" Value="False" />
            <Setter Property="IsPrimaryAxis" Value="False" />
            <Setter Property="AxisBandsFill" Value="Transparent" />
            <Setter Property="DrawMajorGridLines" Value="false" />
            <Setter Property="DrawMinorGridLines" Value="false" />

            <Setter Property="MajorTickLineStyle">
                <Setter.Value>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="Transparent" />
                    </Style>
                </Setter.Value>
            </Setter>

            <Setter Property="MinorTickLineStyle">
                <Setter.Value>
                    <Style TargetType="Line">
                        <Setter Property="Stroke" Value="Transparent" />
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>

3. 总结

刚开始接触WPF的编程，MVVM架构和SciChart也是刚开始学习。针对学习的过程予以总结，作为学习的梳理和理解。虽然该文章没有涉及模块注入，但后续的文章总结中继续更新。