Windows 8:Shapes and Geometries – Part2Shapes and Geometries – Part2 http://www.LearnNowOnline.com        Learn More @ htt...
Objectives• Learn to use basic shapes: lines, ellipses,  rectangles, and polygons• Add line caps and joins• Work with geom...
Agenda• Working with Shapes• Digging Deeper: Using Paths and  Geometries           Learn More @ http://www.learnnowonline....
Using Paths and Geometries• Geometry class abstract, so must use:  • EllipseGeometry, LineGeometry,    RectangleGeometry  ...
Paths vs Geometries?• Why both paths and geometries?  • Geometry defines a single shape     • Coordinates and properties  ...
Ellipse, Line, RectangleGeometry• Work much like Ellipse, Line, Rectangle shapes• EllipseGeometry defines Center and Radiu...
DEMO• SimpleGeometries            Learn More @ http://www.learnnowonline.com            Copyright © by Application Develop...
Using GeometryGroup Element• Create several shapes that share fill and stroke  characteristics?• Place within single Path ...
Using GeometryGroup Element• GeometryGroup provides FillRule, treating  entire group as a single "drawing"• Using Geometry...
DEMO• GeometryGroup           Learn More @ http://www.learnnowonline.com           Copyright © by Application Developers T...
Curves/Lines with PathGeometry• Need to draw curves and specific shapes that  dont fit other categories?  • Use PathGeomet...
PathFigure Properties• IsClosed: Determines if first and last segments  are connected• IsFilled: Determines if contained a...
Segment Types• ArcSegment• BezierSegment, PolyBezierSegment• QuadraticBezierSegment,  PolyQuadraticBezierSegment• LineSegm...
PathGeometry Markup• PathGeometry element<Path.Data>                       <Path …>  generally looks like     <PathGeometr...
DEMO• PathGeometryLines           Learn More @ http://www.learnnowonline.com            Copyright © by Application Develop...
Working with Lines• Path describes Fill, Stroke, StrokeThickness for  entire path; also contains StrokeLineJoin and  Strok...
Working with Arcs• ArcSegment element defines an elliptical arc• Many different ways to describe portion of  ellipse; must...
Working with Arcs• X and Y radius in Size property as ordered pair• RotationAngle defines rotation• IsLargeArc: Using larg...
DEMO• PathGeometryArcs           Learn More @ http://www.learnnowonline.com           Copyright © by Application Developer...
Working with Curves• Bezier curves provide basis for almost every  vector drawing program  • Make it possible to define al...
Working with Curves• Four points define standard Bezier curve  • Start point  • End point (Point3 property)  • Two control...
Working with Curves• At starting point, curve runs parallel to line  connecting start point and first control point• At en...
Working with Curves• Farther control point is from line, greater the  curvature              Learn More @ http://www.learn...
Important Tip• Dont create Bezier curves by trial and error• Use a tool that helps generate XAML for you  • Expression Ble...
DEMO• PathGeometryCurves           Learn More @ http://www.learnnowonline.com           Copyright © by Application Develop...
Geometry Mini-Language• Imagine scenario with lots of shapes• Tons of markup!• To reduce markup, can use mini markup  lang...
Geometry Mini-Language• Converts from this:• To this:             Learn More @ http://www.learnnowonline.com             C...
Geometry Mini-Language• For full description:  • http://msdn.microsoft.com/en-    us/library/ms752293.aspx              Le...
DEMO• GeometryMiniLanguage           Learn More @ http://www.learnnowonline.com           Copyright © by Application Devel...
Questions?   http://www.LearnNowOnline.com        Learn More @ http://www.learnnowonline.com        Copyright © by Applica...
Upcoming SlideShare
Loading in …5
×

Windows 8: Shapes and Geometries

915 views

Published on

