Easy to use icons in Windows 8 applications by using Segoe UI Symbol font

When creating your “Windows Modern Style UI applications” (read: Metro), one difficult aspect of the creation can be finding great icons to help keep a consistent look.

One little known trick is that Microsoft have already created a collection of icons that you can use in your applications. You simply need to use the “Segoe UI Symbol” font and know the character code for the icon.
An additional advantage of using an icon font, is that the icons are vector based and will scale crisply.

To browse the icons that are available open the Character map (search for it on the start screen). Change the font to Segoe UI Symbol, then scroll to the bottom for the really good ones.
Take note of the hex value of the character you want (E0EB in the sample image below).

image

 

From within your Windows 8 application, set the FontFamily to “Segoe UI Symbol”. Then tell the XAML that you are using the hex value of a character by putting it in the format ᄑ  The ampersand escapes the string, the #x defines it as a hex value, the semicolon then closes the character escape off.

So our aeroplane icon would be defined in XAML like this: 
The full line of XAML would be: <TextBlock FontSize="72" FontFamily="Segoe UI Symbol" Text="" />

The screenshot below shows the icons being displayed in the Visual Studio designer.

image

Start exploring with the character map, you may save yourself a heap of time by using the predefined icons Microsoft have created!

Reblogged from my Infragistics blog

By David Burela

Advertisements

BUILD keynote day 1–Metro experience with Jupiter, XAML and HTML5/JS

Highlights

  • You can download the developer preview of Windows 8
    http://dev.windows.com/
    http://blogs.msdn.com/b/b8/archive/2011/09/13/welcome-to-windows-8-the-developer-preview.aspx
  • The confusion around HTML5, xaml and Jupiter is finally cleared up.
    The new immersive apps (full screen, metro style apps which are launched from the tile based interface) can be built in either C#/XAML or HTML5/JS. Under the covers it reflects into the WinRT APIs. Apps built like this will run on ANY Win8 machine (x86, ARM, etc)
    clip_image001[4]
  • Silverlight & WPF are “legacy”. They put it onto the slide for show. The Win8 xaml looks to be 90% compatible with Silverlight. Demos are shown where they take a Silverlight app, copy/paste the code into a new Win8 XAML app, and only a few namespaces need to be changed. A silverlight grid is then changed to use the native WinRT grid to make it touch enabled and “Metro-y”
  • The Win8 XAML app is ported to Windows Phone 7 with only 1 line changed.
  • New version of Visual Studio available to help build apps for Win 8 “Microsoft Visual Studio 11 Express for Windows Developer Preview” (got to love Microsoft product names)
  • Expression blend works for editing the HTML5/JS apps
  • The native WinRT controls work in XAML and HTML5
  • New windows 8 app store. Store & submission process VERY similar to Windows Phone 7. Can submit via Visual Studio
    Paul Thurrott: “Biggest point of Windows Store: Microsoft is NOT taking a 30 percent cut. It will take a ZERO percent cut.”
  • Win8 machines can be easily restored back to a “clean base image” that developer can specify. Keeps all files, just reverts apps. (Reset/Refresh)
  • Windows Live application integration. Nice support for photos, calendar, mail, people. Very similar to Windows Phone 7 built in features.
    Windows user account settings Synced across PCs via the cloud (profile photo, etc)
  • Win8 specs are the same as Win 7. Consumes less memory after startup.
    Boot times have been massively reduced. Cold boot demo shows the PC almost starting faster than the monitor can turn on.

Useful articles

Continue reading