C#上位机软件之——曲线显示

构建曲线显示界面

本设计基于 InteractiveDataDisplay.WPF 数据交互显示插件进行设计
安装方法：工具->NuGet包管理->管理解决方案的NuGet程序包，在浏览界面搜索该程序包，然后下载安装即可。
在文件开头引入这个程序包

 xmlns:d3="clr-namespace:InteractiveDataDisplay.WPF;assembly=InteractiveDataDisplay.WPF"

创建实例并设置相关参数

<d3:Chart Name="plotter" IsHorizontalNavigationEnabled="true" IsVerticalNavigationEnabled="true"  PlotHeight="1000" PlotWidth="300" MouseWheel="plotter_MouseWheel" KeyDown="plotter_KeyDown" MouseMove="plotter_MouseMove" MouseUp="plotter_MouseUp" MouseLeftButtonUp="plotter_MouseLeftButtonUp"  >
            <d3:Chart.Title>
                    <TextBlock HorizontalAlignment="Center"  FontSize="18" VerticalAlignment ="Center" IsEnabled="False" >采样曲线</TextBlock>
            </d3:Chart.Title>
            <d3:Chart.LegendContent>
             <d3:LegendItemsPanel>
                 <d3:LegendItemsPanel.Resources>
                     <DataTemplate x:Key="InteractiveDataDisplay.WPF.LineGraph">
                         <StackPanel Orientation="Horizontal">
                             <CheckBox IsChecked="{Binding Path=Visibility, Converter={StaticResource VisibilityToCheckedConverter}, Mode=TwoWay}"/>
                             <Line Width="15" Height="15" X1="0" Y1="0" X2="15" Y2="15" Stroke="{Binding Path=Stroke}" StrokeThickness="2"/>
                             <TextBlock Margin="5,0,0,0" Text="{Binding Path=Description}"/>
                         </StackPanel>
                     </DataTemplate>
                 </d3:LegendItemsPanel.Resources>
             </d3:LegendItemsPanel>
         </d3:Chart.LegendContent>
         <Grid Name ="Lines"/>
</d3:Chart>

主要参量意义：
IsHorizontalNavigationEnabled 和 IsVerticalNavigationEnabled 分别为横向与纵向导航窜口，当设置为false 则限制显示数据的横向和纵向范围，不能拖动了。
plotHeight 和 plotwidth 则为初始显示时横纵坐标的高度和宽度
MouseWheel 为鼠标滚轮的事件响应函数，该控件有默认的事件响应处理（缩放横轴和纵轴），并且默认不再响应自定义函数，如果想要它响应自己的函数则需要在初始化时调用

plotter.AddHandler(Chart.MouseWheelEvent, new MouseWheelEventHandler(plotter_MouseWheel), true);

重新激活用户事件响应。
同样原因，MouseLeftButtonUpEvent事件也需要做同样处理：

plotter.AddHandler(Chart.MouseLeftButtonUpEvent, new MouseButtonEventHandler(plotter_MouseLeftButtonUp), true);

d3:Chart.Title为图表的标题属性；
d3:Chart.LegendContent为图表标签内容

该标签的模板为

 <d3:LegendItemsPanel>
     <d3:LegendItemsPanel.Resources>
         <DataTemplate x:Key="InteractiveDataDisplay.WPF.LineGraph">
             <StackPanel Orientation="Horizontal">
                 <CheckBox IsChecked="{Binding Path=Visibility, Converter={StaticResource VisibilityToCheckedConverter}, Mode=TwoWay}"/>
                 <Line Width="15" Height="15" X1="0" Y1="0" X2="15" Y2="15" Stroke="{Binding Path=Stroke}" StrokeThickness="2"/>
                 <TextBlock Margin="5,0,0,0" Text="{Binding Path=Description}"/>
             </StackPanel>
         </DataTemplate>
     </d3:LegendItemsPanel.Resources>
 </d3:LegendItemsPanel>

解析：
表面该DateTemplate为InteractiveDataDisplay.WPF.LineGraph的参数显示打造，所以显示的控件需要连接到LineGraph的对应参数
比如
将CheckBox 的IsCheck属性与LineGraph的是否显示连接，此处需要进行，数据转换，所以在程序中加入转换类

  public class VisibilityToCheckedConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return ((Visibility)value) == Visibility.Visible;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return ((bool)value) ? Visibility.Visible : Visibility.Collapsed;
        }
    }

并在文件开头引用该类

 <UserControl.Resources>
    <local:VisibilityToCheckedConverter x:Key="VisibilityToCheckedConverter"/>
</UserControl.Resources>

<Line Width="15" Height="15" X1="0" Y1="0" X2="15" Y2="15" Stroke="{Binding Path=Stroke}" StrokeThickness="2"/> 将颜色绑定
<TextBlock Margin="5,0,0,0" Text="{Binding Path=Description}"/> 将描述绑定