Open XML Developer Workshop DrawingML Basics. Open XML Developer Workshop Disclaimer The information contained in this slide deck represents the current

Open XML Developer Workshop

DrawingML BasicsDrawingML Basics

DisclaimerDisclaimerThe information contained in this slide deck represents the current view of Microsoft Corporation on the issues discussed as of the date of

publication Because Microsoft must respond to changing market conditions it should not be interpreted to be a commitment on the part of Microsoft and Microsoft cannot guarantee the accuracy of any information presented after the date of publication

This slide deck is for informational purposes only MICROSOFT MAKES NO WARRANTIES EXPRESS IMPLIED OR STATUTORY AS TO THE INFORMATION IN THIS DOCUMENT

Complying with all applicable copyright laws is the responsibility of the user Without limiting the rights under copyright no part of this slide deck may be reproduced stored in or introduced into a retrieval system or transmitted in any form or by any means (electronic mechanical photocopying recording or otherwise) or for any purpose without the express written permission of Microsoft Corporation

Microsoft may have patents patent applications trademarks copyrights or other intellectual property rights covering subject matter in this slide deck Except as expressly provided in any written license agreement from Microsoft the furnishing of this slide deck does not give you any license to these patents trademarks copyrights or other intellectual property

Unless otherwise noted the example companies organizations products domain names e-mail addresses logos people places and events depicted herein are fictitious and no association with any real company organization product domain name email address logo person place or event is intended or should be inferred

copy 2006 Microsoft Corporation All rights reservedMicrosoft 2007 Microsoft Office System NET Framework 30 Visual Studio and Windows Vista are either registered trademarks or

trademarks of Microsoft Corporation in the United States andor other countriesThe names of actual companies and products mentioned herein may be the trademarks of their respective owners

Tip of a Large IcebergTip of a Large Iceberg

SHAPES PICTURES GRAPHIC FRAMES CHARTSSHAPES PICTURES GRAPHIC FRAMES CHARTS

DrawingML General ConceptsDrawingML General Concepts

5 Main types of objectsShapeGroup ShapeConnectorPictureGraphic Frame

General-purpose container Used for Charts Diagrams Tables

Most widely used elements are Property elementsNon-Visible Properties (nvPrs) union of common nvPrs and object specific nvPrsVisible Properties object specific

DrawingML Coordinate SystemDrawingML Coordinate System

Measured in EMU (English Metrical Unit)914400 EMU per inch12700 EMU in a point360000 EMU per cm

SHAPESSHAPES

ShapesShapes

Preset geometryPick the preset shapeSpecify the adjust values for the shape

Text geometryPick the preset text shapeSpecify the adjust values for the text shape

Custom geometryNot covered in this course

spTree

nvGrpSpPr grpSpPr sp

nvSpPr spPr

fillProperties

lineProperties

effectPropertie

scene3D

bwMode

style txBody

ltablipFillgt ltablip rembed=rId2 gt ltastretchgt ltafillRect gt ltastretchgtltablipFillgt

ltalngt ltasolidFillgt ltasrgbClr val=4F81BD gt ltasolidFillgt ltaprstDash val=sysDash gtltalngt

Shape Line and Fill PropertiesShape Line and Fill Properties

Indicates relationship idto image data

BLIP (Binary Large Image or Pictures) Fill

Gradient Fill

Dash Line and Solid Fill

Dashed Line

ltagradFill flip=none rotWithShape=1gt ltagsLstgt ltags pos=0gt ltasrgbClr val=DDEBCF gt ltagsgt ltags pos=50000gt ltasrgbClr val=9CB86E gt ltagsgt ltagsLstgt ltalin ang=4200000 scaled=0 gt ltatileRect gtltagradFillgt

Gradient stop and color

DrawingML TextDrawingML TextText is largely modeled after Wordrsquos design

Similar structuresSimilar naming conventionsDifferent schemas

We can apply all graphic effects to text

Some limited to runsSome limited to paragraph

