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.

XAMLtoPNG.zip
- XAMLtoPNG.sln
- XAMLtoPNG
  - Params.cs
  - Program.cs
  - Properties
    - AssemblyInfo.cs
  - XAMLtoPNG.csproj
  - XAMLtoPNG.csproj.user
  - XamlToPngConverter.cs
OpenIconLibrary.zip
TangoProject.zip
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="2.002601146698" Canvas.Top="-4.91866555809975">
    <Canvas>
      <Path Data="F1M42.5,39.125A17.6875,6.625,0,1,1,7.125,39.125A17.6875,6.625,0,1,1,42.5,39.125z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.19886367">
        <Path.Fill>
          <RadialGradientBrush Center="24.8125,39.125" RadiusX="17.6875" RadiusY="17.6875" GradientOrigin="24.8125,39.125" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1,0,0,0.374558001756668,7.27282902006571E-15,24.4704093933105" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.751118004322052,0,0,0.578702986240387,17.0408706665039,19.363410949707" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M42.5,39.125A17.6875,6.625,0,1,1,7.125,39.125A17.6875,6.625,0,1,1,42.5,39.125z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.3125">
        <Path.Fill>
          <RadialGradientBrush Center="24.8125,39.125" RadiusX="17.6875" RadiusY="17.6875" GradientOrigin="24.8125,39.125" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1,0,0,0.374558001756668,7.19433278277776E-15,24.4704093933105" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.836071014404297,0,0,0.685436010360718,-7.95960712432861,15.717809677124" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M17.906713,21.215676L36.899302,40.6474C37.667788,41.52567 40.102812,42.204461 41.729787,40.6474 43.300913,39.143787 42.937408,37.024536 41.400436,35.487563L23.176333,15.946056C25.426333,9.696056,20.872444,4.446488,14.997444,5.571488L13.73493,6.7242174 17.687145,10.456865 17.906713,13.750381 14.955871,16.443984 11.429472,16.05584 7.8066086,12.652544C7.8066086,12.652544 6.5364873,13.907448 6.5364873,13.907448 5.9457238,19.548765 11.844213,24.590676 17.906713,21.215676z" Stroke="#FF888A85" StrokeThickness="0.999999701976776" StrokeMiterLimit="4">
        <Path.Fill>
          <LinearGradientBrush StartPoint="19.7935367670268,42.077749831374" EndPoint="20.6567725120902,10.9186653192799" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFB6B6B6" Offset="0" />
              <GradientStop Color="#FFF2F2F2" Offset="0.5" />
              <GradientStop Color="#FFFAFAFA" Offset="0.67612957954406738" />
              <GradientStop Color="#FFD8D8D8" Offset="0.84051722288131714" />
              <GradientStop Color="#FFF2F2F2" Offset="0.875" />
              <GradientStop Color="#FFDBDBDB" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="F1M18.117385,19.9401L37.320267,39.967712C37.915174,40.647605 39.800194,41.173077 41.059681,39.967712 42.275934,38.803723 41.994534,37.163152 40.804721,35.973338L22.313189,16.352183C23.813189,9.852183,20.454401,6.3475455,15.454401,6.4725455L15.18427,6.7459223 18.787193,9.982189 18.917359,14.163983 15.303442,17.462466 11.061136,17.004257 7.8845536,14.012776 7.5319165,14.442835C7.2194165,20.411585,14.023635,23.1276,18.117385,19.9401z" Fill="{x:Null}" Stroke="#6DFFFFFF" StrokeThickness="0.999999165534973" StrokeMiterLimit="4" Opacity="0.42613639" />
      <Canvas>
        <Rectangle RadiusX="0.88388073" RadiusY="0.88388073" Fill="{x:Null}" StrokeThickness="0.999997198581696" Width="24.2682731985817" Height="3.0554883985817" Opacity="0.17045456" Canvas.Left="27.6853364007092" Canvas.Top="-3.11844779929085">
          <Rectangle.Stroke>
            <LinearGradientBrush StartPoint="21.1907772712597,1.07842250987908" EndPoint="-0.644634601402885,0.491898366083152" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FF000000" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Stroke>
        </Rectangle>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="0.697938024997711,0.716157972812653,-0.716157972812653,0.697938024997711,0,0" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="F1M22.498794,30.12538C23.332335,29.410917,35.782628,16.676871,35.782628,16.676871L38.856573,16.457303 43.687058,9.7604906 39.662731,6.1752987 33.405057,11.554705 33.405057,14.628651 20.670142,27.857593C20.066332,28.461403,21.730308,30.784082,22.498794,30.12538z" Stroke="#FF878F9D" StrokeThickness="0.999999701976776" StrokeMiterLimit="4">
        <Path.Fill>
          <LinearGradientBrush StartPoint="36.4217034945458,17.5354032013103" EndPoint="35.8136912463456,11.4104034073222" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF98A0A9" Offset="0" />
              <GradientStop Color="#FFC3D0DD" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="F1M22.401987,29.085455C23.04876,28.531078,35.426388,15.855648,35.426388,15.855648L38.354971,15.607649 42.568887,9.945584 39.679156,7.3965946 34.202578,12.114067 34.357836,14.965022 21.681731,28.257345C21.213213,28.725863,21.805692,29.596565,22.401987,29.085455z" Fill="{x:Null}" StrokeThickness="1.00000023841858" StrokeMiterLimit="4" Opacity="0.53977272">
        <Path.Stroke>
          <LinearGradientBrush StartPoint="31.177404,19.821514" EndPoint="40.859177,9.6568537" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
      </Path>
      <Path Data="F1M8.4653111,43.611561C9.7818986,45.07679 13.438996,45.739726 15.060755,42.901647 15.767862,41.664211 17.154698,38.198845 23.341883,32.630379 24.381029,31.696208 25.481792,29.559241 24.54863,28.406512L22.133387,25.991269C21.145334,24.893432 18.398973,25.40552 17.272212,26.942145 13.913455,31.538339 8.4261393,35.197025 7.1887023,35.638967 4.8207828,36.484652 5.0872917,39.975116 6.6538792,41.635454L8.4653111,43.611561z" Stroke="#FF204A87" StrokeThickness="0.999999701976776" StrokeMiterLimit="4">
        <Path.Fill>
          <LinearGradientBrush StartPoint="11.1004049666336,33.3215378712416" EndPoint="17.3931854157284,39.6094748371035" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF3465A4" Offset="0" />
              <GradientStop Color="#FF9FBCE1" Offset="0" />
              <GradientStop Color="#FF6B95CA" Offset="0" />
              <GradientStop Color="#FF3D6AA5" Offset="0.75" />
              <GradientStop Color="#FF386EB4" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="F1M43.25,37.5A1.375,1.375,0,1,1,40.5,37.5A1.375,1.375,0,1,1,43.25,37.5z" Fill="#FFFFFFFF" Stroke="#FFA1A1A1" StrokeThickness="1.13860166072845" StrokeMiterLimit="4">
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.878269970417023,0,0,0.878269970417023,2.4272038936615,5.07746410369873" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M20.771261,28.20101A1.767767,1.767767,0,1,1,17.235727,28.20101A1.767767,1.767767,0,1,1,20.771261,28.20101z" Fill="#9AFFFFFF" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.60227272">
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.570876002311707,0,0,0.570876002311707,9.15484809875488,11.2511100769043" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M18.678905,29.624807C18.678905,29.624807,11.509014,36.92442,8.1502573,38.161857" Fill="{x:Null}" StrokeThickness="2.29450917243958" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4">
        <Path.Stroke>
          <LinearGradientBrush StartPoint="14.6261256357928,35.7100293016208" EndPoint="13.1966708276546,33.2341411846044" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
      </Path>
      <Path Data="F1M8.8060013,42.48669C10.247267,44.232307 13.405535,44.647919 14.397161,42.116101 15.078468,40.376589 17.730783,36.450314 22.594745,32.072748 23.411654,31.338363 24.277003,29.658419 23.543411,28.752218L21.644704,26.853511C20.867961,25.990463 18.708951,26.393033 17.823164,27.601028 15.182728,31.214257 9.3398194,35.940582 7.9274145,36.406654 5.7406198,37.128264 6.1504221,39.627953 7.3819713,40.933203L8.8060013,42.48669z" Fill="{x:Null}" Stroke="#33FFFFFF" StrokeThickness="0.999999463558197" StrokeMiterLimit="4" Opacity="0.19886364" />
      <Path Data="F1M20.824602,31.261024C20.824602,31.261024,13.501839,37.878429,11.910849,42.121069" Fill="{x:Null}" StrokeThickness="2.29450917243958" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.27840911">
        <Path.Stroke>
          <LinearGradientBrush StartPoint="15.1124585024035,36.2642744881345" EndPoint="16.3632295367195,37.4042572451785" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </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