Click here to Skip to main content
15,885,546 members
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.3K   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="-0.0459485989858877" Canvas.Top="-0.999997040769504">
    <Canvas>
      <Canvas>
        <Path Data="F1M26.482036,37.621562L24.499994,37.621562 24.499994,6 26.482036,6 26.482036,37.620112 26.482036,37.621562z" Fill="#FFA4A4A4" Stroke="#FF555753" StrokeThickness="1" StrokeMiterLimit="4" />
        <Path Data="F1M26,37.621562L24.982042,37.621562 24.982042,6 26,6 26,37.620112 26,37.621562z" Fill="#FFA4A4A4" Stroke="{x:Null}" StrokeThickness="1" />
        <Path Data="F1M43.499996,32.499982L7.5000001,32.499982 7.5000001,5.4999944 43.499996,5.4999944 43.499996,32.499982 43.499996,32.499982z" Stroke="#FF888A85" StrokeThickness="1" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <LinearGradientBrush StartPoint="30.6195687312722,28.4166909714222" EndPoint="18.753010576117,6.58616510090828" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFF5F5F5" Offset="0" />
                <GradientStop Color="#FFE1E1E1" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="F1M38.360542,44.022526A12.197592,2.2097087,0,1,1,13.965359,44.022526A12.197592,2.2097087,0,1,1,38.360542,44.022526z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.39010991">
          <Path.Fill>
            <RadialGradientBrush Center="26.162951,44.022526" RadiusX="12.197592" RadiusY="12.197592" GradientOrigin="26.162951,44.022526" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF5B5B5B" Offset="0" />
                <GradientStop Color="#005B5B5B" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1,0,0,0.181159004569054,-5.48562931190766E-15,36.0474281311035" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="1.74925398826599,0,0,1.45254802703857,-20.3830108642578,-20.4374904632568" />
          </Path.RenderTransform>
        </Path>
        <Canvas>
          <Path Data="F1M31.492,35.959L25.217,31.321 25.151306,31.665948 30.016,35.955 31.492,35.959z" Fill="#FFA4A4A4" Stroke="#FF555753" StrokeThickness="1" StrokeMiterLimit="4" />
          <Path Data="F1M18.408,35.959L24.683,31.321 24.63283,31.72338 19.883,35.955 18.408,35.959z" Fill="#FFA4A4A4" Stroke="#FF555753" StrokeThickness="1" StrokeMiterLimit="4" />
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="1.53901600837708,0,0,1.53901600837708,-12.8986196517944,-11.0573101043701" />
          </Canvas.RenderTransform>
        </Canvas>
        <Path Data="F1M42.483508,31.500001L8.4999999,31.500001 8.4999999,6.5000025 42.483508,6.5000025 42.483508,31.500001 42.483508,31.500001z" Fill="{x:Null}" StrokeThickness="1" StrokeMiterLimit="4">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="23.379572,28.369167" EndPoint="24.24518,6.0000024" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="F1M37.64607,5.8376811L8,5.8376811 8,8C9.671372,5.6514612,37.64607,5.8376811,37.64607,5.8376811z" Fill="#29000000" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.15999995" />
        <Rectangle Fill="#3A000000" Stroke="{x:Null}" Width="9" Height="1" Canvas.Left="31" Canvas.Top="9" />
        <Rectangle RadiusX="1.941476" RadiusY="1.9414761" Stroke="#FF555753" StrokeThickness="1" Width="41.779099" Height="5" Canvas.Left="4.6403117" Canvas.Top="1">
          <Rectangle.Fill>
            <LinearGradientBrush StartPoint="19.5168763505278,0.757511756504011" EndPoint="19.5168763505278,4.06648176138489" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFF0F0F0" Offset="0" />
                <GradientStop Color="#FF686868" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Fill>
        </Rectangle>
        <Rectangle Fill="#3A000000" Stroke="{x:Null}" Width="9" Height="1" Canvas.Left="31" Canvas.Top="11" />
        <Rectangle Fill="#3A000000" Stroke="{x:Null}" Width="9" Height="1" Canvas.Left="31" Canvas.Top="13" />
        <Rectangle Fill="#3A000000" Stroke="{x:Null}" Width="9" Height="1" Canvas.Left="31" Canvas.Top="15" />
        <Rectangle Fill="#3A000000" Stroke="{x:Null}" Width="6" Height="1" Canvas.Left="31" Canvas.Top="17" />
        <Rectangle Fill="#3A000000" Stroke="{x:Null}" Width="23" Height="1" Canvas.Left="11" Canvas.Top="22" />
        <Rectangle Fill="#3A000000" Stroke="{x:Null}" Width="23" Height="1" Canvas.Left="11" Canvas.Top="24" />
        <Rectangle Fill="#3A000000" Stroke="{x:Null}" Width="23" Height="1" Canvas.Left="11" Canvas.Top="26" />
        <Rectangle Fill="#3A000000" Stroke="{x:Null}" Width="16" Height="1" Canvas.Left="11" Canvas.Top="28" />
        <Path Data="M48.999998,40.714287A16.071428,11.857142,0,1,1,16.857141,40.714287A16.071428,11.857142,0,1,1,48.999998,40.714287z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <RadialGradientBrush Center="28.283663,47.400623" RadiusX="13.804391" RadiusY="13.804391" GradientOrigin="28.283663,47.400623" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="1.16422605514526,0,0,0.858940005302429,0,0" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="0.51213800907135,0,0,0.51213800907135,2.99747800827026,-5.7788519859314" />
          </Path.RenderTransform>
        </Path>
        <Canvas>
          <Path Data="F1M-27.528542,18.092794C-30.097576,19.791125,-31.511475,22.097833,-31.511475,24.590696L-31.511475,26.659988C-31.511475,29.150828 -30.097576,31.458211 -27.528542,33.156541 -25.102053,34.760445 -21.895416,35.644009 -18.499359,35.644009 -15.104587,35.644009 -11.89795,34.760445 -9.4701774,33.156541 -6.9024275,31.458211 -5.4885277,29.151503 -5.4885277,26.659988L-5.4885277,24.590696C-5.4885277,22.097833 -6.9030696,19.79045 -9.4701774,18.092794 -11.897308,16.490239 -15.103945,15.606001 -18.499359,15.606001 -21.895416,15.606001 -25.102053,16.490239 -27.528542,18.092794z" Fill="#FF670000" Stroke="{x:Null}" StrokeThickness="1" />
          <Path Data="F1M-7.0244261,24.453547C-8.4030105,21.067003 -13.077484,18.573465 -18.636768,18.573465 -24.196053,18.573465 -28.870526,21.067003 -30.249111,24.453547L-30.663906,24.453547 -30.663906,26.523514C-30.663906,30.913678 -25.27863,34.472213 -18.636768,34.472213 -11.994265,34.472213 -6.6102729,30.913678 -6.6102729,26.523514L-6.6102729,24.453547 -7.0244261,24.453547 -7.0244261,24.453547z" Fill="#FFA40000" Stroke="{x:Null}" StrokeThickness="1" />
          <Path Data="F1M-6.6102729,24.453547C-6.6102729,28.844385 -11.994265,32.402921 -18.636768,32.402921 -25.279272,32.402921 -30.663906,28.844385 -30.663906,24.453547 -30.663906,20.062708 -25.27863,16.504173 -18.636768,16.504173 -11.994265,16.504173 -6.6102729,20.062708 -6.6102729,24.453547L-6.6102729,24.453547z" Stroke="{x:Null}" StrokeThickness="1">
            <Path.Fill>
              <LinearGradientBrush StartPoint="-22.976406,18.516047" EndPoint="-14.360273,33.016045" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FFFF7171" Offset="0" />
                  <GradientStop Color="#FFCC0000" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Fill>
          </Path>
          <Path Data="F1M-6.6102729,26.833098L-6.6256833,24.666681C-7.9297843,29.167459,-10.862246,31.074203,-14.549173,32.007678L-14.549173,34.002103C-10.558534,32.998483,-6.9871844,30.713358,-6.6102729,26.833098L-6.6102729,26.833098z" Fill="#FF204A87" Stroke="{x:Null}" StrokeThickness="1" />
          <Path Data="F1M-6.6102729,24.453547C-6.8857329,29.533025,-13.16802,31.849176,-14.571646,31.937532L-18.637411,24.453547 -6.610915,24.453547 -6.6102729,24.453547z" Stroke="{x:Null}" StrokeThickness="1">
            <Path.Fill>
              <LinearGradientBrush StartPoint="-16.387411,24.453547" EndPoint="-9.7352734,28.195539" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FF5B8CCB" Offset="0" />
                  <GradientStop Color="#FF3465A4" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Fill>
          </Path>
          <Path Data="F1M-21.154435,34.298198L-21.154435,32.228906C-18.891039,32.523652,-16.814494,32.575587,-14.571646,32.015097L-14.549173,34.002778C-16.428593,34.619249,-19.36876,34.648251,-21.154435,34.298873L-21.154435,34.298198z" Fill="#FF4E9A06" Stroke="{x:Null}" StrokeThickness="1" />
          <Path Data="F1M-18.637411,24.454221L-14.571646,31.937532C-17.06106,32.88652,-21.154435,32.228906,-21.154435,32.228906L-18.637411,24.454221z" Stroke="{x:Null}" StrokeThickness="1">
            <Path.Fill>
              <LinearGradientBrush StartPoint="-17.863041,30.827509" EndPoint="-20.821646,25.015009" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FF73D216" Offset="0" />
                  <GradientStop Color="#FFD5F7B3" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Fill>
          </Path>
          <Path Data="M-6.875,24.375A11.75,7.75,0,1,1,-30.375,24.375A11.75,7.75,0,1,1,-6.875,24.375z" Fill="{x:Null}" StrokeThickness="1.85479879379272" StrokeMiterLimit="4" Opacity="0.31111115">
            <Path.Stroke>
              <LinearGradientBrush StartPoint="-20.75,29" EndPoint="-19.5,18.75" 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="0.946982026100159,0,0,0.889701008796692,-0.987460970878601,2.6885449886322" />
            </Path.RenderTransform>
          </Path>
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="0.587368011474609,0,0,0.587368011474609,30.8459701538086,-1.30117905139923" />
          </Canvas.RenderTransform>
        </Canvas>
        <Canvas>
          <Path Data="F1M30.015,35.956L31.492,35.959 25.217,31.321 24.778,31.307 30.016,35.955 30.015,35.956z" Fill="#FFA4A4A4" Stroke="{x:Null}" StrokeThickness="1" />
          <Path Data="F1M19.884,35.956L18.408,35.959 24.683,31.321 25.121,31.307 19.883,35.955 19.884,35.956z" Fill="#FFA4A4A4" Stroke="{x:Null}" StrokeThickness="1" />
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="1.53901600837708,0,0,1.53901600837708,-12.8986196517944,-11.0573101043701" />
          </Canvas.RenderTransform>
        </Canvas>
        <Path Data="F1M27.839689,36.499985C27.839689,37.792418 26.79243,38.839676 25.499998,38.839676 24.207565,38.839676 23.160308,37.792418 23.160308,36.499985 23.160308,35.211057 24.207565,34.1603 25.499998,34.1603 26.79243,34.1603 27.839689,35.211057 27.839689,36.499985z" Stroke="#FF555753" StrokeThickness="1" StrokeMiterLimit="4">
          <Path.Fill>
            <RadialGradientBrush Center="24.7744,30.9912" RadiusX="0.5902" RadiusY="0.5902" GradientOrigin="24.7744,30.9912" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFF0F0F0" Offset="0" />
                <GradientStop Color="#FF848484" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="3.5025269985199,0,0,3.5025269985199,-61.9300918579102,-72.8769607543945" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,-4,0" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="F1M3.0937501,1.5C2.0181721,1.5,1.1250001,2.3619222,1.1250001,3.4375L1.1250001,3.5625C1.1250001,4.6380778,2.0181731,5.5,3.0937501,5.5L3.5000001,5.5 3.5000001,32.5 20.5,32.5 20.5,34.40625C19.714268,34.784304 19.156249,35.572475 19.15625,36.5 19.15625,37.121424 19.417437,37.674846 19.8125,38.09375L11.4375,44.28125 13.6875,44.28125 13.71875,44.28125 20.25,38.46875C20.611822,38.698105 21.039794,38.84375 21.5,38.84375 21.945362,38.84375 22.364434,38.715891 22.71875,38.5L29.28125,44.28125 31.5625,44.28125 23.1875,38.09375C23.582563,37.674845 23.843751,37.121424 23.84375,36.5 23.84375,35.557693 23.274808,34.745202 22.46875,34.375L22.46875,32.5 39.5,32.5 39.5,5.5 39.96875,5.5C41.044328,5.5,41.90625,4.6380778,41.90625,3.5625L41.90625,3.4375C41.90625,2.3619222,41.044329,1.5,39.96875,1.5L3.0937501,1.5z" StrokeThickness="1" StrokeMiterLimit="4">
        <Path.Fill>
          <LinearGradientBrush StartPoint="33.125,25.390625" EndPoint="8.136234,25.390625" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
        <Path.Stroke>
          <LinearGradientBrush StartPoint="33.125,25.390625" EndPoint="8.1362343,25.390625" 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.081350483" RadiusY="0.089702792" Stroke="#FFC4A000" StrokeThickness="1.0273848772049" Width="9.9999991772049" Height="45.0000028772049" Canvas.Left="37.9999945613976" Canvas.Top="0.999999961397553">
          <Rectangle.Fill>
            <LinearGradientBrush StartPoint="-4.07326816527062,58.5419786925132" EndPoint="-13.5443720543828,15.3022127194274" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFC4A000" Offset="0" />
                <GradientStop Color="#FFFCE94F" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Fill>
        </Rectangle>
        <Rectangle Fill="{x:Null}" StrokeThickness="1.02699995040894" Width="8.00001285040894" Height="42.9996069504089" Opacity="0.70224723" Canvas.Left="38.9999960247955" Canvas.Top="2.00019332479553">
          <Rectangle.Stroke>
            <LinearGradientBrush StartPoint="1.4865,3.8613029" EndPoint="3.48650799999999,59.6113027" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Stroke>
        </Rectangle>
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2.9402711" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="3.0554543" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2.9402711" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="15.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2.9402711" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="27.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2.9402711" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="39.055496" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="5.0554543" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="7.0554543" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="9.0554543" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="11.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="13.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="17.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="19.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="21.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="23.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="25.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="29.055454" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="31.055475" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="33.055496" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="35.055496" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="37.055496" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="41.055496" />
        <Rectangle Fill="#B3C4A000" Stroke="{x:Null}" Width="2" Height="1" Opacity="0.70224723" Canvas.Left="39" Canvas.Top="43.055496" />
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,-0.999994993209839,-2.92062804874149E-06" />
        </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
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