C#なら簡単 TreeViewへの項目の追加・削除・移動 ドラッグアンドドロップにも対応で作成したサンプルプログラムをみて物足りなく思いませんか？ 項目にアイコンがありません。そこで今回は追加された項目にアイコンをつけ、自由に変更できるようにします。
まずデザイナで以下のようなものをつくります。
前回と同じですが、赤枠の部分を追加しました。0～7のLabelが付いているのはPictureBoxです。これはTreeViewのアイテムにアイコンをつけるために必要ではありません。どの番号がどのイメージに対応しているかがわかるようにしているだけです。
その下にボタンがあり、これをクリックすると選択されているアイテムのアイコンが変更されます。アイコンはそのアイテムが選択している場合とそうでない場合について指定します。選択時と非選択時で同じアイコンでよいなら同じものを設定してかまいません。
その下にあるのはNumericUpDownコントロールで0から7までの値が選択できるようにしています。
Contents
初期化
TreeView1_ItemDrag、TreeView1_DragOver、TreeView1_DragDropは前回の記事と同じです。
treeView1.ItemHeight = 24;はなくてもよいのですが、アイコンを大きめに描画して選択時と非選択時の状態がわかりやすくなるようにするために記述しています。
アイテムにアイコンをつけるためにはTreeView.ImageListプロパティを設定しなければなりません。またImageListを生成したらそこにイメージを追加しなければアイコンは表示されません。
設定するアイコンは以下を使います。これをリソースに追加しておきます。ImageListにImageを追加することになりますが、アイコンだけでなくPNGファイルなどでもかまいません。
|
1 2 3 4 5 6 7 8 9 10 |
ImageList imageList = new ImageList(); imageList.Images.Add(Properties.Resources.Icon001); // 0 imageList.Images.Add(Properties.Resources.Icon002); // 1 imageList.Images.Add(Properties.Resources.Icon003); // 2 imageList.Images.Add(Properties.Resources.Icon004); // 3 imageList.Images.Add(Properties.Resources.SelectedPng001); // 4 imageList.Images.Add(Properties.Resources.SelectedPng002); // 5 imageList.Images.Add(Properties.Resources.SelectedPng003); // 6 imageList.Images.Add(Properties.Resources.SelectedPng004); // 7 treeView1.ImageList = imageList; |
それからアイコンをやや大きめにするので以下のコードも追加します。この処理はやらずにデフォルトの値をそのまま使ってもかまいません。
|
1 2 |
imageList.ImageSize = new Size(24, 24); // アイコンの大きさ treeView1.ItemHeight = 24; // アイコンの大きさにあわせて値を変更 |
そのあとNumericUpDownコントロールの最大値と最小値を設定しています。最後に後述するInitPictureBoxesメソッドでPictureBoxにイメージを描画しています。
コンストラクタは以下のようになります。ImageListにImageを追加したあと、TreeView.ImageListプロパティにこれを設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
public partial class Form1 : Form { public Form1() { treeView1.LabelEdit = true; treeView1.HideSelection = false; // ドラッグアンドドロップに対応させる必要がないなら以下4行は必要ありません treeView1.AllowDrop = true; treeView1.ItemDrag += TreeView1_ItemDrag; treeView1.DragOver += TreeView1_DragOver; treeView1.DragDrop += TreeView1_DragDrop; // アイテムにアイコンを設定するために必要 ImageList imageList = new ImageList(); imageList.Images.Add(Properties.Resources.Icon001); // 0 imageList.Images.Add(Properties.Resources.Icon002); // 1 imageList.Images.Add(Properties.Resources.Icon003); // 2 imageList.Images.Add(Properties.Resources.Icon004); // 3 imageList.Images.Add(Properties.Resources.SelectedPng001); // 4 imageList.Images.Add(Properties.Resources.SelectedPng002); // 5 imageList.Images.Add(Properties.Resources.SelectedPng003); // 6 imageList.Images.Add(Properties.Resources.SelectedPng004); // 7 treeView1.ImageList = imageList; imageList.ImageSize = new Size(24, 24); // アイコンの大きさ treeView1.ItemHeight = 24; // アイコンの大きさにあわせて値を変更 // NumericUpDownコントロールの最大値と最小値を設定する numericUpDownImageIndex.Minimum = 0; numericUpDownSelectedImageIndex.Minimum = 0; numericUpDownImageIndex.Maximum = imageList.Images.Count - 1; numericUpDownSelectedImageIndex.Maximum = imageList.Images.Count - 1; InitPictureBoxes(); } } |
PictureBoxに設定しようとしているアイコンと番号がわかるようにイメージを表示させるためのものです。PictureBox.SizeMode = PictureBoxSizeMode.Zoom とすることでPictureBoxとイメージのサイズが違っていてもうまく表示させることができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
public partial class Form1 : Form { void InitPictureBoxes() { pictureBox1.SizeMode = PictureBoxSizeMode.Zoom; pictureBox2.SizeMode = PictureBoxSizeMode.Zoom; pictureBox3.SizeMode = PictureBoxSizeMode.Zoom; pictureBox4.SizeMode = PictureBoxSizeMode.Zoom; pictureBox5.SizeMode = PictureBoxSizeMode.Zoom; pictureBox6.SizeMode = PictureBoxSizeMode.Zoom; pictureBox7.SizeMode = PictureBoxSizeMode.Zoom; pictureBox8.SizeMode = PictureBoxSizeMode.Zoom; // アイコンをPictureBox.Imageプロパティを設定するときはBitmapに変換してからおこなう pictureBox1.Image = new Bitmap(Properties.Resources.Icon001.ToBitmap()); pictureBox2.Image = new Bitmap(Properties.Resources.Icon002.ToBitmap()); pictureBox3.Image = new Bitmap(Properties.Resources.Icon003.ToBitmap()); pictureBox4.Image = new Bitmap(Properties.Resources.Icon004.ToBitmap()); pictureBox5.Image = new Bitmap(Properties.Resources.SelectedPng001); pictureBox6.Image = new Bitmap(Properties.Resources.SelectedPng002); pictureBox7.Image = new Bitmap(Properties.Resources.SelectedPng003); pictureBox8.Image = new Bitmap(Properties.Resources.SelectedPng004); } } |
アイコンの変更
次にアイテムを追加する処理ですが、これも前回の記事と同じです。CreateRootNodeメソッドとイベントハンドラButtonAddItemAsFirst_Click、ButtonAddItemAsLast_Click、ButtonAddItemAsPrev_Click、ButtonAddItemAsNext_Clickは同じです。
アイテムを追加するメソッドのなかに new TreeNode(“初期のアイテムの名前”);と書かれている場合はアイコンは自動的に0番が使われます。それ以外のアイコンを初期状態で設定したい場合は、new TreeNode(“初期のアイテムの名前”, 1, 2);のようにします。最初の数字が非選択時のアイコン、そのあとの数字が選択時のアイコンです。
TreeNode.ImageIndexとTreeNode.SelectedImageIndexでアイコンを変更する
[選択されてるアイテムのアイコンを変更する]ボタンがクリックされたときの処理を示します。NumericUpDownコントロールの値を調べてアイテムが選択されているときとそうでないときのアイコンを設定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
public partial class Form1 : Form { private void ButtonChangeIcon_Click(object sender, EventArgs e) { if (treeView1.SelectedNode != null) { treeView1.SelectedNode.ImageIndex = (int)numericUpDownImageIndex.Value; treeView1.SelectedNode.SelectedImageIndex = (int)numericUpDownSelectedImageIndex.Value; } } } |
TreeNode.ImageKeyとTreeNode.SelectedImageKeyを使う方法
TreeNode.ImageIndexとTreeNode.SelectedImageIndexではなく、TreeNode.ImageKeyとTreeNode.SelectedImageKeyを使う方法もあります。その場合は以下のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
public partial class Form1 : Form { public Form1() { InitializeComponent(); treeView1.LabelEdit = true; treeView1.HideSelection = false; ImageList imageList = new ImageList(); // Addにわたす引数を文字列（キー）とイメージ（またはアイコン）にする // すでに基本は解説したのでアイコンは4つだけにする imageList.Images.Add("red", Properties.Resources.Icon001); imageList.Images.Add("orange", Properties.Resources.Icon002);1 imageList.Images.Add("blue", Properties.Resources.Icon003); imageList.Images.Add("green", Properties.Resources.Icon004); treeView1.ImageList = imageList; // リストボックスに文字列をセットする InitListBoxes(); // このあたりはお好みで imageList.ImageSize = new Size(24, 24); // アイコンの大きさ treeView1.ItemHeight = 24; // アイコンの大きさにあわせて値を変更 } void InitListBoxes() { listBox1.Items.Add("red"); listBox1.Items.Add("orange"); listBox1.Items.Add("blue"); listBox1.Items.Add("green"); listBox2.Items.Add("red"); listBox2.Items.Add("orange"); listBox2.Items.Add("blue"); listBox2.Items.Add("green"); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
public partial class Form1 : Form { private void ButtonChangeIcon_Click(object sender, EventArgs e) { if (treeView1.SelectedNode != null) { // ImageIndexとSelectedImageIndexではなくTreeNode.ImageKeyとSelectedImageKeyを使う string imageKey = (string)listBox1.SelectedItem; // ListBoxの項目がどれも選択されていない場合があるのでチェックする if(imageKey != null && imageKey != "") treeView1.SelectedNode.ImageKey = imageKey; string selectedImageKey = (string)listBox1.SelectedItem; if (selectedImageKey != null && selectedImageKey != "") treeView1.SelectedNode.SelectedImageKey = selectedImageKey; } } } |
ImageListにイメージを追加する場合、Addに引数を1つ渡すものと2つ渡すものを混在させることはできますが、混乱のもとになるのでやめたほうがよいでしょう。
|
1 2 3 4 5 6 7 |
ImageList imageList = new ImageList(); // こんなやりかたはやめたほうがよい？ imageList.Images.Add(Properties.Resources.Icon001); // 0 imageList.Images.Add("orange", Properties.Resources.Icon002); // 1 imageList.Images.Add(Properties.Resources.Icon003); // 2 imageList.Images.Add("green", Properties.Resources.Icon004); // 3 |
|
1 2 3 4 5 |
// いちおう動作はする treeView1.SelectedNode.ImageIndex = 1; // Icon002が適用される // treeView1.SelectedNode.ImageKey = "orange";と同じ treeView1.SelectedNode.SelectedImageIndex = 2; // Icon003が適用される |
