1. DrawingML Basics

2. Disclaimer
The 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, addresses, logos, people, places and events depicted herein are fictitious, and no association with any real company, organization, product, domain name, 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.

3. Tip of a Large Iceberg DrawingML is extremely complex, a huge topic.
In this module we’ll focus on the things you’re most likely to use, and leave other details for your own research later if desired.

4. Shapes, Pictures, Graphic Frames, charts

5. DrawingML General Concepts
5 Main types of objects
Shape
Group Shape
Connector
Picture
Graphic Frame
General-purpose container
Used for Charts, Diagrams, Tables
Most widely used elements are Property elements
Non-Visible Properties (nvPrs): union of common nvPrs and object specific nvPrs
Visible Properties: object specific
In this module, we’ll be covering the highlighted topics: shapes, pictures, graphic frame, charts, diagrams.
We’ve seen the Picture object in the company logo we inserted in lab 04. It’s possible to use complex DrawingML objects without getting bogged down in details, because it’s often just a matter of setting a few properties.
2. cNvPicPr and cNvPr and spPr, non-visual picture properties, non-visual drawing properties and shape properties. How do these relate?
The relation is this. Within the nvPicPr element you see both cNvPicPr and cNvPr.
The later (cNvPr) is used to denote general object properties that have nothing to do with the visual appearance of the object but aid the generating application in keeping track of the elements on the canvas.
The former (cNvPicPr) has to do with the same object properties that have nothing to do with visual appearance but these are specific to pictures only and thus this separate element is used to denote this.
Then there are the shape properties (spPr) which are visual properties meaning they effect the visual appearance of the shape, i.e. scaling on the shape, 3D, shadow, etc.
So all in all we have two categories (visual + non-visual) and within the non-visual both items are prefixed with a “c” denoting they are “canvas” properties to store canvas identification information for the generating app to use to keep track of everything.

6. DrawingML Coordinate System
Measured in EMU (English Metrical Unit)
914,400 EMU per inch
12,700 EMU in a point
360,000 EMU per cm
EMU = least common denominator; never lose anything in conversions between inches and meters.
Note not Cartesian coordinates – increasing Y values go down.

7. Shapes

8. Shapes Preset geometry Text geometry Custom geometry
spTree
nvGrpSpPr
grpSpPr sp
nvSpPr
spPr
xfrm
geo
fillProperties
lineProperties
effectProperties
scene3D
sp3D
bwMode
style
txBody
Preset geometry
Pick the preset shape
Specify the adjust values for the shape
Text geometry
Pick the preset text shape
Specify the adjust values for the text shape
Custom geometry
Not covered in this course
Sample Text
Point out the non-visible properties (nvSpPr) and the visible (spPr) properties

9. Shape Line and Fill Properties
Dash Line and Solid Fill
<a:ln>
<a:solidFill>
<a:srgbClr val="4F81BD" />
</a:solidFill>
<a:prstDash val="sysDash" /> </a:ln>
Line
Fill
Dashed Line
BLIP (Binary Large Image or Pictures) Fill
<a:blipFill>
<a:blip r:embed="rId2" />
<a:stretch>
<a:fillRect />
</a:stretch>
</a:blipFill>
Indicates relationship id
to image data
Gradient Fill
<a:gradFill flip="none" rotWithShape="1">
<a:gsLst>
<a:gs pos="0">
<a:srgbClr val="DDEBCF" />
</a:gs>
<a:gs pos="50000">
<a:srgbClr val="9CB86E" />
...
</a:gsLst>
<a:lin ang=" " scaled="0" />
<a:tileRect />
</a:gradFill>
As we’ll see later, there are differences between a rectangular shape with a blip fill and an actual picture object.
Gradient stop and color
DEMO

10. DrawingML Text Text is largely modeled after Word’s design
Similar structures
Similar naming conventions
Different schemas
We can apply all graphic effects to text
Some limited to runs
Some limited to paragraph
<p:spPr>
...
<a:effectLst>
<a:reflection blurRad="6350" stA="50000"
endA="300" endPos="90000" dir=" “
sy=" " algn="bl" />
</a:effectLst>
</p:spPr>
<p:txBody>
<a:bodyPr wrap="none" rtlCol="0">
<a:spAutoFit />
</a:bodyPr>
<a:lstStyle />
<a:p>
<a:r>
<a:rPr b="1”>
<a:solidFill>
<a:srgbClr val="FF0000" />
</a:solidFill>
</a:rPr>
<a:t>Reflective Text</a:t>
</a:r>
</a:p>
</p:txBody>
Effect
Text

