基于MVVM(Caliburn.Micro)在WPF中通过BindableCollection添加图片异常

让我们一步步排查并解决你的问题：

1. 核心问题：ItemsControl未正确绑定到集合 #

你的XAML中ItemsControl命名为Tickets，但没有明确设置ItemsSource绑定到ViewModel的Tickets集合。虽然Caliburn.Micro有约定绑定机制，但有时候明确声明能避免命名冲突或约定失效的情况，修改XAML如下：

<ItemsControl x:Name="Tickets" ItemsSource="{Binding Tickets}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- 直接绑定ImageSource，不再用ImageTicket -->
            <Image Source="{Binding ImageSource}" 
                   Stretch="None" 
                   HorizontalAlignment="Left" 
                   Width="100"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

2. Model设计违反MVVM原则：不要在Model中创建UI控件 #

你的TicketModel里的ImageTicket属性返回的是Image控件实例，这是完全错误的——WPF的Image.Source需要绑定的是ImageSource类型（比如BitmapImage），而不是UI控件本身。而且把UI元素放到Model里严重违反MVVM模式，直接移除这个属性，改用ImageSource字符串绑定即可。

同时，为了确保属性变化能通知UI（虽然你现在是添加新项，但这是MVVM的最佳实践），让Model继承Caliburn.Micro的PropertyChangedBase：

class TicketModel : PropertyChangedBase
{
    private int _ticketId;
    private CategorieEnum _categorieEnum;
    private float _prix;
    private string _imageSource;

    public int TicketId
    {
        get => _ticketId;
        set => Set(ref _ticketId, value);
    }

    public CategorieEnum CategorieEnum
    {
        get => _categorieEnum;
        set => Set(ref _categorieEnum, value);
    }

    public float Prix
    {
        get => _prix;
        set => Set(ref _prix, value);
    }

    public string ImageSource
    {
        get => _imageSource;
        set => Set(ref _imageSource, value);
    }
}

3. 检查图片路径和资源设置 #

即使绑定正确，图片路径错误或资源配置不对也会导致不显示：

• 确保图片路径格式正确：WPF中可以用简化路径/Assets/Icons/man.png，或者完整的pack路径pack://application:,,,/Assets/Icons/man.png；UWP则用ms-appx:///Assets/Icons/man.png
• 在解决方案资源管理器中选中man.png，右键设置生成操作为Resource，复制到输出目录为如果较新则复制

4. 确认ViewModel的集合操作正确 #

你的ViewModel中BindableCollection的使用是正确的，它会自动通知UI集合变化，添加新项时UI会自动更新。保持现有代码即可：

public void ManBtn()
{
    TicketModel ticket = new TicketModel {
        CategorieEnum = CategorieEnum.man,
        ImageSource = "/Assets/Icons/man.png",
        Prix = 10,
        TicketId = 0
    };
    Tickets.Add(ticket);
}

做完这些修改后，点击添加按钮应该就能正常显示图片了。

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