Newbie-use XAML to draw a camera with a Win8 style icon, Miss, your camera ~~

Today I read a blog and found modernui. I used vs2012 to open the source code. I found that many Microsoft buttons were drawn rather than images, and even some text, I don't know what the benefits of doing so are. It may be that I am not good enough. Haha.

For example, for a camera, Microsoft's code is as follows:

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 "/>

I had a hard time figuring out how people painted it. How can I open my blend and draw a path without a path? After a long time, I just thought about how to combine one? Why do I have to draw a picture... it turns out that it hurts me, not Microsoft ....

After assembling the camera, I need to draw the fuselage (rounded rectangle), flashlight (elliptical), lens (ring), and viewfinder (rounded rectangle ). Respectively:

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"/>

Start assembly, first place the viewfinder and the fuselage together, then put the object-merge on the blend, and then put the camera and the flashlight, select all, object-merge-exclude, the Assembly was completed this time, but the color was not estimated. So I set the fill in the path to black. I also used a path to draw a camera, and I finally got stuck ~~~ How can this code be more than others? Is it because I drew too much?

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"/>

I will also learn how to use path for similar images in the future ~ This looks like a master, haha ~~

Http://templarian.com/2011/08/06/tutorial_creating_an_icon/ this is expression design tutorial

Http://modernuiicons.com/This is more than 1000 icons provided by Microsoft, with images with XAML with design drawings