Windows 8: Shapes and Geometries

Windows 8:
Shapes and Geometries – Part
2
Shapes and Geometries – Part
2 http://www.LearnNowOnline.com

Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

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


Agenda
• Working with Shapes
• Digging Deeper: Using Paths and
Geometries


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


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


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


DEMO
• SimpleGeometries


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


Using GeometryGroup Element
• GeometryGroup provides FillRule, treating
entire group as a single "drawing"
• Using GeometryGroup reduces element count
• Optimizes XAML slightly


DEMO
• GeometryGroup


Curves/Lines with PathGeometry
• Need to draw curves and specific shapes that
don't 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

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

Segment Types
• ArcSegment
• BezierSegment, PolyBezierSegment
• QuadraticBezierSegment,
PolyQuadraticBezierSegment
• LineSegment, PolyLineSegment


PathGeometry Markup
• PathGeometry element<Path.Data>
<Path …>

generally looks like <PathGeometry>
<PathFigure … >
this: <LineSegment … />
<ArcSegment … />
</PathFigure>
<PathFigure … />
</PathGeometry>
</Path.Data>
</Path>


DEMO
• PathGeometryLines


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


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


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?


DEMO
• PathGeometryArcs


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


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


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


Working with Curves
• Farther control point is from line, greater the
curvature


Important Tip
• Don't create Bezier curves by trial and error
• Use a tool that helps generate XAML for you
• Expression Blend!


DEMO
• PathGeometryCurves


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


• Converts from this:

• To this:


• For full description:
• http://msdn.microsoft.com/en-
us/library/ms752293.aspx


DEMO
• GeometryMiniLanguage


Questions?

http://www.LearnNowOnline.com


Windows 8: Shapes and Geometries

More Related Content

Similar to Windows 8: Shapes and Geometries

More from LearnNowOnline

Recently uploaded

Windows 8: Shapes and Geometries