新手向--使用XAML画出Win8风格图标的照相机，小姐你相机~~

今天看了一篇 博客 ，发现了 ModernUI ，用VS2012打开源码，发现微软好多按钮都不是图片，而是画出来的，甚至还有一些文字，不知道这么做有什么好处，感觉很蛋疼，可能是我境界不够，哈哈。

比如一个照相机，微软的代码如下：

View Code

<Path Width="35.9999" Height="29.0001" Canvas.Left="20" Canvas.Top="22" Stretch="Fill" Fill="#FF000000" Data="F1 M 30,27C 30,24.3766 32.3767,22 35,22L 41,22C 43.6234,22 46,24.3766 46,27L 50.9999,27.0001C 53.7613,27.0001 55.9999,29.2387 55.9999,32.0001L 55.9999,46.0001C 55.9999,48.7615 53.7613,51.0001 50.9999,51.0001L 25,51.0001C 22.2385,51.0001 20,48.7615 20,46.0001L 20,32.0001C 20,29.2387 22.2385,27.0001 25,27.0001L 30,27 Z M 25.5,30C 24.6716,30 24,30.8954 24,32C 24,33.1046 24.6716,34 25.5,34C 26.3284,34 27,33.1046 27,32C 27,30.8954 26.3284,30 25.5,30 Z M 38,32C 34.134,32 31,35.134 31,39C 31,42.866 34.134,46 38,46C 41.866,46 45,42.866 45,39C 45,35.134 41.866,32 38,32 Z M 38,34.5C 40.4853,34.5 42.5,36.5147 42.5,39C 42.5,41.4853 40.4853,43.5 38,43.5C 35.5147,43.5 33.5,41.4853 33.5,39C 33.5,36.5147 35.5147,34.5 38,34.5 Z "/>

我纠结好半天人家是怎么画出来的，打开我的Blend怎么画做不到一个Path搞定，钻了半天牛角尖，才想起来组合一个不就行了吗？何必非要画了....原来蛋疼的是我，不是微软....

组装相机我就需要画机身（圆角矩形）、闪光灯（椭圆）、镜头（圆环）、取景器（圆角矩形）。分别画出来：

View Code

<Rectangle Fill="Black" HorizontalAlignment="Right" Margin="0,215.333,218.334,193.833" Width="53.333" RadiusY="5.667" RadiusX="5.667"/>

        <Rectangle Fill="Black" HorizontalAlignment="Right" Margin="0,208.831,233.331,219.336" RadiusY="5.667" RadiusX="5.667" Width="24"/>



        <ed:Arc ArcThickness="3" ArcThicknessUnit="Pixel" EndAngle="360" Fill="White" HorizontalAlignment="Right" Margin="0,0,235.663,199.831" Stretch="None" StartAngle="0" Width="19.336" Height="19.336" VerticalAlignment="Bottom"/>

        <Ellipse Fill="White" HorizontalAlignment="Right" Margin="0,219.333,261,213.334" Width="6.666"/>

开始组装，先把取景器和机身放一起，然后在Blend上对象-合并-相并，搞定之后，把镜头和闪光灯放上去，全选，对象-合并-排斥，这次组装好了，但是颜色估计没了，所以把Path里的Fill设置Black，就出来了，我也用一个Path画出来了一个相机，终于不纠结了~~~ 就是这代码怎么比人家的多呢？难道是我画的太大了？

View Code

<Path Data="M26.668999,16.335999 C30.351635,16.335999 33.337,19.321364 33.337,23.004 33.337,26.686635 30.351635,29.672 26.668999,29.672 22.986365,29.672 20.001,26.686635 20.001,23.004 20.001,19.321365 22.986365,16.335999 26.668999,16.335999 z M26.668999,13.335999 C21.32951,13.336 17.001,17.66451 17.001,23.004 17.001,28.34349 21.32951,32.672 26.668999,32.672 32.008488,32.672 36.337,28.34349 36.337,23.004 36.337,17.664511 32.008488,13.336 26.668999,13.335999 z M8.6670001,10.168999 C6.8262351,10.169 5.3340001,12.258263 5.3339999,14.8355 5.3340001,17.412736 6.8262351,19.502 8.6670001,19.502 10.507765,19.502 12,17.412736 12,14.8355 12,12.258263 10.507765,10.169 8.6670001,10.168999 z M20.003001,0 L32.669001,0 C35.798798,0 38.335999,2.5372019 38.335999,5.6669998 L38.335999,6.5019999 47.666001,6.5019999 C50.795796,6.5019996 53.333001,9.0392026 53.333001,12.168999 L53.333001,33.669 C53.333001,36.798799 50.795796,39.335999 47.666001,39.335999 L5.667001,39.335999 C2.5372028,39.335999 0,36.798799 0,33.669 L0,12.168999 C0,9.0392026 2.5372028,6.5019996 5.667001,6.5019999 L14.336,6.5019999 14.336,5.6669998 C14.336001,2.5372019 16.873203,0 20.003001,0 z" Fill="Black" HorizontalAlignment="Right" Margin="0,208.831,218.334,193.833" Stretch="Fill" Width="53.333"/>

以后类似的图像我也学学微软用Path做，不用图片~这样看上去像高手，哈哈~~

 http://templarian.com/2011/08/06/tutorial_creating_an_icon/  这是Expression Design教程

http://modernuiicons.com/ 这是微软提供的1000多个图标，有图片有XAML有设计图