ListViewアイテムへの画像の割り当てチュートリアル-03

ImageListActiveXコントロール。

ListViewコントロールに画像を割り当てるには、別のActiveXコントロールである ImageListの助けが必要です。コントロール。 Windowsエクスプローラービューのアイコン、フォルダーが閉じた状態のフォルダーのような画像を見てきました。フォルダーをクリックすると、開いているフォルダーの画像と、ファイルの種類に基づいたさまざまな種類の画像が表示されます。ここではそれほど柔軟性はありませんが、ListViewコントロールの ColumnHeadersにアイコン画像を表示できます。、 ListItems 、および ListSubItems コンテンツを入力している間のオブジェクトメンバー。

サンプルデモ画像。

ListViewコントロールに写真（小さな画像）とともにリストされているNorthWind Trading Employeesのサンプル画像：

画像サイズを大きくすると、レコードの行の高さが高くなりますが、写真はこれより大きくなる可能性があります。

以下に、TreeViewコントロールと一緒に使用したListViewコントロールのサンプル画像（右側のパネル）を示します。 TreeView ActiveXコントロールは、TreeViewコントロールに関する以前の一連のチュートリアルで紹介されました。このページの下部に、TreeViewコントロールチュートリアルシリーズのリンクのリストがあります。

上の図では、すべてのデータ列と列ヘッダーラベルでアイコン画像を使用して、ListViewControlでの画像表示の可能性を示しています。

フォルダーの閉じた状態と開いた状態は、TreeViewコントロールノードの左側のパネルに表示され、ListViewアイテムとは動作が異なります。 フォルダを開く TreeViewノードがクリックを受信すると画像が表示されます。同じノードを2回クリックすると、folder-closedが表示されます。画像。

ListViewコントロールプログラミングチュートリアルシリーズ。

ListView Controlの以前のチュートリアルセッション-1および2を完了し、 ImageListの使用法に関するこの新しいエピソードを取り上げる準備ができていることを願っています。 ListViewと一緒に制御するコントロール。以前のチュートリアルリンクは、レビューとこのセッションを続行する準備のために以下に示されています。 ListView Controlの基本のいくつかは、VBAコードですでに提示および説明されており、ここで続行して、ここで何が起こっているのかを理解するためのより良い立場になります。

ListViewコントロールチュートリアル-01。
ListViewコントロールチュートリアル-02。

ソースデータとデモフォーム。

新しいListViewコントロールデモプロジェクトの新しいフォームと従業員テーブルから始めましょう。 NorthWind.accdbサンプルデータベースからEmployeesテーブルをインポートします。

以下に示すSQLを使用して新しいSELECTクエリを作成し、 EmployeesQという名前で保存します。

SELECT [TitleOfCourtesy] & " " & [FirstName] & " " & [LastName] AS [Employee Name], 
Employees.EmployeeID, 
Employees.Title, 
Employees.HireDate, 
Employees.Address, 
Employees.City, 
Employees.Region, 
Employees.PostalCode, 
Employees.Country, 
Employees.HomePhone, 
Employees.Extension, 
Employees.Notes
FROM Employees;

従業員テーブルの構造が異なっていても問題ありません。最初の列の値についてのみ、3つの列の値を組み合わせて[従業員名]を作成しました。最初の列として。他の列名の値は、そのまま、任意の順序で、すべてまたはそれ以下にすることができます。
新しいフォームを作成し、デザインビューで開きます。
MicrosoftのListViewコントロールを挿入します ActiveXコントロールリストから。
MicrosoftのImageListコントロールを挿入します ActiveXコントロールリストからも。
以下に示すフォームのサンプル画像のように、ListViewコントロールのサイズを変更します。 ImageListコントロールを移動し、画像に示すようにListViewコントロールの右上隅に配置します。フォームの便利な場所のどこにでも配置できます。フォームが通常表示の場合、フォームには表示されません。
- ListViewコントロールを選択しますプロパティシートを表示します。
- 名前を変更する ListView1へのプロパティ値。
- ImageListコントロールを選択します、プロパティシートを表示し、名前を変更します ImageList0へのプロパティ値。
- 注：上記の両方のコントロールには、専用のプロパティシートがあります。それらのプロパティ名と値は、アクセスプロパティシートにも表示される場合があります。アクセスプロパティシートに変更を加えると、ListViewおよびImageListコントロールですべてが更新されない場合があります。コントロール自体のプロパティシートに変更を加える必要があります。
  
  ListViewコントロールプロパティシート。
