Windows 8: Shapes and Geometries - Part 2

Windows 8: 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 Doesnt 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 implicationsall 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
<Path > PathGeometry element<Path.Data> <PathGeometry> generally looks like <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 - Part 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Windows 8: Shapes and Geometries - Part 2

Uploaded by

Copyright:

Available Formats

Windows 8: Shapes and Geometries Part 2

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Using Paths and Geometries

RectangleGeometry PathGeometry (can contain arcs, curves, lines) GeometryGroup

Learn More @ http://www.learnnowonline.com

Path provides Stroke and Fill

Ellipse, Line, RectangleGeometry

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Using GeometryGroup Element

Learn More @ http://www.learnnowonline.com

Using GeometryGroup Element

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Curves/Lines with PathGeometry

Can contain one or more PathFigure elements

more segments Segment can be line, or curve

PathFigure properties: IsClosed, IsFilled, Segments, StartPoint

Learn More @ http://www.learnnowonline.com

/> <ArcSegment /> </PathFigure> <PathFigure /> </PathGeometry> </Path.Data> </Path>

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Working with Lines

Working with Arcs

Learn More @ http://www.learnnowonline.com

Working with Arcs

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Working with Curves

Quadratic Bezier uses only three points (only one

Learn More @ http://www.learnnowonline.com

Working with Curves

No specific start point:

Working with Curves

Learn More @ http://www.learnnowonline.com

Working with Curves

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Design tools will create this

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

You might also like