Office Open XML Developer Workshop DrawingML Basics.
Transcript of Office Open XML Developer Workshop DrawingML Basics.
Office Open XML Developer Workshop
DrawingML BasicsDrawingML Basics
Office Open XML Developer Workshop
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.
Office Open XML Developer Workshop
Tip of a Large IcebergTip of a Large Iceberg
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
SHAPESSHAPES
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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 ¶
Office Open XML Developer Workshop
3-D3-D
3-D Scene Definition
Before Apply 3-D Scene Above
Apply 3-D Bevels
Adjust Material
types
Office Open XML Developer Workshop
PICTURESPICTURES
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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/>
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
INSERTING DRAWINGML INTO DOCUMENTSINSERTING DRAWINGML INTO DOCUMENTS
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
WordprocessingML – document bodyWordprocessingML – document body
Shim defines graphic frame and locked canvas
Shape definition uses DrawingMLnamespace for all elements
Office Open XML Developer Workshop
SpreadsheetML – drawing partSpreadsheetML – drawing part
Shim defines anchorposition and type
Shape definition usesspreadsheetDrawing namespacefor non-visual properties
Office Open XML Developer Workshop
PresentationML – slide partPresentationML – slide part
No shim – the shape is in the shape tree
Shape definition is in DrawingML
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
Inline ObjectsInline Objects
The most basic type of DrawingML object placement is in line with textThe object is displayed like a large character glyph
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
Absolute AnchoringAbsolute Anchoring
Don’t move or size with cells
Position explicitly specified
Measured in EMUs
Extents explicitly specified
Measured in EMUs
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
DIAGRAMSDIAGRAMS
Office Open XML Developer Workshop
Diagrams (Smart Art) – not coveredDiagrams (Smart Art) – not covered
Built using Graphic Frame wrapper
Diagrams built from four parts:DataColorsQuickStylesLayout
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
CHARTSCHARTS DEMO
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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
Office Open XML Developer Workshop
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.
Office Open XML Developer Workshop