ListViewコントロールを右クリックし、ListViewCtrlオブジェクトを強調表示します。オプション表示されたリストで、[プロパティ]を選択します。一般 ListViewコントロールプロパティシートのタブは、以下の画像のようになります。
[一般]タブでプロパティ値を変更します上の画像に示されているように。

まず、ListViewコントロールに従業員のデータをロードします。

フォームモジュールのVBAコード

次のVBAコードをコピーしてフォームのクラスモジュールに貼り付けます。

Option Compare Database
Option Explicit

Dim lvwList As MSComctlLib.ListView
Dim lvwItem As MSComctlLib.ListItem
Dim ObjImgList As MSComctlLib.ImageList
Dim db As DAO.Database
Dim rst As DAO.Recordset


Private Sub cmdClose_Click()
   DoCmd.Close acForm, Me.Name
End Sub

Private Sub Form_Load()
 Call LoadListView("EmployeesQ")
End Sub

Private Sub LoadListView(ByVal tblName As String)
    Dim strFldName As String
    Dim intCounter As Integer
    Dim j As Integer
    Dim strLabel As String

'Assign ListView Control on Form to lvwList Object
Set lvwList = Me.ListView1.Object
'Set ObjImgList = Me.ImageList0.Object
    
'Assign Form Header labels Caption Text
 strLabel = UCase(tblName) & " " & "IN LISTVIEW CONTROL - TUTORIAL-03"
 Me.Label8.caption = strLabel
 Me.Label9.caption = strLabel
 
 With lvwList
    '.Icons = ObjImgList
    '.SmallIcons = ObjImgList
    '.ColumnHeaderIcons = ObjImgList
    .Font = "Verdana"
    .Font.Size = 10
    .Font.Bold = True
 End With
 
 Set db = CurrentDb
 Set rst = db.OpenRecordset(tblName, dbOpenSnapshot)
 
 'Create Column Headers for ListView
 With lvwList
    .ColumnHeaders.Clear 'initialize header area
    For j = 0 To rst.Fields.Count - 1
        strFldName = rst.Fields(j).Name
   'Syntax:
   '.ColumnHeaders.Add Index, Key, Text, Width, Alignment, Icon
        .ColumnHeaders.Add , , strFldName, iif(j=0,3200,2000)
    Next
 End With
 
 'Initialize ListView Control
  While lvwList.ListItems.Count > 0
        lvwList.ListItems.Remove (1)
  Wend

 With lvwList
 Do While Not rst.EOF And Not rst.BOF

   'Syntax  .ListItems.Add(Index, Key, Text, Icon, SmallIcon)
        Set lvwItem = .ListItems.Add(, , CStr(Nz(rst.Fields(0).Value, "")))
        
   'Add next columns of data as sub-items of ListItem
        With lvwItem
   'Syntax     .Add Index,Key,Text,Report Icon,TooltipText
         For j = 1 To rst.Fields.Count - 1
            .ListSubItems.Add , , CStr(Nz(rst.Fields(j).Value, ""))
         Next

       End With
       rst.MoveNext
Loop
rst.Close
    'reset lvwItem object
    Set lvwItem = Nothing
End With

Set rst = Nothing
Set db = Nothing
End Sub

注： ImageListコントロールの赤色のVBA行は、当面の間実行からコメントアウトされており、まもなく有効になります。

