WinUI3中DataTemplate绑定资源属性失败，如何解决？

问题场景 #

使用WinUI3开发游戏应用时，ListView通过DataTemplate绑定Job派生类的数据，运行后仅显示边框，文本和图片均不加载，控制台报属性找不到的错误。

基类与派生类代码 #

基类JobClass：

public class JobClass
{
    public string JobName = "null";
    public string JobDescription = "null";
    public byte[] JobImage = new byte[0];
}

派生类BuilderClass：

public class BuilderClass : JobClass
{
    public BuilderClass()
    {
        JobName = Properties.Resources.Builder.JobName;
        JobDescription = Properties.Resources.Builder.JobDescription;
        JobImage = Properties.Resources.Builder.JobImage;
    }
}

DataTemplate与ListView代码 #

DataTemplate定义：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DataTemplate
        x:Key="JobProfileTemplate">
        <StackPanel
            Orientation="Horizontal"
            Margin="2,0,0,0"
            BorderBrush="Black"
            BorderThickness="2">
            <Image
                Source="{Binding JobImage}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"/>
            <TextBlock
                Text="{Binding JobName}"
                Margin="24,0,0,0"
                VerticalAlignment="Center"/>
        </StackPanel>
    </DataTemplate>
</ResourceDictionary>

ListView页面代码：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <ListView
        ItemsSource="{x:Bind JobsRepo}"
        ItemTemplate="{StaticResource JobProfileTemplate}"/>
</Grid>

错误信息 #

Error: BindingExpression path error: 'JobImage' property not found on 'Calendarium.Classes.Jobs.Builder'. BindingExpression: Path='JobImage' DataItem='Calendarium.Classes.Jobs.Builder'; target element is 'Microsoft.UI.Xaml.Controls.Image' (Name='null'); target property is 'Source' (type 'ImageSource')
Error: BindingExpression path error: 'JobName' property not found on 'Calendarium.Classes.Jobs.Builder'. BindingExpression: Path='JobName' DataItem='Calendarium.Classes.Jobs.Builder'; target element is 'Microsoft.UI.Xaml.Controls.TextBlock' (Name='null'); target property is 'Text' (type 'String')

解决方案 #

1. 将字段改为属性（核心修复） #

XAML绑定仅支持绑定属性（Property），无法直接绑定字段（Field）。修改JobClass为自动属性：

public class JobClass
{
    public string JobName { get; set; } = "null";
    public string JobDescription { get; set; } = "null";
    public byte[] JobImage { get; set; } = new byte[0];
}

派生类构造函数的赋值逻辑无需修改，可直接沿用。

2. 处理byte[]到ImageSource的转换 #

Image.Source要求绑定ImageSource类型，当前JobImage是byte[]，需添加转换器实现类型转换：

步骤1：创建转换器类

using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Media.Imaging;
using System.IO;

public class ByteArrayToImageSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is byte[] byteArray && byteArray.Length > 0)
        {
            using (var stream = new MemoryStream(byteArray))
            {
                var bitmap = new BitmapImage();
                bitmap.SetSource(stream.AsRandomAccessStream());
                return bitmap;
            }
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

步骤2：在ResourceDictionary中注册并使用转换器

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:你的项目命名空间">

    <local:ByteArrayToImageSourceConverter x:Key="ByteArrayToImage"/>

    <DataTemplate
        x:Key="JobProfileTemplate">
        <StackPanel
            Orientation="Horizontal"
            Margin="2,0,0,0"
            BorderBrush="Black"
            BorderThickness="2">
            <Image
                Source="{Binding JobImage, Converter={StaticResource ByteArrayToImage}}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"/>
            <TextBlock
                Text="{Binding JobName}"
                Margin="24,0,0,0"
                VerticalAlignment="Center"/>
        </StackPanel>
    </DataTemplate>
</ResourceDictionary>

3. 确保JobsRepo的绑定有效性 #

• 确保JobsRepo是页面的公开属性，若需要动态更新数据，建议使用ObservableCollection：

public ObservableCollection<JobClass> JobsRepo { get; set; } = new ObservableCollection<JobClass>();

• 页面初始化时添加数据实例：

public MainPage()
{
    this.InitializeComponent();
    JobsRepo.Add(new BuilderClass());
}

内容的提问来源于stack exchange，提问作者Ayes