Click here to Skip to main content
15,884,177 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.Background>  <DrawingBrush><DrawingBrush.Drawing><DrawingGroup>
  <DrawingGroup x:Name="DrawingLayer">
    <DrawingGroup.ClipGeometry>
      <RectangleGeometry Rect="0,0,507.946,507.946" />
    </DrawingGroup.ClipGeometry>
    <GeometryDrawing x:Name="path97">
      <GeometryDrawing.Brush>
        <LinearGradientBrush StartPoint="-0.170794,-0.0989204" EndPoint="0.604193,0.336092" 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>7.69756,-2.10499,7.90173,2.05061,-3733.49,274.355</MatrixTransform>
            </TransformGroup>
          </LinearGradientBrush.Transform>
          <GradientStop Color="#FFFFFFFF" Offset="0" />
          <GradientStop Color="#FF000000" Offset="1" />
        </LinearGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="1.74243" 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="7.69756,-2.10499,7.90173,2.05061,-3733.49,274.355" Figures="M296.008,235.336C297.224,234.126 301.8,229.971 301.107,229.437 298.808,227.788 289.818,232.812 284.927,227.466 279.915,221.996 283.755,214.066 282.427,211.571 282.193,211.029 277.938,214.76 275.759,217.201L201.514,289.495C192.229,304.375 196.054,306.939 199.503,311.809 203.344,316.299 212.239,315.56 219.336,310.173 219.336,310.173 292.374,238.876 296.008,235.336z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path119">
      <GeometryDrawing.Brush>
        <LinearGradientBrush StartPoint="-0.41911,-0.14206" EndPoint="0.829022,0.332239" 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>0.737318,-1.59074,0.756875,1.54963,-58.9184,295.749</MatrixTransform>
            </TransformGroup>
          </LinearGradientBrush.Transform>
          <GradientStop Color="#FFFFFFFF" Offset="0" />
          <GradientStop Color="#FF000000" Offset="1" />
        </LinearGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="2.59055" 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="0.737318,-1.59074,0.756875,1.54963,-58.9184,295.749" Figures="M295.215,234.522C296.431,233.312 298.175,228.107 291.446,220.874 283.924,212.827 278.849,213.872 277.572,215.676L200.499,290.484C197.923,293.498 198.81,298.154 205.147,305.1 211.03,310.903 214.893,313.701 219.336,310.173 219.336,310.173 291.581,238.062 295.215,234.522z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path122">
      <GeometryDrawing.Brush>
        <LinearGradientBrush StartPoint="-0.41911,-0.14206" EndPoint="0.829022,0.332239" 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>0.737318,-1.64784,0.756875,1.60527,-118.126,311.32</MatrixTransform>
            </TransformGroup>
          </LinearGradientBrush.Transform>
          <GradientStop Color="#FFFFFFFF" Offset="0" />
          <GradientStop Color="#FF000000" Offset="1" />
        </LinearGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="2.54526" 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="0.737318,-1.64784,0.756875,1.60527,-118.126,311.32" Figures="M295.215,234.522C296.431,233.312 298.175,228.107 291.446,220.874 283.924,212.827 278.849,213.872 277.572,215.676L200.499,290.484C197.923,293.498 198.81,298.154 205.147,305.1 211.03,310.903 214.893,313.701 219.336,310.173 219.336,310.173 291.581,238.062 295.215,234.522z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path123">
      <GeometryDrawing.Brush>
        <LinearGradientBrush StartPoint="-0.41911,-0.14206" EndPoint="0.829022,0.332239" 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>0.737318,-1.61929,0.756875,1.57745,-177.926,301.13</MatrixTransform>
            </TransformGroup>
          </LinearGradientBrush.Transform>
          <GradientStop Color="#FFFFFFFF" Offset="0" />
          <GradientStop Color="#FF000000" Offset="1" />
        </LinearGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="2.56761" 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="0.737318,-1.61929,0.756875,1.57745,-177.926,301.13" Figures="M295.215,234.522C296.431,233.312 298.175,228.107 291.446,220.874 283.924,212.827 278.849,213.872 277.572,215.676L200.499,290.484C197.923,293.498 198.81,298.154 205.147,305.1 211.03,310.903 214.893,313.701 219.336,310.173 219.336,310.173 291.581,238.062 295.215,234.522z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path124">
      <GeometryDrawing.Brush>
        <LinearGradientBrush StartPoint="-0.41911,-0.14206" EndPoint="0.829022,0.332239" 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>0.737318,-1.61929,0.756875,1.57745,-233.731,281.902</MatrixTransform>
            </TransformGroup>
          </LinearGradientBrush.Transform>
          <GradientStop Color="#FFFFFFFF" Offset="0" />
          <GradientStop Color="#FF000000" Offset="1" />
        </LinearGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="2.56761" 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="0.737318,-1.61929,0.756875,1.57745,-233.731,281.902" Figures="M295.215,234.522C296.431,233.312 298.175,228.107 291.446,220.874 283.924,212.827 278.849,213.872 277.572,215.676L200.499,290.484C197.923,293.498 198.81,298.154 205.147,305.1 211.03,310.903 214.893,313.701 219.336,310.173 219.336,310.173 291.581,238.062 295.215,234.522z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path125">
      <GeometryDrawing.Brush>
        <LinearGradientBrush StartPoint="-0.41911,-0.14206" EndPoint="0.829022,0.332239" 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>0.737318,-1.61929,0.756875,1.57745,-6.91192,270.686</MatrixTransform>
            </TransformGroup>
          </LinearGradientBrush.Transform>
          <GradientStop Color="#FFFFFFFF" Offset="0" />
          <GradientStop Color="#FF000000" Offset="1" />
        </LinearGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="2.56761" 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="0.737318,-1.61929,0.756875,1.57745,-6.91192,270.686" Figures="M295.215,234.522C296.431,233.312 298.175,228.107 291.446,220.874 283.924,212.827 278.849,213.872 277.572,215.676L200.499,290.484C197.923,293.498 198.81,298.154 205.147,305.1 211.03,310.903 214.893,313.701 219.336,310.173 219.336,310.173 291.581,238.062 295.215,234.522z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path126">
      <GeometryDrawing.Brush>
        <RadialGradientBrush Center="2.04579,2.89254" RadiusX="0.355974" RadiusY="0.355974" GradientOrigin="2.04579,2.89254" MappingMode="RelativeToBoundingBox" SpreadMethod="Pad" Opacity="0.7">
          <RadialGradientBrush.Transform>
            <TransformGroup>
              <MatrixTransform>-1.18903,1.16401,-0.411914,-0.437777,0.640433,0.360947</MatrixTransform>
              <MatrixTransform>-1.82304,-1.65737,1.76815,-1.74511,240.795,961.199</MatrixTransform>
            </TransformGroup>
          </RadialGradientBrush.Transform>
          <GradientStop Color="#FFFFFFFF" Offset="0" />
          <GradientStop Color="#FF797979" Offset="1" />
        </RadialGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="3.69188" 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="-1.82304,-1.65737,1.76815,-1.74511,240.795,961.199" Figures="M296.124,232.741C297.322,228.793 298.151,224.457 293.276,219.136 287.938,213.337 282.32,216.085 277.358,217.716 258.423,226.785 246.258,235.745 231.918,249.051 217.12,262.791 207.312,275.482 200.755,293.914 198.191,298.753 198.383,303.151 202.865,308.185 207.812,313.697 213.045,312.702 219.8,310.651 228.065,307.392 242.486,300.166 263.889,278.955 285.755,258.223 293.422,239.942 296.124,232.741z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing x:Name="path128">
      <GeometryDrawing.Brush>
        <RadialGradientBrush Center="1.40857,-1.21957" RadiusX="0.807886" RadiusY="0.807886" GradientOrigin="1.40857,-1.21957" MappingMode="RelativeToBoundingBox" SpreadMethod="Pad" Opacity="0.7">
          <RadialGradientBrush.Transform>
            <TransformGroup>
              <MatrixTransform>0.362573,1.12114,-1.00237,-0.341457,0.570795,0.432034</MatrixTransform>
              <MatrixTransform>-0.925914,-1.53509,1.78688,0.288889,66.2602,292.912</MatrixTransform>
            </TransformGroup>
          </RadialGradientBrush.Transform>
          <GradientStop Color="#FFFFFFFF" Offset="0" />
          <GradientStop Color="#FF000000" Offset="1" />
        </RadialGradientBrush>
      </GeometryDrawing.Brush>
      <GeometryDrawing.Pen>
        <Pen Thickness="3.8514" 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="-0.925914,-1.53509,1.78688,0.288889,66.2602,292.912" Figures="M188.343,172.91C176.376,162.635 168.539,158.38 164.297,162.336 160.387,167.386 168.026,174.283 178.038,185.389 190.121,196.058 203.237,206.445 202.845,219.356 202.121,231.172 197.105,228.263 173.759,221.224 165.199,220.355 163.64,218.968 167.248,228.323 169.707,237.112 181.043,244.676 191.025,247.617 205.933,254.022 225.307,259.2 226.808,235.031 229.111,217.437 207.469,187.901 188.343,172.91z" />
      </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
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