This post is migrated from previous hosting provider. There are still some issues with old posts. Please make a comment on this post with any issues.

Dissecting XPS, part 4 - the content markup

Tags: XML, WinFX, Windows Vista, XPS

This part in the Dissecting XPS series will take off were we ended part 3, by looking into how the actual content is marked up.

The content is contained in the FixedPage element and it is marked up by three different elements

  • the Path element which specified a geometry filled with a brush
  • the Glyphs element which represents text
  • the Canvas element which groups elements together

The Path element

A triangle using the Path element The Path element is used to specify a geometry shape and optionally fill it using a brush. This XPS markup code creates the triangle shown on the right.

   1:  Path Stroke="#000000" StrokeThickness="10"> 
   2:   Path.Fill>
   3:    LinearGradientBrush MappingMode="Absolute"  StartPoint="0,0"            EndPoint="0,8" SpreadMethod="Reflect"> 
   4:     LinearGradientBrush.GradientStops> 
   5:       GradientStop Color="#333311" Offset="0.0" /> 
   6:       GradientStop Color="#3333FF" Offset="1.0" /> 
   7:      LinearGradientBrush.GradientStops> 
   8:     LinearGradientBrush> 
   9:   Path.Fill>
  10:   Path.Data> 
  11:    PathGeometry> 
  12:     PathFigure StartPoint="50,50" IsClosed="true"> 
  13:      PolyLineSegment Points="250,50 150,250" /> 
  14:     </PathFigure> 
  15:    </PathGeometry> 
  16:   Path.Data> 
  17:  Path> 

The Path element syntax contains several advanced features and allows you to create advanced vector graphics including lines, curves, arcs, beziers etc. Read more in the XPS Specification [1] or at Feng Yuans[5] blog (here an example of radial gradient brushes). If you are familiar with the XAML elements then this will be a piece of cake [6].

The Glyph element

Hello World using Glyph The Glyph element is used to draw text that has the same font and style. You specify the font, size and the location of the Unicode text to write:

   1:  Glyphs Fill="#000000" FontRenderingEmSize="48"  
   2:  OriginX="100" 
   3:  OriginY="100"  
   4:  UnicodeString="Hello World!"  
   5:  FontUri="../../../Resources/Fonts/arial.ttf" />

The sample above also requires that we have a Font part (the .TTF file), a relationship to the Font part in the FixedPage and that the TTF Content Type is present in the [Content_Types].xml file.

As the Path element the Glyph element is very powerful and allows you to do really advanced typing in any kind of written language. You may also apply any kind of brush to fill the glyphs.

The Canvas element

The Canvas element groups other elements (Paths, Glyphs or other Canvas elements) together to either group the elements into units or to apply properties to each child or ancestor of the unit, for example opacity.

By now you should be able to create your own XPS file using just Notepad and a ZIP program. Up next in the series is some more information on the XPS document properties.

Further reading and references

[1] XPS Specification[2] Dissecting XPS - part 1 - The basics[3] Dissecting XPS - part 2 - Inside the XPS document[4] Dissecting XPS - part 3 - the Fixed Document[5] The blog of Feng Yuan - master of XPS [6] WPF/XAML Graphics

Side note: Windows Vista uses XPS as it's internal printer spooling.

3 Comments

Add a Comment

AWS Tracker

About Wictor...

Wictor Wilén is a Director and SharePoint Architect working at Connecta AB. Wictor has achieved the Microsoft Certified Architect (MCA) - SharePoint 2010, Microsoft Certified Solutions Master (MCSM) - SharePoint  and Microsoft Certified Master (MCM) - SharePoint 2010 certifications. He has also been awarded Microsoft Most Valuable Professional (MVP) for four consecutive years.

And a word from our sponsors...

SharePoint 2010 Web Parts in Action