Segue Icon in TextBlock with Data Binding

c#, windows-8.1, xaml

Solution

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);
} 

Problem

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: - `&#xE1D4;` - \uE1D4 (has to be escaped to get in the db) - 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

Original source

Related problems