frmEmployees。という名前でフォームを保存します
通常のビューでフォームを開きます。

従業員 Qクエリレコードのリストは次の画像のようになります：

VBAコードのレビュー

ImageList Controlの宣言、初期化に関する数行、およびFont-Name、Font-Size、Font-の数行を除いて、以前のListView ControlTutorial-01および02セッションで上記のVBAコードをすでに実行しました。スタイル設定。ここで以前のVBAコードに加えたもう1つの変更は、 LoadListView（）です。プログラムでは、パラメータとしてテーブル/クエリ名が必要です。アクションクエリ、アクセステーブル、およびリンクされたテーブル名を除くすべてのクエリタイプが有効です。テーブルまたはクエリの名前は、プログラムが Form_Load（）から呼び出されたときに渡されます。イベント手順。

すべてのテーブル/クエリフィールド名は、ColumnHeaderラベルテキストとして使用されます（3番目のパラメーター） ColumnHeaders.Add（） 方法。最初のパラメータインデックス 2番目のパラメータキー値は使用されません。インデックスシーケンス番号は、システムによって自動的に挿入されます。

4番目のパラメータは列幅です値はピクセル単位で、最初の列幅の値は3200ピクセルで、他のすべての列には2000ピクセルを任意に割り当てています。最初の列には従業員名が表示されますが、正しく表示するには幅を広げる必要があります。

配置およびアイコン ここでは使用していない列ヘッダーのパラメーター値。デフォルトでは、左側の配置が想定されています。利用可能な配置オプションを以下に示します。

0-lvwColumnLeft
1-lvwColumnRight
2-lvwColumnCenter

上記のオプションは、列ヘッダーで確認できます。 ListViewコントロールプロパティシートのタブ。上記のオプションを表示するには：

列の挿入をクリックしますボタンをクリックし、下のテキストボックスに一時的な列名を入力します。
配置をクリックします上記のオプションをプロパティして表示します。
列の削除をクリックします一時列名を削除するボタン。
注： VBAコードを介してフィールド名を読み込むのではなく、列ヘッダーラベルを手動で追加する場合は、ここに1つずつ入力できます。データを表示すると、列ヘッダーラベルとして表示されます。

アイコンのサンプルビューヘッダー列名の左側の画像は、このページの上部にある2番目のデモ画像の右側のパネルに表示されます。

EmployeesQの最初の列（従業員名）は ListItems.Textと見なされますその追加で方法。この方法でも、インデックスを省略しています。およびキーパラメータ値。インデックス番号は、システムによってシリアル番号として自動的に追加されます。

2番目のフィールド以降、すべての列の値は ListSubItems.Add（）を介してロードされます。 ListViewコントロールのメソッド。

注：すべての値がListItems.Textに追加されますおよびListSubItems.Text ソーステーブル/クエリの元のデータ型に関係なく、テキストデータ型としてのみパラメータ。コードでは、フィールド値のいずれかに Null が含まれている場合に備えて、フィールド値の検証チェックを実行しています。値を入力し、 CStr（）を使用してテキスト値に変換します組み込み関数。

ImageListコントロール。

ImageList メインプログラムでコメントアウトしたコントロール初期化ステートメントは、以下のコードセグメントに赤色で表示されます。画像をImageListコントロールにアップロードする準備ができたら、説明して有効にします。

'Assign ListView Control on Form to lvwList Object
Set lvwList = Me.ListView1.Object
'Set ObjImgList = Me.ImageList0.Object
    
'Assign Form Header labels Caption Text
 strLabel = UCase(tblName) & " " & "IN LISTVIEW CONTROL - TUTORIAL-03"
 Me.Label8.caption = strLabel
 Me.Label9.caption = strLabel
 
 With lvwList
    '.Icons = ObjImgList
    '.SmallIcons = ObjImgList
    '.ColumnHeaderIcons = ObjImgList
    .Font = "Verdana"
    .Font.Size = 10
    .Font.Bold = True
 End With

