使用PK从列表中获取图像，并在MVVM的ListBox中显示为另一个对象的一部分

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; }
}

然后，您可能需要创建一个具有BitmapImage属性而不是Id属性的CardViewModel，并且需要从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;
}