Click here to Skip to main content
15,896,526 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="-6.15600583842024E-07" Canvas.Top="1.07288360595703E-06">
    <Canvas>
      <Canvas.RenderTransform>
        <MatrixTransform Matrix="1,0,0,1,26.5945644378662,28.000524520874" />
      </Canvas.RenderTransform>
    </Canvas>
    <Canvas>
      <Canvas>
        <Path Data="M23.688076,8.7574062L10.871765,26.499989 36.504387,26.499989 23.688076,8.7574062z" Fill="{x:Null}" StrokeThickness="3" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.15">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="24.7360340023932,37.4227492743826" EndPoint="24.4038896244135,16.5869715498986" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FF000000" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="M23.688076,8.7574062L10.871765,26.499989 36.504387,26.499989 23.688076,8.7574062z" StrokeThickness="1.00000011920929" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <RadialGradientBrush Center="107.69903,53.086113" RadiusX="12.551644" RadiusY="12.551644" GradientOrigin="107.69903,53.086113" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFD3D7CF" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="0.000741767114959657,-0.841008007526398,2.06172490119934,0.00181913108099252,-85.8407592773438,115.734901428223" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.Stroke>
            <LinearGradientBrush StartPoint="21.597084,14.977048" EndPoint="21.522573,34.510876" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF474845" Offset="0" />
                <GradientStop Color="#FF838681" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="M23.688071,10.492044L12.811768,25.591373 34.564374,25.502984 23.688071,10.492044z" Fill="{x:Null}" Stroke="#FFFFFFFF" StrokeThickness="1" StrokeMiterLimit="4" />
        <Rectangle RadiusX="0.3" RadiusY="0.3" Fill="{x:Null}" StrokeThickness="3" Width="28.882353" Height="7.9750595" Opacity="0.15" Canvas.Left="9.114329" Canvas.Top="29.004408">
          <Rectangle.Stroke>
            <LinearGradientBrush StartPoint="13.7467055416813,7.66834470853042" EndPoint="14.4145616059017,-12.1674359582963" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FF000000" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Stroke>
        </Rectangle>
        <Rectangle StrokeThickness="1.00000023841858" Width="26.8823532384186" Height="5.97505973841858" Canvas.Left="10.1143288807907" Canvas.Top="30.0044078807907">
          <Rectangle.Fill>
            <RadialGradientBrush Center="139.95472839928,48.182548537437" RadiusX="12.551644" RadiusY="12.551644" GradientOrigin="139.95472839928,48.182548537437" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFD3D7CF" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="0.000754195207264274,-0.786068022251129,2.09626889228821,0.00170029501896352,-88.1679611206055,111.919898986816" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Rectangle.Fill>
          <Rectangle.Stroke>
            <LinearGradientBrush StartPoint="10.982755,-15.52736" EndPoint="10.908244,4.006468" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF474845" Offset="0" />
                <GradientStop Color="#FF838681" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Rectangle.Stroke>
        </Rectangle>
        <Rectangle Fill="{x:Null}" Stroke="#FFFFFFFF" StrokeThickness="0.999999523162842" Width="24.8780495231628" Height="3.93026782316284" Canvas.Left="11.1164472384186" Canvas.Top="31.0530342384186" />
        <Path Data="M23.6875,11.3125L17.6875,19.625C22.683077,19.81186,24.399544,19.457194,29.0625,18.8125L23.6875,11.3125z" Fill="#8FFFFFFF" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.56111109" />
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,-35.7088928222656,4.59619474411011" />
        </Canvas.RenderTransform>
      </Canvas>
      <Canvas>
        <Canvas>
          <Path Data="M26.086565,12.829103L26.086565,34.982359 34.912658,34.982359 34.912658,12.829103 26.086565,12.829103z" Fill="{x:Null}" StrokeThickness="1.99999952316284" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.15">
            <Path.Stroke>
              <LinearGradientBrush StartPoint="29.7644884109688,12.5796066827017" EndPoint="29.6669710874176,34.9726890989006" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FF000000" Offset="0" />
                  <GradientStop Color="#7CFFFFFF" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Stroke>
          </Path>
          <Path Data="M26.4996,13.40575L26.4996,34.40575 34.4996,34.40575 34.4996,13.40575 26.4996,13.40575z" Stroke="{x:Null}" StrokeThickness="1">
            <Path.Fill>
              <RadialGradientBrush Center="169.77171,100.20107" RadiusX="11" RadiusY="11" GradientOrigin="169.77171,100.20107" MappingMode="Absolute">
                <RadialGradientBrush.GradientStops>
                  <GradientStop Color="#FFFFFFFF" Offset="0" />
                  <GradientStop Color="#FFD3D7CF" Offset="1" />
                </RadialGradientBrush.GradientStops>
                <RadialGradientBrush.Transform>
                  <MatrixTransform Matrix="3.56230907527788E-06,-1.0720499753952,1.99210405349731,-1.25065798783908E-06,-175.612106323242,212.694900512695" />
                </RadialGradientBrush.Transform>
              </RadialGradientBrush>
            </Path.Fill>
          </Path>
          <Path Data="M26.4996,13.407946L26.4996,34.50001 34.4996,34.50001 34.4996,13.407946 26.4996,13.407946z" Fill="{x:Null}" StrokeThickness="1.00000011920929" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4">
            <Path.Stroke>
              <LinearGradientBrush StartPoint="23.9996032714844,39.3592749907017" EndPoint="23.9996032714844,22.1509613379259" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FFBABDB6" Offset="0" />
                  <GradientStop Color="#FF555753" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Stroke>
          </Path>
          <Path Data="M27.4996,14.40575L27.4996,33.40575 33.4996,33.40575 33.4996,14.40575 27.4996,14.40575z" Fill="{x:Null}" StrokeThickness="0.999999701976776" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4">
            <Path.Stroke>
              <LinearGradientBrush StartPoint="15.0891210000101,15.1977340077581" EndPoint="13.9996000000101,52.4163140077581" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FFFFFFFF" Offset="0" />
                  <GradientStop Color="#00FFFFFF" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Stroke>
          </Path>
          <Path Data="F1M28.019106,14.942758L28.019106,23.328389 33.013048,22.70967 33.013048,14.85437 28.019106,14.942758z" Fill="#80F7F7F7" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.5" />
        </Canvas>
        <Canvas>
          <Path Data="M26.086565,12.829103L26.086565,34.982359 34.912658,34.982359 34.912658,12.829103 26.086565,12.829103z" Fill="{x:Null}" StrokeThickness="1.99999952316284" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.15">
            <Path.Stroke>
              <LinearGradientBrush StartPoint="29.7644884109688,12.5796066827017" EndPoint="29.6669710874176,34.9726890989006" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FF000000" Offset="0" />
                  <GradientStop Color="#7CFFFFFF" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Stroke>
          </Path>
          <Path Data="M26.4996,13.40575L26.4996,34.40575 34.4996,34.40575 34.4996,13.40575 26.4996,13.40575z" Stroke="{x:Null}" StrokeThickness="1">
            <Path.Fill>
              <RadialGradientBrush Center="169.77171,100.20107" RadiusX="11" RadiusY="11" GradientOrigin="169.77171,100.20107" MappingMode="Absolute">
                <RadialGradientBrush.GradientStops>
                  <GradientStop Color="#FFFFFFFF" Offset="0" />
                  <GradientStop Color="#FFD3D7CF" Offset="1" />
                </RadialGradientBrush.GradientStops>
                <RadialGradientBrush.Transform>
                  <MatrixTransform Matrix="3.56230907527788E-06,-1.0720499753952,1.99210405349731,-1.25065798783908E-06,-175.612106323242,212.694900512695" />
                </RadialGradientBrush.Transform>
              </RadialGradientBrush>
            </Path.Fill>
          </Path>
          <Path Data="M26.4996,13.407946L26.4996,34.50001 34.4996,34.50001 34.4996,13.407946 26.4996,13.407946z" Fill="{x:Null}" StrokeThickness="1.00000011920929" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4">
            <Path.Stroke>
              <LinearGradientBrush StartPoint="23.9996032714844,39.3592749907017" EndPoint="23.9996032714844,22.1509613379259" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FFBABDB6" Offset="0" />
                  <GradientStop Color="#FF555753" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Stroke>
          </Path>
          <Path Data="M27.4996,14.40575L27.4996,33.40575 33.4996,33.40575 33.4996,14.40575 27.4996,14.40575z" Fill="{x:Null}" StrokeThickness="0.999999701976776" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4">
            <Path.Stroke>
              <LinearGradientBrush StartPoint="15.0891210000101,15.1977340077581" EndPoint="13.9996000000101,52.4163140077581" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FFFFFFFF" Offset="0" />
                  <GradientStop Color="#00FFFFFF" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Stroke>
          </Path>
          <Path Data="F1M28.019106,14.942758L28.019106,25.007768 33.013048,24.389049 33.013048,14.85437 28.019106,14.942758z" Fill="#80F7F7F7" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.5" />
          <Canvas.RenderTransform>
            <MatrixTransform Matrix="1,0,0,1,-12.9722900390625,0" />
          </Canvas.RenderTransform>
        </Canvas>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,-0.767329573631287,-35.6562576293945" />
        </Canvas.RenderTransform>
      </Canvas>
      <Canvas>
        <Canvas />
        <Canvas>
          <Path Data="M12,39.5L12,9 38.06998,23.817079 12,39.5z" Fill="{x:Null}" StrokeThickness="1.99999833106995" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.15">
            <Path.Stroke>
              <LinearGradientBrush StartPoint="26.0106352498302,31.4227556466293" EndPoint="26.0534903325624,16.9619676260676" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FFFFFFFF" Offset="0" />
                  <GradientStop Color="#FF000000" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Stroke>
          </Path>
          <Path Data="M12.49946,37.81149L12.49946,10.000005 36.602747,23.905748 12.49946,37.81149z" Stroke="{x:Null}" StrokeThickness="1">
            <Path.Fill>
              <RadialGradientBrush Center="107.5884,83.990814" RadiusX="12.551644" RadiusY="12.551644" GradientOrigin="107.5884,83.990814" MappingMode="Absolute">
                <RadialGradientBrush.GradientStops>
                  <GradientStop Color="#FFFFFFFF" Offset="0" />
                  <GradientStop Color="#FFD3D7CF" Offset="1" />
                </RadialGradientBrush.GradientStops>
                <RadialGradientBrush.Transform>
                  <MatrixTransform Matrix="0.0532434172928333,-0.836238026618958,2.0194730758667,0.1285679936409,-151.919494628906,108.076797485352" />
                </RadialGradientBrush.Transform>
              </RadialGradientBrush>
            </Path.Fill>
          </Path>
          <Path Data="M12.49946,37.81149L12.49946,10.000005 36.602747,23.905748 12.49946,37.81149z" Fill="{x:Null}" StrokeThickness="1.00000035762787" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4">
            <Path.Stroke>
              <LinearGradientBrush StartPoint="26.2885363833008,53.0222664599609" EndPoint="25.8265223833008,23.9057464599609" MappingMode="Absolute" SpreadMethod="Pad">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="#FFADB0A8" Offset="0" />
                  <GradientStop Color="#FF464744" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Path.Stroke>
          </Path>
          <Path Data="M12.99946,10.87449L12.99946,36.93699 35.59321,23.90574 12.99946,10.87449z M13.99946,12.62449L33.56196,23.90574 13.99946,35.18699 13.99946,12.62449z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
          <Path Data="F1M13.9375,12.5625L13.9375,24.25C18.206698,24.205215,23.101656,23.904436,31,22.375L13.9375,12.5625z" Fill="#80FFFFFF" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.5" />
        </Canvas>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,-35.6415901184082,-36.0005264282227" />
        </Canvas.RenderTransform>
      </Canvas>
      <Canvas>
        <Path Data="M14.00382,12.829103L14.00382,34.982359 35.000004,34.982359 35.000004,12.829103 14.00382,12.829103z" Fill="{x:Null}" StrokeThickness="1.99999952316284" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4" Opacity="0.15">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="22.7533468540382,12.5796066827017" EndPoint="22.5213650830841,34.9726890989006" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF000000" Offset="0" />
                <GradientStop Color="#7CFFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="M14.5,13.40575L14.5,34.40575 34.5,34.40575 34.5,13.40575 14.5,13.40575z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <RadialGradientBrush Center="169.77171,100.20107" RadiusX="11" RadiusY="11" GradientOrigin="169.77171,100.20107" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFD3D7CF" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="8.90577211976051E-06,-1.0720499753952,4.98025989532471,-1.25065798783908E-06,-490.779205322266,212.694900512695" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="M14.496737,13.407946L14.496737,34.50001 34.487808,34.50001 34.487808,13.407946 14.496737,13.407946z" Fill="{x:Null}" StrokeThickness="0.999999523162842" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="8.249591588974,39.3592749907017" EndPoint="8.249591588974,22.1509613379259" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFBABDB6" Offset="0" />
                <GradientStop Color="#FF555753" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="M15.499412,14.40575L15.499412,33.40575 33.500595,33.40575 33.500595,14.40575 15.499412,14.40575z" Fill="{x:Null}" StrokeThickness="0.999999761581421" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeDashCap="Square" StrokeMiterLimit="4">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="-21.734447677712,15.1977340077581" EndPoint="-25.0032262802124,52.4163140077581" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="F1M16,14.942758L16,25.5 33,22.70967 33,14.85437 16,14.942758z" Fill="#80F7F7F7" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.5" />
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,-1.08689320087433,1.37015545368195" />
        </Canvas.RenderTransform>
      </Canvas>
      <Canvas.RenderTransform>
        <MatrixTransform Matrix="1,0,0,1,26.5945644378662,28.000524520874" />
      </Canvas.RenderTransform>
    </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

Web01 2.8:2024-04-02:1