在WPF MVVM中使用数据绑定在ListView(或更好的东西!)中显示图像
本文关键字：显示 图像 显示图 MVVM WPF 数据绑定 ListView 更好 | 更新日期: 2023-09-27 18:05:25
我试图在ListView中显示一些图像，但没有成功。我正在使用WPF MVVM, ListView是简单显示套装和排名数据的保留。(参见我之前的文章:MVVM在WPF -如何提醒ViewModel的变化在模型…还是我应该?如果你感兴趣的话!)也就是说，我可以使用其他的东西而不是ListView(如果这是建议)，但我仍然想知道如何用ListView做到这一点，假设它是可行的。我在ViewModel中绑定的属性是:
public ObservableCollection<Image> PlayerCardImages{
get{
ObservableCollection<Image> results = new ObservableCollection<Image>();
foreach (CardModel card in PlayerCards)
{
Image img = new Image();
BitmapImage bi3 = new BitmapImage();
bi3.BeginInit();
// TODO: Pick card based on suit/rank. Just get 1 image working now
bi3.UriSource = new Uri("diamond-1.png", UriKind.Relative);
bi3.EndInit();
img.Stretch = Stretch.Fill;
img.Source = bi3;
results.Add(img);
}
return results;
}
}
在我的XAML代码我使用:
<Window.Resources>
<DataTemplate x:Key="ImageCell">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding PlayerCardImages}" Width="200" Height="200" Stretch="Fill" ToolTip="Add tooltip"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
<StackPanel Orientation="Vertical">
<Label Content="Player Cards"/>
<ListView Name="lvwTitles" ItemsSource="{Binding}"
IsSynchronizedWithCurrentItem="True"
SelectionMode="Single" ItemTemplate="{StaticResource ImageCell}" Height="59">
</ListView>
</StackPanel>
这个想法是无耻地偷来的:WPF -绑定图像水平到ListView然而，它甚至没有出现数据绑定，因为我在PlayerCardImages中的断点没有被击中。
我还尝试了下面的XAML，运气比较好:
<StackPanel Orientation="Vertical">
<Label Content="Player Cards"/>
<ListView
AlternationCount="2"
DataContext="{StaticResource PlayerCardsGroups }"
ItemsSource="{Binding}"
>
<ListView.GroupStyle>
<StaticResourceExtension
ResourceKey="CardGroupStyle"
/>
</ListView.GroupStyle>
<ListView.View>
<GridView>
<GridViewColumn>
<Image Height="50" Width="40"></Image>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</StackPanel>
<Window.Resources>
<CollectionViewSource x:Key="PlayerCardsGroups"
Source="{Binding Path=PlayerCardImages}">
</CollectionViewSource>
<GroupStyle x:Key="CardGroupStyle">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
x:Name="txt"
Background="{StaticResource Brush_HeaderBackground}"
FontWeight="Bold"
Foreground="White"
Margin="1"
Padding="4,2,0,2"
Text="Cards"
/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
<Style x:Key="CardItemStyle" TargetType="{x:Type ListViewItem}">
<!--
Stretch the content of each cell so that we can
right-align text in the Total Sales column.
-->
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<!--
Bind the IsSelected property of a ListViewItem to the
IsSelected property of a CustomerViewModel object.
-->
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ItemsControl.AlternationIndex" Value="1" />
<Condition Property="IsSelected" Value="False" />
<Condition Property="IsMouseOver" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#EEEEEEEE" />
</MultiTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
这段代码肯定经历了数据绑定—在程序开始时以及每当向集合添加项时，都会碰到断点。但是没有显示任何图像。与其用更多不起作用的XAML来折磨你，也许我可以让别人给我指出一些代码/示例/文档，展示如何将图像列表绑定到ListView(或者其他控件，如果你真的觉得ListView不合适的话)。注意，我的集合就是我要绑定的对象。我注意到，在许多例子中，它们都绑定到子属性。也就是说，他们可能有一个相册的集合，对于每个相册，他们绑定到它的属性图像(参见:在WPF ListView中显示图像项)。
如有任何建议或帮助，我将不胜感激。戴夫
附加信息。
根据Clemens的建议，我现在有了PlayerCardImages的代码:
public ObservableCollection<ImageSource> PlayerCardImages
{
get
{
var results = new ObservableCollection<ImageSource>();
//if (PlayerCards.Count == 0)
// return results;
//else
//{
// results.Add(new BitmapImage(new Uri(@"Images''" + "diamond-1.png", UriKind.Relative)));
//}
foreach (var card in PlayerCards)
{
results.Add(new BitmapImage(new Uri(@"Images''" + GetCardFileName(card), UriKind.Relative)));
}
return results;
}
我使用的正是他建议的XAML。这几乎行得通。我之所以说"几乎"是因为我注意到一些奇怪的行为，即有时1张牌会出现，有时却不会出现(我从未得到过2张牌)。所有从文件中获取卡片和绑定似乎都在工作，我追踪了我认为是最后一个遗留bug的关键(这很奇怪)。如果在调试器中检查结果，并在调试器中进一步打开results[0]，就会显示出那张卡片!我实际上必须打开[0](你看到的信息关于高度，宽度等)，这工作。此外，如果我打开[1]，就会显示出那张牌。为什么打开调试器信息有任何影响?对于那些可能会问的人，如果你在调试器中打开两个卡会发生什么…这行不通。我得到一个操作超时异常。也许我的图像文件太大了。10Kbytes到30kbytes。这是问题所在吗?我猜不是，这是一个微妙的问题，在读取图像或装订。发生了什么事?谢谢你,戴夫
首先，你不应该在ViewModel中使用Image控件。在视图的DateTemplate中已经有了一个Image控件。您想要绑定这个Image控件的Source属性，并且这个绑定的源属性不能是另一个Image。
相反，您的ViewModel将使用ImageSource(或派生类如BitmapImage)作为图像类型，如下所示:
public ObservableCollection<ImageSource> PlayerCardImages
{
get
{
var results = new ObservableCollection<ImageSource>();
foreach (var card in PlayerCards)
{
results.Add(new BitmapImage(new Uri(card.ImageUrl)));
}
return results;
}
}
或者仅仅是图像uri或路径，因为WPF中内置了从string到ImageSource的自动转换:
public ObservableCollection<string> PlayerCardImages
{
get
{
var results = new ObservableCollection<string>();
foreach (var card in PlayerCards)
{
results.Add(card.ImageUrl);
}
return results;
}
}
现在您将绑定Listbox的ItemsSource属性到PlayerCardGames集合，并且在DataTemplate中您直接绑定到集合项。ListView的DataContext必须被设置为定义PlayerCardGames属性的对象的实例。
<ListView ItemsSource="{Binding PlayerCardGames}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
更新:由于加载图像文件似乎有问题，您可以尝试以下方法。它同步加载图像，您可以使用调试器逐步完成。
public static ImageSource LoadImage(string fileName)
{
var image = new BitmapImage();
using (var stream = new FileStream(fileName, FileMode.Open))
{
image.BeginInit();
image.CacheOption = BitmapCacheOption.OnLoad;
image.StreamSource = stream;
image.EndInit();
}
return image;
}
你可以在你的PlayerCardGames属性getter中这样使用这个方法:
foreach (var card in PlayerCards)
{
results.Add(LoadImage(@"Images''" + GetCardFileName(card)));
}
我并没有真正尝试重现您的问题，但如果这不能解决它，我会:
在你的第一个xaml块中，我认为你混淆了绑定。这将是我所期望的，ItemsSource到ObservableCollection of Images, Image source到Image.
<Image Source="{Binding}" ... />
<ListView Name="lvwTitles" ItemsSource="{Binding PlayerCardImages}" ... />
在第二个代码块中，您完全省略了Source绑定:
<Image Source="{Binding}" Height="50" Width="40" />