Convert XAML Vector Graphic to PNG

Dirk Bahle

Rate me:

4.87/5 (11 votes)

23 Oct 2012CPOL12 min read

74.3K

6.8K

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

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
TangoProject.zip
OpenIconLibrary.zip
XAMLtoPNG.zip
- XAMLtoPNG.sln
- XAMLtoPNG
  - Params.cs
  - Program.cs
  - Properties
    - AssemblyInfo.cs
  - XAMLtoPNG.csproj
  - XAMLtoPNG.csproj.user
  - XamlToPngConverter.cs

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Canvas.Left="-5.99282015664448" Canvas.Top="-5.96534776687622">
    <Canvas>
      <Path Data="F1M41,40A17.142857,8.5714283,0,1,1,6.7142868,40A17.142857,8.5714283,0,1,1,41,40z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <RadialGradientBrush Center="23.857143,40" RadiusX="17.142857" RadiusY="17.142857" GradientOrigin="23.857143,40" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1,0,0,0.5,-7.25903085335494E-15,20" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="1.05875194072723,0,0,1.15125894546509,-1.1159440279007,-10.276909828186" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M23.937499,7.191965C16.078072,7.191965 9.6874997,9.9944659 9.6874987,13.441966 9.6874987,13.689351 9.6874987,36.309326 9.6874987,36.566966 9.6874987,40.014467 16.078071,42.816966 23.937499,42.816966 31.796927,42.816966 38.441965,40.014466 38.441963,36.566966 38.441963,36.362905 38.441963,13.646027 38.441963,13.441966 38.441963,9.9944649 31.796926,7.191965 23.937499,7.191965z" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="9.30305175714306,25.0044660568237" EndPoint="38.8264108571431,25.0044660568237" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF7E807A" Offset="0" />
              <GradientStop Color="#FFBABBB8" Offset="0.25" />
              <GradientStop Color="#FFA5A6A3" Offset="0.5" />
              <GradientStop Color="#FF333432" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
        <Path.Stroke>
          <LinearGradientBrush StartPoint="25.0647308571431,20.1428590568237" EndPoint="25.2075868571431,23.7142880568237" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF7D4B01" Offset="0" />
              <GradientStop Color="#FF535353" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
      </Path>
      <Path Data="F1M23.941292,7.4484874C16.316147,7.4484874 10.116071,10.16745 10.11607,13.512182 10.11607,13.752193 10.11607,19.820066 10.11607,20.070026 10.11607,23.41476 16.316146,25.717924 23.941292,25.717924 31.566438,25.717924 38.013394,23.41476 38.013392,20.070026 38.013392,19.872048 38.013392,13.71016 38.013392,13.512182 38.013392,10.167449 31.566437,7.4484874 23.941292,7.4484874z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="10.1160698571431,15.7974920568237" EndPoint="38.0133918571431,15.7974920568237" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFF79403" Offset="0" />
              <GradientStop Color="#FFFDB343" Offset="0.18691588938236237" />
              <GradientStop Color="#FFFDB74F" Offset="0.43008121848106384" />
              <GradientStop Color="#FF8F5601" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="F1M23.946122,7.9712859C16.618364,7.9712859 10.660096,10.584206 10.660095,13.798491 10.660095,14.029142 10.660095,35.684551 10.660095,35.924762 10.660095,39.139049 16.618363,41.751967 23.946122,41.751967 31.27388,41.751967 37.469399,39.139048 37.469397,35.924762 37.469397,35.734506 37.469397,13.988749 37.469397,13.798491 37.469397,10.584205 31.273879,7.9712859 23.946122,7.9712859z" Fill="{x:Null}" StrokeThickness="1" Opacity="0.54430377">
        <Path.Stroke>
          <LinearGradientBrush StartPoint="17.1600938571431,12.2901980568237" EndPoint="37.9693968571431,54.8616280568237" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
      </Path>
      <Path Data="F1M36.857142,14.071428A12.857142,5.5,0,1,1,11.142858,14.071428A12.857142,5.5,0,1,1,36.857142,14.071428z" Fill="#FFFED496" StrokeThickness="1.00492703914642">
        <Path.Stroke>
          <LinearGradientBrush StartPoint="24,16.525082" EndPoint="24,13.284962" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#FFE7E6AE" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
        <Path.RenderTransform>
          <MatrixTransform Matrix="1.03729104995728,0,0,0.954618990421295,-0.894979000091553,-0.0757205560803413" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M41,40A17.142857,8.5714283,0,1,1,6.7142868,40A17.142857,8.5714283,0,1,1,41,40z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.65822785">
        <Path.Fill>
          <RadialGradientBrush Center="23.857143,40" RadiusX="17.142857" RadiusY="17.142857" GradientOrigin="23.857143,40" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1,0,0,0.5,-4.40364805980985E-15,20" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.363429993391037,0,0,0.363429993391037,15.4724702835083,-4.118577003479" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M23.889443,6.465348C21.886649,6.465348 19.258159,7.179501 19.258159,8.058017 19.258159,8.121057 19.258159,10.622022 19.258159,10.687676 19.258159,11.566192 21.886649,12.280345 23.889443,12.280345 25.892238,12.280345 28.299859,11.566192 28.299858,10.687676 28.299858,10.635676 28.299858,8.110017 28.299858,8.058017 28.299858,7.1795 25.892238,6.465348 23.889443,6.465348z" Fill="#FFFCAF3E" Stroke="#FFB46C02" StrokeThickness="1" />
      <Path Data="F1M13.642858,17.999999L14,34.785714 18.571429,36.071428 18.428572,19.357142C18.428572,19.357142 20.5,19.357142 23.857143,19.142856 18.6414,18.909783 12.67377,16.668176 10.642858,15.214285 12.059757,17.306461 13.642858,17.999999 13.642858,17.999999z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.49367085">
        <Path.Fill>
          <LinearGradientBrush StartPoint="15.9285729997683,20.4285709857941" EndPoint="15.6428579997683,30.9285709857941" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="F1M36.857142,14.071428A12.857142,5.5,0,1,1,11.142858,14.071428A12.857142,5.5,0,1,1,36.857142,14.071428z" Fill="#FFFED496" StrokeThickness="4.11986637115479">
        <Path.Stroke>
          <LinearGradientBrush StartPoint="24,16.525082" EndPoint="24,13.284962" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#FFE7E6AE" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.271979004144669,0,0,0.216618999838829,17.2704792022705,5.40974187850952" />
        </Path.RenderTransform>
      </Path>
    </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