Results 1 to 2 of 2

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

  1. #1

    Thread Starter
    Addicted Member
    Join Date
    Jan 2010
    Posts
    250

    Resolved [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

  2. #2

    Thread Starter
    Addicted Member
    Join Date
    Jan 2010
    Posts
    250

    Re: ListView with 2 Columns (1st Col Image,2nd String), Help

    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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width