Click here to Skip to main content
15,885,985 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 Canvas.Left="-4.57670402526855" Canvas.Top="-7.29515218734741">
    <Canvas>
      <Path Data="M41.75,35.375A18.5,7.375,0,1,1,4.75,35.375A18.5,7.375,0,1,1,41.75,35.375z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.3">
        <Path.Fill>
          <RadialGradientBrush Center="23.25,35.375" RadiusX="18.5" RadiusY="18.5" GradientOrigin="23.25,35.375" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1,0,0,0.398649007081985,0,21.2728004455566" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,0,2.83464598655701" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M41.625,7.7951523C41.625,7.7951523,18.5625,10.629798,18.5625,10.629798L18.5625,32.411048C16.916545,31.853397 14.630715,31.707619 12.125,32.223548 7.768686,33.120517 4.6471398,35.523035 5.125,37.567298 5.6028601,39.611561 9.518685,40.558018 13.875,39.661048 17.991641,38.813428 21.559123,36.623246 21.477633,34.661048L21.633883,15.629798C21.633883,15.629798,38.56434,12.734492,38.56434,12.734492L38.56434,30.019106C28.31434,28.519106 25.272139,32.912342 25.75,34.956606 26.22786,37.000869 30.143686,37.947325 34.5,37.050356 38.365376,36.254471 41.13241,34.287145 41.40625,32.425356L41.625,7.7951523z" Fill="#FF9DB029" Stroke="#FF596616" StrokeThickness="1" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4" />
      <Path Data="F1M40.729036,8.8956383C40.729036,8.8956383,19.547267,11.730284,19.547267,11.730284L19.547267,33.568621C11.982012,31.663311 5.8141632,35.40303 6.2685944,37.347065 6.9730255,40.6661 20.646969,38.449299 20.569474,34.208305L20.718063,14.735139C20.718063,14.735139,39.568437,11.842807,39.568437,11.842807L39.568437,31.279973C32.002153,29.353326 26.302939,32.656357 26.757371,34.600393 27.336802,37.794428 39.135597,36.713755 40.521011,31.943247L40.729036,8.8956383z" Fill="{x:Null}" Stroke="#82FFFFFF" StrokeThickness="1" StrokeMiterLimit="4" Opacity="0.51176471" />
      <Path Data="F1M12.25,32.75A6.375,3.25,0,1,1,-0.5,32.75A6.375,3.25,0,1,1,12.25,32.75z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.51176471">
        <Path.Fill>
          <RadialGradientBrush Center="4.3920336,32.307854" RadiusX="6.375" RadiusY="6.375" GradientOrigin="4.3920336,32.307854" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1,-2.84332118995997E-17,5.34076028093947E-18,0.509804010391235,5.77089423255426E-16,16.0539207458496" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.734516024589539,-0.111644998192787,0.111644998192787,0.734516024589539,3.90336203575134,12.2255096435547" />
        </Path.RenderTransform>
      </Path>
      <Path Data="F1M12.25,32.75A6.375,3.25,0,1,1,-0.5,32.75A6.375,3.25,0,1,1,12.25,32.75z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.51176471">
        <Path.Fill>
          <RadialGradientBrush Center="4.3920336,32.307854" RadiusX="6.375" RadiusY="6.375" GradientOrigin="4.3920336,32.307854" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#00FFFFFF" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1,-1.08325402498017E-16,1.45437194861176E-17,0.509804010391235,1.18520297403917E-14,16.0539207458496" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="0.734516024589539,-0.111644998192787,0.111644998192787,0.734516024589539,23.74587059021,9.39086437225342" />
        </Path.RenderTransform>
      </Path>
    </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