Convert XAML Vector Graphic to PNG

Dirk Bahle

Rate me:

4.87/5 (11 votes)

23 Oct 2012CPOL12 min read

74.5K

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="-1.81954410672188" Canvas.Top="-4.55231146257217">
    <Canvas>
      <Path Data="M44.42857,38.57143A19.714285,6.5714288,0,1,1,5,38.57143A19.714285,6.5714288,0,1,1,44.42857,38.57143z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.53164557">
        <Path.Fill>
          <RadialGradientBrush Center="24.714285,38.57143" RadiusX="19.714285" RadiusY="19.714285" GradientOrigin="24.714285,38.57143" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1,0,0,0.333332985639572,0,25.7142906188965" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M39.774755,19.008621A8.6620579,8.6620579,0,1,1,22.45064,19.008621A8.6620579,8.6620579,0,1,1,39.774755,19.008621z" Stroke="#FF9C8C0A" StrokeThickness="0.480044037103653" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4">
        <Path.Fill>
          <RadialGradientBrush Center="29.288071,15.720984" RadiusX="8.9020796" RadiusY="8.9020796" GradientOrigin="29.288071,15.720984" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFCDE" Offset="0" />
              <GradientStop Color="#FFF6E76A" Offset="0.644859790802002" />
              <GradientStop Color="#FFFFB738" Offset="1" />
            </RadialGradientBrush.GradientStops>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="2.08314204216003,0,0,2.08314204216003,-40.5471496582031,-16.4922409057617" />
        </Path.RenderTransform>
      </Path>
      <Canvas>
        <Path Data="M38.375,19.1875A2.375,0.5625,0,1,1,33.625,19.1875A2.375,0.5625,0,1,1,38.375,19.1875z" Fill="#FF000000" Stroke="{x:Null}" StrokeThickness="1">
          <Path.RenderTransform>
            <MatrixTransform Matrix="1,0,0,1,-2.875,-0.625" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M38.375,19.1875A2.375,0.5625,0,1,1,33.625,19.1875A2.375,0.5625,0,1,1,38.375,19.1875z" Fill="#FF000000" Stroke="{x:Null}" StrokeThickness="1">
          <Path.RenderTransform>
            <MatrixTransform Matrix="1,0,0,1,-20.25,-0.625" />
          </Path.RenderTransform>
        </Path>
      </Canvas>
      <Path Data="M39.774755,19.008621A8.6620579,8.6620579,0,1,1,22.45064,19.008621A8.6620579,8.6620579,0,1,1,39.774755,19.008621z" Fill="{x:Null}" Stroke="#ADFFFFFF" StrokeThickness="0.505106270313263" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.67721519">
        <Path.RenderTransform>
          <MatrixTransform Matrix="1.9797819852829,0,0,1.9797819852829,-37.3312797546387,-14.5274600982666" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M30.657426,26.772382C29.168451,29.351362 27.427451,31.210005 24.328216,31.210005 21.317153,31.210005 19.112903,29.067863 17.737227,26.685122 18.995657,28.193572 20.83858,29.926356 24.197327,29.926356 28.210521,29.926356 28.912231,28.491487 30.657426,26.772382z" Fill="#5CFFFFFF" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.36000001" />
      <Path Data="F1M30.657426,26.423345C29.168451,29.002324 27.427451,30.860968 24.328216,30.860968 21.317153,30.860968 19.112903,28.718826 17.737227,26.336085 18.995657,27.844534 20.83858,29.577318 24.197327,29.577318 28.210521,29.577318 28.912231,28.14245 30.657426,26.423345z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <RadialGradientBrush Center="25.0527,39.5928" RadiusX="15.7572" RadiusY="15.7572" GradientOrigin="25.0527,39.5928" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF777777" Offset="0" />
              <GradientStop Color="#FF000000" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="0.61701899766922,0,0,0.61701899766922,9.05479621887207,7.96954298019409" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
      </Path>
      <Canvas>
        <Path Data="M21.036428,12.467883A9.5459423,9.5459423,0,1,1,1.9445438,12.467883A9.5459423,9.5459423,0,1,1,21.036428,12.467883z" Fill="{x:Null}" Stroke="#FF414141" StrokeThickness="0.999999463558197" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" />
        <Path Data="M21.036428,12.467883A9.5459423,9.5459423,0,1,1,1.9445438,12.467883A9.5459423,9.5459423,0,1,1,21.036428,12.467883z" Fill="{x:Null}" Stroke="#FF414141" StrokeThickness="0.999999463558197" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.RenderTransform>
            <MatrixTransform Matrix="1,0,0,1,24.5719604492188,0" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M21.036428,12.467883A9.5459423,9.5459423,0,0,1,13.214976,21.856767" Fill="{x:Null}" Stroke="#FF414141" StrokeThickness="1.59850871562958" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.RenderTransform>
            <MatrixTransform Matrix="-0.40174999833107,-0.47953200340271,0.47953200340271,-0.40174999833107,22.4052104949951,22.9004497528076" />
          </Path.RenderTransform>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,0.375,2.75" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="M25.897786,18.478292A8.3085051,8.3085051,0,1,1,9.280776,18.478292A8.3085051,8.3085051,0,1,1,25.897786,18.478292z" Stroke="#FF3063A3" StrokeThickness="0.968843996524811" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round">
        <Path.Fill>
          <RadialGradientBrush Center="18.240929,21.817987" RadiusX="8.3085051" RadiusY="8.3085051" GradientOrigin="18.240929,21.817987" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#35729FCF" Offset="0" />
              <GradientStop Color="#AC729FCF" Offset="1" />
            </RadialGradientBrush.GradientStops>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="1.03215801715851,0,0,1.03215801715851,18.2610702514648,-3.86459994316101" />
        </Path.RenderTransform>
      </Path>
      <Path Data="M36.254111,7.7185784C32.41098,7.7185784 29.298923,10.830635 29.298923,14.673768 29.298923,15.783682 29.609104,16.804907 30.071721,17.736342 30.99596,18.077005 31.977761,18.308785 33.019806,18.308785 37.573888,18.308785 41.210928,14.720961 41.491971,10.237329 40.214543,8.7277552 38.385018,7.7185784 36.254111,7.7185784z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.83422457">
        <Path.Fill>
          <RadialGradientBrush Center="15.414371,13.078408" RadiusX="6.65625" RadiusY="6.65625" GradientOrigin="15.414371,13.078408" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#3FFFFFFF" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1.9135719537735,-5.71710769410371E-24,-4.21718334613459E-24,1.66202294826508,4.36078786849976,-11.718279838562" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M25.897786,18.478292A8.3085051,8.3085051,0,1,1,9.280776,18.478292A8.3085051,8.3085051,0,1,1,25.897786,18.478292z" Stroke="#FF3063A3" StrokeThickness="0.968843996524811" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round">
        <Path.Fill>
          <RadialGradientBrush Center="18.240929,21.817987" RadiusX="8.3085051" RadiusY="8.3085051" GradientOrigin="18.240929,21.817987" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#35729FCF" Offset="0" />
              <GradientStop Color="#AC729FCF" Offset="1" />
            </RadialGradientBrush.GradientStops>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="1.03215801715851,0,0,1.03215801715851,-6.26925802230835,-3.86459994316101" />
        </Path.RenderTransform>
      </Path>
      <Path Data="M11.723783,7.7185784C7.8806502,7.7185784 4.7685932,10.830635 4.7685932,14.673768 4.7685932,15.783682 5.0787742,16.804907 5.5413912,17.736342 6.4656302,18.077005 7.4474312,18.308785 8.4894762,18.308785 13.04356,18.308785 16.6806,14.720961 16.961643,10.237329 15.684215,8.7277552 13.85469,7.7185784 11.723783,7.7185784z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.83422457">
        <Path.Fill>
          <RadialGradientBrush Center="15.414371,13.078408" RadiusX="6.65625" RadiusY="6.65625" GradientOrigin="15.414371,13.078408" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#3FFFFFFF" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1.9135719537735,-5.71710769410371E-24,-4.21718334613459E-24,1.66202294826508,-20.1695499420166,-11.718279838562" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
      </Path>
    </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