11. Before 3-D Adjust Material types Apply 3-D Bevels 3-D Scene Definition
<a:scene3d>
<a:camera prst="isometricRightUp" />
<a:lightRig rig="threePt" dir="t" />
</a:scene3d>
<a:sp3d extrusionH="152400" />
3-D Scene Definition
The 3D scene is a combination of various other 3D effects.
Apply 3-D Scene Above
Before
DEMO

12. Pictures

13. Pictures vs. Shapes Two overlaid fills allowed Borders grow outward
Lock aspect ratio flag
Cannot have text attached
Can have shape properties
Picture specific UI enabled
Single fill allowed
Borders grow in/outward
Must be done by app
Can have text attached
Can have shape properties
Shape specific UI enabled

14. Defining a Picture Define a Picture: <p:pic/>
<p:nvPicPr>
<p:cNvPr id="4" name="lake.jpeg" />
<p:cNvPicPr>
<a:picLocks noChangeAspect="1" />
</p:cNvPicPr>
<p:nvPr />
</p:nvPicPr>
<p:blipFill>
<a:blip r:embed="rId2" />
<a:stretch>
<a:fillRect />
</a:stretch>
</p:blipFill>
<p:spPr>
<a:xfrm>
<a:off x="762000" y="571500" />
<a:ext cx=" " cy=" " />
</a:xfrm>
<a:prstGeom prst="rect">
<a:avLst />
</a:prstGeom>
</p:spPr>
</p:pic>
Define a Picture: <p:pic/>
Source image rel. id <a:blip r:embed=“rId2”/>
Acts similar to a shape <p:spPr/>
Non-Visual picture properties convey picture specific save properties <p:nvPicPr/>
Similar for Audio & Video
Demonstrate changing shape of this picture – Format tab, Picture Shape.
Non-visual properties include original filename.

15. Picture Properties
Multiple Fills Allows for two fills to be applied such as a picture and a color fill
Picture Borders Because of the nature of pictures the borders grow outwards rather than in/outwards
Lock Aspect Ratio Resizing a picture can be done with or without the aspect ratio locked 1. 2. 3.

16. Graphic OBJECTs and Charts
DEMO: show swapping the line-chart/bar-chart pieces in a worksheet. Also show the specific differences with diffopc+.
Graphic OBJECTs and Charts

17. Graphic Objects Graphic element represents a single graphical object
GraphicData element and Uri attribute
Specifies the namespace for the embedded content
Tells the consumer how to interpret the graphicData
Ability to render is application specific
Office supports a set of specific URI values: …
Graphic
Object
See example in Lab 04 for a demo.
URI means
chart
follows
<graphic>
<a:graphicData uri="
<c:chart xmlns:c="
xmlns:r="
r:id="rd123232" />
</a:graphicData>
</graphic>
DEMO

18. Charts Overview Visualization of information
Can be reused across applications / formats
Rich chart types
11 types
2-dimensional and 3-dimensional
DEMO
ChartSwapping

19. Elements of a Chart Graphic Object definition Chart XML Part
References separate XML chart part
Defined in DrawingML namespace
Chart XML Part
Visual representation of data.
Includes a cache of data for chart.
Includes formatting using DrawingML.
Data Relationship
External relationship to file, or
Internal relationship to embedded spreadsheet
Spreadsheets point to their own data.
Chart Drawing
Contains shapes and pictures drawn on chart
Graphic Object 1
rId n
XML Chart Part n
0,1
rId
rId 1 1
Data Source
Chart Drawing

20. Main Elements of the Chart Part XML
Namespace
"
Element
Description
<chartSpace/>
Root node includes chart.
<chart/>
Root element for the chart.
<view3D/>
If the chart is 3D, specifies the 3D view.
<plotArea/>
Defines a layout and contains an element that defines the type of chart.
<*Chart/>
The type of chart (Bar, Pie, etc.)
<ser/>
Defines a series of data in the chart
<cat/>
Category (axis) cache data (strings)
<val/>
Values cache data (numbers).
<legend/>
Specifies the legend.
<catAx/> <valAx/>
Bar Chart specific values
<chartSpace>
<chart>
<view3D/>
<plotArea>
<layOut/>
<barChart>
<ser>
<cat/>
<val/>
</ser>
</barChart>
<catAx/>
<valAx/>
</plotArea>
<legend/>
</chart>
</chartSpace>

