XAML Iconography

{

I have been having a lot of fun lately using Adobe Illustrator and symbol icons to build icons in XAML. Although the typical icon libraries provide very compact image files, the advantage of XAML comes not just in space, but in the ability to manipulate the graphic that you are leveraging.

Here is a brief example of what I mean:

1. There is no shortage of good symbol fonts (or fonts in general, for that matter). I have bought fonts at both MyFonts.com and Fonts.com and had great experiences. The symbol font I will use in this case is Energetics.

2. In Illustrator, I create a document and insert the character of choice making it large enough that it will be easily visible when I import it to Blend.

3. Using the File –> Import option from Blend, I have two Adobe related options; in this case we obviously leverage the Import Adobe Illustrator option

4. Voila! We now have our same symbol in Blend but digging in it’s a XAML Path rather than an image. Although it has been imported, however, you will notice a few extra pieces of XAML that you don’t need holding the Path as its container. I usually copy the Path, delete the extras and then paste it back in.

Now that the symbol is in XAML, not only is it not taking up the kind of space that the original image would have, it is also easier to work with if you need to manipulate it programmatically.  Here’s my weight lifter in XAML:

<Path Data="F1M562.59375,264.9375C562.59375,283.96875,560.390625,301.390625,556.015625,317.234375C551.625,
333.078125,546.125,345.03125,539.53125,353.125L510.140625,353.125C503.296875,344.578125,497.703125,332.296875,
493.375,316.296875C489.046875,300.296875,486.890625,281.96875,486.890625,261.34375L480.5625,261.34375C475.65625,
264.09375,468.9375,269.5,460.40625,277.578125C460.515625,285.671875,459.921875,299.328125,458.609375,
318.515625C457.296875,337.71875,456.359375,350.90625,455.796875,358.078125C455.671875,359.796875,454.359375,
360.640625,451.859375,360.640625C449.34375,360.640625,448.09375,359.796875,448.09375,358.078125C443.765625,
358.984375,439.578125,359.703125,435.53125,360.21875C431.484375,360.734375,425.78125,360.9375,418.4375,360.8125C411.09375,
360.703125,404.0625,359.9375,397.34375,358.5C390.625,357.078125,383.71875,354.59375,376.65625,351.0625C374.609375,357.5625,
372.46875,362.953125,370.25,367.21875C368.03125,371.5,364.578125,377.734375,359.921875,385.9375C367.328125,390.953125,
372.671875,395.703125,375.984375,400.203125C379.28125,404.703125,380.9375,410.03125,380.9375,416.1875C380.9375,424.15625,
378.453125,431.109375,373.5,437.03125C368.53125,442.96875,362.46875,447.296875,355.296875,450.015625C357.109375,456.84375,
358.96875,465.703125,360.84375,476.59375C362.71875,487.46875,364.171875,497.328125,365.203125,506.15625C366.234375,514.984375,
366.796875,521.109375,366.921875,524.53125L335.140625,524.53125C330.234375,524.53125,329.140625,522.078125,331.890625,
517.1875C332.796875,515.6875,332.21875,513.015625,330.171875,509.15625C323.453125,496.390625,312.109375,481.46875,296.171875,
464.375C295.25,463.34375,293.90625,461.84375,292.140625,459.84375C290.375,457.84375,289.09375,456.375,288.296875,455.40625C287.5,
454.4375,286.875,453.734375,286.421875,453.265625L274.8125,455.3125L289.84375,511.375C290.640625,514.09375,289.15625,517.578125,
285.40625,521.796875L250.375,521.796875L250.71875,517.53125L264.390625,504.015625L211.578125,456.34375C210.09375,454.984375,
207.390625,452.5625,203.453125,449.078125C199.515625,445.609375,196.671875,442.8125,194.90625,440.703125C193.140625,438.609375,
191.859375,436.5,191.0625,434.390625C190.265625,432.28125,189.875,429.796875,189.875,426.953125C189.875,421.375,192.28125,
415.828125,197.125,410.296875C201.96875,404.765625,209.828125,400.015625,220.71875,396.015625C231.59375,392.03125,245.578125,
389.984375,262.671875,389.859375L239.78125,350.390625C231.90625,355.984375,222.671875,359.875,212.078125,362.09375C201.484375,
364.3125,191,364.234375,180.640625,361.828125C178.015625,351.578125,176.109375,342.59375,174.921875,334.84375C173.71875,327.09375,
172.859375,319.609375,172.34375,312.359375C171.828125,305.125,171.34375,295.578125,170.90625,283.734375L151.25,272.28125L140.140625,
272.625C140.140625,313.75,132.78125,343.71875,118.09375,362.515625L90.0625,362.515625C85.84375,357.28125,82.09375,350.5625,78.78125,
342.359375C75.46875,334.15625,72.859375,324.578125,70.921875,313.640625C68.984375,302.703125,68.015625,291.03125,68.015625,
278.609375C68.015625,259.921875,70.125,242.890625,74.34375,227.515625C78.5625,212.140625,83.796875,201.140625,90.0625,
194.53125L118.09375,194.53125C121.84375,198.75,125.234375,204.359375,128.265625,211.359375C131.28125,218.375,133.78125,226.5,
135.78125,235.71875C137.765625,244.9375,139.109375,255.25,139.796875,266.640625L148.171875,266.640625C148.625,264.703125,149.5,
263.234375,150.8125,262.203125C152.125,261.171875,153.6875,260.859375,155.515625,261.265625C157.328125,261.671875,158.984375,
262.890625,160.484375,264.9375C163.890625,259.59375,167.828125,259.359375,172.265625,264.25C172.953125,262.3125,174.375,261.0625,
176.53125,260.5C178.6875,259.9375,180.578125,260.4375,182.1875,262.03125C183.65625,260.4375,185.34375,259.84375,187.21875,
260.234375C189.09375,260.640625,189.984375,262.3125,189.875,265.28125L271.390625,262.375C271.046875,252.921875,271.6875,244.75,
273.34375,237.859375C275,230.96875,277.9375,224.734375,282.15625,219.140625L314.796875,217.9375L322.484375,260.65625L448.4375,
256.5625C449.6875,253.9375,451.625,252.34375,454.25,251.78125C456.875,251.21875,458.921875,252.40625,460.40625,255.359375C462,
253.3125,463.875,251.96875,466.046875,251.34375C468.203125,250.71875,470.375,251.5,472.53125,253.65625C475.265625,249.5625,
478.578125,248.875,482.453125,251.609375C484.5,250.359375,486.09375,249.890625,487.234375,250.234375C488.03125,235.09375,
490.5625,220.578125,494.84375,206.671875C499.109375,192.765625,504.203125,182.796875,510.140625,176.75L539.53125,
176.75C542.828125,180.28125,545.90625,185.046875,548.75,191.03125C551.59375,197.015625,554.078125,203.90625,556.1875,
211.703125C558.296875,219.515625,559.890625,227.90625,560.96875,236.90625C562.046875,245.90625,562.59375,255.25,562.59375,
264.9375L562.59375,264.9375 M535.9375,182.734375L512.875,182.734375C508.765625,187.75,505.140625,194.59375,502.015625,
203.25C498.875,211.90625,496.515625,221.9375,494.921875,233.3125L518.171875,233.3125C519.640625,222.15625,521.953125,
212.203125,525.078125,203.421875C528.203125,194.640625,531.828125,187.75,535.9375,182.734375L535.9375,182.734375 M447.75,
262.375L364.015625,265.28125C371.875,268.25,378.484375,271.78125,383.84375,275.875C389.1875,279.984375,393.8125,286.25,
397.6875,294.671875C404.859375,292.859375,411.515625,292.375,417.671875,293.21875C423.828125,294.078125,429.40625,297.234375,
434.421875,302.703125L447.75,262.375 M312.234375,237.59375L309.84375,223.921875L285.40625,224.9375C280.84375,231.671875,
278.28125,239.765625,277.71875,249.21875C279.65625,253.09375,284.03125,255.015625,290.875,255.015625C295.421875,255.015625,
300,253.578125,304.625,250.671875C309.234375,247.765625,311.765625,243.40625,312.234375,237.59375L312.234375,237.59375 M375.296875,
299.625C375.296875,292.109375,371.421875,286.296875,363.671875,282.203125C355.921875,278.109375,344.75,276.046875,330.171875,
276.046875C317.1875,276.046875,307.5,277.359375,301.125,279.96875C292.8125,277.8125,286.03125,276.734375,280.796875,
276.734375C271.453125,276.734375,262.59375,278.390625,254.21875,281.6875C245.84375,285,239.203125,289.1875,234.296875,
294.25C229.390625,299.3125,226.953125,304.125,226.953125,308.6875C226.953125,313.46875,229.453125,317.296875,234.46875,
320.140625C239.484375,322.984375,244.671875,324.40625,250.03125,324.40625C257.203125,324.40625,264.953125,322.984375,
273.265625,320.140625C281.578125,317.296875,288.1875,313.921875,293.09375,310.046875C298.671875,313.359375,305.671875,
316.125,314.109375,318.34375C322.546875,320.5625,330.921875,321.671875,339.234375,321.671875C348.921875,321.671875,357.34375,
319.578125,364.53125,315.359375C371.703125,311.140625,375.296875,305.90625,375.296875,299.625L375.296875,299.625 M328.125,
340.125C328.125,337.40625,325.125,334.921875,319.15625,332.703125C313.171875,330.484375,305.625,329.359375,296.515625,
329.359375C287.859375,329.359375,280.328125,330.625,273.953125,333.125C267.578125,335.640625,264.390625,338.203125,264.390625,
340.8125C264.390625,344.921875,271.390625,347.140625,285.40625,347.484375C273.21875,351.921875,267.125,356.59375,267.125,
361.5C267.125,363.09375,268.25,364.328125,270.53125,365.171875C272.8125,366.03125,276.03125,366.65625,280.1875,367.046875C284.34375,
367.453125,287.78125,367.703125,290.53125,367.8125C284.03125,371.234375,280.796875,374.375,280.796875,377.21875C280.796875,379.15625,
282.8125,380.875,286.859375,382.34375C290.890625,383.828125,294.96875,384.5625,299.078125,384.5625C303.390625,384.5625,
307.71875,383.765625,312.0625,382.171875C316.390625,380.578125,318.5625,378.59375,318.5625,376.1875C318.5625,373.90625,317.671875,
372.265625,315.90625,371.234375C314.140625,370.21875,311.09375,369.1875,306.765625,368.15625C320.203125,364.96875,326.9375,361.5,
326.9375,357.734375C326.9375,355.578125,325.671875,353.71875,323.171875,352.1875C320.65625,350.65625,317.40625,349.3125,313.4375,
348.15625C323.21875,346.453125,328.125,343.78125,328.125,340.125L328.125,340.125 M259.078125,268.6875L189.015625,271.265625L187.65625,
275.359375L192.609375,312.109375C198.296875,306.640625,205.3125,303.625,213.625,303.046875C216.921875,297.8125,220.703125,
293.140625,224.984375,289.03125C229.265625,284.9375,234.359375,281.09375,240.28125,277.5C246.203125,273.90625,252.46875,270.96875,
259.078125,268.6875L259.078125,268.6875 M112.453125,200.5L92.796875,200.5C84.703125,210.53125,79.125,226.03125,76.046875,
246.984375L95.703125,246.984375C98.78125,226.03125,104.359375,210.53125,112.453125,200.5L112.453125,200.5 M360.59375,518.71875C360.25,
512.109375,358.546875,499.4375,355.46875,480.6875C352.390625,461.9375,348.296875,444.921875,343.171875,429.59375C338.046875,
414.28125,332.28125,406.609375,325.90625,406.609375C315.765625,406.609375,306.53125,410.09375,298.21875,417.03125C289.90625,
423.984375,285.75,430.9375,285.75,437.890625C285.75,440.734375,286.765625,443.5,288.8125,446.171875C290.859375,448.859375,295.53125,
454.203125,302.828125,462.234375C310.109375,470.265625,316.328125,477.546875,321.453125,484.109375C326.578125,490.65625,331.265625,
498.09375,335.484375,506.421875C337.1875,509.484375,338.1875,511.796875,338.46875,513.328125C338.75,514.859375,338.4375,516.65625,
337.53125,518.71875L360.59375,518.71875" Stretch="Fill" Margin="57,81,0,0" UseLayoutRounding="False" HorizontalAlignment="Left" 
Height="131.781" VerticalAlignment="Top" Width="187.405">
	<Path.Fill>
		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
			<GradientStop Color="#FF2D2D2D" Offset="0"/>
			<GradientStop Color="#FF3D3C3C" Offset="1"/>
		</LinearGradientBrush>
	</Path.Fill>
</Path>

 

}