ltpspPrgt ltaeffectLstgt ltareflection blurRad=6350 stA=50000 endA=300 endPos=90000 dir=5400000ldquo sy=-100000 algn=bl gt ltaeffectLstgtltpspPrgtltptxBodygt ltabodyPr wrap=none rtlCol=0gt ltaspAutoFit gt ltabodyPrgt ltalstStyle gt ltapgt ltargt ltarPr b=1rdquogt ltasolidFillgt ltasrgbClr val=FF0000 gt ltasolidFillgt ltarPrgt ltatgtReflective Textltatgt ltargt ltapgtltptxBodygt

Effect

3-D3-D

3-D Scene Definition

BeforeApply 3-D

Scene Above

Apply 3-D Bevels

Adjust Material

ltascene3dgt ltacamera prst=isometricRightUp gt ltalightRig rig=threePt dir=t gtltascene3dgtltasp3d extrusionH=152400 gt

DEMODEMO

PICTURESPICTURES

Pictures vs ShapesPictures vs Shapes

1 Single fill allowed2 Borders grow inoutward3 Must be done by app4 Can have text attached5 Can have shape properties6 Shape specific UI enabled

1 Two overlaid fills allowed2 Borders grow outward3 Lock aspect ratio flag4 Cannot have text attached5 Can have shape properties6 Picture specific UI enabled

ltppicgt ltpnvPicPrgt ltpcNvPr id=4 name=lakejpeg gt ltpcNvPicPrgt ltapicLocks noChangeAspect=1 gt ltpcNvPicPrgt ltpnvPr gt ltpnvPicPrgt ltpblipFillgt ltablip rembed=rId2 gt ltastretchgt ltafillRect gt ltastretchgt ltpblipFillgt ltpspPrgt ltaxfrmgt ltaoff x=762000 y=571500 gt ltaext cx=7620000 cy=5715000 gt ltaxfrmgt ltaprstGeom prst=rectgt ltaavLst gt ltaprstGeomgt ltpspPrgtltppicgt

Defining a PictureDefining a PictureDefine a Pictureltppicgt

Source image rel idltablip rembed=ldquorId2rdquogt

Acts similar to a shapeltpspPrgt

Non-Visual picture properties convey picture specific save propertiesltpnvPicPrgt

Categories

ltcatgt

Chart XML fragment

Your code writes this XML to set chart data

Specifying Series Data PointsSpecifying Series Data PointsStrings or numbersLiterals or referencesPoint values

ltcstrLitgt ltcptCount val=4 gt ltcpt idx=0gt ltcvgtEastltcvgt ltcptgt ltcpt idx=1gt ltcvgtWestltcvgt ltcptgt ltcpt idx=2gt ltcvgtNorthltcvgt ltcptgt ltcpt idx=3gt ltcvgtSouthltcvgt ltcptgtltcstrLitgt

ltcstrRefgt lt-- ref formula --gt ltcfgtSheet1$A$2$A$5ltcfgt lt-- data cache --gt ltcstrCachegt ltcptCount val=4 gt ltcpt idx=0gt ltcvgtEastltcvgt ltcptgt ltcpt idx=1gt ltcvgtWestltcvgt ltcptgt ltcpt idx=2gt ltcvgtNorthltcvgt ltcptgt ltcpt idx=3gt ltcvgtSouthltcvgt ltcptgt ltcstrCachegtltcstrRefgt

ltcnumRefgt lt-- ref formula --gt ltcfgtSheet1$B$2$B$5ltcfgt lt-- data cache --gt ltcnumCachegt ltcptCount val=4 gt ltcpt idx=0gt ltcvgt43ltcvgt ltcptgt ltcpt idx=1gt ltcvgt25ltcvgt ltcptgt ltcpt idx=2gt ltcvgt35ltcvgt ltcptgt ltcpt idx=3gt ltcvgt45ltcvgt ltcptgt ltcnumCachegtltcnumRefgt

String Literal

String Reference Number Reference

INSERTING DRAWING OBJECTS INTO DOCUMENTSINSERTING DRAWING OBJECTS INTO DOCUMENTS

Inserting DrawingML Objects OverviewInserting DrawingML Objects OverviewDrawing Types Allowed

ChartsDiagramsLocked Canvases

Viewed but not edited by hostPictures

The core DrawingML is the same in all hostsLocation varies by host

