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