GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

SPREAD for Windows Forms/ASP.NET 10.0Jの新機能紹介(その3)

こんにちは!SPREADチームでWindows Formsを担当している大林です。 今日はWindows Formsに追加されたGcComboBox型セルをご紹介したいと思います。

コンボボックスに画像を表示したい、というご要望をいただくことがあります。 これまでも、マルチカラムコンボボックス型セルを工夫して、コンボボックスのリストに画像を表示することはできました。しかし、リストから選んだ画像をセルに表示することができませんでした。 GcComboBox型セルでは、可能です。

以下、GcComboBox型セルを使用した例です。リストで選択された画像がセルにも表示されていますね。

kozu_20170322_1

スプレッドシートは画面の情報量が多くなりがちですが、色やアイコンなど視覚的な要素を取り入れることで、画面がぐっと見やすくなります。条件付き書式やスパークラインなど、これまでもSPREADの視覚的な機能はお客様に好評で、ひと目で内容が把握できる画面作りへの関心の高さが伺えます。

認知度の高いアイコンであれば、セルの表示は画像だけで十分かもしれません。

kozu_20170322_2

以下、セルに画像とテキストを表示する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型セルには、動作や外観に関する多くの機能が装備されています。詳しくは製品ヘルプをご覧の上、ぜひご活用ください!