Wordprocessing main bodySpreadsheet drawing partPresentation slide

Packaging (ldquoshimrdquo) variesDEMO

Drawings in WordprocessingMLDrawings in WordprocessingMLltwpgt ltwrgt ltwdrawinggt ltwpinline distT=0 distB=0 distL=0 distR=0gt ltwpextent cx=5943600 cy=3119120 gt ltwpeffectExtent l=57150 t=19050 r=38100 b=5080 gt ltwpdocPr id=1 name=Chart 1 gt ltwpcNvGraphicFramePr gt

ltagraphic xmlnsa=httpschemasdrawingml2006maingt ltagraphicgt

ltwpinlinegt ltwdrawinggt ltwrgtltwpgt

Shim definesanchor andflow

Graphicobject

ltxdrwsDr xmlnsxdr=httpschemasdrawingml2006spreadsheetDrawing xmlnsa=httpschemasdrawingml2006maingt ltxdrtwoCellAnchorgt ltxdrfromgt ltxdrfromgt ltxdrtogt ltxdrtogt ltxdrgraphicFramegt ltxdrnvGraphicFramePrgt ltxdrcNvPr id=2 name=MySalesChart gt ltxdrcNvGraphicFramePr gt ltxdrnvGraphicFramePrgt ltxdrxfrmgt ltaoff x=0 y=0 gt ltaext cx=0 cy=0 gt ltxdrxfrmgt ltagraphicgt ltagraphicgt ltxdrgraphicFramegt ltxdrclientData gt ltxdrtwoCellAnchorgtltxdrwsDrgt

Drawings in SpreadsheetMLDrawings in SpreadsheetML

Shim definesanchor andnon-visualproperties

Graphicobject

ltpspTreegt ltpnvGrpSpPrgt ltpnvGrpSpPrgt ltpgrpSpPrgt ltpgrpSpPrgt ltpgraphicFramegt ltpnvGraphicFramePrgt ltpcNvPr id=4 name=slide3Chart gt ltpcNvGraphicFramePr gt ltpnvPr gt ltpnvGraphicFramePrgt ltpxfrmgt ltaoff x=762000 y=2362200 gt ltpxfrmgt ltagraphicgt ltagraphicgt ltpgraphicFramegtltpspTreegt

Drawings in PresentationMLDrawings in PresentationML

No shim The shape is in the tree

Graphicobject

Inserting Drawings in WordprocessingML DocumentsInserting Drawings in WordprocessingML Documents

ltwpgt ltwrgt ltwdrawinggt ltwpinline distT=0 distB=0 distL=0 distR=0gt ltwpcNvGraphicFramePr gt ltagraphic xmlnsa=httpschemasdrawingml2006maingt ltagraphicData ltagraphicDatagt ltagraphicgt ltwpinlinegt ltwdrawinggt

Object Positioning (Anchoring)Object Positioning (Anchoring)Two ways to anchor in WordprocessingML

In line with text (ltinlinegt) - The object is displayed within the regular text stream (modifying line height etc to accommodate it)Floating (ltanchorgt) ndash The object is absolutely positioned within the document and text flow is modified as needed around it

The type of anchoring is specified by the main element

WordprocessingML Inline ObjectsWordprocessingML Inline Objects

The most basic type of DrawingML object placement is in line with textThe object is displayed like a large character glyph

WordprocessingML Floating ObjectsWordprocessingML Floating Objects

Floating objects are positioned on the page independent of textThey can be positioned

Absolutely (eg 1rdquo inside the top margin)Relatively (eg centered within the page margins)

ltwppositionH relativeFrom=columngt ltwpposOffsetgt9525ltwpposOffsetgtltwppositionHgtltwppositionV relativeFrom=paragraphgt ltwpposOffsetgt635ltwpposOffsetgtltwppositionVgt

9525 EMUs inside the column

635 EMUs below the paragraph

Element Example Description

wrapNoneThe object is positioned on the document and text is not displaced around it

wrapSquareThe object is positioned on the document and an implied rectangle determines the wrapping extents

wrapTightA wrapping polygon defined and stored in the file determines the text wrapping extents

