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.Background>  <DrawingBrush><DrawingBrush.Drawing><DrawingGroup>
  <DrawingGroup x:Name="DrawingLayer">
    <DrawingGroup.ClipGeometry>
      <RectangleGeometry Rect="0,0,507.946,507.946" />
    </DrawingGroup.ClipGeometry>
    <GeometryDrawing x:Name="path453">
      <GeometryDrawing.Brush>
        <LinearGradientBrush StartPoint="0.0225534,-0.165509" EndPoint="0.286059,0.299379" MappingMode="RelativeToBoundingBox" SpreadMethod="Pad" Opacity="0.7">
          <LinearGradientBrush.Transform>
            <TransformGroup>
              <MatrixTransform>0.290047,0.304671,-1.68407,1.67874,0.630124,0.253429</MatrixTransform>
              <MatrixTransform>10.2733,-4.00331,10.4625,-0.261953,-5068.49,1302.92</MatrixTransform>
            </TransformGroup>
          </LinearGradientBrush.Transform>
          <GradientStop Color="#FFFFFFFF" Offset="0" />
          <GradientStop Color="#FF000000" Offset="1" />
        </LinearGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="1.52491" StartLineCap="Round" EndLineCap="Round" LineJoin="Round">
          <Pen.Brush>
            <SolidColorBrush Color="#FF000027" Opacity="0.992157" />
          </Pen.Brush>
        </Pen>
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="Nonzero" Transform="10.2733,-4.00331,10.4625,-0.261953,-5068.49,1302.92" Figures="M295.174,235.849C296.39,234.639 300.683,229.606 299.748,228.823 298.093,226.544 293.673,223.485 291.446,220.874 289.472,218.522 285.597,214.452 283.126,213.07 282.018,212.411 277.157,215.521 275.88,217.325L202.733,289.217C200.157,292.231 197.516,295.062 197.466,296.663 198.404,299.595 203.227,303.365 205.147,305.1 207.319,307.096 211.534,311.764 213.936,313.119 215.801,313.69 214.555,314.031 219.336,310.173 219.336,310.173 291.54,239.389 295.174,235.849z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path97">
      <GeometryDrawing.Brush>
        <LinearGradientBrush StartPoint="0.0284568,-0.0693767" EndPoint="0.368605,0.263357" MappingMode="RelativeToBoundingBox" SpreadMethod="Pad" Opacity="0.7">
          <LinearGradientBrush.Transform>
            <TransformGroup>
              <MatrixTransform>0.290047,0.304671,-1.68407,1.67874,0.630124,0.25343</MatrixTransform>
              <MatrixTransform>10.2733,-4.00331,10.4625,-0.261953,-5046.05,1323.75</MatrixTransform>
            </TransformGroup>
          </LinearGradientBrush.Transform>
          <GradientStop Color="#D7E7DAD5" Offset="0" />
          <GradientStop Color="#FF797979" Offset="1" />
        </LinearGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="1.52491" StartLineCap="Round" EndLineCap="Round" LineJoin="Round">
          <Pen.Brush>
            <RadialGradientBrush Center="2.61424,1.7429" RadiusX="0.398819" RadiusY="0.398819" GradientOrigin="2.61424,1.7429" MappingMode="RelativeToBoundingBox" SpreadMethod="Pad" Opacity="0.992157" Transform="-0.0425609,0.662818,-1.6123,1.61327,0.618643,0.342371">
              <GradientStop Color="#77FFFFFF" Offset="0" />
              <GradientStop Color="#FF000000" Offset="1" />
            </RadialGradientBrush>
          </Pen.Brush>
        </Pen>
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="Nonzero" Transform="10.2733,-4.00331,10.4625,-0.261953,-5046.05,1323.75" Figures="M295.174,235.849C296.39,234.639 300.683,229.606 299.748,228.823 298.093,226.544 293.673,223.485 291.446,220.874 289.472,218.522 285.597,214.452 283.126,213.07 282.018,212.411 277.157,215.521 275.88,217.325L202.733,289.217C200.157,292.231 197.516,295.062 197.466,296.663 198.404,299.595 203.227,303.365 205.147,305.1 207.319,307.096 211.534,311.764 213.936,313.119 215.801,313.69 214.555,314.031 219.336,310.173 219.336,310.173 291.54,239.389 295.174,235.849z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path44">
      <GeometryDrawing.Brush>
        <RadialGradientBrush Center="-1.82926,1.31163" RadiusX="0.288501" RadiusY="0.288501" GradientOrigin="-1.82926,1.31163" MappingMode="RelativeToBoundingBox" SpreadMethod="Pad" Opacity="0.7">
          <RadialGradientBrush.Transform>
            <TransformGroup>
              <MatrixTransform>0.290047,0.304671,-1.68407,1.67874,0.630124,0.25343</MatrixTransform>
              <MatrixTransform>8.65261,-3.34551,8.81311,-0.246455,-4210.75,1156.54</MatrixTransform>
            </TransformGroup>
          </RadialGradientBrush.Transform>
          <GradientStop Color="#FF73FFFF" Offset="0" />
          <GradientStop Color="#FF2EA6B9" Offset="0.2809" />
          <GradientStop Color="#FF006B8B" Offset="1" />
        </RadialGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="2.11326" StartLineCap="Round" EndLineCap="Round" LineJoin="Round">
          <Pen.Brush>
            <SolidColorBrush Color="#FF1C5574" Opacity="0.99" />
          </Pen.Brush>
        </Pen>
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="Nonzero" Transform="8.65261,-3.34551,8.81311,-0.246455,-4210.75,1156.54" Figures="M296.022,235.14C297.238,233.93 300.683,229.606 299.748,228.823 298.093,226.544 293.673,223.485 291.446,220.874 289.472,218.522 285.559,214.412 283.088,213.03 281.98,212.371 277.157,215.521 275.88,217.325L200.926,290.982C196.815,295.321 196.141,297.397 197.394,297.643 199.289,299.581 203.227,303.365 205.147,305.1 207.319,307.096 211.534,311.764 213.936,313.119 215.801,313.69 214.555,314.031 219.336,310.173 219.336,310.173 292.388,238.68 296.022,235.14z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path443">
      <GeometryDrawing.Brush>
        <RadialGradientBrush Center="-5.51513,-1.48419" RadiusX="0.694199" RadiusY="0.694199" GradientOrigin="-5.51513,-1.48419" MappingMode="RelativeToBoundingBox" SpreadMethod="Pad" Opacity="1">
          <RadialGradientBrush.Transform>
            <TransformGroup>
              <MatrixTransform>1.6481,-1.64928,0.295229,0.311319,0.00343702,0.809113</MatrixTransform>
              <MatrixTransform>4.01635,-1.52219,0.751037,3.86913,114.026,178.321</MatrixTransform>
            </TransformGroup>
          </RadialGradientBrush.Transform>
          <GradientStop Color="#FDFBDDC7" Offset="0" />
          <GradientStop Color="#F3EFA81A" Offset="1" />
        </RadialGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="2.5" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter">
          <Pen.Brush>
            <SolidColorBrush Color="#FF580400" Opacity="0.992157" />
          </Pen.Brush>
        </Pen>
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="Nonzero" Transform="4.01635,-1.52219,0.751037,3.86913,114.026,178.321" Figures="M24.4795,58.2965C25.1783,59.8423 23.3275,60.6356 22.04,60.1472 19.3206,59.1157 19.3229,55.4623 20.7781,53.4175 23.3537,49.7983 28.6639,50.017 31.7981,52.7445 36.3688,56.722 35.9078,63.8747 31.8822,68.0547 26.5406,73.6011 17.4921,72.8854 12.2818,67.5499 5.74783,60.859 6.72374,49.8925 13.3754,43.6593 21.4086,36.1314 34.3043,37.3703 41.5563,45.3417 50.0819,54.7132 48.5785,69.5447 39.285,77.8128 28.5777,87.3387 11.8061,85.5698 2.52366,74.9527 -8.00414,62.9112 -5.96913,44.1967 5.97265,33.9012 19.3473,22.3702 40.0066,24.6718 51.3144,37.939 63.8493,52.646 61.281,75.2516 46.6877,87.571" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
  </DrawingGroup>
      </DrawingGroup></DrawingBrush.Drawing></DrawingBrush></Canvas.Background></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