ListViewコントロール

Transcription

1 ListView コントロール ListView コントロールへ項目を追加 本稿では.NET Framework の標準コントロールで有る ListView コントロール (System.Windows.Forms 名前空間 ) を活用する為に ListView コントロールにデータを追加する方法を紹介する ListView コントロールは データ項目をアイコン表示や詳細表示等に依り一覧表示する為の物で Windows のエクスプローラでも馴染みのコントロールで有る 其の表示スタイルと仕ては 次の様な 4 種類が用意されている ListView コントロールの 4 つの表示スタイル左から順番に 大きなアイコン (LargeIcon) 小さなアイコン (SmallIcon) 一覧 (List) 詳細 (Details) と謂う表示に成って居る 詳しくは MSDN View 列挙体 を参照され度い 詳細表示では 1 つのデータ項目に付き複数の種類の情報を列毎に表示出来る 各列の値に依りデータ項目の並べ替えも可能で有る ListView コントロールのヘッダ項目の作成 此処では ListView コントロールへ実際のデータを追加する前に 先ずは ListView コントロールのヘッダ項目を作成する事にする 猶 上記 4 種類の表示スタイルの内 ヘッダ項目が表示されるのは ListView コントロールの View プロパティが View 列挙体 (System.Windows.Forms 名前空間 ) の Details( 詳細表示 ) に設定されて居る時而巳で有る ヘッダ項目を作成するには ListView コントロールの Columns プロパティの Add メソッド若しくは AddRange メソッドを使えば良い 複数のヘッダ項目を作成し度い場合には 複数を纏めて追加出来る AddRange メソッドが便利で有る 併し 本稿のサンプルプログラムは 記述が簡単な Add メソッドを利用する事にする (AddRange メソッドを使用する方法は コメントアウトして居る ) AddRange メソッドのパラメータには ColumnHeader オブジェクト (System.Windows.Forms 名前空間 ) の配列を指定する 1 つの ColumnHeader オブジェクトが 1 つのヘッダ項目に対応する 具体的なサンプルコードは 以下の通りで有る 此処ではヘッダ項目と仕て 3 つの列を設定して居る ' ListView コントロールを初期化するジェネラルプロシージャ Private Sub InitializeListView( ) ' ListView コントロールのプロパティ設定 With lsvdisp -1-

2 .FullRowSelect = True.GridLines = True.Sorting = SortOrder.Ascending.View = View.Details End With ' 列 ( コラム ) ヘッダの作成 lsvdisp.columns.add( " 名前 ", 100, HorizontalAlignment.Left ) lsvdisp.columns.add( " 種類 ", 60, HorizontalAlignment.Left ) lsvdisp.columns.add( " データ ", 150, HorizontalAlignment.Left ) ' 下記の様に AddRange メソッドを用いる方法も有る ' Dim C1 As ColumnHeader = New ColumnHeader( ) ' Dim C2 As ColumnHeader = New ColumnHeader( ) ' Dim C3 As ColumnHeader = New ColumnHeader( ) ' C1.Text = " 名前 " : C1.Width = 100 ' C2.Text = " 種類 " : C2.Width = 60 ' C3.Text = " データ " : C3.Width = 150 ' Dim CA( ) As ColumnHeader = C1, C2, C3 ' lsvdisp.columns.addrange( CA ) // ListView コントロールを初期化するメソッド private void InitializeListView( ) // ListView コントロールのプロパティ設定 lsvdisp.fullrowselect = true; lsvdisp.gridlines = true; lsvdisp.sorting = SortOrder.Ascending; lsvdisp.view = View.Details; // 列 ( コラム ) ヘッダの作成 lsvdisp.columns.add( " 名前 ", 100, HorizontalAlignment.Left ); lsvdisp.columns.add( " 種類 ", 60, HorizontalAlignment.Left ); lsvdisp.columns.add( " データ ", 150, HorizontalAlignment.Left ); 上記コードの詳細説明は割愛するが 最初に ListView コントロールのプロパティ設定で 行選択モード (FullRowSelect プロパティ ) グリッド線表示 (GridLines プロパティ ) ソート機能 (Sorting プロパティ ) 詳細表示 (View プロパティ ) の設定を行って居る 更に続けて列 ( コラム ) ヘッダの作成で 名前 ( 列幅 :100) 種類 ( 列幅 :60) データ ( 列幅 :150) と謂う 3 つのカラムを Add メソッドに依りヘッダ項目と仕て登録して居る 此処では コードに依りヘッダ項目の実装を行ったが Visual Studio の IDE の [ プロパティ ] ウィンドウに有る Columns プロパティ からは GUI に依り簡単に設定する事も出来る ListView コントロールへのデータの追加 次に ListView コントロールへ実際のデータを追加する事にする 此れには ListView コントロールの Items プロパティの Add メソッド若しくは AddRange メソッドを使えば良い 此れに関しても複数を纏めて追加するには AddRange メソッドを使う 本稿のサンプルコードでは データを 1 個宛登録するので Add メソッドを使用する -2-

