Click here to Skip to main content
15,886,873 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.4K   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="-2.75000643504086" Canvas.Top="-3.1464462">
    <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.0210546087473631,0,0,0.0208675786852837,42.8517189025879,41.1535987854004" />
        </Canvas.RenderTransform>
      </Canvas>
    </Canvas>
    <Canvas>
      <Rectangle RadiusX="0.1" RadiusY="1.1490486" StrokeThickness="1" Width="35.875" Height="41.920494" Canvas.Left="6.1035528" Canvas.Top="3.1464462">
        <Rectangle.Fill>
          <RadialGradientBrush Center="27.0915090545987,32.2345298533532" RadiusX="86.70845" RadiusY="86.70845" GradientOrigin="27.0915090545987,32.2345298533532" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFFAFAFA" Offset="0" />
              <GradientStop Color="#FFBBBBBB" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="0.96049302816391,0,0,1.0411319732666,0,0" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Rectangle.Fill>
        <Rectangle.Stroke>
          <RadialGradientBrush Center="2.00449021036233,0.225374712099851" RadiusX="37.751713" RadiusY="37.751713" GradientOrigin="2.00449021036233,0.225374712099851" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFA3A3A3" Offset="0" />
              <GradientStop Color="#FF4C4C4C" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="0.968272984027863,0,0,1.03276705741882,3.35355305671692,0.646447002887726" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Rectangle.Stroke>
      </Rectangle>
      <Rectangle RadiusX="0.14904857" RadiusY="0.14904857" Fill="{x:Null}" StrokeThickness="1" Width="33.775887" Height="39.946384" Canvas.Left="7.1660538" Canvas.Top="4.0839462">
        <Rectangle.Stroke>
          <RadialGradientBrush Center="0.226312262447145,2.82938738943332" RadiusX="38.158695" RadiusY="38.158695" GradientOrigin="0.226312262447145,2.82938738943332" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#FFF8F8F8" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="0.968272984027863,0,0,1.03276705741882,3.35355305671692,0.646447002887726" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Rectangle.Stroke>
      </Rectangle>
      <Canvas>
        <Canvas>
          <Path Data="F1M23.428,113.07C23.428,115.043 21.828,116.642 19.855,116.642 17.881,116.642 16.282,115.042 16.282,113.07 16.282,111.096 17.882,109.497 19.855,109.497 21.828,109.497 23.428,111.097 23.428,113.07z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
          <Path Data="F1M23.428,63.07C23.428,65.043 21.828,66.643 19.855,66.643 17.881,66.643 16.282,65.043 16.282,63.07 16.282,61.096 17.882,59.497 19.855,59.497 21.828,59.497 23.428,61.097 23.428,63.07z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="0.229702994227409,0,0,0.229702994227409,4.96708106994629,4.24497222900391" />
          </Canvas.RenderTransform>
        </Canvas>
        <Path Data="F1M9.9950109,29.952326C9.9950109,30.40553 9.6274861,30.772825 9.1742821,30.772825 8.7208483,30.772825 8.3535532,30.405301 8.3535532,29.952326 8.3535532,29.498892 8.721078,29.131597 9.1742821,29.131597 9.6274861,29.131597 9.9950109,29.499122 9.9950109,29.952326z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <RadialGradientBrush Center="20.8921,114.5684" RadiusX="5.256" RadiusY="5.256" GradientOrigin="20.8921,114.5684" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFF0F0F0" Offset="0" />
                <GradientStop Color="#FF9A9A9A" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="0.229702994227409,0,0,0.229702994227409,4.61352920532227,3.97980809211731" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="F1M9.9950109,18.467176C9.9950109,18.92038 9.6274861,19.287905 9.1742821,19.287905 8.7208483,19.287905 8.3535532,18.92038 8.3535532,18.467176 8.3535532,18.013742 8.721078,17.646447 9.1742821,17.646447 9.6274861,17.646447 9.9950109,18.013972 9.9950109,18.467176z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <RadialGradientBrush Center="20.8921,64.5679" RadiusX="5.257" RadiusY="5.257" GradientOrigin="20.8921,64.5679" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFF0F0F0" Offset="0" />
                <GradientStop Color="#FF9A9A9A" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="0.229702994227409,0,0,0.229702994227409,4.61352920532227,3.97980809211731" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,0.646447002887726,-0.03798932954669" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="M11.505723,5.4942766L11.505723,43.400869" Fill="{x:Null}" Stroke="#04000000" StrokeThickness="0.988553106784821" StrokeMiterLimit="4" />
      <Path Data="M12.5,5.0205154L12.5,43.038228" Fill="{x:Null}" Stroke="#34FFFFFF" StrokeThickness="1" StrokeMiterLimit="4" />
    </Canvas>
    <Canvas>
      <Canvas>
        <Path Data="F1M50.204582,47.404518L30.293968,27.493904 50.204582,7.5832887 70.115196,27.493904 50.204582,47.404518 50.204582,47.404518z" Stroke="#FF3E3E3E" StrokeThickness="1.42079257965088" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <LinearGradientBrush StartPoint="45.356826154241,6.25269816904664" EndPoint="56.0379237513393,53.0539038773805" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF464646" Offset="0" />
                <GradientStop Color="#FFCDCDCD" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="F1M34.844554,31.353332L35.583003,30.329148C36.219753,30.59764,36.883622,30.814217,37.569187,30.974033L37.563375,32.550891C37.991103,32.639226,38.426385,32.707027,38.86748,32.755262L39.349254,31.253373C39.693295,31.28185 40.041018,31.29754 40.392615,31.29754 40.743824,31.29754 41.091739,31.282043 41.435781,31.253373L41.917556,32.755262C42.358844,32.707027,42.793932,32.639226,43.22166,32.550891L43.215655,30.97384C43.901413,30.814217,44.565088,30.59764,45.201837,30.329148L46.124317,31.60865C46.526668,31.426556,46.918558,31.226059,47.299212,31.008128L46.806395,29.510112C47.403625,29.147862,47.968118,28.736793,48.493866,28.28214L49.766007,29.213919C50.091645,28.917338,50.403336,28.605647,50.699723,28.280009L49.768138,27.008062C50.222985,26.482314,50.634054,25.918015,50.996304,25.320397L52.494319,25.813408C52.712251,25.43256,52.912942,25.040476,53.094648,24.63832L51.81534,23.716033C52.083832,23.079284,52.300408,22.415415,52.460419,21.729657L54.037082,21.735468C54.125417,21.307741,54.193219,20.872458,54.24126,20.43117L52.739565,19.949396C52.768429,19.605548 52.783732,19.257632 52.783732,18.906229 52.783732,18.554826 52.768041,18.207104 52.739565,17.862868L54.24126,17.381094C54.193413,16.94,54.125223,16.504911,54.037276,16.07699L52.460225,16.082995C52.300408,15.397236,52.083832,14.733368,51.815534,14.096814L53.094842,13.174525C52.913135,12.772174,52.712251,12.380283,52.494707,11.999435L50.996498,12.492446C50.634247,11.895022,50.223179,11.330723,49.768525,10.805169L50.700111,9.5330282C50.421739,9.2271488,50.129033,8.9350234,49.824703,8.6549084L30.985708,27.494098 31.99265,28.50104 32.291362,28.282334C32.81711,28.736987,33.381408,29.148056,33.978832,29.510306L33.736879,30.245463 34.844941,31.353525 34.844554,31.353332z" Fill="#80FFFFFF" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.5" />
        <Path Data="F1M54.367757,36.399276C54.367757,29.914594,58.60164,24.419807,64.454997,22.525253L62.228025,20.298086C62.211171,20.305061,62.194125,20.311066,62.177465,20.318233L61.995952,20.066401 60.583948,18.654397C60.12077,18.873297,59.667278,19.108857,59.224634,19.362045L59.918723,21.471238C59.077409,21.980907,58.282975,22.559928,57.542976,23.19997L55.751866,21.888311C55.293145,22.305771,54.854569,22.744347,54.437302,23.202876L55.748767,24.99379C55.108726,25.733985,54.529899,26.528418,54.020036,27.369538L51.910649,26.675449C51.603995,27.211852,51.321556,27.763753,51.065655,28.330181L52.866837,29.628474C52.488895,30.524803,52.183985,31.459488,51.959079,32.424975L49.73908,32.416451C49.614908,33.018717,49.519211,33.631639,49.451604,34.252502L51.566027,34.9309C51.525734,35.415193 51.504036,35.90491 51.504036,36.39947 51.504036,36.894223 51.525734,37.38394 51.566027,37.868233L49.451604,38.546049C49.519211,39.1673,49.614908,39.780028,49.739274,40.382294L51.959079,40.373964C52.183985,41.339451,52.488895,42.274136,52.866837,43.170466L51.065655,44.468952C51.208037,44.783742,51.359524,45.093883,51.517791,45.399375L55.321814,41.595739C54.705794,39.981494,54.367564,38.229903,54.367564,36.39947L54.367757,36.399276z" Fill="#80FFFFFF" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.5" />
        <Path Data="F1M50.204564,45.706929L31.991529,27.493894 50.204564,9.2808575 68.417599,27.493894 50.204564,45.706929 50.204564,45.706929z" Fill="{x:Null}" StrokeThickness="1.42079162597656" StrokeMiterLimit="4" Opacity="0.52046784">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="44.592766,9.9124937" EndPoint="65.862885,43.31715" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="0.703832983970642,0,0,0.703832983970642,-1.92483496665955,14.3299703598022" />
        </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