Your Federal Quarterly Tax Payments are due April 15th

Windows 8: Shapes and Geometries by LearnNowOnline

VIEWS: 8 PAGES: 30

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.

• pg 1
```									Windows 8:
Shapes and Geometries – Part 2

http://www.LearnNowOnline.com

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
• 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

Geometry Mini-Language
• Converts from this:

• To this:

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

DEMO
• GeometryMiniLanguage