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).



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.


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

Build 2012 conference app for Windows Phone

AppIcon_200This year I was given the location of the Build 2012 data feed, and asked if I could help build the conference app for the Windows Phone.

You can download the Build 2012 conference application from the Windows Phone marketplace.

The source code is available on GitHub.

I took the TechEd Australia app that I created earlier in the year, and modified it for the Build data stream (you can read my post-mortem of building the TechEd app here)

The Build 2012 application has a few nice features:

  • Search for sessions by title, session code or abstract.
  • View the sessions by schedule slot.
  • View slides directly on your phone (once uploaded to Channel 9).
  • Watch the sessions directly on your phone (once uploaded to Channel 9).

And of course, the application was built using the Infragistics NetAdvantage for Windows Phone controls.

schedule groupingSession infosession searchingspeaker info

By David Burela
Reblogged from my Infragistics account

Code samples & video of my TechEd presentation

channel-9-logoThe video of my TechEd session has been online for a while. However before blogging about it, I thought I would take a unique approach to sharing the code samples.

My session introduced the DataBinding and DataTemplating features of Windows 8, and then progresses into how you can create native cross platform applications.

Rather than just zip the final source code up and provide it “as is”, I instead replicated the steps I took in the video and used Git to take snapshots throughout the development. I tagged each check-in with the timestamp of the video that the source code corresponds to. Which means you can follow along on your own, and if you miss something, you can just view that specific check-in to see what changed.

To view the list of timestamped check-ins, you can go to the list of commits https://github.com/DavidBurela/Win8Demo-TechEd2012Session/commits/master

Later in the session I talked about using Caliburn.Micro. However I had to use a special fork to get it working with Windows RT. Here is the blog post with more details about the fork http://www.markermetro.com/2012/08/technical/caliburn-micro-for-winrt-mvvm-magic-pixie-dust-for-everyone/
and the link to the fork itself http://caliburnmicro.codeplex.com/SourceControl/network/forks/marker_metro/CaliburnMicroWinRT

By David Burela
This post was re-blogged to my Infragistics account

I’ve been awarded Microsoft MVP for Windows Azure


This morning I got an email from Microsoft informing me that have been presented the Microsoft MVP award for Windows Azure. It is a great feeling to see my contributions to the community recognised directly by Microsoft.

My favourite part of the introductory email was the disclaimer: “The purpose of this paragraph is to relieve Microsoft Corporation and its affiliates of any and all liability arising out of any injury caused as a result of use or mis-use of our products contained in this package… In no event will Microsoft be liable to anyone for any damages or injury caused by the acceptance of this prize, or by its misuse or improper use, or action taken by user…

It sounds like the welcome package they are sending in the mail is rather dangerous!

By David Burela

Making “Isometric workflows” inside Expression Blend

Making “Isometric workflows” inside Expression Blend

I was going through the archives and found this video that Scott Barnes (@Mossyblog) recorded last year.

The video is still relevant for Windows 8 developers. In the video, Scott explains the steps he takes to make a stylised “Isometric Workflow” that would work well inside of a dashboard application.

The video was done as a “Part 1”, but unfortunately it looks like he never did record any further parts.
Enjoy the video, it is great to see how other people work with their tools.