3 Add メソッドのパラメータには ListViewItem オブジェクト (System.Windows.Forms 名前空間 ) を指定する 1 つの ListViewItem オブジェクトが 1 つのデータに対応する 先程のサンプルコードでは 3 つの列項目を作ったが 此の場合には 1 つのデータには 3 つの文字列項目が存在する事に成る 依って ListViewItem オブジェクトには 3 つの文字列データを含める必要が有る 此れを実現するには ListViewItem クラスのコンストラクタのパラメータで 其等を配列と仕て指定すれば良い 具体的には 以下の様なサンプルコードに成る ' ListView コントロールのデータを更新するジェネラルプロシージャ Private Sub RefreshListView( ) ' ListView コントロールの総てのデータを消去 lsvdisp.items.clear( ) ' ListView コントロールにデータを追加 Dim Item1( ) As String = " リンゴ ", " 果物 ", " 赤 " lsvdisp.items.add( New ListViewItem( Item1 )) Dim Item2( ) As String = " メロン ", " 果物 ", " 緑 " lsvdisp.items.add( New ListViewItem( Item2 )) Dim Item3( ) As String = " ピーマン ", " 野菜 ", " 緑 " lsvdisp.items.add( New ListViewItem( Item3 )) // ListView コントロールのデータを更新するメソッド private void RefreshListView( ) // ListView コントロールの総てのデータを消去 listview1.items.clear( ); // ListView コントロールにデータを追加 string[ ] item1 = " リンゴ ", " 果物 ", " 赤 " ; lsvdisp.items.add( new ListViewItem( item1 )); string[ ] item2 = " メロン ", " 果物 ", " 緑 " ; lsvdisp.items.add( new ListViewItem( item2 )); string[ ] item3 = " ピーマン ", " 野菜 ", " 緑 " ; lsvdisp.items.add( new ListViewItem( item3 )); 上記のコードに有る Items プロパティの Clear メソッドは 既存のデータ項目を総て消去する為の物で有る 以上のサンプルプログラムを実行したのが次の画面で有る ListView コントロールの詳細表示は DataGridView コントロールに依るデータ一覧表示に似て居るが DataGridView コントロールとは異なり コントロール内で直接 データの編集を行う事は出来ない 其の分 軽量なので データを表示する丈で 編集する必要の無い時は ListView コントロールを使用した方が良い -3-

4 ListView コントロールでサムネイル画像を一覧表示 4 種類の表示スタイルを持つ ListView コントロール (System.Windows.Forms 名前空間 ) では 其の表示スタイルを 大きなアイコン にする事に依り サムネイル画像を一覧表示する事が出来る 本稿では其の方法に付いて解説し 以下の様な画面のサンプルアプリケーションを作成する事にする ListView コントロールに依りサムネイル画像を一覧表示するアプリケーションボタンがクリックされると 特定のディレクトリに格納されて居る JPEG 画像を ListView コントロールに依り一覧表示する ImageList コンポーネントと ListViewItem オブジェクト 大きなアイコン 表示の ListView コントロール (View プロパティを View.LargeIcon に設定 ) に画像を表示する為には 先ず ImageList コンポーネントと ListViewItem オブジェクトとの 2 つを準備する必要が有る ImageList コンポーネントは複数の画像を保持する事の出来るコレクションオブジェクトで有る 此等 2 つに関してポイントを纏めると 次の様に成る ImageList コンポーネントのインスタンスを ListView コントロールの LargeImageList プロパティに設定する ListView コントロールで表示される各項目は ListViewItem オブジェクトで有る 各 ListViewItem オブジェクトには 其の表示名と ImageList コンポーネント内の画像のインデックス番号を指定する 詰まり 画像を表示するには ImageList コンポーネントに画像を追加し 其の画像のインデックス番号を持つ ListViewItem オブジェクトを作成し 其れを ListView コントロール ( の Images プロパティ ) に追加すれば良い -4-

