通过BindableCollection使用MVVM在WPF中添加图像

Question

我要做的是每次单击BindableCollection的添加按钮到StackPanel时添加图像。 我尝试使用ItemsControl ，如下面的代码所示：

<ItemsControl x:Name="Tickets">

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ImageTicket,diag:PresentationTraceSources.TraceLevel=High}" Stretch="None" HorizontalAlignment="Left" Width="100"/>
            </StackPanel>
        </DataTemplate>   
    </ItemsControl.ItemTemplate>
</ItemsControl>

虽然我尝试跟踪输出，但没有任何显示，但似乎没有问题。

这是我的ViewModel类：

class POSViewModel : Screen
{   
    public BindableCollection<TicketModel> Tickets { get; set; }

    public POSViewModel()
    {

        Tickets = new BindableCollection<TicketModel>();
    }



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

    }
}

这是我的模型课：

class TicketModel 
{
    private int ticketId;
    private CategorieEnum catégorieName;
    private float prix;
    private string imageSource;
    private Image imageTicket;

    public Image ImageTicket
    {
        get {
            Image Img = new Image();
            Img.Source = new BitmapImage(new Uri(imageSource, UriKind.Relative));
            return Img;
        }
        set { ImageTicket = value; }
    }


    public int TicketId { get; set; }
    public CategorieEnum CategorieEnum { get; set; }
    public float Prix { get; set; }
    public string ImageSource { get; set; }
}

PS：我正在使用Caliburn.micro框架。

Edit1：我也尝试绑定ImageSource ，仍然没有图像显示。

Answer 1

请使用下面的代码可能会有所帮助，但它使用了INotifyPropertyChanged和ObservableCollction

<ItemsControl ItemsSource="{Binding Tickets}" x:Name="RecipeItemControl" Height="100">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Path=ImageSource}"></Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

视图模型被修改为：

public class POSViewModel : INotifyPropertyChanged
{
    /// <summary>
    /// Property Changed Event Handler
    /// </summary>
    public event PropertyChangedEventHandler PropertyChanged;

    // Create the OnPropertyChanged method to raise the event
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }

    public ObservableCollection<TicketModel> _Tickets { get; set; }
    public ObservableCollection<TicketModel> Tickets {
        get {
            return _Tickets;
        }
        set {
            _Tickets = value;
            OnPropertyChanged(nameof(Tickets));
        }
    }

    public POSViewModel() {
        Tickets = new ObservableCollection<TicketModel>();
    }

    public void Add() {

        TicketModel Ticket = new TicketModel
        {
            ImageSource = @"H:\Good.png",
            Prix = 10,
            TicketId = 0
        };
        Tickets.Add(Ticket);

    }

}



public class TicketModel
{
    private int ticketId;
    private float prix;
    private string imageSource;
    private ImageSource imageTicket;
    public int TicketId { get; set; }
    public float Prix { get; set; }
    public string ImageSource { get; set; }


}

Answer 2

您的ImageTicket属性声明错误。 它应该返回一个ImageSource：

public ImageSource ImageTicket
{
    get { return new BitmapImage(new Uri(ImageSource, UriKind.Relative)); }
}

设置器没有任何意义，因为它除了递归地调用自身之外什么也没有做。

整个属性可能是多余的，因为由于内置的​​自动类型转换，您还可以直接绑定到ImageSource属性：

<Image Source="{Binding ImageSource}"/>

但是请注意，如果您在后面的代码中使用资源文件包URI ，则应使用完整的前缀：

ImageSource = "pack://application:,,,/Assets/Icons/man.png",

并且图像文件的Build Action应该设置为Resource 。