上記の赤い色の最初のステートメントは、 ObjImgListを初期化します。 ImageListコントロールを備えたオブジェクトImageList0 フォーム上のfrmEmployees 。コードに変更を加える前に、いくつかの画像をImageListコントロールにアップロードするためのオプションを確認しましょう。

画像のアップロードについて。

次のステップは、いくつかのサンプル画像をImageListコントロールにアップロードすることです。これは、2つの方法のいずれかで実行できます。

この手順を実行する前に、少なくとも2つの小さな画像（ .jpg、jpeg、.bmp、.png などの一般的な画像タイプのいずれか）を作成または取得してください。など）、できれば .bmp タイプ。一般のImageListコントロールで使用可能な画像サイズオプションプロパティシートのタブは16x 16 、 32 x 32 、 48 x 48 ピクセル、またはカスタム サイズ。

ImageListコントロールを右クリックし、オプション ImageListCtrl Objectを強調表示します。 [プロパティ]を選択します。アップロードする画像を選択する前に、一般で上記の画像サイズのいずれかを選択してくださいタブ。

大きな画像があり、元の画像サイズを保持したい場合は、カスタムを選択しますオプション。
他のオプションのいずれかを選択すると、画像が選択したサイズに縮小されます。画質が低下する場合があります。非常に大きな画像を使用すると、表示時にListViewコントロールでより多くのスペースを占める可能性があります。
アイコンタイプの画像を使用するのがより理想的です。
大きい画像、小さい画像、非常に小さい画像を使用し、さまざまなオプションを使用して、ニーズに合った正しい画像/オプションの選択を体験してください。

画像をImageListControlにアップロードするには、次の2つの方法のいずれかを使用できます。

1。 VBAプロシージャを使用してディスクからイメージをアップロードします。

サンプルのVBAプロシージャは、TreeViewControlチュートリアルから抜粋した以下のコードセグメントのようになります。

  
  Set objImgList = Me.ImageList0.Object
  objImgList.ListImages.Clear
  
strFolder = "D:\Access\TreeView\"
With objImgList
    With .ListImages
         .Add Index:=1, Key:="FolderClose", Picture:=LoadPicture(strFolder & "folderclose2.bmp")
         .Add Index:=2, Key:="FolderOpen", Picture:=LoadPicture(strFolder & "folderopen2.bmp")
         .Add Index:=3, Key:="ArrowHead", Picture:=LoadPicture(strFolder & "arrowhead.bmp")
    End With
End With

With tvw 'TreeView Control
    .ImageList = objImgList 'assign imagelist Object to TreeView Imagelist Property
End With

最初のステートメントは、 objImgListを初期化します ImageList0のオブジェクトフォームの管理。

次のステートメントは、ディスクからのアップロードの準備として、イメージリストコントロール内の既存のイメージ（存在する場合）がクリアされていることを確認します。このアプローチが毎回機能するためには、イメージが常にディスク上で利用可能である必要があります。

objImgList.ListImages.Add（） 指定されたパラメータを使用してディスクから画像をアップロードするためにメソッドが呼び出されます。 Add（）でパラメータ名を使用する場合メソッドパラメータ値は、 Index：=1のように任意の順序で指定できます。行の最後またはKey：="FolderClose"で指定できます最初のアイテムとしてなど。パラメータ名がない場合、Add（）メソッドのパラメータの順序は次のようになります。

         .Add 1, "FolderClose", LoadPicture(strFolder & "folderclose2.bmp")

listViewに画像を表示するには制御には、画像インデックス番号 1を使用できます。またはキー値"FolderClose" アイコンとしてのテキストまたはSmallIcon ListItems.Add（）のパラメータ値メソッド。

以前、TreeViewコントロールチュートリアルで上記の方法を使用しました。そのページにアクセスして、デモデータベースをダウンロードできます。