5 サムネイル画像を一覧表示するアプリケーション 以下に 冒頭で示したアプリケーションのコードを示す 此のコードを実行するには Visual Studio 2005 で Windows アプリケーションを新規作成し ListView コントロール Button コントロール ImageList コンポーネントの 3 つをフォームに配置して置く必要が有る 然して 配置した Button コントロールの Click イベントのハンドラを実装する ' ボタン ( 表示 ) がクリックされた時の処理 Private Sub btndisp_click(byval sender As System.Object, ByVal e As System.EventArgs) _ Handles btndisp.click Dim Dr As String = "c: windows" ' 画像ディレクトリ Dim Fl As String( ) = System.IO.Directory.GetFiles( Dr, "*.gif" ) Dim W As Integer = 100 Dim H As Integer = 80 imglist.imagesize = New Size( W, H ) lsvdisp.largeimagelist = imglist For I As Integer = 0 To ( Fl.Length - 1 ) Dim Org As Image = Bitmap.FromFile( Fl( I )) Dim Dst As Image = CreateThumbnail( Org, W, H ) imglist.images.add( Dst ) lsvdisp.items.add( Fl( I ), I ) Org.Dispose( ) Dst.Dispose( ) Next ' サムネイル ( 幅 W 高さ H の Image オブジェクト ) を作成するジェネラルプロシージャ Function CreateThumbnail(ByVal Img As Image, ByVal W As Integer, ByVal H As Integer) _ As Image Dim Canvas As New Bitmap( W, H ) Dim G As Graphics = Graphics.FromImage( Canvas ) G.FillRectangle(New SolidBrush( Color.White ), 0, 0, W, H ) Dim Fw As Double = CDbl( W ) / CDbl( Img.Width ) Dim Fh As Double = CDbl( H ) / CDbl( Img.Height ) Dim Sc As Double = Math.Min( Fw, Fh ) Dim W2 As Integer = CInt( Img.Width * Sc ) Dim H2 As Integer = CInt( Img.Height * Sc ) G.DrawImage( Img, ( W - W2 ) 2, ( H - H2 ) 2, W2, H2 ) G.Dispose( ) Return Canvas End Function -5-

6 // ボタン ( 表示 ) がクリックされた時の処理 private void btndisp_click( object sender, System.EventArgs e ) string dr windows"; // 画像ディレクトリ string[ ] fl = System.IO.Directory.GetFiles( dr, "*.gif" ); int w = 100; int h = 80; imglist.imagesize = new Size( w, h ); lstdisp.largeimagelist = imglist; for (int i = 0; i < fl.length; i++ ) Image org = Bitmap.FromFile( fl[ i ]); Image dst = CreateThumbnail( org, w, h ); imglist.images.add( dst ); lstdisp.items.add( fl[ i ], i ); org.dispose( ); dst.dispose( ); // サムネイル ( 幅 W 高さ H の Image オブジェクト ) を作成するメソッド Image CreateThumbnail( Image image, int w, int h) Bitmap canvas = new Bitmap( w, h ); Graphics g = Graphics.FromImage( canvas ); g.fillrectangle( new SolidBrush( Color.White ), 0, 0, w, h ); float fw = ( float )w / ( float )image.width; float fh = ( float )h / ( float )image.height; float scale = Math.Min( fw, fh ); fw = image.width * scale; fh = image.height * scale; g.drawimage( image, ( w fw ) / 2, ( h fh ) / 2, fw, fh ); g.dispose( ); return canvas; ListView コントロールで表示される画像のサイズは ImageList コンポーネントの ImageSize プロパティに依り決まり 個々の画像毎に変える事が出来ない 其の為 此のコードでは 予め画像を縮小 拡大したサムネイル画像を作成して居る 此れを行って居るのが CreateThumbnail メソッドで有る 因みに ListView コントロールでは画像の表示間隔も変更出来ない 此の表示間隔は コントロールパネルの 画面 プロパティの [ デザイン ] タブに有る アイコンの表示間隔 ( 横 ) 及び アイコンの表示間隔 ( 縦 ) で設定されて居る値に依り決定される -6-

7 ListView コントロールで項目を選択出来ない様にする Windows フォームの ListView コントロールでは 項目 ( アイテム ) をマウスで選択する事が出来るが 一覧表示等の目的で項目を選択出来ない様に仕度い場合が有る Enabled プロパティに false を設定すれば項目は選択出来なく成るが 背景色がグレーに設定され 亦 スクロール等も出来なく成る 猶 ListView コントロールには ReadOnly と謂ったプロパティは用意されて居ない 此の様な場合には ListView コントロールで項目が選択された時に 其の選択をキャンセルする事で ListView コントロールを表示専用と仕て観せる事が出来る 具体的には ListView コントロールの ItemSelectionChanged イベントハンドラを次の様に記述すれば良い ItemSelectionChanged イベントは 其の名の通り 項目の選択状態が変化した時に発生するイベントで有る ' ItemSelectionChanged イベントハンドラ Private Sub ListView1_ItemSelectionChanged( ByVal sender As System.Object, _ ByVal e As System.Windows.Forms.ListViewItemSelectionChangedEventArgs ) _ Handles ListView1.ItemSelectionChanged If e.isselected Then e.item.selected = False ' 項目の選択をキャンセル End If // ItemSelectionChanged イベントハンドラ private void listview1_itemselectionchanged( object sender, ListViewItemSelectionChangedEventArgs e ) if ( e.isselected ) e.item.selected = false; // 項目の選択をキャンセル 項目の選択をキャンセルする ItemSelectionChanged イベントハンドラ イベントハンドラの第 2 パラメータで有る ListViewItemSelectionChangedEventArgs クラス (System.Windows.Forms 名前空間 ) のオブジェクト ( 変数 e) では IsSelected プロパティに依り項目が選択されたか何うかが解る 上記リストでは 此れが true の場合に 選択されて居る項目の Selected プロパティに false を設定し 其の選択をキャンセルして居る -7-