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="2.28755234394157" Canvas.Top="-7.89585982206732">
    <Canvas>
      <Path Data="F1M11.932427,17.403807A5.524272,2.2980971,0,1,1,0.88388348,17.403807A5.524272,2.2980971,0,1,1,11.932427,17.403807z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.42857145">
        <Path.Fill>
          <RadialGradientBrush Center="6.4081554,17.403807" RadiusX="5.524272" RadiusY="5.524272" GradientOrigin="6.4081554,17.403807" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1,0,0,0.416000008583069,2.7069260817369E-15,10.1638202667236" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="2.90190696716309,0,0,3.80494809150696,-4.85249996185303,-32.3115692138672" />
        </Path.RenderTransform>
      </Path>
      <Canvas>
        <Path Data="F1M12.374369,24.665476A3.6239223,6.3639612,0,1,1,5.126524,24.665476A3.6239223,6.3639612,0,1,1,12.374369,24.665476z" Stroke="#FF5D615F" StrokeThickness="0.577924847602844" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <LinearGradientBrush StartPoint="7.5763841,20.301662" EndPoint="7.3215322,27.345011" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFEAEAE9" Offset="0" />
                <GradientStop Color="#FFA5A7A2" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="1.41596496105194,0,0,1.25855803489685,-2.6676139831543,-6.2006688117981" />
          </Path.RenderTransform>
        </Path>
        <Path Data="F1M12.374369,24.665476A3.6239223,6.3639612,0,1,1,5.126524,24.665476A3.6239223,6.3639612,0,1,1,12.374369,24.665476z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <LinearGradientBrush StartPoint="7.5763841,20.301662" EndPoint="7.3215322,27.345011" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFEAEAE9" Offset="0" />
                <GradientStop Color="#FFA5A7A2" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="1.15452599525452,0,0,1.15452599525452,-0.379902005195618,-3.6346800327301" />
          </Path.RenderTransform>
        </Path>
        <Path Data="F1M12.374369,24.665476A3.6239223,6.3639612,0,1,1,5.126524,24.665476A3.6239223,6.3639612,0,1,1,12.374369,24.665476z" Fill="#FF93958F" Stroke="{x:Null}" StrokeThickness="1">
          <Path.RenderTransform>
            <MatrixTransform Matrix="1.08135497570038,0,0,1.08135497570038,1.23265302181244,-1.82988905906677" />
          </Path.RenderTransform>
        </Path>
        <Path Data="F1M12.374369,24.665476A3.6239223,6.3639612,0,1,1,5.126524,24.665476A3.6239223,6.3639612,0,1,1,12.374369,24.665476z" Fill="{x:Null}" StrokeThickness="0.684167325496674" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.39560439">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="4.6831215,24.665476" EndPoint="8.3712559,24.317278" 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="1.18069994449615,0,0,1.07697105407715,-0.608943998813629,-1.72174394130707" />
          </Path.RenderTransform>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1.29618203639984,0,0,1.29618203639984,-4.17627716064453,-7.32456684112549" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="M9.4806798,18.24261L16.570367,12.118401 16.341232,37.201244 9.1369775,31.676187C6.6164956,29.613972,6.1582259,20.41939,9.4806798,18.24261z" StrokeThickness="1.00000023841858" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeMiterLimit="4">
        <Path.Fill>
          <LinearGradientBrush StartPoint="11.3069817948759,19.4103018854991" EndPoint="11.8488583461416,26.0346175918763" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFEEEEEC" Offset="0" />
              <GradientStop Color="#FF8A8C87" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
        <Path.Stroke>
          <LinearGradientBrush StartPoint="9.44292074250055,25.8054721635256" EndPoint="7.13652225963902,26.0346071457131" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF6F726F" Offset="0" />
              <GradientStop Color="#006F726F" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
      </Path>
      <Path Data="M7.5383505,21.987453L11.593316,18.948432 11.341702,22.484506 7.3782322,23.145502 7.5383505,21.987453z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="9.485774,22.107626" EndPoint="7.378232,22.637957" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="F1M8.203516,30.371178L12.644321,33.939519 12.087496,31.511626 7.6110912,29.008887 8.203516,30.371178z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.7692308">
        <Path.Fill>
          <RadialGradientBrush Center="5.0822492,12.516305" RadiusX="2.9831069" RadiusY="2.9831069" GradientOrigin="5.0822492,12.516305" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#00FFFFFF" Offset="0" />
              <GradientStop Color="#FFFFFFFF" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1.5257910490036,4.89842700347629E-16,-1.48044092540545E-08,1.76896405220032,-0.0816298276185989,6.06625509262085" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
      </Path>
      <Canvas>
        <Path Data="M23.75,14C21.81001,14.049168 20.013366,14.683436 18.5,15.6875 18.13319,15.264088 17.60375,15 17,15 16.9655,15 16.912662,15.000854 16.875,15 16.847007,14.9998 16.806453,14.997438 16.78125,15 15.773145,15.102481 15,15.965001 15,17 15,17.60375 15.264088,18.13319 15.6875,18.5 14.639107,20.080181 14,21.962011 14,24 14,26.033681 14.611921,27.921829 15.65625,29.5 15.243427,29.869532 15,30.401641 15,31 15,32.104 15.896,33.000001 17,33 17.60375,33 18.13319,32.735911 18.5,32.3125 20.080181,33.360893 21.962011,34 24,34 26.03799,34 27.919819,33.360893 29.5,32.3125 29.86681,32.735912 30.396251,33.000001 31,33 32.103999,33 33,32.104001 33,31 33,30.39625 32.735912,29.86681 32.3125,29.5 33.360893,27.919819 34,26.03799 34,24 34,21.962011 33.360893,20.080181 32.3125,18.5 32.735912,18.13319 33,17.60375 33,17 33,15.896 32.103999,15 31,15 30.9655,15 30.912662,15.000854 30.875,15 30.847007,14.9998 30.806453,14.997438 30.78125,15 30.277198,15.05124 29.819299,15.298435 29.5,15.65625 29.493313,15.651825 29.475448,15.660659 29.46875,15.65625 27.894622,14.620029 26.025064,14 24,14 23.913827,14 23.835651,13.997829 23.75,14z" StrokeThickness="1.4766833782196" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <RadialGradientBrush Center="-1.0016617,0.99004257" RadiusX="9.9205227" RadiusY="9.9205227" GradientOrigin="-1.0016617,0.99004257" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFEEEEEC" Offset="0" />
                <GradientStop Color="#FF555753" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="-0.127581998705864,1.41606497764587,-1.63014101982117,-0.146853998303413,17.4875106811523,15.5612096786499" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.Stroke>
            <LinearGradientBrush StartPoint="17.0625,34.950001" EndPoint="20.3125,5.375" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF2E3436" Offset="0" />
                <GradientStop Color="#FF888A85" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="M23.75,14C21.81001,14.049168 20.013366,14.683436 18.5,15.6875 18.13319,15.264088 17.60375,15 17,15 16.9655,15 16.912662,15.000854 16.875,15 16.847007,14.9998 16.806453,14.997438 16.78125,15 15.773145,15.102481 15,15.965001 15,17 15,17.60375 15.264088,18.13319 15.6875,18.5 14.639107,20.080181 14,21.962011 14,24 14,26.033681 14.611921,27.921829 15.65625,29.5 15.243427,29.869532 15,30.401641 15,31 15,32.104 15.896,33.000001 17,33 17.60375,33 18.13319,32.735911 18.5,32.3125 20.080181,33.360893 21.962011,34 24,34 26.03799,34 27.919819,33.360893 29.5,32.3125 29.86681,32.735912 30.396251,33.000001 31,33 32.103999,33 33,32.104001 33,31 33,30.39625 32.735912,29.86681 32.3125,29.5 33.360893,27.919819 34,26.03799 34,24 34,21.962011 33.360893,20.080181 32.3125,18.5 32.735912,18.13319 33,17.60375 33,17 33,15.896 32.103999,15 31,15 30.9655,15 30.912662,15.000854 30.875,15 30.847007,14.9998 30.806453,14.997438 30.78125,15 30.277198,15.05124 29.819299,15.298435 29.5,15.65625 29.493313,15.651825 29.475448,15.660659 29.46875,15.65625 27.894622,14.620029 26.025064,14 24,14 23.913827,14 23.835651,13.997829 23.75,14z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <RadialGradientBrush Center="-1.0016617,0.99004257" RadiusX="9.9205227" RadiusY="9.9205227" GradientOrigin="-1.0016617,0.99004257" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFEEEEEC" Offset="0" />
                <GradientStop Color="#FF888A85" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="-0.31003201007843,2.11086201667786,-2.0827751159668,-0.305866986513138,17.7528800964355,16.4145908355713" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="M18.75,9.375A9.375,9.375,0,1,1,0,9.375A9.375,9.375,0,1,1,18.75,9.375z" StrokeThickness="0.838319301605225" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <RadialGradientBrush Center="12.704856,13.847466" RadiusX="9.375" RadiusY="9.375" GradientOrigin="12.704856,13.847466" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFD3D7CF" Offset="0" />
                <GradientStop Color="#FF555753" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="0.063708521425724,-1.4244749546051,1.54729294776917,0.0692111998796463,-9.53062915802002,30.9868106842041" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.Stroke>
            <LinearGradientBrush StartPoint="-0.51990569,-0.51990569" EndPoint="-0.51990569,19.269905" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF2E3436" Offset="0" />
                <GradientStop Color="#FFBABDB6" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
          <Path.RenderTransform>
            <MatrixTransform Matrix="0.846982002258301,0,0,0.911414980888367,16.7102699279785,15.4495601654053" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M18.75,9.375A9.375,9.375,0,1,1,0,9.375A9.375,9.375,0,1,1,18.75,9.375z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <RadialGradientBrush Center="6.8797626,7.1986876" RadiusX="9.375" RadiusY="9.375" GradientOrigin="6.8797626,7.1986876" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFD3D7CF" Offset="0" />
                <GradientStop Color="#FF555753" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1.24074900150299,9.69009406048826E-09,-9.04311558969084E-09,1.15763103961945,-1.71364498138428,-1.1347359418869" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="0.367271989583969,0,0,0.319999992847443,18.5625400543213,21.125" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M17,16.5A0.5,0.5,0,1,1,16,16.5A0.5,0.5,0,1,1,17,16.5z" Fill="#FF2E3436" Stroke="{x:Null}" StrokeThickness="1">
          <Path.RenderTransform>
            <MatrixTransform Matrix="1.3125,0,0,1.3125,-4.65767908096313,-5.09375" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M17,16.5A0.5,0.5,0,1,1,16,16.5A0.5,0.5,0,1,1,17,16.5z" Fill="#FF2E3436" Stroke="{x:Null}" StrokeThickness="1">
          <Path.RenderTransform>
            <MatrixTransform Matrix="1,0,0,1,15.2215900421143,0.25" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M17,16.5A0.5,0.5,0,1,1,16,16.5A0.5,0.5,0,1,1,17,16.5z" Fill="#FF2E3436" Stroke="{x:Null}" StrokeThickness="1">
          <Path.RenderTransform>
            <MatrixTransform Matrix="1,0,0,1,15.2215900421143,14.96875" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M17,16.5A0.5,0.5,0,1,1,16,16.5A0.5,0.5,0,1,1,17,16.5z" Fill="#FF2E3436" Stroke="{x:Null}" StrokeThickness="1">
          <Path.RenderTransform>
            <MatrixTransform Matrix="1.375,0,0,1.375,-5.68892908096313,8.8125" />
          </Path.RenderTransform>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1.09689402580261,0,0,1.50927102565765,-4.2169508934021,-12.1181201934814" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="M36.087935,32.865672C37.005198,30.700908 37.568925,27.707589 37.568925,24.427683 37.568925,21.147777 37.005198,18.154458 36.087935,15.989694" Fill="{x:Null}" StrokeThickness="0.999999821186066" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeMiterLimit="4">
        <Path.Stroke>
          <RadialGradientBrush Center="36.82843,24.427677" RadiusX="1.2404949" RadiusY="1.2404949" GradientOrigin="36.82843,24.427677" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF3465A4" Offset="0" />
              <GradientStop Color="#003465A4" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="13.3986902236938,-4.11828204960329E-06,6.83172493154416E-06,22.2267799377441,-456.624603271484,-518.520812988281" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Stroke>
      </Path>
      <Path Data="M39.838951,35.702755C41.064624,32.810137 41.817892,28.81038 41.817892,24.427678 41.817892,20.044976 41.064624,16.045219 39.838951,13.152601" Fill="{x:Null}" StrokeThickness="0.999999821186066" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeMiterLimit="4">
        <Path.Stroke>
          <RadialGradientBrush Center="36.82843,24.427677" RadiusX="1.2404949" RadiusY="1.2404949" GradientOrigin="36.82843,24.427677" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF3465A4" Offset="0" />
              <GradientStop Color="#003465A4" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="13.3986902236938,-4.11828204960329E-06,6.83172493154416E-06,22.2267799377441,-456.624603271484,-518.520812988281" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Stroke>
      </Path>
      <Path Data="M43.487454,39.708054C45.148528,35.787876 46.169383,30.367266 46.169383,24.427674 46.169383,18.488083 45.148528,13.067472 43.487454,9.1472948" Fill="{x:Null}" StrokeThickness="0.999999821186066" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeMiterLimit="4">
        <Path.Stroke>
          <RadialGradientBrush Center="36.82843,24.427683" RadiusX="1.2404949" RadiusY="1.2404949" GradientOrigin="36.82843,24.427683" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF3465A4" Offset="0" />
              <GradientStop Color="#003465A4" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="21.0944404602051,2.34444997866245E-15,1.4705179348512E-12,22.2267208099365,-740.046813964844,-518.519592285156" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Stroke>
      </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
