WPF custom Controls (2)--chart design [1]

0, talk a little nonsense

In addition to the dashboard controls are commonly used, there are also charts often use, the same online also has a very powerful chart control, there are charges (dvexpress), also free. But we usually use, just want to simply draw a diagram, the control library in many of the features we do not use, there is no need to use such a rich control, to improve the efficiency of the program run and reduce the space of the program. At the same time, if we can draw the chart ourselves, it is very convenient to transplant the program. For most platforms, it is believed that the design approach will not change.

1, the overall design of the chart

A simple look at the composition of a chart, usually composed of 4 parts, axes, scale and scale values, drawing area (adding data points and drawing curves).

2, Axis drawing

First make two vertical straight lines out, for the X and Y axes, the XAML code is as follows. 2, 3 lines of code is two axes. 4~23 line, is made of two small triangles to form the shape of the arrow.

1 <CanvasMargin= "5">2     < Linex:name= "X_axis"Stroke= "Black"strokethickness= "3"X1= "Max"Y1= "280"X2= "480"Y2= "280"StrokeStartLineCap= "Round"/>3     < Linex:name= "Y_axis"Stroke= "Black"strokethickness= "3"X1= "Max"Y1= "280"X2= "Max"Y2= "+"StrokeStartLineCap= "Round"/>4     <Pathx:name= "X_axisarrow"Fill= "Black">5         <Path.data>6             <PathGeometry>7                 <PathFigureStartPoint= "480,276"IsClosed= "True">8                     <LineSegment Point= "480,284"/>9                     <LineSegment Point= "490,280"/>Ten                 </PathFigure> One             </PathGeometry> A         </Path.data> -     </Path> -     <Pathx:name= "Y_axisarrow"Fill= "Black"> the         <Path.data> -             <PathGeometry> -                 <PathFigureStartPoint= "36,30"IsClosed= "True"> -                     <LineSegment Point= "44,30"/> +                     <LineSegment Point= "40,20"/> -                 </PathFigure> +             </PathGeometry> A         </Path.data> at     </Path> - </Canvas>

WPF does not have a function to draw an arrow line, this must be written by itself, the best way of course is in XAML, using path to draw a triangle on the end of the line. Of course, this is a small triangle drawn with absolute coordinates, it is not easy to draw to another canvas, the current simple to make an effect, you can use C # to dynamically generate arrows in the background to complete the drawing. The effect of the above code is as follows.

3. Axis scale and label add

4, data point addition and curve drawing

Experience

WPF custom Controls (2)--chart design [1]