Convert XAML Vector Graphic to PNG

Dirk Bahle

Rate me:

4.87/5 (11 votes)

23 Oct 2012CPOL12 min read

74.4K

6.8K

An introduction to the usage of vector graphics as a source of bitmap graphics.

OpenIconLibrary.zip
TangoProject.zip
XAMLtoPNG.zip
- XAMLtoPNG.sln
- XAMLtoPNG
  - Params.cs
  - Program.cs
  - Properties
    - AssemblyInfo.cs
  - XAMLtoPNG.csproj
  - XAMLtoPNG.csproj.user
  - XamlToPngConverter.cs
XAMLToPNG_Sample.zip
- 00_Go up
  - 980b4f92-db2c-46f8-83ca-042b70ced31a.png
  - go-up.Canvas.backup
  - go-up.Canvas.xaml
- 00_letter.Canvas.xaml
- 01_mail forward
  - bc241dff-27e2-42a4-b252-35a170dc68d6.png
  - ForwardArrow.Canvas.xaml
  - mail-forward.Canvas.xaml
  - UpwardArrow.Canvas.xaml
- 01_protect.Canvas.xaml
- 02_letter-protect.Canvas.xaml
- 02_tango network wireless encrypted
  - 9d7bd680-e0c7-4038-ab20-cb7bf590f0ef.png
  - network-wireless-encrypted.Canvas.xaml
