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




Shapes Present in the WPF

WPF consists of a six shape elements. From the Six shapes, Path is the shape which is allows you to define a arbitrary shapes.Following are the Shapes which is used to render in UI.

Line           :  To draw a Line
PolyLine    :  To draw a multiple lines
Polygon     :  To draw a polygon
Rectangle  :  To draw a rectangle
Ellipse       :  To draw a Ellipse
Path           :  To draw a arbitrary user defined custom shape.


Line properties to draw: X1,Y1,X2,Y2

Polyline properties to draw : Points  collection of point

Polygon properties to draw: Points  collection of point

Rectangle properties to draw: Height, Width, RadiusX, RadiusY

Ellipse properties to draw:  Height, Width

Path properties to draw:  Data, which is collection of Geometry or Geometry. like Line Geometry, Rectangle Geometry, Ellipse Geometry,Path Geometry, Geometry Group, Combined Geometry, Stream Geometry.



       <StackPanel Margin="20,0,0,0" Orientation="Horizontal">
            <StackPanel>
                <Line Margin="0,0,0,10" X1="10" X2="100" Y1="15" Y2="18" Fill="Blue"                                 Stroke="Blue" StrokeThickness="5"></Line>
                <Polyline Margin="0,0,0,10" Points="10,40 40,50 50,80 80,30 100,50"                                 Stroke="BlueViolet" StrokeThickness="2"></Polyline>
                <Polygon Margin="0,0,0,10" Points="10,10 40,50 50,80 80,30"                                         Fill="ForestGreen"/>
                <Rectangle Margin="0,0,0,10" Width="50" Height="100" RadiusX="5"                                     RadiusY="10"  Fill="Red"></Rectangle>
                <Ellipse Margin="0,0,0,10" Width="100" Height="50" Stroke="Chocolate"                               StrokeThickness="3" Fill="RoyalBlue"></Ellipse>
                <Path Fill="Pink" Stroke="SaddleBrown" StrokeThickness="5">
                    <Path.Data>
                        <GeometryGroup>
                            <LineGeometry StartPoint="10,10" EndPoint="200,20">                                                     </LineGeometry>
                            <RectangleGeometry Rect="10,20,200,10"></RectangleGeometry>
                        </GeometryGroup>
                    </Path.Data>
                </Path>
            </StackPanel>
         </StackPanel>

       

Output
************




From the above you can learn shapes present in the wpf.






Wednesday 31 December 2014

Tree structure present in XAML

In this post we can see XAML. XAML is an XML based mark up language. For specifying the settings and characteristics of a class. It is concentration mainly in the UI presentation and some part of animation along with binding.

C# is used for control the flow of XAML and specifying the Behavior of XAML tag.It consists of two kind of Trees to represent the elements. First is Logical Tree and Visual Tree.

Logical Tree means comprises the elements as they listed in the XAML.

Visual Tree means includes the parts of all things that is used to visualize the control and parts like border of a control , presenter


For Example Let we take the below syntak.

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <Button>Click Me</Button>
    </StackPanel>
</Window>



From the XAML Code now we are going to define the Logical tree and visual tree.

Logical Tree: Specifies only the element present in the XAML

              Window 
                    |
            StackPanel
                    |
               Button


Visual Tree: Includes all things which are useful in display the controls.

             Window 
                    |
               Border
                   |
       AdornerDecorter
                    |
       ContentPresenter
                    |
            StackPanel
                    |
               Button
                    |
            ContentPresenter

From the above you can learn some basic things about Tree structure present in XAML.