How do I use XAML HexNumbers for Windows Store App icons (Segoe UI Symbol) in databound objects?

Question

I have a basic DataTemplate which I use to bind to the basic objects which expose several properties. These items are displayed in an ItemList. I am trying to ensure that the TextBlock which is bound to Icon, displays the symbol similar to  which would be stored in the object's Icon property.

<DataTemplate x:Key="Action180x180ItemTemplate">
    <Grid HorizontalAlignment="Left" Width="180" Height="180">
        <Border Background="OliveDrab">
            <TextBlock Text="{Binding Icon}" FontFamily="Segoe UI Symbol" FontSize="72" Padding="0,20,0,0" TextAlignment="Center" />
        </Border>
        <StackPanel VerticalAlignment="Bottom" Background="DarkOliveGreen">
            <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
        </StackPanel>
    </Grid>
</DataTemplate>

The problem is that when the code is executed, the symbol is not displayed, but instead the raw value is. Does anyone have any idea on how to have the symbol display from a bound field (preferably without changing the Icon property from String to something else)?

Answer 1

To write unicode characters directly inside XAML use this format: &#xhexcode;

To store unicode characters inside strings use this format: "\uhexcode"

Answer 2

You can use Unicode character escape sequences in the c# string to achieve the binding. Something like the following:

DataContext = new { Icon = "\uE0C8", Title = "My Title" };

See Unicode character escape sequences for further details.