WPF 曲线图表控件（自制）（一）

原文:WPF 曲线图表控件（自制）（一）

版权声明：本文为博主原创文章，未经博主允许不得转载。https://blog.csdn.net/koloumi/article/details/77509283

由于公司需要所以自写了一个简单的曲线图表控件，在此分享。

先上一张效果图

1.界面xaml

X轴和Y轴用 2个line对象写死在xaml上

    外部用一个Grid包裹起来，然后X轴的宽度，和Y轴的高度就是绑定下来就好。为了方便起见我的X轴和Y轴又分别用Canvas进行包装，然后分别在对应包装的Canvas里面就可以添加刻度的Textblock

<Canvas Name="X_Axis" Height="40" Margin="0,0,0,0" VerticalAlignment="Bottom" Width="{Binding ElementName=PicAre,Path=ActualWidth}">

                <Line Stroke="Black" StrokeThickness="3"   StrokeStartLineCap="Round" X1="0" Y1="5" X2="{Binding ElementName=X_Axis,Path=Width}" Y2="5" Width="{Binding ElementName=PicAre,Path=ActualWidth}" Height="10" ></Line>

            </Canvas>

            <Canvas Width="40" Name="Y_Axis" Height="{Binding ElementName=PicAre,Path=ActualHeight}" Margin="0,0,0,0" HorizontalAlignment="Left">

                <Line Canvas.Left="30" Stroke="Black" StrokeThickness="3"  StrokeStartLineCap="Round" X1="5" Y1="{Binding ElementName=Y_Axis,Path=Height}" X2="5" Y2="0" Height="{Binding ElementName=PicAre,Path=ActualHeight}" Width="10" Fill="Black">

                </Line>

            </Canvas>

    画线区就由3个Canvas 组成，第一个是最外围。

    然后是里面添加2个Canvas 大小和外框一样大。一个用于添加背景中的网格线，另一个用于添加线和点。用于添加线和点的Canvas Size可以改变毕竟可以缩放和拖动的，但是背景网格线的就可以直接绑定外框。然后就是在右上角的地方在Grid层添加一个stackpanel 用于放标签。左上角的黄色按钮用于还原缩放和拖动。

    界面的大致布局就这样，下一章将代码部分。