-
Oct 27th, 2014, 11:12 AM
#1
Thread Starter
Addicted Member
[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
-
Nov 2nd, 2014, 04:56 AM
#2
Thread Starter
Addicted Member
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|