Binding Symbols in a ListBox

Question

I want to use some items in Segoe MDL2 Assets as icons for a menu driven off a collection.

I have my collection defined

NavItems = new ObservableCollection<NavItem>
{
    new NavItem {Title = "Sign in", Icon="&#xE1E2;", ClassType = null },
    new NavItem {Title = "Settings", Icon="&#xE115;", ClassType = typeof(Settings) }
};

In my xaml I have a listbox defined as

<ListBox ItemsSource="{Binding NavItems}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Height="24">
                <ContentControl Content="{Binding Icon}" FontFamily="Segoe MDL2 Assets" />
                <StackPanel Margin="20,0,0,0">
                    <TextBlock Text="{Binding Title}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

The problem is when this listbox is rendered, the icons don't render properly (they show up as a bunch of squares). However if I replace the binding statement with the icon value directly in the xaml it works. I'm curious on how I would do this binding correctly.

(note I've tried various controls besides a generic content control with the same results so I know it's unrelated to that)

Many thanks!

Answer 1

In C#, unicode character escapes sequences are prefixed by \u, so your code should look like this:

NavItems = new ObservableCollection<NavItem>
{
    new NavItem { Icon = "\uE1E2", ... },
    new NavItem { Icon = "\uE115", ... }
};