1

So I have binded a List to a ListView where the List has items of type Album, where it has lots of properties including .Cover, which I is an image on disk. Well since I don't know what type of image is needed and how they have to be loaded (I only know using Image types for Winforms), I don't know the type yet.

Can someone show or post me a quick sample where it shows this sort of items being shown as images of a certain fixed size using their .Cover property?

In essence this would show:

  1. What type .Cover should be
  2. How to open images from disk for WPF (assuming it's different than Winforms image loading)
  3. How to show them on a ListView as images of a certain fixed size, scaling the images if necessary
Joan Venge
  • 315,713
  • 212
  • 479
  • 689

2 Answers2

6
  1. ImageSource
  2. ImageSource myImageSource = new BitmapImage(new Uri(@"file://C:... something.jpg"));

  3. Specify a data template for the items in the ListView's ItemTemplate property:

    <Window.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Width="10" Height="10" Stretch="Fill" Source="{Binding Cover}"/>
        <Label Content="{Binding Title}" />
        </StackPanel>
    </DataTemplate>
</Window.Resources>

<Grid x:Name="grid">
    <ListView ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Albums}" />
</Grid>
Scott J
  • 1,331
  • 9
  • 11
  • 1
    Note that the image can also be sourced from a resource, it doesn't have to come directly from disk. (The resource can be part of the current executing assembly, or it can be in a separate referenced assembly). It can even be a URL to a web address. – slugster Apr 03 '10 at 08:19
  • Thanks slugster how do you do that? – Joan Venge Apr 03 '10 at 08:23
2

In xaml you'd define a DataTemplate in your Listview's ItemTemplate that uses an Image, binding it's Source property to a path on your file sysem.

In other words, Cover can be of type string, a file path. If you want to scale, a pretty simple way is a ViewBox, which scales all it contains. However, Image itself probably has options to do scaling.

flq
  • 22,247
  • 8
  • 55
  • 77