こんにちは！SPREADチームでWindows Formsを担当している大林です。
今日はWindows Formsに追加されたGcComboBox型セルをご紹介したいと思います。
コンボボックスに画像を表示したい、というご要望をいただくことがあります。
これまでも、マルチカラムコンボボックス型セルを工夫して、コンボボックスのリストに画像を表示することはできました。しかし、リストから選んだ画像をセルに表示することができませんでした。
GcComboBox型セルでは、可能です。
以下、GcComboBox型セルを使用した例です。リストで選択された画像がセルにも表示されていますね。
スプレッドシートは画面の情報量が多くなりがちですが、色やアイコンなど視覚的な要素を取り入れることで、画面がぐっと見やすくなります。条件付き書式やスパークラインなど、これまでもSPREADの視覚的な機能はお客様に好評で、ひと目で内容が把握できる画面作りへの関心の高さが伺えます。
認知度の高いアイコンであれば、セルの表示は画像だけで十分かもしれません。
以下、セルに画像とテキストを表示するGcComboBox型セルのサンプルコードです。
なお、以降でご紹介するコードは、ファイル冒頭に以下のImports句（C#ではusing句）を追加してご利用ください。
' VBの場合 Imports GrapeCity.Win.Spread.InputMan.CellType
// C#の場合 using GrapeCity.Win.Spread.InputMan.CellType;
Visual Basic
Dim gcCombo1 As New GcComboBoxCellType() 'カラムヘッダを非表示 gcCombo1.ListHeaderPane.Visible = False 'グリッド線を非表示 gcCombo1.ListGridLines.VerticalLines = New Line() With {.Style = LineStyle.None} gcCombo1.ListGridLines.HorizontalLines = New Line() With {.Style = LineStyle.None} '選択時のスタイルを設定 gcCombo1.ListSelectedItemStyle.BackColor = Color.LightSkyBlue gcCombo1.ListSelectedItemStyle.ForeColor = Color.Black 'ドロップダウンのリサイズを無効に設定 gcCombo1.DropDown.AllowResize = False gcCombo1.DropDown.Height = 170 gcCombo1.DropDown.AutoWidth = True 'カラムを追加 gcCombo1.ListColumns.Add(New ListColumnInfo() With {.AutoWidth = False, .Width = 130}) 'リストアイテムを追加 Dim item11 As New ListItemInfo() With {.AutoItemHeight = False, .Height = 40} item11.Image = Image.FromFile('c:\Images\include.png') item11.SubItems.Add('加算する') gcCombo1.Items.Add(item11) Dim item12 As New ListItemInfo() With {.AutoItemHeight = False, .Height = 40} item12.Image = Image.FromFile('c:\Images\exclude.png') item12.SubItems.Add('除外する') gcCombo1.Items.Add(item12) Dim item13 As New ListItemInfo() With {.AutoItemHeight = False, .Height = 40} item13.Image = Image.FromFile('c:\Images\tax.png') item13.SubItems.Add('税率') gcCombo1.Items.Add(item13) Dim item14 As New ListItemInfo() With {.AutoItemHeight = False, .Height = 40} item14.Image = Image.FromFile('c:\Images\comment.png') item14.SubItems.Add('コメント') gcCombo1.Items.Add(item14) 'イメージの配置を設定 gcCombo1.ImageWidth = 40 gcCombo1.ImageAlign = HorizontalAlignment.Center 'リストのイメージ表示を有効に設定 gcCombo1.ShowListBoxImage = True 'セルのテキストおよびイメージ表示を有効に設定 gcCombo1.TextBoxStyle = TextBoxStyle.Both 'セルの非編集時のイメージ表示を有効に設定 gcCombo1.PaintByControl = True 'GcComboBox型セルをセルに設定 FpSpread1.Sheets(0).Cells(1, 1, 4, 1).CellType = gcCombo1
C#
GcComboBoxCellType gcCombo1 = new GcComboBoxCellType(); //カラムヘッダを非表示 gcCombo1.ListHeaderPane.Visible = false; //グリッド線を非表示 gcCombo1.ListGridLines.VerticalLines = new Line() { Style = LineStyle.None }; gcCombo1.ListGridLines.HorizontalLines = new Line() { Style = LineStyle.None }; //選択時のスタイルを設定 gcCombo1.ListSelectedItemStyle.BackColor = Color.LightSkyBlue; gcCombo1.ListSelectedItemStyle.ForeColor = Color.Black; //ドロップダウンのリサイズを無効に設定 gcCombo1.DropDown.AllowResize = false; gcCombo1.DropDown.Height = 170; gcCombo1.DropDown.AutoWidth = true; //カラムを追加 gcCombo1.ListColumns.Add(new ListColumnInfo() { AutoWidth = false, Width = 130 }); //リストアイテムを追加 ListItemInfo item11 = new ListItemInfo() { AutoItemHeight = false, Height = 40 }; item11.Image = Image.FromFile(@'c:\Images\include.png'); item11.SubItems.Add('加算する'); gcCombo1.Items.Add(item11); ListItemInfo item12 = new ListItemInfo() { AutoItemHeight = false, Height = 40 }; item12.Image = Image.FromFile(@'c:\Images\exclude.png'); item12.SubItems.Add('除外する'); gcCombo1.Items.Add(item12); ListItemInfo item13 = new ListItemInfo() { AutoItemHeight = false, Height = 40 }; item13.Image = Image.FromFile(@'c:\Images\tax.png'); item13.SubItems.Add('税率'); gcCombo1.Items.Add(item13); ListItemInfo item14 = new ListItemInfo() { AutoItemHeight = false, Height = 40 }; item14.Image = Image.FromFile(@'c:\Images\comment.png'); item14.SubItems.Add('コメント'); gcCombo1.Items.Add(item14); //イメージの配置を設定 gcCombo1.ImageWidth = 40; gcCombo1.ImageAlign = HorizontalAlignment.Center; //リストのイメージ表示を有効に設定 gcCombo1.ShowListBoxImage = true; //セルのテキストおよびイメージ表示を有効に設定 gcCombo1.TextBoxStyle = TextBoxStyle.Both; //セルの非編集時のイメージ表示を有効に設定 gcCombo1.PaintByControl = true; //GcComboBox型セルをセルに設定 fpSpread1.Sheets[0].Cells[1, 1, 4, 1].CellType = gcCombo1;
セルに画像のみを表示するには、上のサンプルコードの設定を一か所変更するだけです。
Visual Basic
'以下をコメントアウト 'gcCombo1.TextBoxStyle = TextBoxStyle.Both 'セルにイメージのみ表示 gcCombo1.TextBoxStyle = TextBoxStyle.ImageOnly
C#
//以下をコメントアウト //gcCombo1.TextBoxStyle = TextBoxStyle.Both; //セルにイメージのみ表示 gcCombo1.TextBoxStyle = TextBoxStyle.ImageOnly;
GcComboBox型セルには、動作や外観に関する多くの機能が装備されています。詳しくは製品ヘルプをご覧の上、ぜひご活用ください！