带有数据绑定的 TextBlock 中的 Segue 图标

Question

我正在尝试制作一个带有图标的网格。我将图标的字符串表示形式存储在数据库中，并尝试通过绑定到我的视图模型上的图标属性（字符串）来在 GridHub 中显示这些图标。

当我使用这个 xaml 时，我得到了网格中显示的实际文本

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

但这会按预期显示图标

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

我的模型看起来像：

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

我的视图模型只包含这些对象的列表。

在我的数据库中，我尝试存储以下内容：


\uE1D4（必须转义才能进入数据库）
57812（char.Parse("\uE1D4")的结果）

和 none 导致图标正确显示！

The output of first XAML example

Answer 1

您必须解码 html 编码的字符串。例如，您可以尝试这个非常粗略的示例：

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




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


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

或

<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}"

可以使用字体查看器 here，以备不时之需。

编辑：无论如何 unicode 转义序列应该比 html 编码工作得更好，这就是为什么我建议用字体查看器仔细检查并将 link 字体 ttf 作为资源. 您还可以添加一个按钮来分析 xaml 文本的 unicode 转换，当直接输入而不绑定时。像这样

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

带有数据绑定的 TextBlock 中的 Segue 图标

Segue Icon in TextBlock with Data Binding

c#

xaml

windows-8.1