Click here to Skip to main content
15,894,180 members
Search within:


Articles / Desktop Programming / WPF
 

Convert XAML Vector Graphic to PNG

Rate me:
Please Sign up or sign in to vote.
4.87/5 (11 votes)
23 Oct 2012CPOL12 min read 74.5K   6.8K   43  
An introduction to the usage of vector graphics as a source of bitmap graphics.
 
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Canvas.Left="-1.24541490132399" Canvas.Top="1.31327738689917">
    <Canvas>
      <Canvas>
        <Path Data="M11.125,13.75C11.5,5.375 12.5625,2.9999999 16.5,2.9999999 20.5625,2.9999999 23.25,1.9999999 28.5,-0.6250001" Fill="{x:Null}" StrokeThickness="2.44956421852112" StrokeMiterLimit="4">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="16.25,3.4375" EndPoint="25.5,0.4375" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFADADAD" Offset="0" />
                <GradientStop Color="#00ADADAD" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Rectangle RadiusX="1.6840744" RadiusY="1.6840754" Fill="#FFDDDBD6" Stroke="#FF707070" StrokeThickness="1.22478175163269" Width="5.68848915163269" Height="5.34978175163269" Canvas.Left="8.46825182418366" Canvas.Top="8.76260912418365" />
        <Path Data="M7.8580395,13.120603C7.1236645,13.136228,6.7328386,13.766584,6.6390886,14.500959L4.7160797,42.754396C17.59108,47.004396,34.783918,45.504396,43.658918,42.754396L41.178075,14.881402C41.084325,14.068902,40.615105,13.136228,39.646355,13.120603L7.8580395,13.120603z" Fill="#0E000000" Stroke="#0E000000" StrokeThickness="1.22478210926056" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.05681817" />
        <Path Data="M7.9830395,11.495603C7.2486645,11.511228,6.8578386,12.141584,6.7640886,12.875959L4.8410797,41.129396C17.71608,45.379396,34.908918,43.879396,43.783918,41.129396L41.303075,13.256402C41.209325,12.443902,40.740105,11.511228,39.771355,11.495603L7.9830395,11.495603z" Stroke="#FF707070" StrokeThickness="1.22478210926056" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <RadialGradientBrush Center="12.812498,8.5408306" RadiusX="19.971419" RadiusY="19.971419" GradientOrigin="12.812498,8.5408306" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFE6E5E1" Offset="0" />
                <GradientStop Color="#FFD2D0C9" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="2.8572850227356,3.55779804700595E-16,-2.96506186057193E-16,2.38125610351563,-23.7964706420898,-4.44816017150879" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Rectangle Fill="{x:Null}" Stroke="#44707070" StrokeThickness="1.2247816324234" Width="19.9133006324234" Height="14.1755966324234" Opacity="0.26704544" Canvas.Left="13.9183401837883" Canvas.Top="19.8809431837883" />
        <Rectangle Fill="{x:Null}" Stroke="#44FFFFFF" StrokeThickness="1.2247816324234" Width="19.9133006324234" Height="14.1755966324234" Opacity="0.26704544" Canvas.Left="14.8870901837883" Canvas.Top="20.8809431837883" />
        <Canvas Opacity="0.15909089">
          <Rectangle Fill="#FF000000" Stroke="{x:Null}" Width="4" Height="3" Canvas.Left="14" Canvas.Top="11" />
          <Rectangle Fill="#FF000000" Stroke="{x:Null}" Width="4" Height="3" Canvas.Left="19" Canvas.Top="11" />
          <Rectangle Fill="#FF000000" Stroke="{x:Null}" Width="4" Height="3" Canvas.Left="24.03125" Canvas.Top="11" />
          <Rectangle Fill="#FF000000" Stroke="{x:Null}" Width="4" Height="3" Canvas.Left="29" Canvas.Top="11" />
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="1,0,0,0.666666984558105,0,9.66666984558105" />
          </Canvas.RenderTransform>
        </Canvas>
        <Path Data="M39.5,27.25A8.0625,0.875,0,1,1,23.375,27.25A8.0625,0.875,0,1,1,39.5,27.25z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.15909089">
          <Path.Fill>
            <RadialGradientBrush Center="31.4375,27.25" RadiusX="8.0625" RadiusY="8.0625" GradientOrigin="31.4375,27.25" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1,0,0,0.1085269972682,0,24.2926406860352" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="1,0,0,1.78571403026581,-2.625,-22.5071907043457" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M8.3554337,12.643877C7.8917041,12.627438,7.9625058,13.288435,7.8756843,13.968485L6.094794,40.271002C18.018277,44.206615,34.342325,42.771214,42.561425,40.224641L40.171196,14.166246C40.084375,13.413849,40.237127,12.658346,39.339972,12.643877L8.3554337,12.643877z" Fill="{x:Null}" StrokeThickness="1.22478187084198" StrokeMiterLimit="4" Opacity="0.60795456">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="17.7170607232774,18.7751153616237" EndPoint="57.8929240835551,73.9149323573147" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Canvas>
          <Rectangle RadiusX="0.45929343" RadiusY="0.45929343" Fill="#FFDEDEDE" Stroke="#FFADADAD" StrokeThickness="0.244956493377686" Width="2.52620699337769" Height="0.994956733377686" Canvas.Left="-1.87793724668884" Canvas.Top="33.8015287533112" />
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="0.730224013328552,-0.683207988739014,0.683207988739014,0.730224013328552,0,0" />
          </Canvas.RenderTransform>
        </Canvas>
        <Path Data="M31.34375,13.65625C31.194336,13.684049 31.018058,13.763331 30.875,13.84375 30.742383,13.922012 30.613294,14.034057 30.5,14.15625L26,19C25.838152,19.174561 25.694132,19.392119 25.625,19.59375 25.557341,19.805875 25.556503,20.051385 25.59375,20.25 25.607853,20.315638 26.508325,21.351794 26.71875,21.375 26.891959,21.389562 27.103225,21.375643 27.28125,21.3125 27.389732,21.27134 27.523231,21.194002 27.625,21.125 27.716691,21.060008 27.825326,20.962281 27.90625,20.875L32.40625,16.03125C32.535728,15.891601 32.648465,15.721815 32.71875,15.5625 32.814412,15.332612 32.842228,15.064688 32.8125,14.84375 32.800236,14.767476 32.028689,13.678989 31.791053,13.700444 31.761284,13.703848 31.373633,13.65069 31.34375,13.65625z" Fill="#FFB3B3AF" Stroke="#FF888888" StrokeThickness="1.22478234767914" StrokeMiterLimit="4" />
        <Path Data="M42.375,2.3409839C43.25,1.4659839 44.75,2.8409839 44,3.9659839 44,3.9659839 39.78125,10.528484 35.375,15.590984 30.96875,20.653484 26.375,24.122234 26.375,24.122234 25.6875,24.715984 23.5625,25.528484 23.5625,25.528484 23.5625,25.528484 23.001555,24.892879 23.001555,24.892879 23.001555,24.892879 23.90625,22.872234 24.5,22.247234L26.5,19.965984 42.375,2.3409839z" Stroke="#FF888888" StrokeThickness="1.22478210926056" StrokeMiterLimit="4">
          <Path.Fill>
            <LinearGradientBrush StartPoint="30.501556,15.5460158676453" EndPoint="33.60255,18.5460158676453" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFBFBFA" Offset="0" />
                <GradientStop Color="#FFBBBBAA" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Canvas>
          <Rectangle RadiusX="1.6840758" RadiusY="1.6840767" Fill="#FFB3B3AF" Stroke="{x:Null}" Width="9.3750086" Height="2.2500021" Canvas.Left="2.27688" Canvas.Top="32.411682" />
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="0.679899990558624,-0.733304977416992,0.733304977416992,0.679899990558624,0,0" />
          </Canvas.RenderTransform>
        </Canvas>
        <Path Data="M39.5,27.25A8.0625,0.875,0,1,1,23.375,27.25A8.0625,0.875,0,1,1,39.5,27.25z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.15909089">
          <Path.Fill>
            <RadialGradientBrush Center="31.4375,27.25" RadiusX="8.0625" RadiusY="8.0625" GradientOrigin="31.4375,27.25" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1,0,0,0.1085269972682,-1.87592488472364E-14,24.2926406860352" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="1.52713203430176,0,0,6.79346609115601,-13.1967000961304,-158.968200683594" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M24.792931,15.3847A0.77339804,1.6793786,0,1,1,23.246135,15.3847A0.77339804,1.6793786,0,1,1,24.792931,15.3847z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.6875">
          <Path.Fill>
            <RadialGradientBrush Center="24.019533,15.3847" RadiusX="0.77339804" RadiusY="0.77339804" GradientOrigin="24.019533,15.3847" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFFCE94F" Offset="0" />
                <GradientStop Color="#00FCE94F" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1,0,0,2.1714289188385,5.80872028875892E-15,-18.0220794677734" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="1.24962604045868,0,0,1.24962604045868,-6.57042980194092,-4.1055908203125" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M24.792931,15.3847A0.77339804,1.6793786,0,1,1,23.246135,15.3847A0.77339804,1.6793786,0,1,1,24.792931,15.3847z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.6875">
          <Path.Fill>
            <RadialGradientBrush Center="24.019533,15.3847" RadiusX="0.77339804" RadiusY="0.77339804" GradientOrigin="24.019533,15.3847" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1,0,0,2.1714289188385,-3.3016109733452E-15,-18.0220794677734" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="0.621055006980896,0,0,0.621055006980896,8.52756214141846,5.56479215621948" />
          </Path.RenderTransform>
        </Path>
        <Canvas>
          <Rectangle RadiusX="1.6840748" RadiusY="1.6840756" Fill="#FFBFBFBB" Stroke="{x:Null}" Width="9.3750019" Height="2.2500005" Canvas.Left="2.3558545" Canvas.Top="31.976822" />
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="0.679899990558624,-0.733304977416992,0.733304977416992,0.679899990558624,0,0" />
          </Canvas.RenderTransform>
        </Canvas>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="0.816471993923187,0,0,0.816471993923187,10.5237703323364,0.197017997503281" />
        </Canvas.RenderTransform>
      </Canvas>
      <Canvas>
        <Path Data="M47.174124,32.342636A22.829447,14.142136,0,1,1,1.5152302,32.342636A22.829447,14.142136,0,1,1,47.174124,32.342636z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <RadialGradientBrush Center="24.344677,32.342636" RadiusX="22.829447" RadiusY="22.829447" GradientOrigin="24.344677,32.342636" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1,0,0,0.619468986988068,-1.46952694696049E-14,12.3073701858521" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="0.684189021587372,0,0,1.24107098579407,30.9381408691406,7.93404388427734" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M46.884523,27.625054C48.607899,18.892208 41.086801,17.485878 48.778118,7.0407143 56.415608,-3.3313508 41.162711,-6.7305609 41.162711,-6.7305609" Fill="{x:Null}" StrokeThickness="1.4901442527771" StrokeMiterLimit="4">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="47.6754788373083,10.2449388910645" EndPoint="48.3789469965128,-4.27809740893555" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFACACAC" Offset="0" />
                <GradientStop Color="#008D8D8D" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="M32.901422,44.256245C30.445058,55.162801 37.602375,62.666542 48.348682,62.666542 58.978683,62.666542 64.263577,53.975938 62.074517,44.256245L58.584897,31.241677C58.177776,29.418687 57.308351,28.83579 56.723768,28.637405 51.000852,26.06788 42.938294,25.944035 37.903209,28.637405 37.263445,28.984643 36.798162,28.984641 36.33288,30.720824L32.901422,44.256245z" Stroke="#FF4F4F4F" StrokeThickness="1.49014484882355" StrokeMiterLimit="4">
          <Path.Fill>
            <RadialGradientBrush Center="20.588579,14.245288" RadiusX="13.261548" RadiusY="13.261548" GradientOrigin="20.588579,14.245288" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFD9D9D9" Offset="0.37333333492279053" />
                <GradientStop Color="#FFC5C5C5" Offset="0.60311108827590942" />
                <GradientStop Color="#FF909090" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1.86637401580811,-5.50505004986673E-25,1.63806700728588E-24,2.30513405799866,5.96984910964966,-1.88804602622986" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Canvas>
          <Path Data="M8.5736698,22.948218C16.805824,17.644917 29.854661,17.038826 38.524694,22.342126 30.832368,18.464709 17.818978,17.99819 8.5736698,22.948218z" Fill="#CBFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
          <Path Data="M8.7504465,22.72725C17.380348,16.495871 30.031438,16.42011 38.436306,22.25374 30.655591,17.580828 17.686395,17.291086 8.7504465,22.72725z" Fill="#42000000" Stroke="{x:Null}" StrokeThickness="1" />
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="0.840529024600983,0,0,1,27.1320896148682,18.1250495910645" />
          </Canvas.RenderTransform>
        </Canvas>
        <Path Data="M26.162951,11.331463A2.171828,4.7477169,0,1,1,21.819295,11.331463A2.171828,4.7477169,0,1,1,26.162951,11.331463z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <LinearGradientBrush StartPoint="23.991123,12.830256" EndPoint="23.991123,7.1877394" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFA9A9A9" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="1.66634297370911,0,0,1.41780698299408,7.25514888763428,17.4729309082031" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M33.784469,46.001045C32.410179,54.26031 38.311598,61.294799 48.39832,61.294799 58.484987,61.294799 62.345289,52.803686 61.198664,46.001045L57.562622,32.375032C57.260913,30.231332 56.372188,30.024553 55.845852,29.817998 50.134283,27.576554 43.474842,27.391639 38.821626,29.817998 38.238508,30.122057 37.755498,30.006495 37.401177,31.552994L33.784469,46.001045z" Fill="{x:Null}" StrokeThickness="1.49014401435852" StrokeMiterLimit="4">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="37.3944175514393,21.1802926809845" EndPoint="41.3060638118258,73.8153132307986" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="M26.162951,11.331463A2.171828,4.7477169,0,1,1,21.819295,11.331463A2.171828,4.7477169,0,1,1,26.162951,11.331463z" Stroke="#FF595959" StrokeThickness="0.812684416770935" StrokeMiterLimit="4">
          <Path.Fill>
            <LinearGradientBrush StartPoint="23.991123,6.583746" EndPoint="23.991123,15.069027" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFB1B1B1" Offset="0" />
                <GradientStop Color="#FFDFDFDF" Offset="0.20000000298023224" />
                <GradientStop Color="#FF565656" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="0.840529024600983,0,0,1,27.0471897125244,19.8675708770752" />
          </Path.RenderTransform>
        </Path>
        <Path Data="M26.162951,11.331463A2.171828,4.7477169,0,1,1,21.819295,11.331463A2.171828,4.7477169,0,1,1,26.162951,11.331463z" Fill="#55FFFFFF" Stroke="{x:Null}" StrokeThickness="1">
          <Path.RenderTransform>
            <MatrixTransform Matrix="0.234565004706383,0,0,0.542553007602692,40.9481201171875,23.4853801727295" />
          </Path.RenderTransform>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="0.687178015708923,0,0,0.655351996421814,-20.5190601348877,5.36754179000854" />
        </Canvas.RenderTransform>
      </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 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

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 16 Jul 2012

Article Copyright 2012 by Dirk Bahle
Everything else Copyright © CodeProject, 1999-2024

Web02 2.8:2024-04-02:1