答讀者問

原發問問題：

 

章老師你好，想請問你有關於listview顯示大圖標的問題，我在p_w_picpathlist放入我要顯示的圖片後，因爲p_w_picpathlist的大小設定，讓顯示的圖片並不會等比例縮小，我作成跟文件總管同樣的縮圖功能，圖片能比例縮小，且顯示的質量也比較好，該如何下手，目前卡關中@@thanks

 

解答：

 

親愛的讀者您好，很感謝您對於章立民研究室的支持，有關於您提到的問題，回覆以下。

                         圖表1

                               圖表2

                                    圖表3

圖表 1 到 3 所示者是程序範例的執行畫面，它示範如何使用 ImageList 對象來管理加載的 Image 對象，由 ListBox 控件來決定顯示的圖片縮圖內容，相關程序設計技巧說明以下：

 

首先，於窗體的 Load 事件處理程序中撰寫下列程序代碼，以便創建 ImageList 類別實體對象，並設定相關屬性，讓縮圖以 200*200 的影像高度與寬度大小、 16Bit 的顏色深度顯示：

Protected myGraphics As Graphics
Private currentImage As Integer = 0

Private Sub Form012_Load( _
  ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  ImageList1 = New ImageList()
 
  ' 定義列表中的影像高度和寬度。
  ImageList1.ImageSize = New Size(200, 200)
  ImageList1.ColorDepth = ColorDepth.Depth16Bit
End Sub

 

當您按下「加入圖像文件案」按鈕，便會顯示「開啓文件」對話框，並呼叫用戶自定義程序 addImage() ，以便將用戶所選取的文件加入 ImageList 對象，同時更新 ListBox 控件顯示的項目列表，程序代碼以下所示：

 

' 加入圖像文件案按鈕 Click 事件處理程序。
Private Sub Button4_Click( _
  ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
  OpenFileDialog1.Multiselect = True
 
  If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
    If OpenFileDialog1.FileNames IsNot Nothing Then
      Dim i As Integer
      For i = 0 To OpenFileDialog1.FileNames.Length – 1
        addImage(OpenFileDialog1.FileNames(i))
      Next i
    Else
      addImage(OpenFileDialog1.FileName)
    End If
    
    ListBox1.SelectedIndex = 0
  End If
End Sub

剛剛咱們提到，用戶自定義程序 addImage() 是用來將用戶選取的影像加入 ImageList 對象，並將文件名新增至 ListBox 控件，如下是程序代碼內容：

Private Sub addImage(ByVal p_w_picpathToLoad As String)
  If p_w_picpathToLoad <> "" Then
    p_w_picpathList1.Images.Add(Image.FromFile(p_w_picpathToLoad))
    listBox1.BeginUpdate()
    listBox1.Items.Add(p_w_picpathToLoad)
    listBox1.EndUpdate()
  End If
End Sub

 

當您按下「顯示下一張圖片」按鈕，便會取得 ListBox 控件列表中目前所選取項目的索引，藉以計算出下一個項目的索引值，以便將索引值傳遞給 ImageList 對象，讓 PictureBox 控件顯示正確的圖片：

 

' 顯示下一張圖片按鈕 Click 事件處理程序。
Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
  Handles Button1.Click
  If ImageList1.Images.Empty <> True Then
    If ImageList1.Images.Count - 1 > currentImage Then
      currentImage += 1
    Else
      currentImage = 0
    End If
    
    ' 於 PictureBox 控件中顯示圖片。
    PictureBox1.Image = ImageList1.Images(currentImage)
    
    Label3.Text = " 目前顯示的圖片是： " + currentImage.ToString
    ListBox1.SelectedIndex = currentImage
    Label5.Text = " 圖片索引： " + ListBox1.Text
  End If
End Sub

 

替 ListBox 控件的 SelectedIndexChanged 事件處理程序撰寫下列程序代碼，當用戶選取不一樣的列表項目時，讓 PictureBox 控件顯示 ImageList 對象對應的圖片：

Private Sub ListBox1_SelectedIndexChanged( _
  ByVal sender As System.Object, ByVal e As System.EventArgs) _
  Handles ListBox1.SelectedIndexChanged
  If ListBox1.SelectedIndex <> -1 Then
    currentImage = ListBox1.SelectedIndex
   
    ' 於 PictureBox 控件中顯示圖片。
    PictureBox1.Image = ImageList1.Images(ListBox1.SelectedIndex)
   
    Label3.Text = " 目前顯示的圖片是： " + currentImage.ToString
    Label5.Text = " 圖片索引： " + ListBox1.Text
  End If
End Sub

當您按下「移除圖片」按鈕，便會取得 ListBox 控件列表中目前所選取索引，根據索引與對應索引的項目來刪除 ImageList 對象以及 ListBox 控件對應的列表項目，並改變 Label 控件顯示的消息正文，程序代碼以下所示：

 

' 移除圖片按鈕 Click 事件處理程序。
Private Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
  Handles Button2.Click
  If ListBox1.SelectedIndex <> -1 Then
    ImageList1.Images.RemoveAt(ListBox1.SelectedIndex)
    ListBox1.Items.Remove(ListBox1.SelectedItem)
    PictureBox1.Image = Nothing
    Label3.Text = Nothing
    Label5.Text = Nothing
  End If
End Sub

當您按下「清除列表」按鈕，便會清除 ListBox 控件全部的列表項目，並改變 Label 控件顯示的消息正文：

 

' 清除列表按鈕 Click 事件處理程序。
Private Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) _
  Handles Button3.Click
  ImageList1.Images.Clear()
  ListBox1.Items.Clear()
  PictureBox1.Image = Nothing
  Label3.Text = Nothing
  Label5.Text = Nothing
End Sub