[RESOLVED] ListView with 2 Columns (1st Col Image,2nd String), Help

Dear Master/Experts.

Please help me, I am newbie to WPF, I am using VB.NET to create application to show pictures from folder chosen by user. on Form I put Button (press to choose folder), Image (to show image chosen from ListView), ListView (2 columns with 1st column image thumbnail and 2nd column the filename).
Please check my XAML code below :

Code:

---

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="MainWindow"
    Title="MainWindow" Height="448.545" Width="698.135">
    <Grid>
        <Image x:Name="ImgView" Margin="259,44,10,72"/>
        <Button Content="Pilih Folder" HorizontalAlignment="Left" Height="29" Margin="10,10,0,0" VerticalAlignment="Top" Width="92" Click="Button_Click"/>
        <ListView x:Name="ListView1" HorizontalAlignment="Left" Height="351" Margin="10,44,0,0" VerticalAlignment="Top" Width="244">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Gbr" DisplayMemberBinding="{Binding Gambar}"/>
                    <GridViewColumn Header="Nama File" DisplayMemberBinding="{Binding NamaFile}"/>
                </GridView>
            </ListView.View>
        </ListView>

    </Grid>
</Window>

---

And here is my code

Code:

---

Imports System.Windows.Forms
Imports System.Collections.ObjectModel

Class MainWindow

    Private _GbrCollection As New ObservableCollection(Of GambarCol)

    Public ReadOnly Property GbrCollection() As ObservableCollection(Of GambarCol)
        Get
            Return _GbrCollection
        End Get
    End Property

    Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        InitializeComponent()
    End Sub

    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
        Dim ImgList() As Image
        Dim Img88 As Image
        Dim fld As New FolderBrowserDialog
        Dim iCnt As Integer

        fld.RootFolder = Environment.SpecialFolder.Desktop
        'fldDialog.RootFolder = Environment.SpecialFolder.Desktop;
        fld.ShowDialog()
        'txtPath.Text = fld.SelectedPath

        'filesListBox.Items.Clear()

        Dim fileNames = My.Computer.FileSystem.GetFiles(fld.SelectedPath, FileIO.SearchOption.SearchTopLevelOnly, "*.jpg")
        'Debug.WriteLine(fileNames.Count)
        ReDim ImgList(fileNames.Count)
        lstbox.Items.Clear()

        For Each fileName As String In fileNames
            _GbrCollection.Add(New GambarCol(Img88, fileName))
        Next

        ListView1.ItemsSource = GbrCollection
    End Sub

    Private Sub ListView1_MouseDoubleClick(sender As Object, e As MouseButtonEventArgs) Handles ListView1.MouseDoubleClick
        Dim ImgShow As New Image
        'ImgShow.Source = New BitmapImage(New System.Uri(ListView1.Items))
    End Sub
    Private Sub ListView1_SelectionChanged(sender As Object, e As SelectionChangedEventArgs) Handles ListView1.SelectionChanged

    End Sub
End Class
Public Class GambarCol
    Private _Gambar As Image
    Private _NamaFile As String

    Public ReadOnly Property Gambar() As Image
        Get
            _Gambar = New Image
            _Gambar.Source = New BitmapImage(New System.Uri(NamaFile))
            _Gambar.Height = 60
            Return _Gambar
        End Get
    End Property

    Public ReadOnly Property NamaFile() As String
        Get
            Return _NamaFile
        End Get
    End Property

    Public Sub New(ByVal GbrImg As Image, ByVal NamaFileNF As String)
        _Gambar = GbrImg
        _NamaFile = NamaFileNF
    End Sub
End Class

---

Master, help me solve 3 problems :
1. Image can't be shown in column 1 in Listview
2. How to get value from column 2 when user double click the row
3. I know my code too complicated , can someone help me to make it simple

Really Really need help

Thank you very much

just found out the solution, after several references to other articles, this is how I did it. The XAML code built on StackPanel to hold Image for first col, and second col as usual

Code:

---

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="409.574" Width="580.224">

    <Grid>
        <ListView x:Name="ListView1"  VirtualizingStackPanel.IsVirtualizing="True"  ItemsSource="{Binding ListViewItemsCollections}" Margin="0,56,0,10" HorizontalAlignment="Left" Width="228">
            <ListView.View>
                <GridView AllowsColumnReorder="False">
                    <GridViewColumn x:Name="GridViewColumnName" Header="Picture"  Width="90">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image x:Name="Image_GridViewColumnName" Width="90" Height="50" Source="{Binding GridViewColumnNameImageSource}" />
                                    <Label Content="{Binding GridViewColumnNameLabelContent}" Width="50" Height="50"  />
                                </StackPanel>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn x:Name="GridViewColumnLocation" Header="Location" Width="150" DisplayMemberBinding="{Binding GridViewColumnLocation}" />
                </GridView>
            </ListView.View>
        </ListView>
        <Button x:Name="btnFolder" Content="Pilih Folder" Margin="10,10,0,0" Height="41" VerticalAlignment="Top" HorizontalAlignment="Left" Width="77"/>
        <TextBox x:Name="txtPath" Height="23" Margin="112,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Left" Width="116"/>
        <Image x:Name="ImgView" Margin="247,56,10,113"/>
    </Grid>
</Window>

---

And for the code, just use Add method with NEW key, frankly I still don't understand the concept behind New, since WPF real new to me, VB.NET still not all 100% I can code. For code-behind as follow

Code:

---

Imports System.Windows.Forms.ListViewItem.ListViewSubItemCollection
Imports System.IO
Imports System.Windows.Window
Imports System.Windows.Forms
Imports System.Windows.Forms.FolderBrowserDialog

Class MainWindow
    Dim IsiFile() As String

    Private Sub btnFolder_Click(sender As Object, e As RoutedEventArgs) Handles btnFolder.Click
        Dim fld As New FolderBrowserDialog
        Dim iCnt As Integer = 0

        fld.RootFolder = Environment.SpecialFolder.Desktop
        fld.ShowDialog()
        txtPath.Text = fld.SelectedPath

        Dim fileNames = My.Computer.FileSystem.GetFiles(fld.SelectedPath, FileIO.SearchOption.SearchTopLevelOnly, "*.jpg")
        ReDim IsiFile(fileNames.Count)

        For Each fileName As String In fileNames
            ListView1.Items.Add(New With { _
    Key .GridViewColumnLocation = fileName, _
    Key .GridViewColumnNameImageSource = fileName _
    })
            IsiFile(iCnt) = fileName
            iCnt += 1
        Next
    End Sub

    Private Sub ListView1_MouseDoubleClick(sender As Object, e As MouseButtonEventArgs) Handles ListView1.MouseDoubleClick
        Dim Gambar As New BitmapImage
        Gambar.BeginInit()
        Gambar.UriSource = New Uri(IsiFile(ListView1.SelectedIndex))
        Gambar.EndInit()
        ImgView.Source = Gambar
    End Sub
End Class

---

I hope this helps , thank you