I have a problem with binding images to ListView in VB.net. I’m building an

Question

0

Asked: June 17, 20262026-06-17T16:16:19+00:00 2026-06-17T16:16:19+00:00

I have a problem with binding images to ListView in VB.net. I’m building an

0

I have a problem with binding images to ListView in VB.net. I’m building an app that will resize, convert and compress images, but I would like the selected images to be displayed in a ListView, alongside the image name.

This is the XAML code for the ListView:

<ListView x:Name="ListView" ItemsSource="{Binding Image}" HorizontalAlignment="Left" Height="481" Margin="10,275,0,0" VerticalAlignment="Top" Width="1069" BorderBrush="#FF003859" Foreground="White" Background="#42FFFFFF" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" BorderThickness="6,0,6,6" FontSize="16" SelectionMode="Multiple">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="vertical">
                        <Grid Height="160" Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Width="160" Height="160">
                                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding ImageID}" Stretch="Uniform" />
                            </Border>
                            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0">
                                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Here is the code for Image class:

Imports System.Collections.ObjectModel

Public Class Image</code>

    Private _Title As String
    Private _ImageID As BitmapImage

    Public ReadOnly Property Title() As String
        Get
            Return _Title
        End Get
    End Property
    Public ReadOnly Property Image() As BitmapImage
        Get
            Return _ImageID
        End Get
    End Property

    Public Sub New(ByVal Title As String, ByVal ImageID As BitmapImage)
        _Title = Title
        _ImageID = ImageID
    End Sub

End Class

And here is the code for the button that adds the images in the ListView:

Private Async Sub AddImage_Click(sender As Object, e As RoutedEventArgs) Handles AddImage.Click

        Dim picker As New FileOpenPicker()

        picker.SuggestedStartLocation = PickerLocationId.Desktop
        picker.ViewMode = PickerViewMode.Thumbnail
        picker.FileTypeFilter.Add(".jpg")
        picker.FileTypeFilter.Add(".jpeg")
        picker.FileTypeFilter.Add(".bmp")
        picker.FileTypeFilter.Add(".gif")
        picker.FileTypeFilter.Add(".png")
        picker.FileTypeFilter.Add(".tiff")
        picker.FileTypeFilter.Add(".tga")

        Dim files As IReadOnlyList(Of StorageFile) = Await picker.PickMultipleFilesAsync

        Dim imagearray(10000000) As BitmapImage
        Dim i = 0
        If files.Count > 0 Then
            For Each file In files
                imagearray(i) = New BitmapImage(New Uri(file.Path))
                i += 1
            Next
            Dim j = 0
            For Each file In files
                ListView.Items.Add(New Image(file.Name, imagearray(j)))
                j += 1
            Next
        End If

    End Sub

Please help me out with this.

Edit:

ListView XAML Code:

<ListView x:Name="ListView" HorizontalAlignment="Left" Height="481" Margin="10,275,0,0" VerticalAlignment="Top" Width="1069" BorderBrush="#FF003859" Foreground="White" Background="#42FFFFFF" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" BorderThickness="6,0,6,6" FontSize="16" SelectionMode="Multiple">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="vertical">
                        <Grid Height="160" Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Width="160" Height="160">
                                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding ImageID}" Stretch="Uniform" />
                            </Border>
                            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0">
                                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Image Class:

Imports System.Collections.ObjectModel

Public Class Image

    Private _Title As String
    Private _Image As BitmapImage

    Public ReadOnly Property Title() As String
        Get
            Return _Title
        End Get
    End Property
    Public ReadOnly Property ImageID() As BitmapImage
        Get
            Return _Image
        End Get
    End Property

    Public Sub New(ByVal Title As String, ByVal ImageID As BitmapImage)
        _Title = Title
        _Image = ImageID
    End Sub

End Class

The button:

Dim ImageCollection As New Collection(Of Image)

     Private Async Sub AddImage_Click(sender As Object, e As RoutedEventArgs) Handles AddImage.Click

            Dim picker As New FileOpenPicker()

            picker.SuggestedStartLocation = PickerLocationId.Desktop
            picker.ViewMode = PickerViewMode.Thumbnail
            picker.FileTypeFilter.Add(".jpg")
            picker.FileTypeFilter.Add(".jpeg")
            picker.FileTypeFilter.Add(".bmp")
            picker.FileTypeFilter.Add(".gif")
            picker.FileTypeFilter.Add(".png")
            picker.FileTypeFilter.Add(".tiff")
            picker.FileTypeFilter.Add(".tga")

            Dim files As IReadOnlyList(Of StorageFile) = Await picker.PickMultipleFilesAsync

            Dim imagearray(10000000) As BitmapImage
            Dim i = 0
            If files.Count > 0 Then
                For Each file In files
                    imagearray(i) = New BitmapImage(New Uri(file.Path))
                    i += 1
                Next
                Dim j = 0
                For Each file In files
                    ImageCollection.Add(New Image(file.Name, imagearray(j)))
                    j += 1
                Next
                For Each file In files
                    ListView.ItemsSource = ImageCollection
                Next

            End If

        End Sub

