作成日: 2018/09/05 最終更新日: 2018/09/05
文書種別
使用方法
詳細
C1FlexGridでは、SetCellImageメソッドを使用してセルに1つの画像を設定できますが、複数の画像を配置することはできません。代わりに、OwnerDrawCellイベントを使用し、指定した位置に複数画像を手動で描画することで、これを実現します。
また、BeforeMouseDownイベントを用いてマウスポインタがどの画像上にあるかを判別し、クリックされた画像に応じた処理を実装することができます。
※下記コードを実行すると、セル(1, 1)に"ImageCell"というテキストと3つの画像が表示されます。画像をクリックすると、それに応じてセル(1, 2)に"Left Image"、 "Middle Image"、 "Right Image"のいずれかの文字が表示されます。
◎サンプルコード(VB)
◎サンプルコード(C#)
また、BeforeMouseDownイベントを用いてマウスポインタがどの画像上にあるかを判別し、クリックされた画像に応じた処理を実装することができます。
※下記コードを実行すると、セル(1, 1)に"ImageCell"というテキストと3つの画像が表示されます。画像をクリックすると、それに応じてセル(1, 2)に"Left Image"、 "Middle Image"、 "Right Image"のいずれかの文字が表示されます。
◎サンプルコード(VB)
Dim img1 As Image, img2 As Image, img3 As Image
Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
img1 = Image.FromFile("..¥..¥Images¥layout_left.png")
img2 = Image.FromFile("..¥..¥Images¥layout_center.png")
img3 = Image.FromFile("..¥..¥Images¥layout_right.png")
' テキスト、スタイル、列幅の割り当て
Dim cs = Me.C1FlexGrid1.Styles.Add("Custom")
cs.Font = New Font("Tahoma", 10, FontStyle.Bold)
C1FlexGrid1.SetData(1, 1, "ImageCell")
C1FlexGrid1.SetCellStyle(1, 1, cs)
C1FlexGrid1.Cols(1).WidthDisplay = 130
C1FlexGrid1.Rows(1).HeightDisplay = 20
C1FlexGrid1.AllowEditing = False
C1FlexGrid1.DrawMode = C1.Win.C1FlexGrid.DrawModeEnum.OwnerDraw
End Sub
Private Sub C1FlexGrid1_OwnerDrawCell(sender As Object, e As C1.Win.C1FlexGrid.OwnerDrawCellEventArgs) Handles C1FlexGrid1.OwnerDrawCell
If e.Col = 1 AndAlso e.Row = 1 Then
' セルの背景と枠線を描画
e.DrawCell(C1.Win.C1FlexGrid.DrawCellFlags.Background Or C1.Win.C1FlexGrid.DrawCellFlags.Border)
' テキストの幅を算出
Dim width = CInt(e.Graphics.MeasureString(e.Text, e.Style.Font).Width)
' 各画像のX座標
Dim img1_x = e.Bounds.X + Width - 10
Dim img2_x = img1_x + img1.Width + 5
Dim img3_x = img2_x + img2.Width + 5
' 各画像の位置
Dim img1_loc = New Point(img1_x, e.Bounds.Y + img1.Height - 18)
Dim img2_loc = New Point(img2_x, e.Bounds.Y + img1.Height - 18)
Dim img3_loc = New Point(img3_x, e.Bounds.Y + img1.Height - 18)
' 上記の場所に画像を描画
e.Graphics.DrawImage(img1, img1_loc)
e.Graphics.DrawImage(img2, img2_loc)
e.Graphics.DrawImage(img3, img3_loc)
' テキストを描画
e.Graphics.DrawString(e.Text, e.Style.Font, Brushes.Black, e.Bounds.Location)
e.Handled = True
End If
End Sub
' マウスポイントの下にある画像の取得ロジック
Private Sub C1FlexGrid1_BeforeMouseDown(sender As Object, e As C1.Win.C1FlexGrid.BeforeMouseDownEventArgs) Handles C1FlexGrid1.BeforeMouseDown
Dim hti = Me.C1FlexGrid1.HitTest(New Point(e.X, e.Y))
If hti.Row = 1 AndAlso hti.Column = 1 Then
Dim _row = hti.Row
Dim _col = hti.Column
If Me.C1FlexGrid1.GetDataDisplay(_row, _col).ToString() IsNot Nothing Then
' セルの矩形
Dim _cellRect = C1FlexGrid1.GetCellRect(_row, _col)
' Graphicsオブジェクト
Dim graphics = C1FlexGrid1.CreateGraphics()
' セルのテキスト
Dim _text = C1FlexGrid1.GetDataDisplay(_row, _col).ToString()
' セルのフォント
Dim _font = C1FlexGrid1.GetCellStyleDisplay(_row, _col).Font
' Textの幅
Dim text_width = CInt(graphics.MeasureString(_text, _font).Width)
' カーソルの位置
Dim cursor_loc = New Point(e.X, e.Y)
' 各画像のX座標の検出
Dim img1_X = _cellRect.Location.X + text_width - 10
Dim img2_X = img1_X + img1.Width + 5
Dim img3_X = img2_X + img2.Width + 5
' 各画像の矩形の検出
Dim img1_Rect = New Rectangle(New Point(img1_X, e.Y), img1.Size)
Dim img2_Rect = New Rectangle(New Point(img2_X, e.Y), img2.Size)
Dim img3_Rect = New Rectangle(New Point(img3_X, e.Y), img3.Size)
' マウスポインタがどの矩形に含まれているかを検出
If img1_Rect.Contains(cursor_loc) Then
C1FlexGrid1(_row, _col + 1) = "Left Image"
ElseIf img2_Rect.Contains(cursor_loc) Then
C1FlexGrid1(_row, _col + 1) = "Middle Image"
ElseIf img3_Rect.Contains(cursor_loc) Then
C1FlexGrid1(_row, _col + 1) = "Right Image"
End If
End If
End If
End Sub
Private Sub Form1_Load(sender As System.Object, e As System.EventArgs) Handles MyBase.Load
img1 = Image.FromFile("..¥..¥Images¥layout_left.png")
img2 = Image.FromFile("..¥..¥Images¥layout_center.png")
img3 = Image.FromFile("..¥..¥Images¥layout_right.png")
' テキスト、スタイル、列幅の割り当て
Dim cs = Me.C1FlexGrid1.Styles.Add("Custom")
cs.Font = New Font("Tahoma", 10, FontStyle.Bold)
C1FlexGrid1.SetData(1, 1, "ImageCell")
C1FlexGrid1.SetCellStyle(1, 1, cs)
C1FlexGrid1.Cols(1).WidthDisplay = 130
C1FlexGrid1.Rows(1).HeightDisplay = 20
C1FlexGrid1.AllowEditing = False
C1FlexGrid1.DrawMode = C1.Win.C1FlexGrid.DrawModeEnum.OwnerDraw
End Sub
Private Sub C1FlexGrid1_OwnerDrawCell(sender As Object, e As C1.Win.C1FlexGrid.OwnerDrawCellEventArgs) Handles C1FlexGrid1.OwnerDrawCell
If e.Col = 1 AndAlso e.Row = 1 Then
' セルの背景と枠線を描画
e.DrawCell(C1.Win.C1FlexGrid.DrawCellFlags.Background Or C1.Win.C1FlexGrid.DrawCellFlags.Border)
' テキストの幅を算出
Dim width = CInt(e.Graphics.MeasureString(e.Text, e.Style.Font).Width)
' 各画像のX座標
Dim img1_x = e.Bounds.X + Width - 10
Dim img2_x = img1_x + img1.Width + 5
Dim img3_x = img2_x + img2.Width + 5
' 各画像の位置
Dim img1_loc = New Point(img1_x, e.Bounds.Y + img1.Height - 18)
Dim img2_loc = New Point(img2_x, e.Bounds.Y + img1.Height - 18)
Dim img3_loc = New Point(img3_x, e.Bounds.Y + img1.Height - 18)
' 上記の場所に画像を描画
e.Graphics.DrawImage(img1, img1_loc)
e.Graphics.DrawImage(img2, img2_loc)
e.Graphics.DrawImage(img3, img3_loc)
' テキストを描画
e.Graphics.DrawString(e.Text, e.Style.Font, Brushes.Black, e.Bounds.Location)
e.Handled = True
End If
End Sub
' マウスポイントの下にある画像の取得ロジック
Private Sub C1FlexGrid1_BeforeMouseDown(sender As Object, e As C1.Win.C1FlexGrid.BeforeMouseDownEventArgs) Handles C1FlexGrid1.BeforeMouseDown
Dim hti = Me.C1FlexGrid1.HitTest(New Point(e.X, e.Y))
If hti.Row = 1 AndAlso hti.Column = 1 Then
Dim _row = hti.Row
Dim _col = hti.Column
If Me.C1FlexGrid1.GetDataDisplay(_row, _col).ToString() IsNot Nothing Then
' セルの矩形
Dim _cellRect = C1FlexGrid1.GetCellRect(_row, _col)
' Graphicsオブジェクト
Dim graphics = C1FlexGrid1.CreateGraphics()
' セルのテキスト
Dim _text = C1FlexGrid1.GetDataDisplay(_row, _col).ToString()
' セルのフォント
Dim _font = C1FlexGrid1.GetCellStyleDisplay(_row, _col).Font
' Textの幅
Dim text_width = CInt(graphics.MeasureString(_text, _font).Width)
' カーソルの位置
Dim cursor_loc = New Point(e.X, e.Y)
' 各画像のX座標の検出
Dim img1_X = _cellRect.Location.X + text_width - 10
Dim img2_X = img1_X + img1.Width + 5
Dim img3_X = img2_X + img2.Width + 5
' 各画像の矩形の検出
Dim img1_Rect = New Rectangle(New Point(img1_X, e.Y), img1.Size)
Dim img2_Rect = New Rectangle(New Point(img2_X, e.Y), img2.Size)
Dim img3_Rect = New Rectangle(New Point(img3_X, e.Y), img3.Size)
' マウスポインタがどの矩形に含まれているかを検出
If img1_Rect.Contains(cursor_loc) Then
C1FlexGrid1(_row, _col + 1) = "Left Image"
ElseIf img2_Rect.Contains(cursor_loc) Then
C1FlexGrid1(_row, _col + 1) = "Middle Image"
ElseIf img3_Rect.Contains(cursor_loc) Then
C1FlexGrid1(_row, _col + 1) = "Right Image"
End If
End If
End If
End Sub
◎サンプルコード(C#)
Image img1, img2, img3;
private void Form1_Load(object sender, EventArgs e)
{
img1 = Image.FromFile(@"..¥..¥Images¥layout_left.png");
img2 = Image.FromFile(@"..¥..¥Images¥layout_center.png");
img3 = Image.FromFile(@"..¥..¥Images¥layout_right.png");
// テキスト、スタイル、列幅の割り当て
var cs = this.c1FlexGrid1.Styles.Add("Custom");
cs.Font = new Font("Tahoma", 10, FontStyle.Bold);
c1FlexGrid1.SetData(1, 1, "ImageCell");
c1FlexGrid1.SetCellStyle(1, 1, cs);
c1FlexGrid1.Cols[1].WidthDisplay = 130;
c1FlexGrid1.Rows[1].HeightDisplay = 20;
c1FlexGrid1.AllowEditing = false;
c1FlexGrid1.DrawMode = C1.Win.C1FlexGrid.DrawModeEnum.OwnerDraw;
}
private void c1FlexGrid1_OwnerDrawCell(object sender, C1.Win.C1FlexGrid.OwnerDrawCellEventArgs e)
{
if (e.Col == 1 && e.Row == 1)
{
// セルの背景と枠線を描画
e.DrawCell(C1.Win.C1FlexGrid.DrawCellFlags.Background | C1.Win.C1FlexGrid.DrawCellFlags.Border);
// テキストの幅を算出
var width = (int)e.Graphics.MeasureString(e.Text, e.Style.Font).Width;
// 各画像のX座標
var img1_x = e.Bounds.X + width - 10;
var img2_x = img1_x + img1.Width + 5;
var img3_x = img2_x + img2.Width + 5;
// 各画像の位置
var img1_loc = new Point(img1_x, e.Bounds.Y + img1.Height - 18);
var img2_loc = new Point(img2_x, e.Bounds.Y + img1.Height - 18);
var img3_loc = new Point(img3_x, e.Bounds.Y + img1.Height - 18);
// 上記の場所に画像を描画
e.Graphics.DrawImage(img1, img1_loc);
e.Graphics.DrawImage(img2, img2_loc);
e.Graphics.DrawImage(img3, img3_loc);
// テキストを描画
e.Graphics.DrawString(e.Text, e.Style.Font, Brushes.Black, e.Bounds.Location);
e.Handled = true;
}
}
// マウスポイントの下にある画像の取得ロジック
private void c1FlexGrid1_BeforeMouseDown(object sender, C1.Win.C1FlexGrid.BeforeMouseDownEventArgs e)
{
var hti = this.c1FlexGrid1.HitTest(new Point(e.X, e.Y));
if (hti.Row == 1 && hti.Column == 1)
{
var _row = hti.Row;
var _col = hti.Column;
if (this.c1FlexGrid1.GetDataDisplay(_row, _col).ToString() != null)
{
// セルの矩形
var _cellRect = c1FlexGrid1.GetCellRect(_row, _col);
// Graphicsオブジェクト
var graphics = c1FlexGrid1.CreateGraphics();
// セルのテキスト
var _text = c1FlexGrid1.GetDataDisplay(_row, _col).ToString();
// セルのフォント
var _font = c1FlexGrid1.GetCellStyleDisplay(_row, _col).Font;
// Textの幅
var text_width = (int)graphics.MeasureString(_text, _font).Width;
// カーソルの位置
var cursor_loc = new Point(e.X, e.Y);
// 各画像のX座標の検出
var img1_X = _cellRect.Location.X + text_width - 10;
var img2_X = img1_X + img1.Width + 5;
var img3_X = img2_X + img2.Width + 5;
// 各画像の矩形の検出
var img1_Rect = new Rectangle(new Point(img1_X, e.Y), img1.Size);
var img2_Rect = new Rectangle(new Point(img2_X, e.Y), img2.Size);
var img3_Rect = new Rectangle(new Point(img3_X, e.Y), img3.Size);
// マウスポインタがどの矩形に含まれているかを検出
if (img1_Rect.Contains(cursor_loc))
c1FlexGrid1[_row, _col + 1] = "Left Image";
else if (img2_Rect.Contains(cursor_loc))
c1FlexGrid1[_row, _col + 1] = "Middle Image";
else if (img3_Rect.Contains(cursor_loc))
c1FlexGrid1[_row, _col + 1] = "Right Image";
}
}
}
private void Form1_Load(object sender, EventArgs e)
{
img1 = Image.FromFile(@"..¥..¥Images¥layout_left.png");
img2 = Image.FromFile(@"..¥..¥Images¥layout_center.png");
img3 = Image.FromFile(@"..¥..¥Images¥layout_right.png");
// テキスト、スタイル、列幅の割り当て
var cs = this.c1FlexGrid1.Styles.Add("Custom");
cs.Font = new Font("Tahoma", 10, FontStyle.Bold);
c1FlexGrid1.SetData(1, 1, "ImageCell");
c1FlexGrid1.SetCellStyle(1, 1, cs);
c1FlexGrid1.Cols[1].WidthDisplay = 130;
c1FlexGrid1.Rows[1].HeightDisplay = 20;
c1FlexGrid1.AllowEditing = false;
c1FlexGrid1.DrawMode = C1.Win.C1FlexGrid.DrawModeEnum.OwnerDraw;
}
private void c1FlexGrid1_OwnerDrawCell(object sender, C1.Win.C1FlexGrid.OwnerDrawCellEventArgs e)
{
if (e.Col == 1 && e.Row == 1)
{
// セルの背景と枠線を描画
e.DrawCell(C1.Win.C1FlexGrid.DrawCellFlags.Background | C1.Win.C1FlexGrid.DrawCellFlags.Border);
// テキストの幅を算出
var width = (int)e.Graphics.MeasureString(e.Text, e.Style.Font).Width;
// 各画像のX座標
var img1_x = e.Bounds.X + width - 10;
var img2_x = img1_x + img1.Width + 5;
var img3_x = img2_x + img2.Width + 5;
// 各画像の位置
var img1_loc = new Point(img1_x, e.Bounds.Y + img1.Height - 18);
var img2_loc = new Point(img2_x, e.Bounds.Y + img1.Height - 18);
var img3_loc = new Point(img3_x, e.Bounds.Y + img1.Height - 18);
// 上記の場所に画像を描画
e.Graphics.DrawImage(img1, img1_loc);
e.Graphics.DrawImage(img2, img2_loc);
e.Graphics.DrawImage(img3, img3_loc);
// テキストを描画
e.Graphics.DrawString(e.Text, e.Style.Font, Brushes.Black, e.Bounds.Location);
e.Handled = true;
}
}
// マウスポイントの下にある画像の取得ロジック
private void c1FlexGrid1_BeforeMouseDown(object sender, C1.Win.C1FlexGrid.BeforeMouseDownEventArgs e)
{
var hti = this.c1FlexGrid1.HitTest(new Point(e.X, e.Y));
if (hti.Row == 1 && hti.Column == 1)
{
var _row = hti.Row;
var _col = hti.Column;
if (this.c1FlexGrid1.GetDataDisplay(_row, _col).ToString() != null)
{
// セルの矩形
var _cellRect = c1FlexGrid1.GetCellRect(_row, _col);
// Graphicsオブジェクト
var graphics = c1FlexGrid1.CreateGraphics();
// セルのテキスト
var _text = c1FlexGrid1.GetDataDisplay(_row, _col).ToString();
// セルのフォント
var _font = c1FlexGrid1.GetCellStyleDisplay(_row, _col).Font;
// Textの幅
var text_width = (int)graphics.MeasureString(_text, _font).Width;
// カーソルの位置
var cursor_loc = new Point(e.X, e.Y);
// 各画像のX座標の検出
var img1_X = _cellRect.Location.X + text_width - 10;
var img2_X = img1_X + img1.Width + 5;
var img3_X = img2_X + img2.Width + 5;
// 各画像の矩形の検出
var img1_Rect = new Rectangle(new Point(img1_X, e.Y), img1.Size);
var img2_Rect = new Rectangle(new Point(img2_X, e.Y), img2.Size);
var img3_Rect = new Rectangle(new Point(img3_X, e.Y), img3.Size);
// マウスポインタがどの矩形に含まれているかを検出
if (img1_Rect.Contains(cursor_loc))
c1FlexGrid1[_row, _col + 1] = "Left Image";
else if (img2_Rect.Contains(cursor_loc))
c1FlexGrid1[_row, _col + 1] = "Middle Image";
else if (img3_Rect.Contains(cursor_loc))
c1FlexGrid1[_row, _col + 1] = "Right Image";
}
}
}
旧文書番号
83203