21. Chart Data Cache Structure
Chart XML fragment
<barChart>
<!-- pears -->
<ser>
<cat/>
<val/>
</ser>
<!-- apples -->
<!-- lemons -->
</barChart>
Series <ser>
Pears
Apples
Lemons
East
4.3
2.4 2
West
2.5
4.4
North
3.5
1.8 3
South
4.5
2.8 5
Categories
<cat>
Values
<val>
Your code writes this XML to set chart data!

22. Specifying Series Data Points
Strings or numbers
Literals or references
Point values
String Reference
Number Reference
<c:strRef>
<!-- ref formula -->
<c:f>Sheet1!$A$2:$A$5</c:f>
<!-- data cache -->
<c:strCache>
<c:ptCount val="4" />
<c:pt idx="0">
<c:v>East</c:v>
</c:pt>
<c:pt idx="1">
<c:v>West</c:v>
<c:pt idx="2">
<c:v>North</c:v>
<c:pt idx="3">
<c:v>South</c:v>
</c:strCache>
</c:strRef>
<c:numRef>
<!-- ref formula -->
<c:f>Sheet1!$B$2:$B$5</c:f>
<!-- data cache -->
<c:numCache>
<c:ptCount val="4" />
<c:pt idx="0">
<c:v>4.3</c:v>
</c:pt>
<c:pt idx="1">
<c:v>2.5</c:v>
<c:pt idx="2">
<c:v>3.5</c:v>
<c:pt idx="3">
<c:v>4.5</c:v>
</c:numCache>
</c:numRef>
String Literal
<c:strLit>
<c:ptCount val="4" />
<c:pt idx="0">
<c:v>East</c:v>
</c:pt>
<c:pt idx="1">
<c:v>West</c:v>
<c:pt idx="2">
<c:v>North</c:v>
<c:pt idx="3">
<c:v>South</c:v>
</c:strLit>

23. Inserting Drawing Objects into Documents

24. Inserting DrawingML Objects Overview
Drawing Types Allowed
Charts
Diagrams
Locked Canvases
Viewed but not edited by host
Pictures
The core DrawingML is the same in all hosts
Location varies by host
Wordprocessing: main body
Spreadsheet: drawing part
Presentation: slide
Packaging (“shim”) varies
DEMO

25. Drawings in WordprocessingML
<w:p>
<w:r>
<w:drawing>
<wp:inline distT="0" distB="0" distL="0" distR="0">
<wp:extent cx=" " cy=" " />
<wp:effectExtent l="57150" t="19050" r="38100" b="5080" />
<wp:docPr id="1" name="Chart 1" />
<wp:cNvGraphicFramePr />
<a:graphic xmlns:a=
...
</a:graphic>
</wp:inline>
</w:drawing>
</w:r>
</w:p>
Shim defines
anchor and
flow
Graphic
object

26. Drawings in SpreadsheetML
<xdr:wsDr
xmlns:xdr="
xmlns:a="
<xdr:twoCellAnchor>
<xdr:from>
...
</xdr:from>
<xdr:to>
</xdr:to>
<xdr:graphicFrame>
<xdr:nvGraphicFramePr>
<xdr:cNvPr id="2" name="MySalesChart" />
<xdr:cNvGraphicFramePr />
</xdr:nvGraphicFramePr>
<xdr:xfrm>
<a:off x="0" y="0" />
<a:ext cx="0" cy="0" />
</xdr:xfrm>
<a:graphic>
</a:graphic>
</xdr:graphicFrame>
<xdr:clientData />
</xdr:twoCellAnchor>
</xdr:wsDr>
Shim defines
anchor and
non-visual
properties
Graphic
object

27. Drawings in PresentationML
<p:spTree>
<p:nvGrpSpPr>
...
</p:nvGrpSpPr>
<p:grpSpPr>
</p:grpSpPr>
<p:graphicFrame>
<p:nvGraphicFramePr>
<p:cNvPr id="4" name="slide3Chart" />
<p:cNvGraphicFramePr />
<p:nvPr />
</p:nvGraphicFramePr>
<p:xfrm>
<a:off x="762000" y=" " />
</p:xfrm>
<a:graphic>
</a:graphic>
</p:graphicFrame>
</p:spTree>
No shim. The shape is in the tree
Graphic
object

