Office Open XML Developer Workshop DrawingML Basics

Office 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.

© 2006 Microsoft Corporation. All rights reserved.Microsoft, 2007 Microsoft Office System, .NET Framework 3.0, Visual Studio, and Windows Vista are either registered trademarks or

trademarks of Microsoft Corporation in the United States and/or other countries.The 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


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)914,400 EMU per inch12,700 EMU in a point360,000 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

DEMO


Line and Fill PropertiesLine and Fill Properties

Indicates rel. idto image data

BLIPs (Binary Large Image or Pictures) Fill

Gradient Fill

Dash Line and Solid Fill

Line

Dash

Gradient


DrawingML TextDrawingML TextText is largely modeled after Word’s design

Similar structuresSimilar naming conventionsDifferent schemas

We can apply all graphic effectsto text

Some limited to runsSome limited to ¶


3-D3-D

3-D Scene Definition

Before Apply 3-D Scene Above

Apply 3-D Bevels

Adjust Material

types


PICTURESPICTURES


Pictures vs. ShapesPictures vs. Shapes

1. Single fill allowed2. Borders grow in/outward3. 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


Defining a PictureDefining a Picture

Defines a Picture:<p:pic/>

Source image rel. id<a:blip r:embed=“rId2”/>

Acts much like a shape<p:spPr/>

Non-Visual picture properties used to convey picture specific save properties<p:nvPicPr/>


Picture PropertiesPicture Properties

1. Multiple FillsAllows for two fills to be applied such as a picture and a color fill

2. Picture BordersBecause of the nature of pictures the borders grow outwards rather than in/outwards

3. Lock Aspect RatioResizing a picture can be done with or without the aspect ratio locked


INSERTING DRAWINGML INTO DOCUMENTSINSERTING DRAWINGML INTO DOCUMENTS


DrawingML in DOCX/XLSX/PPTX DocumentsDrawingML in DOCX/XLSX/PPTX Documents

The core DrawingML definition is the same in each caseLocation varies (main body, drawing part, slide)Packaging (“shim”) varies

Word: Excel: PowerPoint:

DEMO


WordprocessingML – document bodyWordprocessingML – document body

Shim defines graphic frame and locked canvas

Shape definition uses DrawingMLnamespace for all elements


SpreadsheetML – drawing partSpreadsheetML – drawing part

Shim defines anchorposition and type

Shape definition usesspreadsheetDrawing namespacefor non-visual properties


PresentationML – slide partPresentationML – slide part

No shim – the shape is in the shape tree

Shape definition is in DrawingML


Graphical Objects in WordprocessingMLGraphical Objects in WordprocessingML

Within a WordprocessingML document, it is possible to include several types of DrawingML objects:

ChartsDiagramsLocked CanvasesPictures

Text

DrawingML Diagram


The graphicData ElementThe graphicData Element

Uri attribute specifies the namespace for the embedded contentNo child elements defined in the xsd – the uri tells the consumer how to interpret the graphicDataOffice supports a set of specific uri values:

http://schemas.openxmlformats.org/drawingml/2006/charthttp://schemas.openxmlformats.org/drawingml/2006/compatibilityhttp://schemas.openxmlformats.org/drawingml/2006/diagramhttp://schemas.openxmlformats.org/drawingml/2006/lockedCanvashttp://schemas.openxmlformats.org/drawingml/2006/picturehttp://schemas.openxmlformats.org/drawingml/2006/tablehttp://schemas.openxmlformats.org/drawingml/2006/ole


DrawingML Object Positioning (Anchoring)DrawingML Object Positioning (Anchoring)

Two ways to anchor in WordprocessingML:In line with text - The object is displayed within the regular text stream (modifying line height, etc. to accommodate it)Floating – 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 present in the document

<inline> = in line with text<anchor> = floating


Inline ObjectsInline Objects

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


Floating ObjectsFloating Objects

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

Absolutely (e.g. 1” inside the top margin)Relatively (e.g. centered within the page margins)

9525 EMUs inside the column

635EMUs 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

wrapThrough Similar to tight wrapping – 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 WrappingFloating Object Text WrappingFive ways to specify how text flows around the object


Shapes in WordprocessingML use VMLShapes in WordprocessingML use VML

<?xml version="1.0" encoding="utf-8" standalone="yes"?><w:document xmlns:w=http://schemas.openxmlformats.org/wordprocessingml/2006/main xmlns:v="urn:schemas-microsoft-com:vml" xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing" ...> <w:body> <w:p w:rsidR="0076517B" w:rsidRDefault="00A52627"> <w:r> <w:t>The quick brown fox</w:t> </w:r> </w:p> <w:p w:rsidR="0076517B" w:rsidRDefault="00E50506"> <w:r> <w:pict> <v:shapetype id="_x0000_t12" coordsize="21600,21600" o:spt="12“ path="m10800,l8280,8259,,8259r6720,5146l4200,21600r6600,- 5019l17400,21600,14880,13405,21600,8259r-8280,xe"> <v:stroke joinstyle="miter"/> <v:path gradientshapeok="t" o:connecttype="custom" o:connectlocs="10800,0;0,8259;4200,21600;17400,21600;21600,8259" textboxrect="6720,8259,14880,15628"/> </v:shapetype> <v:shape id="_x0000_s1026" type="#_x0000_t12"style="width:47.25pt; height:44.9pt;mso-position-horizontal-relative:char;mso- position-vertical-relative:line" fillcolor="#c6d9f1 [671]“ strokecolor="#4f81bd [3204]"> <w10:wrap type="none"/> <w10:anchorlock/> </v:shape> </w:pict> </w:r> </w:p>

