章立民研究室

原發問問題：

章老師你好，想請問你有關於listview顯示大圖示的問題，我在imagelist放入我要顯示的圖片後，由於imagelist的大小設定，讓顯示的圖片並不會等比例縮小，我做成跟檔案總管一樣的縮圖功能，圖片能比例縮小，且顯示的品質也比較好，該如何下手，目前卡關中@@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 imageToLoad As String)
  If imageToLoad <> "" Then
    imageList1.Images.Add(Image.FromFile(imageToLoad))
    listBox1.BeginUpdate()
    listBox1.Items.Add(imageToLoad)
    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

章立民研究室 2007/03/05