28. Inserting Drawings in WordprocessingML Documents

29. Object Positioning (Anchoring)
Two ways to anchor in WordprocessingML:
In line with text (<inline>) - The object is displayed within the regular text stream (modifying line height, etc. to accommodate it)
Floating (<anchor>) – 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
<w:p>
<w:r>
<w:drawing>
<wp:inline distT="0" distB="0" distL="0" distR="0">
...
<wp:cNvGraphicFramePr />
<a:graphic xmlns:a="
<a:graphicData
</a:graphicData>
</a:graphic>
</wp:inline>
</w:drawing>

30. WordprocessingML Inline Objects
The most basic type of DrawingML object placement is in line with text
The object is displayed like a large character glyph

31. WordprocessingML Floating Objects
Floating objects are positioned on the page independent of text
They can be positioned:
Absolutely (e.g. 1” inside the top margin)
Relatively (e.g. centered within the page margins)
9525 EMUs inside the column
<wp:positionH relativeFrom="column">
<wp:posOffset>9525</wp:posOffset>
</wp:positionH>
<wp:positionV relativeFrom="paragraph">
<wp:posOffset>635</wp:posOffset>
</wp:positionV>
635 EMUs below the paragraph

32. Floating Object Text Wrapping in WordML
Five ways to specify how text flows around the object
Element
Example
Description
wrapNone
The object is positioned on the document and text is not displaced around it
wrapSquare
The object is positioned on the document and an implied rectangle determines the wrapping extents
wrapTight
A 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
DEMO
WP Anchoring

33. Shapes created in WordprocessingML use VML
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<w:document xmlns:w=
xmlns:v="urn:schemas-microsoft-com:vml"
...>
<w:body>
<w:p>
<w:r>
<w:pict>
<v:shapetype id="_x0000_t12" coordsize="21600,21600" o:spt="12“ path="m10800,l8280,8259,,8259r6720,5146l4200,21600r6600, l17400,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>
VML
Namespace
VML Elements

34. Inserting DrawingML into Spreadsheet Documents

35. Graphical Objects in SpreadsheetML
Worksheet Drawings stored in Drawing Part
Linked by Relationship ID.
Root element: <xdr:wsDr/>
Anchoring properties (3 types)
Absolute: <xdr:absoluteAnchor/>
One cell: <xdr:oneCellAnchor/>
Two cell: <xdr:twoCellAnchor/>
Drawing elements
Sheet 1
rId 1
Drawing Part
wsDr = SML shim, like drawing tag is WML shim
DEMO
Charts
Shapes

36. Absolute Anchoring Don’t move or size with cells
Position explicitly specified
Measured in EMUs
Extents explicitly specified
<xdr:absoluteAnchor>
<xdr:pos x=“ " y=“ " />
<xdr:ext cx=“ " cy=“ "/>
Anchor extents override shape transform extents

37. One Cell Anchoring Move with cells Position locked to single cell
<xdr:oneCellAnchor>
<xdr:from>
<xdr:col>3</xdr:col>
<xdr:colOff>447675</xdr:colOff>
<xdr:row>8</xdr:row>
<xdr:rowOff>28575</xdr:rowOff>
</xdr:from>
<xdr:ext cx=“ " cy=“ "/>
...
Move with cells
Position locked to single cell
Position explicitly specified
Measured in EMUs
Extents explicitly specified
Anchored to a specific cell, moves with the cell.

38. Two Cell Anchoring Move and size with cells
<xdr:twoCellAnchor>
<xdr:from>
<xdr:col>3</xdr:col>
<xdr:colOff>447675</xdr:colOff>
<xdr:row>8</xdr:row>
<xdr:rowOff>28575</xdr:rowOff>
</xdr:from>
<xdr:to>
<xdr:col>5</xdr:col>
<xdr:colOff>466725</xdr:colOff>
<xdr:row>14</xdr:row>
<xdr:rowOff>9525</xdr:rowOff>
</xdr:to>
Move and size with cells
Position locked to cell range
From position specified
Measured in EMUs
To position specified
Sizing based on cell range
Size and position locked to cell range.
This is what we do in lab 07 (coming up!).
Pull up sample doc, go to Format/Size/Properties on the chart. Show behavior.
DEMO