How to display images in listview?

Question

I am trying to get images from folder and store them into a class name 'Project'.

Then I want to display them in listview.

So I could show list of images in each project class with project name at above.

This is 'Project' class.

public class Project : INotifyPropertyChanged
    {

        private int id { get; set; }
        private string name { get; set; }


        private bool isChecked;



        public int ProjectId
        {
            get { return id; }
            set
            {
                id = value;
                NotifyPropertyChanged();
            }
        }

        public string ProjectName
        {
            get { return name; }
            set
            {
                name = value;
                NotifyPropertyChanged();
            }
        }

        public bool IsChecked
        {
            get { return isChecked; }
            set
            {
                isChecked = value;
                NotifyPropertyChanged();
            }
        }

        public List<string> projectImages { get; set; }


        public event PropertyChangedEventHandler PropertyChanged;

        private void NotifyPropertyChanged(string propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

    }

This is function which add images into list.

 private void menu_Open_Project(object sender, RoutedEventArgs e)
        {

            
            

            var imageList = GetImageFromDirectory.GetImageFiles(some directory path goes here);

            if (projects.Count > 0)
            {
                var lastIndexNumber = projects.Last().ProjectId + 1;

                projects.Add(new Project() { ProjectId = lastIndexNumber, ProjectName = "Project " + lastIndexNumber.ToString(), projectImages = imageList });
             }
          }

This is the xaml with list view

 <ListView Name="projectListView" Background="LightGray">

                    <ListView.View>
                        <GridView ColumnHeaderContainerStyle="{StaticResource HeaderStyle}">
                            
                            <GridViewColumn>
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical">

                                            <Border BorderBrush="Black" BorderThickness="2, 2, 2, 2">
                                                <Grid>
                                                    <TextBlock Text="{Binding ProjectName}" Background="Gray"/>
                                                </Grid>
                                            </Border>
                                            <Border BorderBrush="Black" BorderThickness="2, 0, 2, 2">
                                                <Grid>
                                                    <Image/>

                                                </Grid>
                                            </Border>
                                        </StackPanel>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            

                        </GridView>

                    </ListView.View>
                </ListView>

Which image file in the list of image file paths you want to shown in `Image`? — emoacht, Jul 25 '22 at 11:03
@emoacht, thnank your for the comment! The images in the 'List projectImage' in 'Project' class. Images' path will be retrieved and saved into that list when program starts. There are total 3 image address in that 'List projectImage'. — DagaPop, Jul 26 '22 at 00:13

score 0 · Accepted Answer · answered Jul 26 '22 at 08:04

You can use ItemsControl and its derived controls to show multiple images.

In addition, setting the path of image file directly to Image.Source is not ideal because it will lock that image file. Instead, it is recommendable to use a converter which converts file path to BitmapImage. We can use StringToImageConverter in Clemens's comment for this purpose.

So, assuming width of each Image is 100, such ItemsControl will be as follows;

<!-- Somewhere in xaml such as Window.Resources -->
<local:StringToImageConverter x:Key="StringToImageConverterKey"/>

<!-- Inside DataTemplate of GridViewColumn.CellTemplate -->
<ItemsControl ItemsSource="{Binding projectImages}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Width="100" Source="{Binding Mode=OneWay, Converter={StaticResource StringToImageConverterKey}}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

How to display images in listview?

1 Answers1