- 03_letter-protect.Canvas.xaml
- Convert.bat

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Canvas.Left="-0.292897754458863" Canvas.Top="-4.99965414425685">
    <Canvas />
    <Canvas>
      <Canvas>
        <Rectangle Stroke="{x:Null}" Width="1339.6335" Height="478.35718" Opacity="0.40206185" Canvas.Left="-1559.2523" Canvas.Top="-150.69685">
          <Rectangle.Fill>
            <LinearGradientBrush StartPoint="507.316899099553,4.42934847058041E-05" EndPoint="507.316899099553,478.357303090243" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#00000000" Offset="0" />
                <GradientStop Color="#FF000000" Offset="0.5" />
                <GradientStop Color="#00000000" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Fill>
        </Rectangle>
        <Path Data="F1M-219.61876,-150.68038C-219.61876,-150.68038 -219.61876,327.65041 -219.61876,327.65041 -76.744594,328.55086 125.78146,220.48075 125.78138,88.454235 125.78138,-43.572302 -33.655436,-150.68036 -219.61876,-150.68038z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.40206185">
          <Path.Fill>
            <RadialGradientBrush Center="605.71429,486.64789" RadiusX="117.14286" RadiusY="117.14286" GradientOrigin="605.71429,486.64789" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="2.77438902854919,0,0,1.9697060585022,-1891.63305664063,-872.885375976563" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="F1M-1559.2523,-150.68038C-1559.2523,-150.68038 -1559.2523,327.65041 -1559.2523,327.65041 -1702.1265,328.55086 -1904.6525,220.48075 -1904.6525,88.454235 -1904.6525,-43.572302 -1745.2157,-150.68036 -1559.2523,-150.68038z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.40206185">
          <Path.Fill>
            <RadialGradientBrush Center="605.71429,486.64789" RadiusX="117.14286" RadiusY="117.14286" GradientOrigin="605.71429,486.64789" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="-2.77438902854919,0,0,1.9697060585022,112.762298583984,-872.885375976563" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="0.0226238295435905,0,0,0.0208675786852837,43.383430480957,36.3696212768555" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="F1M4.6200285,38.651015C4.6618365,39.07147,5.1174141,39.491924,5.5311838,39.491924L36.667346,39.491924C37.081116,39.491924,37.453078,39.07147,37.41127,38.651015L34.714653,11.531728C34.672845,11.111274,34.217267,10.69082,33.803498,10.69082L21.080082,10.69082C20.489536,10.69082,19.870999,10.311268,19.677221,9.7304849L18.574219,6.4246085C18.404967,5.9173308,18.027069,5.6888138,17.259746,5.6888138L2.3224188,5.6888138C1.9086492,5.6888138,1.5366876,6.109268,1.5784956,6.529722L4.6200285,38.651015z" Stroke="#FF5A5A5A" StrokeThickness="0.994871079921722" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4">
        <Path.Fill>
          <RadialGradientBrush Center="26.106777,38.195114" RadiusX="32.259769" RadiusY="32.259769" GradientOrigin="26.106777,38.195114" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFA0A0A0" Offset="0" />
              <GradientStop Color="#FFA8A8A8" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1.01563501358032,0,0.103105001151562,1.00051200389862,-6.73857061188159E-18,-0.0836945772171021" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="1.00448596477509,0,0,1.00582504272461,-0.0823444947600365,-0.221964001655579" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M5.3301525,37.533487L35.317907,37.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000023841858" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M5.3301525,35.533487L35.317907,35.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000023841858" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M6.1717518,38.418674C6.2031078,38.729001,6.017127,38.935886,5.6963478,38.832443L5.6963478,38.832443C5.3755686,38.729001,5.1477798,38.522116,5.1164238,38.211789L2.0868572,6.8445942C2.0555012,6.534267,2.2434512,6.3468711,2.5537784,6.3468711L17.303531,6.2554251C17.834815,6.2521313 18.04296,6.308731 18.18333,6.7726371 18.18333,6.7726371 19.268704,9.885435 19.429564,10.470742L17.873968,7.5537061C17.608788,7.0564434,17.275224,7.1399365,16.901178,7.1399365L3.7717775,7.1399365C3.4614503,7.1399365,3.2754695,7.3468213,3.3068255,7.6571485L6.2856462,38.522116 6.1717518,38.418674z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="8.99581715166919,12.8022914894525" EndPoint="15.6473321411249,35.9786614044167" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#B3FFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="1.00887203216553,0,0,1.01214396953583,-0.101943001151085,-0.331259995698929" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M3.3386019,17.533487L34.488461,17.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000035762787" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M2.7573333,11.533487L33.496214,11.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000011920929" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Canvas>
        <Path Data="F1M41.785743,9.0363862C41.795369,8.5618034,41.800932,8.3118806,41.36235,8.312183L28.80653,8.3208402C28.50653,8.3208402 28.481916,8.1776341 28.80653,8.3208402 29.131144,8.4640463 30.053628,8.9791114 30.989227,9.0218349 30.989227,9.0218349 41.785704,9.0382983 41.785743,9.0363862z" Fill="#94FFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1.03450298309326,0,0.104528002440929,1.03522098064423,-9.92205810546875,2.39518308639526" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="F1M5.1594716,33.533487L35.147226,33.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000023841858" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M4.8658086,31.533487L34.974533,31.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000035762787" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M4.6336367,29.533487L34.802847,29.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000035762787" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M4.4629557,27.533487L34.632166,27.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000035762787" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M4.2556718,25.533487L34.460793,25.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M4.0235198,23.533487L34.289101,23.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000023841858" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M3.8528389,21.533487L34.11842,21.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000023841858" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M3.6514189,19.533487L33.947215,19.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000011920929" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M34.375,14.125L37,38.75 6,38.875C6,38.875 4.125,14.125 4.125,14.125 4.125,14.125 34.5,14.125 34.375,14.125z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.39204545">
        <Path.Fill>
          <LinearGradientBrush StartPoint="22.25,37.625" EndPoint="19.75,14.875" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="F1M5.7785654,39.065997C5.8820074,39.277466,6.0888914,39.488925,6.3992173,39.488925L39.70767,39.488925C39.914562,39.488925 40.228834,39.36262 40.415844,39.224574 40.946246,38.833039 41.070704,38.612189 41.308626,38.251107 43.756752,34.535647 47.113767,18.974214 47.113767,18.974214 47.217209,18.762754 47.010326,18.551294 46.7,18.551294L11.776358,18.551294C11.466032,18.551294,10.120393,34.658624,6.9133592,37.838317L5.6751235,39.065997 5.7785654,39.065997z" Stroke="#FF3465A4" StrokeThickness="1.00416672229767" StrokeLineJoin="Round" StrokeMiterLimit="4">
        <Path.Fill>
          <LinearGradientBrush StartPoint="74.2329141713867,36.4830725982014" EndPoint="74.1222691713867,31.436365109605" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF6194CB" Offset="0" />
              <GradientStop Color="#FF729FCF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.988772988319397,0,0,1.00297904014587,-0.111406996846199,-0.106563001871109" />
        </Path.RenderTransform>
      </Path>
      <Path Data="M13.134476,20.138641C12.361729,25.129398 11.633175,29.147884 10.418486,33.652505 12.804971,32.945398 17.534602,30.448 27.534602,30.448 37.534602,30.448 44.258175,21.199301 45.186253,20.094447L13.134476,20.138641z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="26.3264187607716,20.0730006174544" EndPoint="38.32641816835,29.6980010766521" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#22FFFFFF" Offset="0" />
              <GradientStop Color="#0DFFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.988772988319397,0,0,1.00297904014587,-0.111406996846199,-0.106563001871109" />
        </Path.RenderTransform>
      </Path>
      <Path Data="M45.820083,19.6875L12.661612,19.6875C12.661612,19.6875 10.513864,35.707107 7.9393398,37.928078 16.060417,37.928078 39.510511,37.879442 39.53033,37.879442 41.281989,37.879442 44.437971,25.243248 45.820083,19.6875z" Fill="{x:Null}" StrokeThickness="1.00416696071625" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeMiterLimit="4" Opacity="0.52272728">
        <Path.Stroke>
          <LinearGradientBrush StartPoint="27.1742669867482,20.3624969643859" EndPoint="27.6160920715938,36.5187091950018" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.988772988319397,0,0,1.00297904014587,-0.111406996846199,-0.106563001871109" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M3.1628954,15.533487L33.993452,15.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="0.999999940395355" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M2.9642313,13.533487L33.990735,13.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000035762787" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M2.3052333,7.533487L17.088967,7.533487" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="0.999999821186066" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
      <Path Data="F1M2.5242572,9.5334871L17.805073,9.5334871" Fill="#1D729FCF" Stroke="#1D000000" StrokeThickness="1.00000023841858" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.11363633" />
    </Canvas>
    <Canvas />
  </Canvas>
</Canvas>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Dirk Bahle

Germany

The Windows Presentation Foundation (WPF) and C# are among my favorites and so I developed Edi

and a few other projects on GitHub. I am normally an algorithms and structure type but WPF has such interesting UI sides that I cannot help myself but get into it.

https://de.linkedin.com/in/dirkbahle

Convert XAML Vector Graphic to PNG

License

Comments and Discussions