Graphic River (one of the Envato websites) has a lot of graphic design assets. Mashable has a nice collection of flat design icons, which should be more than enough to supply you with your needs. Here are a few links with sources for flat icons: If you don’t know how to use these in your XAML projects, do not fear for I have created a short screencast below which shows you how to do it. If the above sources does not fulfil your craving for icons you are in luck because with iOS 7 the whole world has gone nuts flat and there are plenty of goodies out there. The tool will display the transformed path in the Output Geometry field, so copy that and use it as the data for your path icon. I open the WPF Geometry Transformer tool, paste the original path in the Input Geometry field, supply the values for the scale and click the Transform button. So in my case I simply divide 40 (target dimension) by 76 (source dimension) which leaves me with a scaling factor of 0.5263157894736842. This involves knowing what the dimensions of the original path is and applying a little bit of math to understand by what factor it should be scaled to get to the required dimensions of 40 x 40 pixels. His solution was based on using the the WPF Geometry Transformation Tool to scale the path down to the required dimensions. I raised the issue in the Windows 8.1 developer forums and was promptly supplied with a very nice explanation and solution to the problem by Thomas Huber. When I first tried to use a path icon with a path from another source I was surprised to see that the path did not scale to automatically fit to the dimensions of the AppBarButton. The one on the right was scaled to display correctly.Īs mentioned above, using vector icons from other sources can be problematic as the dimensions may be different from what is expected. You will notice below the icon in the left is the one which I used as-is and is not displaying correctly in the expected dimensions. The path therefore needs to be scaled to fit in the correct size. The problem with the above example however is that the icons on are designed for a dimension of 76x76 pixels, and the PathIcon class expects a dimension of 40x40 pixels. All we are interested is the path data, so simply highlight and copy the Data property of the Path and use that in a path icon: That is however much more markup than what we need. Click on the camera icon you like and you will be presented with XAML markup to display the icon, as in the screenshot below Simply surf on over to and search for “camera”. Let us say for example that we want to use a camera icon from the Modern UI Icons website. Looking at the documentation for the AppBar class you would have noticed that you can also specify a path icon, and there are plenty of sources available to find path-based XAML icons. You are not only limited to the icons in the Segoe UI Symbol font for the icons in your app bar. You can for example replace your normal buttons in your XAML with AppBar buttons 2. Please note: You are not limited to using AppBarButton only in the AppBar. For more information check out the samples in the documentation for the AppBarButton class. In most cases, something like the following will be just enough. This way you’ll replace the user agent’s default Segoe UI Emoji that does not allow any color alteration for its glyphs. You need to properly specify Segoe UI Symbol font as a fallback for your Unicode glyphs. The bad news is that there’s no visible progress on the above bug. Another good thing is that, being a reduced case scenario, most people won’t probably ever notice this kind of inconsistence. It applies in latest Firefox versions on Windows 8.1 only - Firefox 34 being the latest stable version at this time. The good news to say so is that there’s a reported bug. Well, if you’re using Firefox on Windows 8.1, then you should check the newly colored Unicode characters in your web pages. You know Unicode characters, those glyphs we’re inserting most of times via HTML or CSS in order to add a soft touch to our buttons, form controls and so on. Unicode chars are now colored in latest Firefox on Windows 8.1
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |