Convert XAML Vector Graphic to PNG

Dirk Bahle

Rate me:

4.87/5 (11 votes)

23 Oct 2012CPOL12 min read

74.3K

6.8K

An introduction to the usage of vector graphics as a source of bitmap graphics.

XAMLToPNG_Sample.zip
- 00_Go up
  - 980b4f92-db2c-46f8-83ca-042b70ced31a.png
  - go-up.Canvas.backup
  - go-up.Canvas.xaml
- 00_letter.Canvas.xaml
- 01_mail forward
  - bc241dff-27e2-42a4-b252-35a170dc68d6.png
  - ForwardArrow.Canvas.xaml
  - mail-forward.Canvas.xaml
  - UpwardArrow.Canvas.xaml
- 01_protect.Canvas.xaml
- 02_letter-protect.Canvas.xaml
- 02_tango network wireless encrypted
  - 9d7bd680-e0c7-4038-ab20-cb7bf590f0ef.png
  - network-wireless-encrypted.Canvas.xaml
- 03_letter-protect.Canvas.xaml
- Convert.bat
TangoProject.zip
OpenIconLibrary.zip
XAMLtoPNG.zip
- XAMLtoPNG.sln
- XAMLtoPNG
  - Params.cs
  - Program.cs
  - Properties
    - AssemblyInfo.cs
  - XAMLtoPNG.csproj
  - XAMLtoPNG.csproj.user
  - XamlToPngConverter.cs

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas Canvas.Left="-1.04701091030847" Canvas.Top="-6.92857098579407">
    <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.02294846996665,0,0,0.0227681193500757,44.7558708190918,36.7425384521484" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="M4.857143,38.428571C4.6428572,39.428571,5.4642859,40.464285,6.8214287,40.428571L43,40.428571C44.285714,40.392857,44.714286,39.214285,44.428572,38.249999L36.571429,9.4285713 10.571429,9.4285713 4.857143,38.428571z" Fill="#FFA7A7A7" Stroke="#FF656565" StrokeThickness="1" StrokeMiterLimit="4" />
      <Path Data="M9.162504,30.806458L39.395095,30.806458C40.252297,30.806458,40.942392,31.478744,40.942392,32.313825L42.26958,37.11476C42.26958,37.949841,41.579486,38.622127,40.722283,38.622127L8.2777114,38.622127C7.4205088,38.622127,6.7304142,37.949841,6.7304142,37.11476L7.6152068,32.313825C7.6152068,31.478744,8.3053014,30.806458,9.162504,30.806458z" Fill="#1C000000" Stroke="#1C000000" StrokeThickness="0.999999582767487" StrokeMiterLimit="4" Opacity="0.10857142" />
      <Path Data="M6.0478436,37.805569C5.8479823,38.738255,5.6491963,39.385227,6.5227626,39.385227L42.837439,39.385227C43.753496,39.385227,43.579187,38.645537,43.312705,37.746161L35.770172,10.471961 11.520336,10.471961 6.0478436,37.805569z" Fill="{x:Null}" Stroke="#58FFFFFF" StrokeThickness="0.999999701976776" StrokeMiterLimit="4" />
      <Path Data="M9.6418018,29.928574L38.929626,29.928574C39.760041,29.928574,40.42857,30.579851,40.42857,31.388835L41.714284,36.039742C41.714284,36.848726,41.045755,37.500003,40.21534,37.500003L8.7846589,37.500003C7.9542438,37.500003,7.2857146,36.848726,7.2857146,36.039742L8.1428575,31.388835C8.1428575,30.579851,8.8113867,29.928574,9.6418018,29.928574z" Fill="#FFC5C5C5" Stroke="#FF696969" StrokeThickness="0.999999642372131" StrokeMiterLimit="4" />
      <Path Data="M9.6418018,27.785717L38.929626,27.785717C39.760041,27.785717,40.42857,28.436994,40.42857,29.245978L41.714284,33.896885C41.714284,34.705869,41.045755,35.357146,40.21534,35.357146L8.7846589,35.357146C7.9542438,35.357146,7.2857146,34.705869,7.2857146,33.896885L8.1428575,29.245978C8.1428575,28.436994,8.8113867,27.785717,9.6418018,27.785717z" Stroke="#FF696969" StrokeThickness="0.999999642372131" StrokeMiterLimit="4">
        <Path.Fill>
          <LinearGradientBrush StartPoint="6.7857148,31.571431023777" EndPoint="42.214284,31.571431023777" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFE2E2E2" Offset="0" />
              <GradientStop Color="#FF9F9F9F" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Canvas>
        <Path Data="M10.891973,11.500004L6.5714281,33.21429C6.5714281,33.21429 32.857143,33.214291 32.857143,33.214291 45.441975,33.214291 48.085306,29.21429 48.085306,29.21429 48.085306,29.21429 44.728164,28.035719 43.299593,23.071433 43.299593,23.071433 40.23864,11.500004 40.23864,11.500004L10.891973,11.500004z" Stroke="#FF696969" StrokeThickness="1.06095242500305" StrokeMiterLimit="4">
          <Path.Fill>
            <LinearGradientBrush StartPoint="13.357142,15.214289023777" EndPoint="42.214283,29.214290023777" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFE7EBEB" Offset="0" />
                <GradientStop Color="#FFE6EBEB" Offset="0.5" />
                <GradientStop Color="#FFFFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="M11.803734,12.474609L7.8122567,32.239668C7.8122567,32.239668 24.956518,32.239669 32.238382,32.239669 43.465021,32.239669 46.348811,29.388804 46.348811,29.388804 46.348811,29.388804 43.355751,27.525962 42.055419,23.007305 42.055419,23.007305 39.316856,12.546038 39.316856,12.546038L11.803734,12.474609z" Fill="{x:Null}" Stroke="#FFFFFFFF" StrokeThickness="1.06095194816589" StrokeMiterLimit="4" />
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="0.942548990249634,0,0,0.942548990249634,-0.222618997097015,1.85585999488831" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="M11.315699,7.4285707L36.494515,7.4285707C37.367632,7.4285707,38.070539,8.0973414,38.070539,8.9280566L38.427682,11.071942C38.427682,11.902657,37.724775,12.571428,36.851658,12.571428L10.958556,12.571428C10.085439,12.571428,9.3825323,11.902657,9.3825323,11.071942L9.7396752,8.9280566C9.7396752,8.0973414,10.442582,7.4285707,11.315699,7.4285707z" Fill="#FF9B9B9B" Stroke="#FF696969" StrokeThickness="0.999999523162842" StrokeMiterLimit="4" />
      <Path Data="F1M20.969159,22.39302C21.957574,22.486777 22.691543,22.765423 23.171063,23.228961 23.651181,23.687301 23.849054,24.273239 23.76468,24.986779 23.64087,26.033659 23.075908,26.877412 22.069796,27.518037 21.063667,28.158665 19.762256,28.478977 18.165559,28.478978 16.939741,28.478977 15.906445,28.286269 15.065668,27.900851L15.30588,25.869594C16.189321,26.478973 17.193659,26.783661 18.318897,26.78366 19.217824,26.783661 19.926554,26.637828 20.445092,26.346159 20.964233,26.049284 21.255527,25.632617 21.318975,25.096154 21.385488,24.533656 21.176411,24.122197 20.691744,23.861775 20.207063,23.601362 19.398966,23.471154 18.26745,23.471149L16.994488,23.471149 17.20144,21.721144 18.559266,21.721144C19.451905,21.72115 20.149975,21.585733 20.653477,21.314892 21.157582,21.038857 21.439509,20.648231 21.499262,20.143013 21.555304,19.669062 21.408536,19.288853 21.05896,19.002385 20.709369,18.715935 20.154261,18.572705 19.393634,18.572696 18.431836,18.572705 17.490216,18.853956 16.568772,19.416448L16.798822,17.47113C17.831208,17.033639 18.988597,16.814889 20.270993,16.814878 21.509374,16.814889 22.459536,17.072702 23.121484,17.588317 23.7897,18.103954 24.076386,18.76281 23.981543,19.564886 23.893455,20.309689 23.59823,20.919065 23.095869,21.393017 22.594104,21.861775 21.885201,22.195109 20.969159,22.39302" Fill="#FF000000" Stroke="{x:Null}" StrokeThickness="1" />
      <Path Data="F1M33.007379,28.45554L30.499173,28.45554 29.387875,19.096134 26.295373,19.893012 26.086657,18.135194 31.627997,16.838314 33.007379,28.45554" Fill="#FF000000" Stroke="{x:Null}" StrokeThickness="1" />
      <Path Data="M12.857143,9.9285717A1.3571428,1.3571428,0,1,1,10.142857,9.9285717A1.3571428,1.3571428,0,1,1,12.857143,9.9285717z" Fill="#86FEFEFE" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.52571428">
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.684211015701294,0,0,0.684211015701294,3.56015396118164,2.2781970500946" />
        </Path.RenderTransform>
      </Path>
      <Path Data="M13.042053,8.6010151L36.371309,8.6010151" Fill="{x:Null}" Stroke="#4DFFFFFF" StrokeThickness="1.00000011920929" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeMiterLimit="4" Opacity="0.30285713" />
    </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

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

Convert XAML Vector Graphic to PNG

License

Comments and Discussions