wrapThroughSimilar to tight wrapping ndash but any indents in the wrap polygon can be filled with text

wrapTopAndBottom

Text cannot wrap around either side of the object

Floating Object Text Wrapping in WordMLFloating Object Text Wrapping in WordMLFive ways to specify how text flows around the object

DEMOWP Anchoring

DEMODEMO

Shapes created in WordprocessingML use VMLShapes created in WordprocessingML use VMLltxml version=10 encoding=utf-8 standalone=yesgtltwdocument xmlnsw=httpschemasopenxmlformatsorgwordprocessingml2006main

xmlnsv=urnschemas-microsoft-comvml gt

ltwbodygt ltwpgt ltwrgt ltwpictgt ltvshapetype id=_x0000_t12 coordsize=2160021600 ospt=12ldquo path=m10800l828082598259r67205146l420021600r6600- 5019l17400216001488013405216008259r-8280xegt ltvstroke joinstyle=mitergt ltvpath gradientshapeok=t oconnecttype=custom oconnectlocs=10800008259420021600 1740021600216008259 textboxrect=672082591488015628gt ltvshapetypegt ltvshape id=_x0000_s1026 type=_x0000_t12ldquo style=width4725pt height449ptmso-position-horizontal-relativecharmso- position-vertical-relativeline fillcolor=c6d9f1 [671]ldquo strokecolor=4f81bd [3204]gt ltw10wrap type=nonegt ltw10anchorlockgt ltvshapegt ltwpictgt ltwrgt ltwpgt

VML Namespace

VML Elements

DEMODEMO

Inserting DrawingML into Spreadsheet DocumentsInserting DrawingML into Spreadsheet Documents

Graphical Objects in SpreadsheetMLGraphical Objects in SpreadsheetMLWorksheet Drawings stored in Drawing Part

Linked by Relationship IDRoot element ltxdrwsDrgt

Anchoring properties (3 types)Absolute ltxdrabsoluteAnchorgtOne cell ltxdroneCellAnchorgtTwo cell ltxdrtwoCellAnchorgt

Drawing elements

ShapesCharts

Drawing Part

Absolute AnchoringAbsolute Anchoring

Donrsquot move or size with cells

Position explicitly specified

Measured in EMUs

Extents explicitly specified

Measured in EMUs

ltxdrabsoluteAnchorgt ltxdrpos x=ldquo2276475 y=ldquo1552575 gt ltxdrext cx=ldquo1238250 cy=ldquo1123950gt

One Cell AnchoringOne Cell Anchoring

Move with cells

Position locked to single cell

Measured in EMUs

ltxdroneCellAnchorgt ltxdrfromgt ltxdrcolgt3ltxdrcolgt ltxdrcolOffgt447675ltxdrcolOffgt ltxdrrowgt8ltxdrrowgt ltxdrrowOffgt28575ltxdrrowOffgt ltxdrfromgt ltxdrext cx=ldquo1238250 cy=ldquo1123950gt

DEMODEMO

DrawingML Basics

Disclaimer

Tip of a Large Iceberg

Shapes Pictures Graphic Frames charts

DrawingML General Concepts

DrawingML Coordinate System

Shapes

Shapes (2)

Shape Line and Fill Properties

DrawingML Text

Pictures

Pictures vs Shapes

Defining a Picture

Picture Properties

Graphic OBJECTs and Charts

Graphic Objects

Charts Overview

Demo (2)

Elements of a Chart

Main Elements of the Chart Part XML

Chart Data Cache Structure

Specifying Series Data Points

Inserting Drawing Objects into Documents

Inserting DrawingML Objects Overview

Drawings in WordprocessingML

Drawings in SpreadsheetML

Drawings in PresentationML

Inserting Drawings in WordprocessingML Documents

Object Positioning (Anchoring)

WordprocessingML Inline Objects

WordprocessingML Floating Objects

Floating Object Text Wrapping in WordML

Demo (3)

Shapes created in WordprocessingML use VML

Demo (4)

Inserting DrawingML into Spreadsheet Documents

Graphical Objects in SpreadsheetML

Absolute Anchoring

One Cell Anchoring

Demo (5)