Saturday 3 January 2015

Geometry present in the WPF

The Geometry classes is used to define a two dimensional shapes and paths.Geometry class is the base class for all Geometries. Geometry class are not derived from the UIElement.


The classes that are derived from the Geometry are 

Line Geometry           -  Draw a Line
Ellipse Geometry       -  Draw a Ellipse
Rectangle Geometry   - Draw a Rectangle
Path Geometry            - Draw a Geometry used by some given paths
Stream Geometry       - Light weight version of Geometry

And some of that are used to give collection of geometry in to one, which is derived from the the base class Geometry.

1. Geometry Group
2. Combined Geometry

normally we are using the Geometry to specify the shape of a diagram, to see this diagram in visual , we have to assign this Geometry in the Data of the Path ,Because the Geometry is not derived from the UIElement. Geometry is a definition for arbitrary shapes.

                        Path
                           |
                        Data  ------ Draw based on the arbitrary shapes given by the Geometry.

supply the geometry directly in to the Data property of the Path, if it is collection of geometry then supply it using the Geometry Group and combined Geometry, to form a single geometry finally.

Predefined geometry Classes:
***************************
Line Geometry: For line geometry we need to specify the startpoint and endpoint, if the startpoint is alone specified then it is referred as end point, from the initial position to draw a line.

<LineGeometry StartPoint="10,10" EndPoint="200,20"></LineGeometry>




Rectangle Geometry:Rectangle geometry is used to draw rectangle, specify the data in the rect.
<RectangleGeometry Rect="10,25,200,120"></RectangleGeometry> 



Ellipse Geometry: Ellipse Geometry is used to draw a ellipse we have to specify the center of the point. For specify the length and width of the ellipse using RadiusX, RadiusY




Arbitrary paths:
*****************
Path Geometry: Path geometry is used to draw a shape using the points or markup mention in the Figures. Every PathGeometry consists of Path Figures,Each Path Figure consists of Path segments.

If we use the element and attribute to render the shape, then it takes lot of code, to avoid this we have option called markup value for Figures.

<Path Fill="Pink" Stroke="SaddleBrown" StrokeThickness="5">
   <Path.Data>
       <PathGeometry Figures="M 10,20 L 20,40 40,50 60,20 80,40Z" FillRule="Nonzero" />
   </Path.Data>

 </Path>




Collections of Geometry:
**********************
Path.Data can only accepts a single Geometry, then how we can give the multiple geometry in the Data property to do this we have to specify the Geometry Group or combined Geometry elements.

GeometryGroup:


<Path.Data>
       <GeometryGroup>
            <LineGeometry StartPoint="10,10" EndPoint="200,20"></LineGeometry>
            <RectangleGeometry Rect="10,25,200,10"></RectangleGeometry>
        </GeometryGroup>

</Path.Data>





CombinedGeometry:
In combined Geometry we have a options called Geometry combined mode which changes the rendering of the View for the shape.

Following are the four options to specify the GeometryCombinedMode 
1. Union
2. Intersect
3. Exclude
4. Xor

GeometryCombineMode="Union"
****************************

<Path Fill="Pink" Stroke="SaddleBrown" StrokeThickness="5">
  <Path.Data>
      <CombinedGeometry GeometryCombineMode="Union">
         <CombinedGeometry.Geometry1>
           <RectangleGeometry Rect="20,25,100,100"></RectangleGeometry>
          </CombinedGeometry.Geometry1>                           
         <CombinedGeometry.Geometry2>
           <RectangleGeometry Rect="10,25,200,10"></RectangleGeometry>
         </CombinedGeometry.Geometry2>
       </CombinedGeometry>
    </Path.Data>
  </Path>


Output:
************



 GeometryCombineMode="Exclude"
********************************
<Path Fill="Pink" Stroke="SaddleBrown" StrokeThickness="5">
  <Path.Data>
      <CombinedGeometry GeometryCombineMode="Exclude">
         <CombinedGeometry.Geometry1>
           <RectangleGeometry Rect="20,25,100,100"></RectangleGeometry>
          </CombinedGeometry.Geometry1>                           
         <CombinedGeometry.Geometry2>
           <RectangleGeometry Rect="10,25,200,10"></RectangleGeometry>
         </CombinedGeometry.Geometry2>
       </CombinedGeometry>
    </Path.Data>
  </Path>

Output:
************



 GeometryCombineMode="Intersect"
************************************
<Path Fill="Pink" Stroke="SaddleBrown" StrokeThickness="5">
  <Path.Data>
      <CombinedGeometry GeometryCombineMode="Intersect">
         <CombinedGeometry.Geometry1>
           <RectangleGeometry Rect="20,25,100,100"></RectangleGeometry>
          </CombinedGeometry.Geometry1>                           
         <CombinedGeometry.Geometry2>
           <RectangleGeometry Rect="10,25,200,10"></RectangleGeometry>
         </CombinedGeometry.Geometry2>
       </CombinedGeometry>
    </Path.Data>
  </Path>

Output:
************



GeometryCombineMode="Xor"
*******************************
<Path Fill="Pink" Stroke="SaddleBrown" StrokeThickness="5">
  <Path.Data>
      <CombinedGeometry GeometryCombineMode="Xor">
         <CombinedGeometry.Geometry1>
           <RectangleGeometry Rect="20,25,100,100"></RectangleGeometry>
          </CombinedGeometry.Geometry1>                           
         <CombinedGeometry.Geometry2>
           <RectangleGeometry Rect="10,25,200,10"></RectangleGeometry>
         </CombinedGeometry.Geometry2>
       </CombinedGeometry>
    </Path.Data>
  </Path>




Output:
************



From the above details you can learn how to draw the geometry for a Path and different types of geometry present in the WPF




No comments:

Post a Comment