Saturday, 3 May 2014

Draw a diagram using Drawing Visual and Shape - Xaml (WPF)

In this article we are going to see some drawing stuff in Xaml, For that we are going to use the StreamGeometry. We can draw using two things one is drawing context with custom container , another one is Derived from shape class.

DrawingVisual:
***********
In the drawing visual we have to create a geometry along with specified the line and arc, After that Assign that geometry to the Drawing context, Here we have to specify the Pen and Brush Object to Color the Geometry.

class SectorVisual:DrawingVisual
    {
        public SectorVisual()
        {
            StreamGeometry geomtry = new StreamGeometry();
            using(StreamGeometryContext context = geomtry.Open())
            {
                context.BeginFigure(new System.Windows.Point(200, 200), true, true);
                context.LineTo(new System.Windows.Point(75, 150), true, true);
                context.ArcTo(new System.Windows.Point(50, 150), new System.Windows.Size(1, 1), 0, true, SweepDirection.Counterclockwise, true, true);
                context.LineTo(new System.Windows.Point(200, 200), true, true);
            }

            using(DrawingContext dr = RenderOpen())
            {
                Pen pr=new Pen(Brushes.PaleVioletRed,1);
                dr.DrawGeometry(Brushes.PaleVioletRed, pr,geomtry);
            }

        }
    }


   
Now we need an Container to show this diagram so we are going to create a custom container.


  class VisualContainer:FrameworkElement
    {
        private SectorVisual sector = new SectorVisual();

        protected override Visual GetVisualChild(int index)
        {
            return sector;
        }

        protected override int VisualChildrenCount
        {
            get
            {
                return 1;
            }
        }

    }


Output:
*******






Shape:
*****

For the class which is derived from shape class we dont need to bother about the render of Visual object just we need to create the geometry Thats enough, another advantage is when using the Shape class it will automatically resize the drawing when enlarge the window screen and also shape class have some default property like fill color , border, brush, we can also extend that properties or use that properties to fill the color for the object, but in the Drawing visual we have to specify the Pen and Brush.



    class SectorShape:Shape
    {
        protected override Geometry DefiningGeometry
        {
            get {
              return  GetGeometry();
            }
        }

        private Geometry GetGeometry()
        {
            StreamGeometry geometry = new StreamGeometry();

            using(StreamGeometryContext context = geometry.Open())
            {
                context.BeginFigure(new System.Windows.Point(200, 200), true, true);
                context.LineTo(new System.Windows.Point(75, 150), true, true);
                context.ArcTo(new System.Windows.Point(50, 150), new System.Windows.Size(1, 1), 0, true, SweepDirection.Counterclockwise, true, true);
                context.LineTo(new System.Windows.Point(200, 200), true, true);
            }

            return geometry;
        }

    }


    <Grid>
        <local:SectorShape Fill="OrangeRed" Stroke="DarkBlue" Stretch="Fill" Margin="20" />
    </Grid> 

Output:
******



From this article you can see how to create a Drawing objects in xaml