This is the code I have now, but the images are still not shown. What is wrong?

Here is the new edit:

ListView XAML Code:

<ListView x:Name="ListView" DataContext="{Binding Image}" HorizontalAlignment="Left" Height="481" Margin="10,275,0,0" VerticalAlignment="Top" Width="1069" BorderBrush="#FF003859" Foreground="White" Background="#42FFFFFF" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" BorderThickness="6,0,6,6" FontSize="16" SelectionMode="Multiple">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="vertical">
                        <Grid Height="160" Margin="6">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border Width="160" Height="160">
                                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding ImageProperty}" Stretch="Uniform" />
                            </Border>
                            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="10,0,0,0">
                                <TextBlock Text="{Binding TitleProperty}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                            </StackPanel>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Image Class:

Imports System.Collections.ObjectModel

Public Class Image

    Implements INotifyPropertyChanged

    Private ImageX As BitmapImage
    Private TitleX As String

    Public ReadOnly Property ImageProperty() As BitmapImage
        Get
            Return ImageX
        End Get
    End Property

    Public ReadOnly Property TitleProperty() As String
        Get
            Return TitleX
        End Get
    End Property

    Public Sub New(ByVal ImageTitle As String, ByVal ImageID As BitmapImage)
        TitleX = ImageTitle
        ImageX = ImageID
    End Sub

    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    Public Sub NotifyPropertyChanged(ByVal propertyName As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
    End Sub

End Class

And the Button with ImageCollection Class:

 Dim ImageCollection As New ImageCollectionClass

    Private Async Sub AddImage_Click(sender As Object, e As RoutedEventArgs) Handles AddImage.Click

        Dim picker As New FileOpenPicker()

        picker.SuggestedStartLocation = PickerLocationId.Desktop
        picker.ViewMode = PickerViewMode.Thumbnail
        picker.FileTypeFilter.Add(".jpg")
        picker.FileTypeFilter.Add(".jpeg")
        picker.FileTypeFilter.Add(".bmp")
        picker.FileTypeFilter.Add(".gif")
        picker.FileTypeFilter.Add(".png")
        picker.FileTypeFilter.Add(".tiff")
        picker.FileTypeFilter.Add(".tga")

        Dim files As IReadOnlyList(Of StorageFile) = Await picker.PickMultipleFilesAsync

        Dim imagearray(10000000) As BitmapImage
        Dim i = 0
        If files.Count > 0 Then
            For Each file In files
                imagearray(i) = New BitmapImage(New Uri(file.Path))
                i += 1
            Next
            Dim j = 0
            For Each file In files
                ImageCollection.AddImage(file.Name, imagearray(j))
                j += 1
            Next
            For Each file In files
                ListView.ItemsSource = ImageCollection
            Next

        End If

    End Sub

Public Class ImageCollectionClass

    Public ImageCollectionClass As New ObservableCollection(Of Image)

    Public Sub AddImage(ByVal ImageTitleInClass As String, ByVal ImageIDInClass As BitmapImage)
        ImageCollectionClass.Add(New Image(ImageTitleInClass, ImageIDInClass))
    End Sub

End Class

But it doesn’t work. Tell me please what’s wrong now!

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-17T16:16:21+00:00

Your original loop is rather convoluted (thought that’s not the immediate cause of the program). All of this code:

    Dim imagearray(10000000) As BitmapImage
    Dim i = 0
    If files.Count > 0 Then
        For Each file In files
            imagearray(i) = New BitmapImage(New Uri(file.Path))
            i += 1
        Next
        Dim j = 0
        For Each file In files
            ImageCollection.AddImage(file.Name, imagearray(j))
            j += 1
        Next
        For Each file In files
            ListView.ItemsSource = ImageCollection
        Next
    End If

could be collapsed to:

    For Each file In files
        ImageCollection.AddImage(file.Name, New BitmapImage(New Uri(file.Path)))
    Next
    ListView.ItemsSource = ImageCollection.ImageCollectionClass

Note you need ImageCollectionClass as your ItemsSource.

From there, you can incorporate code from Scenario 2 of the XAML Images Sample and modify to get the image via SetSourceAsync:

    Dim fileStream As IRandomAccessStream
    For Each file In files
        fileStream = Await file.OpenAsync(Windows.Storage.FileAccessMode.Read)

        Dim bitmapImage As New BitmapImage()
        Await bitmapImage.SetSourceAsync(fileStream)

        ImageCollection.AddImage(file.Name, bitmapImage)
    Next
    ListView.ItemsSource = ImageCollection.ImageCollectionClass

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have a problem with binding images to ListView in VB.net. I’m building an

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply