Click here to Skip to main content
15,881,864 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="1.02563042303132" Canvas.Top="-6.96262788772583">
    <Canvas>
      <Canvas>
        <Rectangle Stroke="{x:Null}" Width="1339.6335" Height="478.35718" Opacity="0.40206185" Canvas.Left="-1559.2523" Canvas.Top="-150.69685">
          <Rectangle.Fill>
            <LinearGradientBrush StartPoint="507.316899099553,4.42934847058041E-05" EndPoint="507.316899099553,478.357303090243" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#00000000" Offset="0" />
                <GradientStop Color="#FF000000" Offset="0.5" />
                <GradientStop Color="#00000000" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Fill>
        </Rectangle>
        <Path Data="F1M-219.61876,-150.68038C-219.61876,-150.68038 -219.61876,327.65041 -219.61876,327.65041 -76.744594,328.55086 125.78146,220.48075 125.78138,88.454235 125.78138,-43.572302 -33.655436,-150.68036 -219.61876,-150.68038z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.40206185">
          <Path.Fill>
            <RadialGradientBrush Center="605.71429,486.64789" RadiusX="117.14286" RadiusY="117.14286" GradientOrigin="605.71429,486.64789" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="2.77438902854919,0,0,1.9697060585022,-1891.63305664063,-872.885375976563" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="F1M-1559.2523,-150.68038C-1559.2523,-150.68038 -1559.2523,327.65041 -1559.2523,327.65041 -1702.1265,328.55086 -1904.6525,220.48075 -1904.6525,88.454235 -1904.6525,-43.572302 -1745.2157,-150.68036 -1559.2523,-150.68038z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.40206185">
          <Path.Fill>
            <RadialGradientBrush Center="605.71429,486.64789" RadiusX="117.14286" RadiusY="117.14286" GradientOrigin="605.71429,486.64789" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="-2.77438902854919,0,0,1.9697060585022,112.762298583984,-872.885375976563" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="0.0245273988693953,0,0,0.0208675786852837,45.6905403137207,36.1535987854004" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="M11.28569,7.9626278C10.66069,7.9626278 10.254441,8.252808 10.004442,8.8063808 10.004441,8.8063808 3.5356915,25.909938 3.5356915,25.909938 3.5356915,25.909938 3.2856915,26.581497 3.2856915,27.691188 3.2856915,27.691188 3.2856915,37.341156 3.2856915,37.341156 3.2856915,38.423769 3.943477,38.966158 4.9419415,38.966156L43.50444,38.966156C44.489293,38.966156,45.09819,38.247976,45.09819,37.122406L45.09819,27.472438C45.09819,27.472438,45.204153,26.702015,45.00444,26.159938L38.28569,8.9626314C38.101165,8.4507246,37.648785,7.9745331,37.16069,7.9626278L11.28569,7.9626278z" Fill="{x:Null}" Stroke="#FF535353" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" />
      <Path Data="M3.2735915,26.996812L4.0381936,26.304597 41.647883,26.367097 45.11029,26.684395 45.11029,37.122927C45.11029,38.248496,44.503272,38.966258,43.518419,38.966258L4.9354314,38.966258C3.9369667,38.966258,3.2735915,38.424207,3.2735915,37.341594L3.2735915,26.996812z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="7.6046205,28.481176" EndPoint="36.183067,40.943935" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFBBBBBB" Offset="0" />
              <GradientStop Color="#FF9F9F9F" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M3.5490842,25.914404C2.8347985,27.37869 3.5484686,28.307261 4.5847985,28.307261 4.5847985,28.307261 43.584797,28.307261 43.584797,28.307261 44.703844,28.283451 45.430035,27.295356 45.013368,26.164403L38.299082,8.9537044C38.114558,8.4417976,37.64432,7.9656058,37.156225,7.9537008L11.299083,7.9537008C10.674083,7.9537008 10.263369,8.257274 10.01337,8.8108468 10.01337,8.8108468 3.5490842,25.914404 3.5490842,25.914404z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <RadialGradientBrush Center="15.571491,2.958519" RadiusX="20.935817" RadiusY="20.935817" GradientOrigin="15.571491,2.958519" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFE4E4E4" Offset="0" />
              <GradientStop Color="#FFD3D3D3" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1.28624200820923,0.781697988510132,-0.710781991481781,1.16955196857452,-2.35434794425964,-4.87686204910278" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
      </Path>
      <Rectangle RadiusX="0.1" RadiusY="0.1" Stroke="{x:Null}" Width="17.625" Height="5.5625" Canvas.Left="7.857996" Canvas.Top="31.174183">
        <Rectangle.Fill>
          <LinearGradientBrush StartPoint="-2.99329376218793E-06,2.78124595793915" EndPoint="17.6249970067062,2.78124595793915" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF838383" Offset="0" />
              <GradientStop Color="#00BBBBBB" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <Path Data="M7.8579947,36.73668C7.8579947,36.73668 7.8579947,32.725195 7.8579947,32.725195 9.6935221,35.904421 16.154485,36.73668 20.795492,36.73668 20.795492,36.73668 7.8579947,36.73668 7.8579947,36.73668z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.81142857">
        <Path.Fill>
          <LinearGradientBrush StartPoint="12.277412,37.205811" EndPoint="12.221823,33.758667" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFEEEEEE" Offset="0" />
              <GradientStop Color="#00EEEEEE" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M44.796162,25.628688C44.859684,26.878662 44.382159,27.944528 43.474046,27.972438 43.474046,27.972438 5.3553296,27.972437 5.3553297,27.972438 4.0660978,27.972438 3.4875937,27.647491 3.271279,27.104382 3.3630404,28.048714 4.0970964,28.753688 5.3553297,28.753688 5.3553296,28.753687 43.474046,28.753688 43.474046,28.753688 44.550053,28.720617 45.226851,27.329664 44.82621,25.758897L44.796162,25.628688z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
      <Path Data="M10.96875,10.15625C10.922675,10.356571 10.78125,10.543047 10.78125,10.75 10.78125,11.698605 11.37223,12.539474 12.125,13.34375 12.365268,13.189675 12.490117,12.989342 12.75,12.84375 11.809691,12.027746 11.196604,11.127168 10.96875,10.15625z M37.625,10.15625C37.396273,11.125866 36.782988,12.028676 35.84375,12.84375 36.117894,12.997332 36.247738,13.21199 36.5,13.375 37.257262,12.568344 37.8125,11.701956 37.8125,10.75 37.8125,10.543047 37.670906,10.356571 37.625,10.15625z M39.8125,18.59375C39.198709,22.633861 32.513887,25.84375 24.28125,25.84375 16.068996,25.843751 9.4211001,22.650964 8.78125,18.625 8.7488928,18.822132 8.65625,19.016882 8.65625,19.21875 8.6562503,23.536697 15.645354,27.062501 24.28125,27.0625 32.917146,27.0625 39.937499,23.536698 39.9375,19.21875 39.9375,19.005826 39.848449,18.801394 39.8125,18.59375z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.69142857">
        <Path.Fill>
          <LinearGradientBrush StartPoint="23.688078,11.318835" EndPoint="23.688078,26.357183" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#41FFFFFF" Offset="0" />
              <GradientStop Color="#FFFFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M8.5736699,25.593554A1.3700194,1.016466,0,1,1,5.833631,25.593554A1.3700194,1.016466,0,1,1,8.5736699,25.593554z" Fill="#75FFFFFF" Stroke="{x:Null}" StrokeThickness="1">
        <Path.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,0.0883884280920029,0.176776006817818" />
        </Path.RenderTransform>
      </Path>
      <Path Data="M8.5736699,25.593554A1.3700194,1.016466,0,1,1,5.833631,25.593554A1.3700194,1.016466,0,1,1,8.5736699,25.593554z" Fill="#75FFFFFF" Stroke="{x:Null}" StrokeThickness="1">
        <Path.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,33.9670486450195,0.0883880406618118" />
        </Path.RenderTransform>
      </Path>
      <Path Data="M11.642515,8.4157227C11.040823,8.4157227 10.649724,8.6950813 10.409049,9.22801 10.409048,9.22801 3.9940341,25.818732 3.9940341,25.818732 3.9940341,25.818732 3.7533573,26.465247 3.7533573,27.533555 3.7533573,27.533555 3.7533573,36.823651 3.7533573,36.823651 3.7533573,38.178391 4.1974134,38.45055 5.3478414,38.45055L43.034746,38.45055C44.357872,38.45055,44.569062,38.134153,44.569062,36.613058L44.569062,27.322962C44.569062,27.322962,44.671072,26.581271,44.478807,26.059409L37.885616,9.2534336C37.707973,8.7606171,37.334964,8.427184,36.865071,8.4157227L11.642515,8.4157227z" Fill="{x:Null}" StrokeThickness="1.00000023841858" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4">
        <Path.Stroke>
          <LinearGradientBrush StartPoint="12.378357,4.433136" EndPoint="44.0961,47.620636" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
      </Path>
      <Path Data="M40.5,31.429166L40.5,36.450101" Fill="{x:Null}" Stroke="#6CFFFFFF" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" />
      <Path Data="M38.5,31.488943L38.5,36.509878" Fill="{x:Null}" Stroke="#6CFFFFFF" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" />
      <Path Data="M36.5,31.488943L36.5,36.509878" Fill="{x:Null}" Stroke="#6CFFFFFF" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" />
      <Path Data="M34.5,31.488943L34.5,36.509878" Fill="{x:Null}" Stroke="#6CFFFFFF" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" />
      <Path Data="M32.5,31.488943L32.5,36.509878" Fill="{x:Null}" Stroke="#6CFFFFFF" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" />
      <Path Data="M30.5,31.488943L30.5,36.509878" Fill="{x:Null}" Stroke="#6CFFFFFF" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" />
      <Path Data="M39.5,31.479065L39.5,36.5" Fill="{x:Null}" Stroke="#19000000" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" Opacity="0.097142857" />
      <Path Data="M37.5,31.538842L37.5,36.559777" Fill="{x:Null}" Stroke="#19000000" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" Opacity="0.097142857" />
      <Path Data="M35.5,31.538842L35.5,36.559777" Fill="{x:Null}" Stroke="#19000000" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" Opacity="0.097142857" />
      <Path Data="M33.5,31.538842L33.5,36.559777" Fill="{x:Null}" Stroke="#19000000" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" Opacity="0.097142857" />
      <Path Data="M31.5,31.538842L31.5,36.559777" Fill="{x:Null}" Stroke="#19000000" StrokeThickness="1.00000047683716" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4" Opacity="0.097142857" />
      <Path Data="M7.875,31.1875L7.875,36.71875 20.4375,36.71875 8.21875,36.375 7.875,31.1875z" Fill="#70FFFFFF" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.44" />
      <Path Data="M39.875,19.5625A14.875,6.6875,0,1,1,10.125,19.5625A14.875,6.6875,0,1,1,39.875,19.5625z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.20571424">
        <Path.Fill>
          <LinearGradientBrush StartPoint="33.431175,31.964777" EndPoint="21.747974,11.780679" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#FFE6E6E6" Offset="0.5" />
              <GradientStop Color="#FFFFFFFF" Offset="0.75" />
              <GradientStop Color="#FFE1E1E1" Offset="0.84166663885116577" />
              <GradientStop Color="#FFFFFFFF" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="1.03781497478485,0,0,1.06074702739716,-1.63287794589996,-2.09462594985962" />
        </Path.RenderTransform>
      </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
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