Click here to Skip to main content
15,879,535 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.2K   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="-1.26776114655604" Canvas.Top="4.87682882521767E-07">
    <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.3205413818359,39.6143188476563" />
        </Canvas.RenderTransform>
      </Canvas>
      <Path Data="M6.3334395,16.972251L6.3334395,41.481799 43.305555,41.481799 43.244499,17.089859C43.24105,15.712272,31.395999,2.412111,29.210877,2.412111L20.659391,2.412111C18.362072,2.412111,6.3334395,15.673953,6.3334395,16.972251z" StrokeThickness="0.856604397296906" StrokeLineJoin="Round" StrokeMiterLimit="4">
        <Path.Fill>
          <LinearGradientBrush StartPoint="18.4273348406756,7.04396440402205" EndPoint="27.700595684303,37.2112847792041" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#FFE2E2E2" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
        <Path.Stroke>
          <LinearGradientBrush StartPoint="5.64959182525861,21.9469612157626" EndPoint="43.9894210954118,21.9469612157626" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF989690" Offset="0" />
              <GradientStop Color="#FF656460" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Stroke>
      </Path>
      <Path Data="M6.923061,16.787103C6.5250222,16.356975,18.809966,3.0935378,20.66721,3.0935378L29.042965,3.0935378C30.790449,3.0935378,43.079567,16.221603,42.470079,16.978956L31.608858,30.47515 19.295373,30.156846 6.923061,16.787103z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="12.0308315548134,8.95506041206187" EndPoint="24.0316391410966,21.6338999664576" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFEDEDED" Offset="0" />
              <GradientStop Color="#FFC8C8C8" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M19.07753,30.01759L11.744526,21.271586 36.562951,14.335513 39.592221,20.551966 32.175956,29.992298" Fill="#25000000" Stroke="{x:Null}" StrokeThickness="1" />
      <Path Data="M18.291767,29.836259L10.809167,21.026146 35.456637,14.132812 38.630714,20.403811 31.390193,29.810968" Fill="#25000000" Stroke="{x:Null}" StrokeThickness="1" />
      <Path Data="M18.775313,29.957146L11.100386,21.296624 36.068405,14.232329 39.354114,20.824726 31.873739,29.931855" Fill="#25000000" Stroke="{x:Null}" StrokeThickness="1" />
      <Path Data="M18.593984,30.440693L11.260975,21.694689 35.972554,14.801355 39.083369,21.18877 31.963198,30.174701" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="21.4073532488537,15.9184663176971" EndPoint="30.733827478301,30.7453753708377" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FFFFFFFF" Offset="0" />
              <GradientStop Color="#FFDCDCDC" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M20.488434,29.064331L7.0924698,40.036319 21.001312,30.432013 30.01947,30.432013 42.438517,39.914206 30.575092,29.064331 20.488434,29.064331z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="24.7654746516836,28.6872821688359" EndPoint="27.1462582960423,40.0363109290283" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF9AA29A" Offset="0" />
              <GradientStop Color="#FFB5BEB5" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M6.9634751,16.885144L18.479648,31.201334 19.548151,30.346532 6.9634751,16.885144z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="24.7654746516836,28.6872821688359" EndPoint="27.1462582960423,40.0363109290283" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#FF9AA29A" Offset="0" />
              <GradientStop Color="#FFB5BEB5" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M7.3077115,17.131415L7.3388644,40.342421 42.283659,40.342421 42.221353,17.257512C42.219329,16.508413,31.005032,3.4591863,28.837233,3.4591863L20.941579,3.4591863C18.689313,3.4591863,7.3066655,16.351067,7.3077115,17.131415z" Fill="{x:Null}" StrokeThickness="0.856604278087616" StrokeMiterLimit="4">
        <Path.Stroke>
          <LinearGradientBrush StartPoint="17.8309144965465,19.6186001865244" EndPoint="31.3735477156308,34.7010174856234" 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.957271,30.452732L9.0157722,38.723588 11.235205,38.729695 21.23333,31.860755 30.055238,30.437917 20.957271,30.452732z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
      <Path Data="M11.427536,21.670296L12.752479,23.080719 35.543311,16.196529 38.458445,21.878896 39.072496,21.166981 36.003081,14.789145 11.427536,21.670296z" Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1" />
      <Path Data="M13.308098,23.63634L19.33445,30.090093 20.531174,29.064331 30.617831,29.107071 31.429893,29.833651 35.404721,25.089502C34.25074,23.679081,13.308098,23.63634,13.308098,23.63634z" Stroke="{x:Null}" StrokeThickness="1">
        <Path.Fill>
          <LinearGradientBrush StartPoint="23.9076352875385,29.855033662896" EndPoint="26.2583396454487,25.495542739725" MappingMode="Absolute" SpreadMethod="Pad">
            <LinearGradientBrush.GradientStops>
              <GradientStop Color="#21000000" Offset="0" />
              <GradientStop Color="#00000000" Offset="1" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Path.Fill>
      </Path>
      <Path Data="M41.812936,17.847945L31.861315,30.479232 30.792812,29.624431 41.812936,17.847945z" Fill="#FFB1B1B1" Stroke="{x:Null}" StrokeThickness="1" />
      <Canvas>
        <Path Data="F1M69.375,125A14.375,14.375,0,1,1,40.625,125A14.375,14.375,0,1,1,69.375,125z" Stroke="{x:Null}" StrokeThickness="1">
          <Path.Fill>
            <RadialGradientBrush Center="55,125" RadiusX="14.375" RadiusY="14.375" GradientOrigin="55,125" MappingMode="Absolute">
              <RadialGradientBrush.GradientStops>
                <GradientStop Color="#FFFFFFFF" Offset="0" />
                <GradientStop Color="#E3FFF520" Offset="0.5" />
                <GradientStop Color="#00FFF300" Offset="1" />
              </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <MatrixTransform Matrix="0.78329199552536,0,0,0.78329199552536,-6.34088277816772,-86.6516799926758" />
          </Path.RenderTransform>
        </Path>
        <Canvas.RenderTransform>
          <MatrixTransform Matrix="1,0,0,1,4.99999998737621E-07,2.49999993684469E-06" />
        </Canvas.RenderTransform>
      </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
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