Click here to Skip to main content
15,896,606 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">
<!-- Width="46.9619826105358" Height="40.99225768753" http://www.xamalot.com/asset/bc241dff-27e2-42a4-b252-35a170dc68d6 -->
  <Canvas Canvas.Left="-1.5190085525619" Canvas.Top="-6.00773844733094">
    <Canvas>
      <Canvas>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1.01362001895905,0,0,-1.01362001895905,11.1293897628784,-8.61985397338867" />
        </Canvas.RenderTransform>
      </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.0231290385127068,0,0,0.014857430011034,45.5717887878418,30.4782695770264" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="F1M26.5,38.700001A13.75,3.8,0,1,1,-1,38.700001A13.75,3.8,0,1,1,26.5,38.700001z" Stroke="{x:Null}" StrokeThickness="1" Opacity="0.3">
        <Path.Fill>
          <RadialGradientBrush Center="6.7027131,73.615714" RadiusX="7.2284161" RadiusY="7.2284161" GradientOrigin="6.7027131,73.615714" MappingMode="Absolute">
            <RadialGradientBrush.GradientStops>
              <GradientStop Color="#FF000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1.90221500396729,0,0,0.525703012943268,0,0" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
        <Path.RenderTransform>
          <MatrixTransform Matrix="1.17879104614258,0,0,1.52606403827667,14.5620698928833,-21.5350494384766" />
        </Path.RenderTransform>
      </Path>
      <Canvas>
        <Path Data="M6.34375,15.454879L6.34375,41.44216 43.3125,41.44216 43.25,15.554447C43.249987,15.548732 43.250374,15.527358 43.25,15.521258 43.249269,15.514776 43.251086,15.494928 43.25,15.488068 43.248562,15.480833 43.220538,15.462487 43.21875,15.454879L6.34375,15.454879z" Stroke="#FF888A85" StrokeThickness="0.996843457221985" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <LinearGradientBrush StartPoint="18.4273348406756,4.88097216455879" EndPoint="27.700595684303,36.9204776311302" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFE2E2E2" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="M20.490674,29.058712L7.09471,40.0307 21.003552,30.426394 30.02171,30.426394 42.440757,39.908587 30.577332,29.058712 20.490674,29.058712z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <LinearGradientBrush StartPoint="25.378116334831,29.3475586784453" EndPoint="27.1484975586349,40.0306927015647" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFDFE0DF" Offset="0" />
                <GradientStop Color="#FFA6B0A6" Offset="0.2380952388048172" />
                <GradientStop Color="#FFB5BEB5" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="M7.4471445,16.725622C7.440469,16.738968 7.4525223,16.745279 7.4471445,16.757236 7.4447837,16.762865 7.4180173,16.783579 7.415987,16.788852 7.4142896,16.793766 7.417349,16.815911 7.415987,16.820466 7.4149629,16.824659 7.4166708,16.848255 7.415987,16.852082L7.4471445,40.341905 42.28123,40.341905 42.218915,16.97854C42.21823,16.974827 42.219935,16.951011 42.218915,16.946925 42.2043,16.898814 42.177209,16.814677 42.125442,16.725622L7.4471445,16.725622z" Fill="{x:Null}" Stroke="#FFFFFFFF" StrokeThickness="0.996843278408051" StrokeMiterLimit="4" />
        <Path Data="M23.329298,32.996721C20.937189,32.550375 7.9003872,18.771125 6.5966059,16.372022 6.5816495,16.343448 6.5559705,16.288608 6.5446896,16.2636L41.057803,16.2636C40.780724,18.766404 33.533576,32.769346 31.496524,32.996721 31.488351,32.997189 31.475247,32.996721 31.467251,32.996721L23.446392,32.996721C23.412766,32.996721,23.368838,33.004099,23.329298,32.996721z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <RadialGradientBrush Center="27.741131,38.711506" RadiusX="17.977943" RadiusY="17.977943" GradientOrigin="27.741131,38.711506" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#21000000" Offset="0" />
                <GradientStop Color="#00000000" Offset="1" />
              </RadialGradientBrush.GradientStops>
              <RadialGradientBrush.Transform>
                <MatrixTransform Matrix="0.629929006099701,0.459372997283936,-0.14767499268055,0.248511999845505,16.517240524292,9.05373668670654" />
              </RadialGradientBrush.Transform>
            </RadialGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="M20.77475,31.085394C18.407309,30.694257 7.945269,18.619435 7.1185841,16.517089 7.109327,16.49205 7.094677,16.443993 7.088438,16.422079L42.630645,16.422079C41.807029,18.615299 31.332195,30.886144 29.185502,31.085394 29.176984,31.085803 29.16359,31.085394 29.155355,31.085394L20.895334,31.085394C20.860706,31.085394,20.813881,31.091858,20.77475,31.085394z" Stroke="#FF989898" StrokeThickness="0.853900134563446" StrokeLineJoin="Round" StrokeMiterLimit="4">
          <Path.Fill>
            <LinearGradientBrush StartPoint="18.964604807322,16.7023182956779" EndPoint="21.6924740784223,15.98800953429" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFE2E2E2" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="M20.625174,30.490479C18.519211,29.999928 7.7224803,17.987711 7.0314243,16.466377 7.0288882,16.460379 7.0336023,16.439689 7.0314243,16.434063 7.0259731,16.418307 7.002328,16.381764 7.0001743,16.369436 7.000203,16.366104 6.9997682,16.34006 7.0001743,16.337122 7.0013435,16.334982 7.0298695,16.338859 7.0314243,16.337122L7.1251743,16.240181 42.593924,16.240181C42.591209,16.264507 42.57124,16.307054 42.562674,16.337122 42.555173,16.360727 42.542103,16.407355 42.531424,16.434063 41.609326,18.615 31.023436,30.200512 29.187674,30.490479 29.172746,30.492123 29.138826,30.490479 29.125174,30.490479L20.750174,30.490479C20.719887,30.488811,20.66042,30.498689,20.625174,30.490479z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <LinearGradientBrush StartPoint="18.7219119741917,8.43399228673661" EndPoint="29.9533599463634,42.6050054980394" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFE2E2E2" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Path Data="M20.875174,30.051141C18.427215,29.501671,8.7040003,18.433898,7.5314243,16.451725L42.125174,16.451725C40.634986,18.784896 31.078502,29.863516 28.968924,30.051141 28.960181,30.051543 28.946142,30.051141 28.937674,30.051141L21.031424,30.051141C21.00503,30.051141 20.966542,30.054692 20.937674,30.051141 20.917888,30.047995 20.896025,30.055821 20.875174,30.051141z" Fill="{x:Null}" StrokeThickness="0.853899955749512" StrokeMiterLimit="4">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="18.7589618915119,27.4872384494054" EndPoint="57.3951621988418,22.8572120494664" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#FFEDEDED" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
        </Path>
        <Path Data="M20.959511,30.447113L9.018012,38.717969 11.237445,38.724076 21.23557,31.855136 30.057478,30.432298 20.959511,30.447113z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <LinearGradientBrush StartPoint="17.397203,33.357376" EndPoint="22.17771,31.026741" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1.00472700595856,0,0,1.00160896778107,0.0420899987220764,-8.97278308868408" />
        </Canvas.RenderTransform>
      </Canvas>
      <Canvas>
        <Path Data="F1M49.785728,36.461609C31.871505,29.801214,51.855165,14.067224,22.462411,12.49765L22.462411,3.1222396 5.8139298,17.708819 22.462411,33.006349C22.462411,33.006349 22.462411,23.337969 22.462411,23.337969 39.481645,22.456387 30.293505,37.380239 49.785728,36.461609z" StrokeThickness="1.18245041370392" StrokeMiterLimit="4">
          <Path.Fill>
            <LinearGradientBrush StartPoint="32.707863,28.042139" EndPoint="43.986744,34.407845" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFD9D14" Offset="0" />
                <GradientStop Color="#00FFC879" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
          <Path.Stroke>
            <LinearGradientBrush StartPoint="32.707863,28.042139" EndPoint="43.986744,34.407845" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF9F620B" Offset="0" />
                <GradientStop Color="#00FFC879" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
          <Path.RenderTransform>
            <MatrixTransform Matrix="-0.845701992511749,0,0,-0.845701992511749,51.4032287597656,49.1404800415039" />
          </Path.RenderTransform>
        </Path>
        <Path Data="F1M44.926064,35.103042C33.887008,28.727803,48.67967,14.639454,21.448701,13.549959L21.448701,5.4508678C21.448701,5.4508678,7.4009628,17.714589,7.4009628,17.714589L21.448701,30.658617C21.448701,30.658617 21.448701,22.380979 21.448701,22.380979 37.544904,20.111228 34.130549,34.399548 44.926064,35.103042z" Fill="{x:Null}" StrokeThickness="1.18244981765747" Opacity="0.7">
          <Path.Stroke>
            <LinearGradientBrush StartPoint="17.8027456623955,7.37355499246407" EndPoint="29.1967461049213,43.9083888558731" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Stroke>
          <Path.RenderTransform>
            <MatrixTransform Matrix="-0.845701992511749,0,0,-0.845701992511749,51.4032287597656,49.1404800415039" />
          </Path.RenderTransform>
        </Path>
        <Path Data="F1M32.84375,38.1875L32.78125,45.5 45.875,34.15625 32.84375,22.09375C32.843751,22.093751 32.78125,29.65625 32.78125,29.65625 20.263051,32.276806 23.547112,18.410613 11.6875,18.9375 22.872464,24.02322 9.730253,37.29154 32.84375,38.1875z M40.78125,29.625C40.860491,29.620211,40.917074,29.627336,41,29.625L45.8125,34.1875 32.875,45.46875 32.78125,38.15625 28.59375,37.625C37.938693,35.049622,35.789049,29.926677,40.78125,29.625z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <LinearGradientBrush StartPoint="11.6875,14.319358" EndPoint="37.113785,36.087452" MappingMode="Absolute" SpreadMethod="Pad">
              <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#00FFFFFF" Offset="1" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
          </Path.Fill>
        </Path>
      </Canvas>
    </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