April 2012 - Posts

Windows 8 – Icons

Everyone who start developing for Windows 8 most heard about the AppBar control, the AppBar control is a navigation bar allowing the developer to add commands for his application.
When you define a command for AppBar you can set a Icon for it and there is already a lot of icons available for you out of the box in any Metro app.

To use those built it icons in C# and JavaScript you just need to set the font-family to - Segoe UI Symbol and write down the hexadecimal value of the icon.

Because the Icons are coming from Font they are Vectorial, this means you don’t have to add images to your project and you can modify the icon color by just changing the text color to any color you want.

Download Demo Solution – The solution contains both JavaScript and C# project.

C#

For C# there isn’t a built in Enum like in JavaScript but you can use the following code to run over all available Icons:

public SampleDataSource()

{

var startIndex = 0xE10F - 300;

var endIndex = startIndex + 1000;

var icons = new SampleDataGroup("Icons", "C# Icon List");

for (int i = startIndex; i < endIndex; i++)

{

icons.Items.Add(new SampleDataItem(i.ToString(),

(char)i,

string.Format("0x{0:X}:", i),

icons));

}

this.ItemGroups.Add(icons);

}

JavaScript

In JavaScript getting all icons is easy, you have a built it enum called – AppBarIcon, you can use this instead of the hexadecimal value, although this is AppBar icons you can use them everywhere.

The most important thing for using those Icons is setting the Font to 'Segoe UI Symbol'. (Example: Top Left Corner)

For JavaScript this is much more simple, you can just call the WinJS.UI.AppBarIcon enum to see all available icons or you can open the ui.js file and go to line – 27338 – or search for AppBarIcon: {.

This will show you the entire list of icons for JavaScript.

// Glyph Enumeration

/// <dictionary>Segoe</dictionary>

(function (WinJS) {

WinJS.Namespace.define("WinJS.UI", {

AppBarIcon: {

// Code point comments are the icon glyphs in the 'Segoe UI Symbol' font.

previous: "\uE100", // 

next: "\uE101", // 

play: "\uE102", // 

pause: "\uE103", // 

edit: "\uE104", // 