XAML 艺术代码

     为了避免标题党先做下解释，本篇不是讨论XAML “代码艺术”、“编程艺术”，而是“艺术代码”。暂且称它们为艺术吧。其实从艺术的角度如何和那些名画比还差很远，但从技术角度来讲的确够艺术了。
     大家先看看下面这个图片。没错这就是一张普通的PNG 图片，在网上索能找到一箩筐，而且比这个漂亮的也很多。我第一次看到这幅图时也是感觉画得挺细致，至少在图片搜索中应该不算差的，可以保存下来以后作为图片资源。



     如果我告诉你这幅图完全是用XAML 代码画的，你是不是要刮目相看了。它是出自一个叫XAMALOT的网站，其中有大量的图片都是通过XAML 绘制的，有兴趣的朋友可以看看。对于咱们开发者来说要欣赏的当然是它的代码。

欣赏

<Canvas Width="45" Height="45"           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">      <Canvas Canvas.Left="-3.1743200497011" Canvas.Top="-2.63605017375272"               Height="0" Width="0">          <Canvas>              <Path Data="F1M45.052803,38.908627A20.203051,7.4751287,0,1,1,4.6467018,                    38.908627A20.203051,7.4751287,0,1,1,45.052803,38.908627z"                     Stroke="{x:Null}" StrokeThickness="1"                     RenderTransform="1,0,0,1.24324405193329,0,-10.2724103927612">                  <Path.Fill>                      <RadialGradientBrush Center="15.115514,63.965388"                                            RadiusX="12.289036" RadiusY="12.289036"                                            GradientOrigin="15.115514,63.965388"                                            MappingMode="Absolute"                                            Transform="1.64399003982544,0,0,0.608276009559631,0,0">                          <RadialGradientBrush.GradientStops>                              <GradientStop Color="#FF000000" Offset="0" ></GradientStop>                              <GradientStop Color="#00000000" Offset="1" ></GradientStop>                          </RadialGradientBrush.GradientStops>                      </RadialGradientBrush>                  </Path.Fill>              </Path>              <Path Data="F1M43.959853,23.485499C43.959853,34.195217 35.27775,                    42.877222 24.569505,42.877222 13.860279,42.877222 5.1786663,                    34.195119 5.1786663,23.485499 5.1786663,12.776272 13.860279,                    4.0951517 24.569505,4.0951517 35.27775,4.0951517 43.959853,                    12.776272 43.959853,23.485499L43.959853,23.485499z"                     Stroke="#FF39396C" StrokeThickness="1" StrokeMiterLimit="4">                  <Path.Fill>                      <RadialGradientBrush Center="18.247644,15.716079"                                            RadiusX="29.993349" RadiusY="29.993349"                                            GradientOrigin="18.247644,15.716079"                                            MappingMode="Absolute">                          <RadialGradientBrush.GradientStops>                              <GradientStop Color="#FFD3E9FF" Offset="0" ></GradientStop>                              <GradientStop Color="#FFD3E9FF" Offset="0.15517240762710571" ></GradientStop>                              <GradientStop Color="#FF4074AE" Offset="0.75" ></GradientStop>                              <GradientStop Color="#FF36486C" Offset="1" ></GradientStop>                          </RadialGradientBrush.GradientStops>                      </RadialGradientBrush>                  </Path.Fill>              </Path>              <Canvas RenderTransform="0.982370972633362,0,0,0.982370972633362,                      0.121078997850418,0.232914000749588">                  <Canvas>                      <Canvas>                          <Path Data="F1M44.0713,20.7144C44.0713,20.9771,44.0713,20.7144,                                ... ...44.0713,20.7144z"                                 Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas>                          <Path Data="F1M26.0703,9.2363L25.9971,9.7295 26.5069,10.0586 27.378,                                9.4829 26.9425,8.9892 26.3605,9.3188 26.0705,9.2363"                                 Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas>                          <Path Data="F1M26.8701,5.8633L24.9795,5.1226 22.7998,5.3692 20.1094,                                6.1094 19.6006,6.6035 21.2725,7.7549 21.2725,8.4131 20.6182,                                9.0713 21.4912,10.8003 22.0713,10.4702 22.7998,9.3188C23.9228,                                8.9716,24.9297,8.5781,25.9971,8.0844L26.8701,5.8632"                                 Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas>                          <Path Data="F1M28.833,12.7749L28.542,12.0337 28.0322,12.1987 28.1787,                                13.103 28.833,12.7749"                                 Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas>                          <Path Data="F1M29.123,12.6089L28.9775,13.5972 29.7773,13.4322 30.3584,                                12.857 29.8496,12.3629C29.6787,11.9078,29.4824,11.483,29.2685,                                11.0465L28.833,11.0465 28.833,11.5397 29.123,11.8688 29.123,12.609"                                 Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas>                          <Path Data="F1M18.3652,28.2422L17.7832,27.0899 16.6929,26.8433 16.1114,                                25.2808 14.6578,... ...18.365,28.242"                                 Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas>                          <Path Data="F1M16.7656,9.5649L17.4922,10.0586 18.0742,10.0586 18.0742,                                9.4829 17.3476,9.1538 16.7656,9.5649"                                Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas>                          <Path Data="F1M14.876,8.9072L14.5122,9.812 15.2393,9.812 15.6031,                                8.9892C15.9166,8.7675,16.2286,8.5444,16.5479,8.331L17.275,                                8.5781C17.7594,8.9072,18.2438,9.2363,18.7286,9.5649L19.4561,                                8.9072 18.6558,8.5781 18.292,7.8374 16.9111,7.6728 16.8383,                                7.2612 16.184,7.4262 15.8936,8.002 15.5298,7.2613 15.3848,                                7.5904 15.4576,8.4132 14.876,8.9072"                                 Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas Opacity="0.75">                          <Path Data="F1" Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                      <Canvas>                          <Path Data="F1" Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas Opacity="0.75">                          <Path Data="F1" Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                      <Canvas>                          <Path Data="F1" Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas>                          <Path Data="F1M17.4922,6.8496L17.856,6.521 18.5831,6.3564C19.0811,6.1142,                                19.5811,5.9511,20.1095,5.7802L19.8195,5.2865 18.881,5.4213 18.4376,                                5.8632 17.7066,5.9692 17.0567,6.2744 16.7408,6.4272 16.5479,                                6.6855 17.4922,6.8496"                                 Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>                  <Canvas>                      <Canvas>                          <Path Data="F1M18.7285,14.6665L19.165,14.0083 18.5102,13.5151 18.7285,                                14.6665" Fill="#B6204A87" Stroke="{x:Null}" StrokeThickness="1" ></Path>                      </Canvas>                  </Canvas>              </Canvas>              <Path Data="F1M42.975093,23.485534C42.975093,33.651354 34.733915,41.89244 24.569493,                    41.89244 14.404139,41.89244 6.1634261,33.651261 6.1634261,23.485534 6.1634261,                    13.32018 14.404139,5.079934 24.569493,5.079934 34.733915,5.079934 42.975093,                    13.32018 42.975093,23.485534L42.975093,23.485534z"                     Fill="{x:Null}" StrokeThickness="1" StrokeMiterLimit="4" Opacity="0.3956044">                  <Path.Stroke>                      <RadialGradientBrush Center="15.601279,12.142302"                                            RadiusX="43.526714" RadiusY="43.526714"                                            GradientOrigin="15.601279,12.142302"                                            MappingMode="Absolute">                          <RadialGradientBrush.GradientStops>                              <GradientStop Color="#FFFFFFFF" Offset="0" ></GradientStop>                              <GradientStop Color="#2AFFFFFF" Offset="1" ></GradientStop>                          </RadialGradientBrush.GradientStops>                      </RadialGradientBrush>                  </Path.Stroke>              </Path>              <Path Data="M-2.8284283,21.041553A15.733126,9.4575529,0,1,1,-34.29468,                    21.041553A15.733126,9.4575529,0,1,1,-2.8284283,21.041553z"                     Fill="{x:Null}" StrokeThickness="0.881641983985901"
StrokeStartLineCap="Round" StrokeEndLineCap="Round"
StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4"
RenderTransform="1.13103401660919,0.613097012042999,-0.476556003093719,0.87914401                  <Path.Stroke>                      <LinearGradientBrush StartPoint="-25.176178,30.057165"                                            EndPoint="-22.252472,21.041553"                                            MappingMode="Absolute" SpreadMethod="Pad">                          <LinearGradientBrush.GradientStops>                              <GradientStop Color="#FFFFFFFF" Offset="0" ></GradientStop>                              <GradientStop Color="#00FFFFFF" Offset="1" ></GradientStop>                          </LinearGradientBrush.GradientStops>                      </LinearGradientBrush>                  </Path.Stroke>              </Path>              <Path Data="M-2.8284283,21.041553A15.733126,9.4575529,0,1,1,-34.29468,                    21.041553A15.733126,9.4575529,0,1,1,-2.8284283,21.041553z"                     Fill="{x:Null}" StrokeThickness="0.881641983985901"
StrokeStartLineCap="Round" StrokeEndLineCap="Round"
StrokeDashCap="Round" StrokeLineJoin="Round" StrokeMiterLimit="4"
RenderTransform="0.939325988292694,-0.879086017608643,0.683306992053986,0.7301309                  <Path.Stroke>                      <LinearGradientBrush StartPoint="-25.176178,30.057165"                                            EndPoint="-22.113543,22.661524"                                            MappingMode="Absolute"                                            SpreadMethod="Pad">                          <LinearGradientBrush.GradientStops>                              <GradientStop Color="#FFFFFFFF" Offset="0" ></GradientStop>                              <GradientStop Color="#00FFFFFF" Offset="1" ></GradientStop>                          </LinearGradientBrush.GradientStops>                      </LinearGradientBrush>                  </Path.Stroke>              </Path>              <Canvas RenderTransform="-1.04577195644379,0.767251014709473,0.767251014709473,                      1.04577195644379,35.6165084838867,-22.1439609527588">                  <Path Data="M18.788838,12.493138A6.7175145,6.7175145,0,1,1,5.3538089,                        12.493138A6.7175145,6.7175145,0,1,1,18.788838,12.493138z"                         Stroke="{x:Null}" StrokeThickness="1"
RenderTransform="1,0,0,1,14.9502601623535,22.9304695129395">                      <Path.Fill>                          <RadialGradientBrush Center="12.071323,12.493138"                                                RadiusX="6.7175145" RadiusY="6.7175145"                                               GradientOrigin="12.071323,12.493138"                                                MappingMode="Absolute">                              <RadialGradientBrush.GradientStops>                                  <GradientStop Color="#FFFFFFFF" Offset="0" ></GradientStop>                                  <GradientStop Color="#00FFFFFF" Offset="1" ></GradientStop>                              </RadialGradientBrush.GradientStops>                          </RadialGradientBrush>                      </Path.Fill>                  </Path>                  <Path Data="M18.788838,12.493138A6.7175145,6.7175145,0,1,1,5.3538089,                        12.493138A6.7175145,6.7175145,0,1,1,18.788838,12.493138z"                         Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1"
RenderTransform="0.308270990848541,0,0,0.308270990848541,
23.300350189209,31.5723400115967" ></Path>              </Canvas>              <Path Data="M-2.8284283,21.041553A15.733126,9.4575529,0,1,1,-34.29468,                    21.041553A15.733126,9.4575529,0,1,1,-2.8284283,21.041553z"                     Fill="{x:Null}" StrokeThickness="0.881641983985901" StrokeStartLineCap="Round"
StrokeEndLineCap="Round" StrokeDashCap="Round"
StrokeLineJoin="Round" StrokeMiterLimit="4"
RenderTransform="-1.28031599521637,-0.126158997416496,0.0980622544884682,-0.99518                  <Path.Stroke>                      <LinearGradientBrush StartPoint="-22.822565,28.337734"                                            EndPoint="-22.113543,22.661524"                                            MappingMode="Absolute"                                            SpreadMethod="Pad">                          <LinearGradientBrush.GradientStops>                              <GradientStop Color="#FFFFFFFF" Offset="0" ></GradientStop>                              <GradientStop Color="#00FFFFFF" Offset="1" ></GradientStop>                          </LinearGradientBrush.GradientStops>                      </LinearGradientBrush>                  </Path.Stroke>              </Path>              <Path Data="M-2.8284283,21.041553A15.733126,9.4575529,0,1,1,-34.29468                    ,21.041553A15.733126,9.4575529,0,1,1,-2.8284283,21.041553z"                     Fill="{x:Null}" StrokeThickness="0.90226137638092"                     StrokeStartLineCap="Round" StrokeEndLineCap="Round"                     StrokeDashCap="Round" StrokeLineJoin="Round"                     StrokeMiterLimit="4" RenderTransform="0.917873978614807,-0.858982980251312,                    0.667701005935669,0.713433027267456,27.6331691741943,-6.9090690612793">                  <Path.Stroke>                      <LinearGradientBrush StartPoint="-21.658581,15.649428"                                            EndPoint="-21.962101,21.336346"                                            MappingMode="Absolute" SpreadMethod="Pad">                          <LinearGradientBrush.GradientStops>                              <GradientStop Color="#FFFFFFFF" Offset="0" ></GradientStop>                              <GradientStop Color="#00FFFFFF" Offset="1" ></GradientStop>                          </LinearGradientBrush.GradientStops>                      </LinearGradientBrush>                  </Path.Stroke>              </Path>              <Canvas RenderTransform="-0.806276023387909,0.591539978981018,0.591539978981018,                      0.806276023387909,12.3856401443481,-18.0292091369629">                  <Path Data="M18.788838,12.493138A6.7175145,6.7175145,0,1,1,5.3538089,                        12.493138A6.7175145,6.7175145,0,1,1,18.788838,12.493138z"                         Stroke="{x:Null}" StrokeThickness="1"                         RenderTransform="1,0,0,1,14.9502601623535,22.9304695129395">                      <Path.Fill>                          <RadialGradientBrush Center="12.071323,12.493138"                                                RadiusX="6.7175145" RadiusY="6.7175145"                                               GradientOrigin="12.071323,12.493138"                                                MappingMode="Absolute">                              <RadialGradientBrush.GradientStops>                                  <GradientStop Color="#FFFFFFFF" Offset="0" ></GradientStop>                                  <GradientStop Color="#00FFFFFF" Offset="1" ></GradientStop>                              </RadialGradientBrush.GradientStops>                          </RadialGradientBrush>                      </Path.Fill>                  </Path>                  <Path Data="M18.788838,12.493138A6.7175145,6.7175145,0,1,1,5.3538089,                        12.493138A6.7175145,6.7175145,0,1,1,18.788838,12.493138z"                         Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1"
RenderTransform="0.308270990848541,0,0,0.308270990848541,23.300350189209,31.5723400115967" ></Path>              </Canvas>              <Canvas RenderTransform="-0.806276023387909,0.591539978981018,0.591539978981018,                      0.806276023387909,13.4990997314453,-31.5002193450928">                  <Path Data="M18.788838,12.493138A6.7175145,6.7175145,0,1,1,5.3538089,                        12.493138A6.7175145,6.7175145,0,1,1,18.788838,12.493138z"                         Stroke="{x:Null}" StrokeThickness="1"                         RenderTransform="1,0,0,1,14.9502601623535,22.9304695129395">                      <Path.Fill>                          <RadialGradientBrush Center="12.071323,12.493138"                                                RadiusX="6.7175145" RadiusY="6.7175145"                                                GradientOrigin="12.071323,12.493138"                                                MappingMode="Absolute">                              <RadialGradientBrush.GradientStops>                                  <GradientStop Color="#FFFFFFFF" Offset="0" ></GradientStop>                                  <GradientStop Color="#00FFFFFF" Offset="1" ></GradientStop>                              </RadialGradientBrush.GradientStops>                          </RadialGradientBrush>                      </Path.Fill>                  </Path>                  <Path Data="M18.788838,12.493138A6.7175145,6.7175145,0,1,1,5.3538089,                        12.493138A6.7175145,6.7175145,0,1,1,18.788838,12.493138z"                        Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1"                         RenderTransform="0.308270990848541,0,0,0.308270990848541,                        23.300350189209,31.5723400115967" ></Path>              </Canvas>              <Canvas RenderTransform="-0.870226979255676,0.638571977615356,0.638458013534546,                      0.870380997657776,25.2050304412842,-35.3127784729004">                  <Path Data="M18.788838,12.493138A6.7175145,6.7175145,0,1,1,5.3538089,                        12.493138A6.7175145,6.7175145,0,1,1,18.788838,12.493138z"                         Stroke="{x:Null}" StrokeThickness="1"
RenderTransform="1,0,0,1,14.9502601623535,22.9304695129395">                      <Path.Fill>                          <RadialGradientBrush Center="12.071323,12.493138"                                                RadiusX="6.7175145" RadiusY="6.7175145"                                                GradientOrigin="12.071323,12.493138"                                                MappingMode="Absolute">                              <RadialGradientBrush.GradientStops>                                  <GradientStop Color="#FFFFFFFF" Offset="0" ></GradientStop>                                  <GradientStop Color="#00FFFFFF" Offset="1" ></GradientStop>                              </RadialGradientBrush.GradientStops>                          </RadialGradientBrush>                      </Path.Fill>                  </Path>                  <Path Data="M18.788838,12.493138A6.7175145,6.7175145,0,1,1,5.3538089,                        12.493138A6.7175145,6.7175145,0,1,1,18.788838,12.493138z"                         Fill="#FFFFFFFF" Stroke="{x:Null}" StrokeThickness="1"                         RenderTransform="0.308270990848541,0,0,0.308270990848541,                        23.300350189209,31.5723400115967" ></Path>              </Canvas>          </Canvas>      </Canvas>  </Canvas>

XAML 代码

XAML_Art.zip