このメソッドは、画像をメモリ内のImageListオブジェクトインスタンスにロードし、フォーム上の物理オブジェクトは変更されません。ディスク上のソースイメージは、 frmEmployeesが常に利用可能である必要があります開いています。

2。ディスクから手動で画像をアップロードします。

これは1回限りの演習で、ディスク上の画像を見つけてImageListコントロールにアップロードします。

主な利点は、画像がImageListコントロールにアップロードされると、そのまま維持されることです。複数のプロジェクトに同じ画像が必要な場合は、画像を含むImageListコントロールを他のプロジェクトにコピーして貼り付けることができます。ディスクからイメージを再度ロードする必要はありません。画像付きのImgeListコントロールは友達と共有することもできます。

それでは、画像を手動でアップロードするためのより良い方法を見てみましょう。 2つの.bmpを作成します 50 x 50ピクセルの解像度の画像（ image1.bmp 、 image2.bmp ）、フォルダに準備しておいてください。たとえば、 D：\ Access \ 参考までに。

frmEmployeesを開きますデザインビューで。
ImageListコントロールを右クリックし、ImageListCtrlオブジェクトを強調表示します。オプションを選択し、プロパティを選択します。
一般についてタブでカスタムを選択します元の解像度で画像をアップロードするオプション。

一般 ImageListコントロールのタブビュー。

画像タブImageListコントロールの表示

注： ListViewコントロールでアップロードされた画像を試した後、他のオプション48 x 48、32 x 32、16 x 16を試したい場合は、最初にアップロードされたすべての画像を削除してから、一般<に移動する必要があります。 / b> タブで、必要なオプションを選択してから、画像を再度アップロードします。選択した画像は、選択した画像サイズに縮小されます。

[サンプル画像]タブでわかるように、[画像の挿入]を選択して2つの画像をアップロードしましたコマンドボタンとディスクからの画像の選択。

最初の画像は選択された状態で、わずかに浮き上がった位置にあります。インデックスコントロールには値1が表示され、キーテキストボックスにはテキスト Firstが表示されます。。インデックス値は自動的に表示されますが、キー値（画像を簡単に記憶してデータに関連付けることができる意味のある値）は手動で入力できます。

アイコンでは、インデックス番号またはキーテキスト値のいずれかを使用できます。およびSmallIcon ListItems.Add（）のパラメータメソッド。

インデックス番号シーケンスを使用する場合でも、画像のアップロードシーケンスは、ListViewコントロールにアップロードする予定のデータと同期する必要があります。たとえば、従業員の名前は正しい順序で写真と一致する必要があります。

従業員の場合のより良い方法は、彼らの名をキーテキストとして使用することができ、レコードに非常に簡単に関連付けることができます。一般化された画像は、この種の関係チェックと一致する必要はありませんが、キー名は、 folder_closed のように、画像が何をするかを示すのに役立ちます。またはfolder_opened 。

画像をクリックしますタブ。

画像の挿入をクリックします D：\ Access \ Image1.bmpを見つけます画像を選択して、開くをクリックします画像をImageListコントロールにアップロードするためのボタン。

キーにテキスト値を入力しますテキストボックス（キー値は一意である必要があります）。

2番目の画像に対して手順5と6を繰り返し、キー値を入力します。

サンプル画像を含むImageListコントロールの準備が整い、ListViewコントロールに表示する準備が整いました。

ImageListオブジェクトのListViewオブジェクトプロパティへの割り当て。

ListViewコントロールで画像参照を使用するには、次のListViewオブジェクトプロパティをImageListオブジェクトに割り当てる必要があります。

ListView。ColumnHeaderIcons

ListView。アイコン

ListView。SmallIcons

次のステップは、ImageListオブジェクトを割り当てることです。オブジェクトプロパティを介してVBAコードで必要なListViewオブジェクトに移動します： lvwList 。ColumnHeaderIcons 、 lvwList 。アイコン 、 lvwList .smallIcons ColumnHeaders.Add（）で画像参照（インデックスまたはキー値）を使用できるようになる前に、 ListItems.Add（） 、および ListSubItems.Add（） メソッド。メインプログラムに必要なVBAコードをすでに追加し、それらを無効のままにしました。私たちがしなければならないのは、コメント記号を削除し、上記の追加に必要な画像参照を追加することによって、これらのコード行を有効にすることです。メソッドのパラメータ。

