为什么绑定 TextBlock 文本属性无法按预期工作答案

【问题标题】：Why binding TextBlock Text Property not working as expected为什么绑定 TextBlock 文本属性无法按预期工作
【发布时间】：2021-01-17 11:18:40
【问题描述】：

我有一个 DataTemplate 假设可以给我这种输出：

使用此代码时：

    <DataTemplate x:DataType="data:MenuItem" x:Key="MenuItemTemplate">
        <StackPanel>
            <Viewbox Margin="10 10 10 2">
                <TextBlock FontFamily="Segoe MDL2 Assets" Text="{x:Bind Icon}" />
            </Viewbox>
            <TextBlock HorizontalAlignment="Center" Text="{x:Bind Name}" />
        </StackPanel>
    </DataTemplate>

但是...我没有得到图标：

我认为我的绑定有问题，但我不知道是什么。

菜单项模型是这样的：

public class MenuItem
    {
        public MenuItem(string name, string icon)
        {
            Name = name;
            Icon = $"&#x{icon};";
        }

        public string Name { get; set; }
        public string Icon { get; set; }
    }

如果我只是提供纯文本的图标，像这样：

       <DataTemplate x:DataType="data:MenuItem" x:Key="MenuItemTemplate">
            <StackPanel>
                <Viewbox Margin="10 10 10 2">
                    <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE913;" />
                </Viewbox>
                <TextBlock HorizontalAlignment="Center" Text="{x:Bind Name}" />
            </StackPanel>
        </DataTemplate>

图标显示正确，但使用绑定时不显示。

你能帮我理解我的方法有什么问题吗？

编辑：添加完整代码示例

public sealed partial class MainPage : Page
{
    private ObservableCollection<MenuItem> MenuItems;

    public MainPage()
    {
        this.InitializeComponent();
        MenuItems = new ObservableCollection<MenuItem>(new List<MenuItem>
        {
            new MenuItem("Home","E913"),
            new MenuItem("Volume","EC3F"),
            new MenuItem("Scrap","E74C"),
            new MenuItem("Report","ED25"),
        });
      
    }
}

public class MenuItem
{
    public MenuItem(string name, string icon)
    {
        Name = name;
        Icon = $"&#x{icon};";
    }

    public string Name { get; set; }
    public string Icon { get; set; }
}

和 xalm 代码：

<Page.Resources>
        <DataTemplate x:DataType="data:MenuItem" x:Key="MenuItemTemplate">
            <StackPanel>
                <Viewbox Margin="10 10 10 2">
                    <TextBlock FontFamily="Segoe MDL2 Assets" Text="{x:Bind Icon}" />
                </Viewbox>
                <TextBlock HorizontalAlignment="Center" Text="{x:Bind Name}" />
            </StackPanel>
        </DataTemplate>
    </Page.Resources>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="90" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <ListBox Grid.Column="0" ItemsSource="{x:Bind MenuItems}"
             ItemTemplate="{StaticResource MenuItemTemplate}" />

</Grid>

【问题讨论】：

标签： wpf xaml uwp

【解决方案1】：

啊。仔细想想，我发现您正试图在运行时绑定一个需要在编译时解释的值。

具体来说，XAML 只是 XML 的一个特例。当您使用带有字符实体（如"&#xE913;"）的字符串时，XAML 编译器会解释实体，作为将 XAML 处理为 XML 的一部分。当然，这是在您的程序运行之前完成的。

当您在运行时绑定相同的文本时，您只是绑定了一堆字符。它们没有以任何特殊方式解释。它们只是显示为字符。相反，您需要直接提供实际值：

MenuItems = new ObservableCollection<MenuItem>(new List<MenuItem>
{
    new MenuItem("Home","\uE913"),
    new MenuItem("Volume","\uEC3F"),
    new MenuItem("Scrap","\uE74C"),
    new MenuItem("Report","\uED25"),
});

即使用the Unicode character escaping for a C# string literal 指定要使用的字符代码点。当然在模型中，不要试图形成实体语法；直接使用文本：

public class MenuItem
{
    public MenuItem(string name, string icon)
    {
        Name = name;
        Icon = icon;
    }

    public string Name { get; set; }
    public string Icon { get; set; }
}

【讨论】：

【解决方案2】：

以&#xE913这种格式编写unicode代码是只能在xaml中用来表示unicode字符的方式。在 C# 中，您需要以 \uE913 的方式编写它，并且您应该在将菜单项添加到列表的位置执行此操作。除非you use a converter 在这种情况下，这简直是矫枉过正。

new MenuItem("Home","\uE913"),
new MenuItem("Volume","\uEC3F"),
new MenuItem("Scrap","\uE74C"),
new MenuItem("Report","\uED25"),

【讨论】：