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

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

1.界面xamlX轴和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 用于放标签。左上角的黄色按钮用于还原缩放和拖动。界面的大致布局就这样，下一章将代码部分。

如果觉得《WPF 曲线图表控件（自制）（一）》对你有帮助，请点赞、收藏，并留下你的观点哦！