3

I am trying to get a feel for the best practice for FormState icons(or icons in general) on a WPF form.

The reason I ask is because when I originally created my Min/Max/Restore/Close buttons I created a few different implementations thinking one would be obvious when they were done. I first created them using the same method as modern UI by MahApps. Using datapoints in the xaml to draw them. I then created my own in illustrator by tracing them from Visual Studio 2012 and then saved them as SVG's. My third approach was after another mentioned they were using the Merlott font in house.

After looking in to using the merlott font I found an answer on the same topic. The answer said that using the Merlott font was best practice and to avoid using the path data points. The answer can be seen here: Making WPF applications look Metro-styled, even in Windows 7?

So this made me even question it even more. What I decided on was using the Scalable Vector Graphics(SVG format).

From there I was able to convert the graphic in Blend Design into pure XAML. It renders the shapes using geometry.

So at this point I have 4 different ways of completing this task. Each one around the same difficulty.

  1. Scalable Vector Graphics - Retraced the shapes in illustrator and exported to pure scalable vector graphics and use the .svg as a resource.
  2. Geometry/XAML - Converted the SVG directly to XAML. This implementation uses geometry to render the shapes.
  3. Path Datapoints - Uses another XAML approach to draw the icons.
  4. Windows Font(Merlott) - This has been around for ages and some think this is the best practice. Normally I would think this isn't a viable option unless including font with project, but Merlott is installed on Windows by default.

So this leaves me with quite a bit of confusion. I have these 4 implementations, all easy enough to implement and no idea which one is the best practice.

Some may think this is subjective, and possibly anal. Although I would like to use best practices on this project(and future projects).

Could anyone care to explain which one would be the better option, and why?

Community
  • 1
  • 1
user1632018
  • 2,485
  • 10
  • 52
  • 87
  • Just a side note, you can [export to xaml](http://www.mikeswanson.com/xamlexport/) straight from illustrator. – Chris W. May 06 '14 at 17:45
  • @ChrisW. Thanks for letting me know, I didn't know that. It definitely will save me time in the future. Is that with the AItoXAML plugin or does illustrator now include this ability? – user1632018 May 07 '14 at 18:18
  • I'm not familiar with altoxaml, it's the ai>xaml plugin Mike Swanson made available in the link in my previous comment that I use. As for your question itself, finally had a second to browse through it all, and I would question why anyone could label a font as a best practice since it's generally still just a drawn glyph not different than a path other than it would be an already created option you would have to include in the project for machines that may not have it already, otherwise personally I just make my paths, make them contentcontrols for re-use from a resource dictionary and ...cont – Chris W. May 07 '14 at 21:13
  • that way I'm loading resources necessary instead of entire font bases when generally you wont need all those for your assets anyway and I can manipulate them directly to what I want/need instead of just whats available limiting the possibilities presented by just a font solution. – Chris W. May 07 '14 at 21:14

1 Answers1

5

It seems that this tool is perfect for you:

https://github.com/BerndK/SvgToXaml

It can browse svg files and can convert them (without using other tools like inkscape or illustrator). It can also create a single xaml file for all svgs in a folder (batch). The you just have to refer the created object like this and you are golden:

<Button>
  <Image Source="{StaticResource cloud_3_iconDrawingImage}"/>
</Button>

Sample app is included.

To answer your question (4 options?)

Option 1 is not possible out of the box (a solution could be https://sharpvectors.codeplex.com/)

Option 2 and 3 seems to be identical - the Path-Object uses a Geometry. To be more precise I prefer using an Image not a Path, because Image has clipping and can contain several PathGeometries with several Colors. The Image can handle MouseClicks better than a Path. The result can look like this:

<DrawingImage x:Key="cloud_3_iconDrawingImage">
  <DrawingImage.Drawing>
    <DrawingGroup ClipGeometry="M0,0 V512 H512 V0 H0 Z">
      <GeometryDrawing Brush="#FF000000" Geometry="F1 M512,512z M0,0z M409.338,216.254C398.922,161.293 350.672,120.477 293.557,120.477 258.459,120.477 225.926,135.762 203.686,162.061 166.538,152.155 127.607,173.842 116.753,210.84 78.16,222.176 50.6,257.895 50.6,299.303 50.6,350.155 91.97,391.524 143.822,391.524L369.18,391.524C420.03,391.524 461.401,350.155 461.401,299.303 461.4,263.389 440.941,231.457 409.338,216.254z M369.18,351.523L143.821,351.523C114.026,351.523 90.599,328.097 90.599,299.302 90.599,265.224 118.249,239.224 152.785,245.486 141.249,205.89 196.916,183.556 217.426,213.138 222.583,198.556 243.249,160.476 293.557,160.476 331.584,160.476 370.918,186.556 372.221,245.458 397.584,245.556 421.401,263.89 421.401,299.302 421.4,328.098 397.975,351.523 369.18,351.523z" />
    </DrawingGroup>
  </DrawingImage.Drawing>
</DrawingImage>

Note this is the definition of the "Image/Icon" to be stored somewhere in the resources. To show it use it as ImageSource with an image as shown above.

Option 4: I think there are only some icons given there, not my preferred solution, but perhaps I understood your idea with the font wrong.

BerndK
  • 1,045
  • 10
  • 14