[vimeo https://vimeo.com/21877046]

By David Burela

Post-mortem of the Microsoft TechEd WP7 app

Blog header

This year I was asked if I could build the official Windows Phone 7 companion app for the Microsoft TechEd Australia conference.

The app is available from the Windows Phone marketplace http://www.windowsphone.com/en-us/store/app/teched-australia-2012/7bad938d-047f-41b4-bb80-5f9f7dbf776a
And the full source code available on Github https://github.com/DavidBurela/TechEdAusWinPhone

The application was powered by the Infragistics NetAdvantage for Windows Phone control suite, which greatly simplified the development process and helped me complete the application in time.


Due to timing constraints, I was only given a week to build the entire application to ensure that we had 1.5 weeks lead time for the certification process. This meant I had to leverage as many frameworks and controls to complete it on time.

Ensuring the basics work

I started off by utilising the Windows Phone starter kit for conferences to give me a basic framework for the application. The framework was built to get the data from a custom JSON service the original author was using, however the TechEd data feed was coming from a WCF OData service. I discovered at this time that although the Windows Phone can directly consume the OData service, it only supports XML and not JSON formatted data. The size of the JSON data vs XML data was 300k vs 950k. There was not enough time to try and access the OData feed via manually constructed HTML webclient requests and manual parsing. Instead I specified in the OData LINQ query just the fields that were required for the app. This took the data payload down from 950k to 600k, a massive data transfer reduction over a mobile network and not bad for just an hours investment in tweaking the LINQ statement.

Working on features

After I had confirmed I was able to successfully download the session data and populate the collections locally, I moved onto thinking about what I would want in a conference companion app. The most important features/scenarios for me were:

  • I have just walked out of a session, and I need to look up what talks are happening next.
  • What are all of the MVVM sessions that are happening during the conference.
  • Speakers will regularly recommend other talks to go to. Being able to look up the session codes quickly is important.
  • The delegate handout only has a list of session times and titles. The abstracts aren’t listed. Give the delegates a way to look up a session for more information.
  • Who is the speaker for this session I am in right now.
  • I want to look up a speaker a like, and see what talks they are doing.
  • Being able to favourite a session so I can get a quick overview of when sessions I want to attend are on.
  • Cache the sessions for 2 hours to reduce network usage on data plans.


Using the NetAdvantage XamList helped me to implement the vast majority of my feature wish list without writing any code. After downloading the session data, I simply used databinding to connect it to the XamList control. The control automatically supports searching through the data in the list, and will look through all the properties that you ask it to (session title, session code, abstract, room location, etc.). That immediately took care of searching for a session based on a number of criteria.

session searching

I created another pivot to allow the delegates to see what sessions are on during each time slot. The XamList also supports grouping of data automatically. After defining that the data should be grouped based on session time, I straight away had another requirement completed again without requiring any code.

schedule grouping

Implementing the remaining features

With the XamList ticking of the majority of my requirements, it left only 2 major features left that required coding:

  • Caching
  • Favourites

Favouriting sessions had already been roughly implemented in the conference starter kit. However it only saved sessions when the app is tombstoned, not when you closed an app or under a few other conditions. I fixed up the favourites code, changed some icons, etc.

To solve the caching feature, I simply stored the collection holding the session data direct in isolated storage and then loaded it back up the next time the app started

IsolatedStorageSettings.ApplicationSettings.Add("SessionData", sessionCollection); 


Final thoughts

If I had enough time, then I would have re-written this from scratch, rather than used the template. I ripped out a lot of the custom code in the template and replaced it with the features built into the XamList. It wasn’t until the 4th day, after replacing all the features that I realised “Oh, I didn’t actually need anything in this template, except for the favourites code (which I modified anyway). But as there was only 2 days until the deadline it was not worth it just for the sake of “application purity”.

Next time I’ll definitely be asking for a bit longer lead time / access to the OData feed. It was a mad rush to try and get it all completed in time, and resulted in lots of shortcuts to get things done in time which I still feel dirty about (e.g. messy code).



TechEd splash screensession searchingschedule groupingSession infospeaker info

By David Burela

Details for my Windows 8 MVVM talk at TechEd Australia

I previously blogged that I was speaking at TechEd Australia. I now have details on when my talk is happening.

What’s New for Windows 8 Devs Part 2
Date: Wed, 12th September
Time: 13:45-15:00
Room: Central A

Abstract: David Burela takes anyone new to Desktop development through the basics of developing for Windows 8. XAML, Databinding, DataTemplates and ViewModels will all be introduced. Discover how to separate your UI from your business logic, how to create List Views that display your data richly, how portable libraries can help your business logic be used cross platform, plus much more. The techniques will be focused on Windows 8, but can be applied to any XAML based application: WinRT, Windows Phone, WPF, Silverlight 5.

I hope to see some of you in my session!

By David Burela