Segue Icon in TextBlock with Data Binding

Question

I am trying to make a Grid with an Icon in it. I am storing the string representation of the icon in a database, and trying to display these icons in a GridHub by binding to the Icon property (a string) on my viewmodel.

When I use this xaml, I get the actual text displayed in the grid

<TextBlock Text="{Binding Icon}"
    FontFamily="Segoe UI Symbol"
    FontSize="100"
    TextAlignment="Center"
    VerticalAlignment="Top"
    Foreground="DarkGray"
    AutomationProperties.Name="Some Label"/>

But this displays the icon as expected

<TextBlock Text="&#xE1D4;"
    FontFamily="Segoe UI Symbol"
    FontSize="100"
    TextAlignment="Center"
    VerticalAlignment="Top"
    Foreground="DarkGray"
    AutomationProperties.Name="Some Label"/>

My Model looks like:

 public class PermissionGroup
{
    /// <summary>
    /// The unique identifier for the group.
    /// </summary>
    public string PermissionGroupId { get; set; }
    /// <summary>
    /// The name of the group
    /// </summary>
    public string Name { get; set; }

    /// <summary>
    /// The page associated with the permission group
    /// </summary>
    public string PageName { get; set; }

    /// <summary>
    /// The icon that will be shown on the PermissionHub page
    /// </summary>
    public string Icon { get; set; }

    /// <summary>
    /// A description of the permissions in the group
    /// </summary>
    public string Description { get; set; }

    /// <summary>
    /// The permissions associated with this permission group
    /// </summary>
    public List<Permission> Permissions { get; set; } 
}

and my viewmodel just contains a list of these objects.

In my database I have tried storing the following:

1. 
2. \uE1D4 (has to be escaped to get in the db)
3. 57812 (the result of char.Parse("\uE1D4"))

and none of these has resulted in the icon being displayed correctly!

The output of first XAML example

Answer 1

You have to decode the html encoded string. For instance you can try this very rough example:

public class ViewModel
    {
        public PermissionGroup PG {get; set;}
        public ViewModel()
        {
            PG = new PermissionGroup();
            PG.Icon= System.Net.WebUtility.HtmlDecode("");
        }
    }




public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();
        }
    }


<TextBlock Text="{Binding Path=PG.Icon}" FontFamily="Segoe UI Symbol"/>

or

<Style x:Key="Segoe">
    <Setter x:Name="Segoe" Property="TextElement.FontFamily" Value="Resources/#Segoe UI Symbol" />
</Style>

<TextBlock Text="{Binding PG.Icon}"
            Style="{DynamicResource Segoe}"

A font viewer is available here, in case you need one.

EDIT: anyway the unicode escape sequence should work better than the html encoding, that's why I'm suggesting to double check with a font viewer and to link the font ttf as a resource. You can also add a button to analyse the unicode conversion of your xaml text, when directly entered without binding. Something like this

private void Button_Click(object sender, RoutedEventArgs e)
{
    byte[] stringBytes = Encoding.Unicode.GetBytes(txname.Text);
    char[] stringChars = Encoding.Unicode.GetChars(stringBytes);
    StringBuilder builder = new StringBuilder();
    Array.ForEach<char>(stringChars, c => builder.AppendFormat("\\u{0:X}", (int)c));
    Debug.WriteLine(builder);
}