Legacy format

http://schemas.openxmlformats.org/wordprocessingml/2006/main


Graphical Objects in SpreadsheetMLGraphical Objects in SpreadsheetML

Worksheet Drawings<xdr:wsDr/>

Anchoring properties (3 types)Absolute <xdr:absoluteAnchor/>One cell <xdr:oneCellAnchor/>Two cell <xdr:twoCellAnchor/>

Drawing elements


Absolute AnchoringAbsolute Anchoring

Don’t move or size with cells

Position explicitly specified

Measured in EMUs

Extents explicitly specified

Measured in EMUs


One Cell AnchoringOne Cell Anchoring

Move with cells

Position locked to single cell

Position explicitly specified

Measured in EMUs

Extents explicitly specified

Measured in EMUs


Two Cell AnchoringTwo Cell Anchoring

Move and size with cells

Position locked to cell range

From position specifiedMeasured in EMUs

To position specifiedMeasured in EMUs

Sizing based on cell range


Example: Chart in a SpreadsheetExample: Chart in a Spreadsheet<xdr:wsDr xmlns:xdr="http://schemas.openxmlformats.org/drawingml/2006/spreadsheetDrawing" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"> <xdr:twoCellAnchor> <xdr:from> <xdr:col>3</xdr:col> <xdr:colOff>0</xdr:colOff> <xdr:row>1</xdr:row> <xdr:rowOff>0</xdr:rowOff> </xdr:from> <xdr:to> <xdr:col>14</xdr:col> <xdr:colOff>0</xdr:colOff> <xdr:row>20</xdr:row> <xdr:rowOff>0</xdr:rowOff> </xdr:to> <xdr:graphicFrame macro=""> <xdr:nvGraphicFramePr> <xdr:cNvPr id="2" name="Chart 1" /> <xdr:cNvGraphicFramePr /> </xdr:nvGraphicFramePr> <xdr:xfrm> <a:off x="0" y="0" /> <a:ext cx="0" cy="0" /> </xdr:xfrm> <a:graphic> <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/chart"> <c:chart xmlns:c="http://schemas.openxmlformats.org/drawingml/2006/chart" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" r:id="rd123232" /> </a:graphicData> </a:graphic> </xdr:graphicFrame> <xdr:clientData /> </xdr:twoCellAnchor></xdr:wsDr>

Two cell anchorBetween C1 and N20

Chart object withr:id="rd123232"

GraphicFrame to Hold chart object

DEMO


DIAGRAMSDIAGRAMS


Diagrams (Smart Art) – not coveredDiagrams (Smart Art) – not covered

Built using Graphic Frame wrapper

Diagrams built from four parts:DataColorsQuickStylesLayout


MULTIMEDIA CONTENTMULTIMEDIA CONTENT

File Audio and VideoFile Audio and Video

Represented as picture shapes<p:pic/>

Three relationshipsOne for hyperlinkOne for source bitsOne for picture

uses icon image

Configuration data stored in client data

Path to source bits


CHARTSCHARTS DEMO


ChartsCharts

Chart PartDefinition of the chart itselfIncludes a cache of data for chartIncludes formatting using DrawingML

Chart DrawingContains shapes & pictures drawn on chart

Data RelationshipExternal relationship to file, orInternal relationship to embedded spreadsheet ML package

Drawing ML FormattingUses spPr for all lines, fills, and effects


Chart ElementsChart Elements

Chart Title

1

2

3

0

1

2

3

4

5

6

7

a b c

Tho

usan

ds

Category Axis Title

Val

ue

Axi

s T

itle

Legend Entry 2

Legend Entry 1

Plot Area

Major Gridlines

Minor GridlinesDisplayUnit

Label

Legend

Chart Area

Series Lines

Category AxisValue Axis

Series

DataPoint

Data Label

0

500

1000

1500

2000

2500

3000

3500

Series1 1000 2000 3000

Series2 3000 1500 1000

a b c

Drop Lines

Error Bars

Up Bar

Down Bar

Data Table

Trendline

ab

c

S1

S20

500

1000

1500

2000

2500

3000

Series Axis

Back Wall

Floor

Side Wall


Example: 3D Chart PartExample: 3D Chart Part

<c:chartSpace> <c:pivotSource/> <c:chart> <c:title/> <c:view3D/> <c:plotArea> <c:pie3DChart> <c:ser> <c:cat/> <c:val/> </c:ser> <c:dLbls/> </c:pie3DChart> </c:plotArea> <c:legend/> </c:chart></c:chartSpace>

<c:chartSpace> <c:pivotSource/> <c:chart> <c:title/> <c:view3D/> <c:plotArea> <c:pie3DChart> <c:ser> <c:cat/> <c:val/> </c:ser> <c:dLbls/> </c:pie3DChart> </c:plotArea> <c:legend/> </c:chart></c:chartSpace>

Element Description

chartSpace Root node includes chart and print definition.

pivotSource If pivot table, identifies source table.

chart Root element for the chart.

view3D The chart is 3D, specifies the 3D view.

plotArea Defines a layout and contains an element that defines the type of chart.

pie3DChart This is a 3D pie chart.

ser Specifies a series with categories and values.

cat Category axis data (string cache).

val Values, numbers shown (num cache).

dLbls Settings for the data labels.

Legend Specifies the legend.