Learn to use basic shapes (lines, ellipses, rectangles, and polygons), add line caps and joins, work with geometries and paths, and investigate the geometry mini-language.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
915
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Windows 8: Shapes and Geometries

  1. 1. Windows 8:Shapes and Geometries – Part2Shapes and Geometries – Part2 http://www.LearnNowOnline.com Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  2. 2. Objectives• Learn to use basic shapes: lines, ellipses, rectangles, and polygons• Add line caps and joins• Work with geometries and paths• Investigate the geometry mini-language Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  3. 3. Agenda• Working with Shapes• Digging Deeper: Using Paths and Geometries Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  4. 4. Using Paths and Geometries• Geometry class abstract, so must use: • EllipseGeometry, LineGeometry, RectangleGeometry • PathGeometry (can contain arcs, curves, lines) • GeometryGroup • Allows you to add any number of Geometry objects to a single Path Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  5. 5. Paths vs Geometries?• Why both paths and geometries? • Geometry defines a single shape • Coordinates and properties • Doesn’t draw the shape • Path can group shapes • Allows you to draw the shape(s)• Path provides Stroke and Fill • Also handles mouse and keyboard handling Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  6. 6. Ellipse, Line, RectangleGeometry• Work much like Ellipse, Line, Rectangle shapes• EllipseGeometry defines Center and Radius rather than width and height• Real power comes in combining within Path Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  7. 7. DEMO• SimpleGeometries Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  8. 8. Using GeometryGroup Element• Create several shapes that share fill and stroke characteristics?• Place within single Path element, using GeometryGroup element• All shapes in group share fill and stroke• No z-order implications—all borders show Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  9. 9. Using GeometryGroup Element• GeometryGroup provides FillRule, treating entire group as a single "drawing"• Using GeometryGroup reduces element count • Optimizes XAML slightly Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  10. 10. DEMO• GeometryGroup Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  11. 11. Curves/Lines with PathGeometry• Need to draw curves and specific shapes that dont fit other categories? • Use PathGeometry• Can contain one or more PathFigure elements • Each PathFigure contains information about one or more segments • Segment can be line, or curve• PathFigure properties: IsClosed, IsFilled, Segments, StartPoint Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  12. 12. PathFigure Properties• IsClosed: Determines if first and last segments are connected• IsFilled: Determines if contained area should be filled using brush in Path.Fill• Segments: Collection of segments that define the shape; collection of PathSegment objects• StartPoint: Determines the starting point for PathFigure Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  13. 13. Segment Types• ArcSegment• BezierSegment, PolyBezierSegment• QuadraticBezierSegment, PolyQuadraticBezierSegment• LineSegment, PolyLineSegment Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  14. 14. PathGeometry Markup• PathGeometry element<Path.Data> <Path …> generally looks like <PathGeometry> <PathFigure … > this: <LineSegment … /> <ArcSegment … /> </PathFigure> <PathFigure … /> </PathGeometry> </Path.Data> </Path> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  15. 15. DEMO• PathGeometryLines Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  16. 16. Working with Lines• Path describes Fill, Stroke, StrokeThickness for entire path; also contains StrokeLineJoin and StrokeEndLineCap• PathGeometry contains FillRule• PathFigure maintains StartPoint• Continuous line segments could be represented as PolyLineSegment Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  17. 17. Working with Arcs• ArcSegment element defines an elliptical arc• Many different ways to describe portion of ellipse; must study various properties• PathFigure defines start point, ArcSegment defines end point in its Point property Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  18. 18. Working with Arcs• X and Y radius in Size property as ordered pair• RotationAngle defines rotation• IsLargeArc: Using large or small portion or ellipse?• SweepDirection: Clockwise? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  19. 19. DEMO• PathGeometryArcs Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  20. 20. Working with Curves• Bezier curves provide basis for almost every vector drawing program • Make it possible to define almost any curve • Two end points, two control points • Quadratic Bezier uses only three points (only one control point) • Not as flexible, but easier to define and calculate Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  21. 21. Working with Curves• Four points define standard Bezier curve • Start point • End point (Point3 property) • Two control points (Point1 and Point2 properties)• No specific start point: • Parent PathFigure defines start point • BezierSegment defines two control points and end point Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  22. 22. Working with Curves• At starting point, curve runs parallel to line connecting start point and first control point• At ending point, curve runs parallel to line connecting end point to second control point• In between two points, line curves Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  23. 23. Working with Curves• Farther control point is from line, greater the curvature Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  24. 24. Important Tip• Dont create Bezier curves by trial and error• Use a tool that helps generate XAML for you • Expression Blend! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  25. 25. DEMO• PathGeometryCurves Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  26. 26. Geometry Mini-Language• Imagine scenario with lots of shapes• Tons of markup!• To reduce markup, can use mini markup language that describes geometry • Called Geometry mini-language or Path mini- language• Design tools will create this • Must be able to recognize and try to interpret Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  27. 27. Geometry Mini-Language• Converts from this:• To this: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  28. 28. Geometry Mini-Language• For full description: • http://msdn.microsoft.com/en- us/library/ms752293.aspx Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  29. 29. DEMO• GeometryMiniLanguage Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  30. 30. Questions? http://www.LearnNowOnline.com Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

×