Добавление изображения в WPF с использованием MVVM через BindableCollection

Question

Я пытаюсь добавить изображение каждый раз, когда я нажимаю кнопку добавления на StackPanel из BindableCollection. Я попытался использовать 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 framework.

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 Resource File Pack в коде, это должно бытьс полным префиксом:

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

, а для параметра Действия при создании файла изображения должно быть установлено значение Ресурс .

.