LoadListView（）で、上記の4つのVBAコード行すべてから赤い色でコメント記号（'）を削除します。手順。

メインプログラムLoadListView（）で赤色で表示されている次のステートメントを変更します。 アイコンのアイコンインデックス番号1と2で示されているようにおよびSmallIcon 以下に示す太字の黒い文字を使用したコードセグメントのようなパラメータ位置：
With lvwList Do While Not rst.EOF And Not rst.BOF 'Syntax .ListItems.Add(Index, Key, Text, Icon, SmallIcon) ' Set lvwItem = .ListItems.Add(, , CStr(Nz(rst.Fields(0).Value,""))) 'Change to Set lvwItem = .ListItems.Add(, , CStr(Nz(rst.Fields(0).Value,"")), 1, 2) 'Add next columns of data as sub-items of ListItem With lvwItem 'Syntax .Add Index,Key,Text,Report Icon,TooltipText For j = 1 To rst.Fields.Count - 1 ' .ListSubItems.Add , , CStr(Nz(rst.Fields(j).Value, "")) 'Change to .ListSubItems.Add , , CStr(Nz(rst.Fields(j).Value, "")),,"Click" Next End With rst.MoveNext Loop rst.Close

画像が2つしかないため、インデックス番号1の最初の画像 アイコンとして使用されますパラメータと2 SmallIconにありますパラメータの位置。 アイコン ListView表示オプションを0--lvwIconに変更した場合にのみ、画像が表示されます。 ListSubItems.Add（）メソッドでは、画像参照を追加していません。次のパラメーターのツールチップテキスト「クリック」 "が追加されました。マウスポインタがいずれかの列にあるとき、2番目の列以降にクリックテキストが表示されます。

VBAコードで上記の変更を行った後、フォームfrmEmployeesを変更とともに保存します。

通常表示でフォームを開きます。ビューは、このページの上部にあるサンプル画像のようになります。

smallIcon 他のすべてのListViewオプションに表示されます。以下に示すサンプルのListViewImagesofEmployeesデータを確認してください。

0-lvwIconビュー

2-lvwListビュー

このページの上部にある最初の画像は03--lvwReportです。意見。このビューでのみ、すべての列の値がDataSheetのように表示されます。

フォームをデザインビューに変更します。 ListViewコントロールのプロパティシートを表示します。 [表示]オプションを変更し、各ビューを試して、さまざまなビューがどのように表示されるかを確認してください。

デモデータベースをダウンロードします。

MicrosoftTreeViewControlチュートリアル

TreeViewコントロールを使用したアクセスメニューの作成

TreeViewノードへの画像の割り当て

TreeViewノードへの画像の割り当て-2

TreeViewコントロールチェックマーク追加削除

TreeViewImageComboドロップダウンアクセス

ドラッグアンドドロップでTreeViewノードを再配置

MS-AccessTreeViewを使用したListViewコントロール

ListViewコントロールのドラッグドロップイベント

サブフォームを使用したTreeViewコントロール

ListViewアイテムへの画像の割り当てチュートリアル-03

ImageListActiveXコントロール。

サンプルデモ画像。

ソースデータとデモフォーム。

ListViewコントロールプロパティシート。

フォームモジュールのVBAコード

VBAコードのレビュー

ImageListコントロール。

画像のアップロードについて。

1。 VBAプロシージャを使用してディスクからイメージをアップロードします。

2。ディスクから手動で画像をアップロードします。

ImageListオブジェクトのListViewオブジェクトプロパティへの割り当て。

0-lvwIconビュー

2-lvwListビュー

デモデータベースをダウンロードします。