WPF波形绘制控件 ：第二章 实现

1、 成果展示
 具备拖拽、缩放及标题显示功能


2、 实现过程
&emsp；2.1、 领导大人要求必须具备拖拽，缩放，标签，title功能。但是基础空间的demo不具备这些功能，所以就从官方下载了“GearedExamples”
使用demo:Multiple Series

2、将库以及Vm.cs文件移植到目标工程

3、app代码：省事起见代码直接奉上

xaml

            <Grid Grid.Column="1" Grid.Row="0" Background="Black">
                <Grid.Resources>
                    <Style TargetType="lvc:Separator">
                        <Setter Property="Stroke" Value="#69000000"></Setter>
                        <Setter Property="StrokeThickness" Value=".8"></Setter>
                        <Setter Property="StrokeDashArray" Value="2"></Setter>
                    </Style>
                </Grid.Resources>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="White" FontSize="8">
                    The Current Chart
                </TextBlock>
                <lvc:CartesianChart Grid.Row="1" 
                                    Foreground="White"
                            DisableAnimations="True"
                            Series="{Binding Series}" 
                            LegendLocation ="Top"
                            DataTooltip="{x:Null}"
                            Zoom="Xy">
                    <!--<lvc:CartesianChart.VisualElements>
                        <lvc:VisualElement X="0.5" Y="8">
                            <lvc:VisualElement.UIElement>
                                <TextBlock Foreground="White">
                            Hello!, this is a note merged in the chart.
                                </TextBlock>
                            </lvc:VisualElement.UIElement>
                        </lvc:VisualElement>
                    </lvc:CartesianChart.VisualElements>-->
                    
                    <lvc:CartesianChart.AxisX>
                    <lvc:Axis Title="Browser" 
                              Foreground="White"
                          Labels="{Binding Labels}" 
                           >
                            <lvc:Axis.Separator>
                                <lvc:Separator StrokeThickness="1" StrokeDashArray="2">
                                    <lvc:Separator.Stroke>
                                        <SolidColorBrush Color="#404F56" />
                                    </lvc:Separator.Stroke>
                                </lvc:Separator>
                            </lvc:Axis.Separator>
                        </lvc:Axis>
                    </lvc:CartesianChart.AxisX>
                <lvc:CartesianChart.AxisY>
                        <lvc:Axis Title="Usage" Foreground="White" LabelFormatter="{Binding Formatter}">
                            <lvc:Axis.Separator>
                                <lvc:Separator StrokeThickness="1.5" StrokeDashArray="4">
                                    <lvc:Separator.Stroke>
                                        <SolidColorBrush Color="#404F56" />
                                    </lvc:Separator.Stroke>
                                </lvc:Separator>
                            </lvc:Axis.Separator>
                        </lvc:Axis>
                </lvc:CartesianChart.AxisY>
                </lvc:CartesianChart>
            </Grid>
        </Grid>

.cs

    public partial class Page4 : Page, IDisposable
    {
        public Page4()
        {
            InitializeComponent();
        }


        public void Dispose()
        {

            var vm = (MultipleSeriesVm)DataContext;
            for (var index = 0; index < vm.Series.Count; index++)
            {
                var series = vm.Series[index];
                var disposable = series.Values as IDisposable;
                if (disposable != null)
                {
                    disposable.Dispose();
                }
            }

            vm.Series = null;
        }
     }