Взять изображение из списка с помощью PK и показать как часть другого объекта в ListBox в MVVM

Question

Думаю, это довольно простая проблема, с которой я столкнулся, но это не то, что мне приходилось делать раньше.

У меня есть проект MVVM, который связан с DAL, который имеет два типа объектов: изображение и карту. Изображения и карточки имеют отдельные таблицы, и карточка содержит три взаимосвязи, соединяющихся с таблицей изображений, так что с каждой карточкой связаны три изображения.

Теперь в моем XAML есть ListBox, в котором в качестве источника данных используется список карточек, но я хочу отобразить одно из изображений как часть шаблона данных. Вот мой XAML:

<ListBox ItemsSource="{Binding AllCards}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Width="100" Height="100" Source="{Binding }" />
                <TextBlock VerticalAlignment="Center" Margin="10,0,0,0" Width="300" Text="{Binding CardName}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Редактировать # 1 это модель моей карты:

public class Card
{
    public int Id { get; set; }
    public string CardName { get; set; }
    public int Image1 { get; set; }
    public int Image2 { get; set; }
    public int Image3 { get; set; }
}

и модель изображения такова:

public class Image
{
    public int ImageId { get; set; }
    public string Imagepath { get; set; }
    public string ImageName{ get; set; }
}

Answer 1

Если ваша card модель выглядит так ...

public class Card
{
    public int Id { get; set; }
    public string CardName { get; set; }
    public BitmapImage Image1 { get; set; }
    public BitmapImage Image2 { get; set; }
    public BitmapImage Image3 { get; set; }
}

... тогда это кусок пирога, вам просто нужно сделать это:

<ListBox ItemsSource="{Binding AllCards}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Width="100"
                       Height="100"
                       Source="{Binding Image1}" />
                <TextBlock
                       VerticalAlignment="Center"
                       Margin="10,0,0,0"
                       Width="300"
                       Text="{Binding CardName}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Но если ваша Card модель выглядит так ...

public class Card
{
    public int Id { get; set; }
    public string CardName { get; set; }
    public int Image1Id { get; set; }
    public int Image2Id { get; set; }
    public int Image3Id { get; set; }
}

Тогда вам, вероятно, понадобится создать CardViewModel со свойствами BitmapImage вместо Id, и вам нужно будет сопоставить вашу Card с моделью представления.

Если вам нужно загрузить изображение из файла или конвертировать из Bitmap (что не то же самое, что BitmapImage), вот пара конвертеров:

public BitmapImage Import(string path, bool isRelativePath)
{
    var fullPath = GetFullPath(path, isRelativePath);
    var buffer = File.ReadAllBytes(fullPath);
    MemoryStream stream = new MemoryStream(buffer);
    var bitmapImage = new BitmapImage();
    bitmapImage.BeginInit();
    bitmapImage.StreamSource = stream;
    bitmapImage.EndInit();
    return bitmapImage;
}

public BitmapImage BitmapToBitmapImage(Bitmap bitmap)
{
    var stream = new MemoryStream();
    bitmap.Save(stream, ImageFormat.Png);
    var bitmapImage = new BitmapImage();
    bitmapImage.BeginInit();
    bitmapImage.StreamSource = stream;
    bitmapImage.EndInit();
    return bitmapImage;
}

public string GetFullPath(string path, bool isRelativePath)
{
    return isRelativePath ? FolderPaths.Application + @"\" + path : path;
}