How to: Work with Image Columns in the Windows Forms DataGridView Control
The following code example shows how to use the DataGridView image columns in an interactive user interface (UI). The example also demonstrates image sizing and layout possibilities with the DataGridViewImageColumn.
Example
Imports System.IO
Imports System.Windows.Forms
Imports System.Drawing
Imports System
Public Class TicTacToe
Inherits System.Windows.Forms.Form
Friend WithEvents dataGridView1 As DataGridView
Friend WithEvents Button1 As Button = New Button()
Friend WithEvents turn As Label = New Label()
Friend WithEvents Button2 As Button = New Button()
Friend WithEvents Button3 As Button = New Button()
Friend WithEvents Button4 As Button = New Button()
Friend WithEvents Button5 As Button = New Button()
Friend WithEvents Panel1 As FlowLayoutPanel = New FlowLayoutPanel()
#Region "bitmaps"
Private oImage As Byte() = { _
&H42, &H4D, &HC6, &H0, &H0, &H0, &H0, &H0, _
&H0, &H0, &H76, &H0, &H0, &H0, &H28, &H0, _
&H0, &H0, &HB, &H0, &H0, &H0, &HA, &H0, _
&H0, &H0, &H1, &H0, &H4, &H0, &H0, &H0, _
&H0, &H0, &H50, &H0, &H0, &H0, &H0, &H0, _
&H0, &H0, &H0, &H0, &H0, &H0, &H10, &H0, _
&H0, &H0, &H10, &H0, &H0, &H0, &H0, &H0, _
&H0, &H0, &H0, &H0, &H80, &H0, &H0, &H80, _
&H0, &H0, &H0, &H80, &H80, &H0, &H80, &H0, _
&H0, &H0, &H80, &H0, &H80, &H0, &H80, &H80, _
&H0, &H0, &HC0, &HC0, &HC0, &H0, &H80, &H80, _
&H80, &H0, &H0, &H0, &HFF, &H0, &H0, &HFF, _
&H0, &H0, &H0, &HFF, &HFF, &H0, &HFF, &H0, _
&H0, &H0, &HFF, &H0, &HFF, &H0, &HFF, &HFF, _
&H0, &H0, &HFF, &HFF, &HFF, &H0, &HFF, &HFF, _
&H0, &HF, &HFF, &HF0, &H0, &H0, &HFF, &H0, _
&HFF, &HF0, &HF, &HF0, &H0, &H0, &HF0, &HFF, _
&HFF, &HFF, &HF0, &HF0, &H0, &H0, &HF0, &HFF, _
&HFF, &HFF, &HF0, &HF0, &H0, &H0, &HF, &HFF, _
&HFF, &HFF, &HFF, &H0, &H0, &H0, &HF, &HFF, _
&HFF, &HFF, &HFF, &H0, &H0, &H0, &HF0, &HFF, _
&HFF, &HFF, &HF0, &HF0, &H0, &H0, &HF0, &HFF, _
&HFF, &HFF, &HF0, &HF0, &H0, &H0, &HFF, &H0, _
&HFF, &HF0, &HF, &HF0, &H0, &H0, &HFF, &HFF, _
&H0, &HF, &HFF, &HF0, &H0, &H0}
Private xImage As Byte() = { _
&H42, &H4D, &HC6, &H0, &H0, &H0, &H0, &H0, _
&H0, &H0, &H76, &H0, &H0, &H0, &H28, &H0, _
&H0, &H0, &HB, &H0, &H0, &H0, &HA, &H0, _
&H0, &H0, &H1, &H0, &H4, &H0, &H0, &H0, _
&H0, &H0, &H50, &H0, &H0, &H0, &H0, &H0, _
&H0, &H0, &H0, &H0, &H0, &H0, &H10, &H0, _
&H0, &H0, &H10, &H0, &H0, &H0, &H0, &H0, _
&H0, &H0, &H0, &H0, &H80, &H0, &H0, &H80, _
&H0, &H0, &H0, &H80, &H80, &H0, &H80, &H0, _
&H0, &H0, &H80, &H0, &H80, &H0, &H80, &H80, _
&H0, &H0, &HC0, &HC0, &HC0, &H0, &H80, &H80, _
&H80, &H0, &H0, &H0, &HFF, &H0, &H0, &HFF, _
&H0, &H0, &H0, &HFF, &HFF, &H0, &HFF, &H0, _
&H0, &H0, &HFF, &H0, &HFF, &H0, &HFF, &HFF, _
&H0, &H0, &HFF, &HFF, &HFF, &H0, &HF0, &HFF, _
&HFF, &HFF, &HF0, &HF0, &H0, &H0, &HFF, &HF, _
&HFF, &HFF, &HF, &HF0, &H0, &H0, &HFF, &HF0, _
&HFF, &HF0, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HF, &HF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HF, &HF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HF, &HF, &HFF, &HF0, &H0, &H0, &HFF, &HF0, _
&HFF, &HF0, &HFF, &HF0, &H0, &H0, &HFF, &HF, _
&HFF, &HFF, &HF, &HF0, &H0, &H0, &HF0, &HFF, _
&HFF, &HFF, &HF0, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0}
Private blankImage As Byte() = { _
&H42, &H4D, &HC6, &H0, &H0, &H0, &H0, &H0, _
&H0, &H0, &H76, &H0, &H0, &H0, &H28, &H0, _
&H0, &H0, &HB, &H0, &H0, &H0, &HA, &H0, _
&H0, &H0, &H1, &H0, &H4, &H0, &H0, &H0, _
&H0, &H0, &H50, &H0, &H0, &H0, &H0, &H0, _
&H0, &H0, &H0, &H0, &H0, &H0, &H10, &H0, _
&H0, &H0, &H10, &H0, &H0, &H0, &H0, &H0, _
&H0, &H0, &H0, &H0, &H80, &H0, &H0, &H80, _
&H0, &H0, &H0, &H80, &H80, &H0, &H80, &H0, _
&H0, &H0, &H80, &H0, &H80, &H0, &H80, &H80, _
&H0, &H0, &HC0, &HC0, &HC0, &H0, &H80, &H80, _
&H80, &H0, &H0, &H0, &HFF, &H0, &H0, &HFF, _
&H0, &H0, &H0, &HFF, &HFF, &H0, &HFF, &H0, _
&H0, &H0, &HFF, &H0, &HFF, &H0, &HFF, &HFF, _
&H0, &H0, &HFF, &HFF, &HFF, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0, &HFF, &HFF, _
&HFF, &HFF, &HFF, &HF0, &H0, &H0}
#End Region
Private blank As Bitmap = New Bitmap( _
New MemoryStream(blankImage))
Private x As Bitmap = New Bitmap(New MemoryStream(xImage))
Private o As Bitmap = New Bitmap(New MemoryStream(oImage))
Private xString As String = "X's turn"
Private oString As String = "O's turn"
Private gameOverString As String = "Game Over"
Private bitmapPadding As Integer = 6
Private Sub InitializeDataGridView(ByVal sender As Object, _
ByVal e As EventArgs) Handles Me.Load
SuspendLayout()
Panel1.SuspendLayout()
ConfigureForm()
SizeGrid()
CreateColumns()
CreateRows()
ResumeLayout(False)
Panel1.ResumeLayout(False)
End Sub
Private Sub ConfigureForm()
AutoSize = True
turn.Size = New System.Drawing.Size(75, 34)
turn.TextAlign = ContentAlignment.MiddleLeft
turn.Text = xString
Panel1.FlowDirection = FlowDirection.TopDown
Panel1.Location = New System.Drawing.Point(0, 8)
Panel1.Size = New System.Drawing.Size(120, 196)
ClientSize = New System.Drawing.Size(355, 200)
Controls.Add(Me.Panel1)
Text = "TicTacToe"
dataGridView1 = New System.Windows.Forms.DataGridView
dataGridView1.Location = New Point(120, 0)
dataGridView1.AllowUserToAddRows = False
Controls.Add(dataGridView1)
SetupButtons()
End Sub
Private Sub SetupButtons()
SetupButton(Button1, "Restart")
Panel1.Controls.Add(Me.turn)
SetupButton(Button2, "Increase Cell Size")
SetupButton(Button3, "Stretch Images")
SetupButton(Button4, "Zoom Images")
SetupButton(Button5, "Normal Images")
End Sub
Private Sub SetupButton(ByVal button As Button, _
ByVal buttonLabel As String)
Panel1.Controls.Add(button)
button.Text = buttonLabel
button.AutoSize = True
End Sub
Private Sub CreateColumns()
Dim imageColumn As DataGridViewImageColumn
Dim columnCount As Integer = 0
Do
Dim unMarked As Bitmap = blank
imageColumn = New DataGridViewImageColumn()
' Add twice the padding for the left and
' right sides of the cell.
imageColumn.Width = x.Width + 2 * bitmapPadding + 1
imageColumn.Image = unMarked
imageColumn.ImageLayout = DataGridViewImageCellLayout.NotSet
imageColumn.Description = "default image layout"
dataGridView1.Columns.Add(imageColumn)
columnCount = columnCount + 1
Loop While columnCount < 3
End Sub
Private Sub CreateRows()
dataGridView1.Rows.Add()
dataGridView1.Rows.Add()
dataGridView1.Rows.Add()
End Sub
Private Sub SizeGrid()
dataGridView1.ColumnHeadersVisible = False
dataGridView1.RowHeadersVisible = False
dataGridView1.AllowUserToResizeColumns = False
dataGridView1.AllowUserToResizeRows = False
dataGridView1.BorderStyle = BorderStyle.None
' Add twice the padding for the top and bottom of the cell.
dataGridView1.RowTemplate.Height = x.Height + _
2 * bitmapPadding + 1
dataGridView1.AutoSize = True
End Sub
Private Sub reset(ByVal sender As Object, _
ByVal e As EventArgs) _
Handles Button1.Click
dataGridView1.Dispose()
InitializeDataGridView(Nothing, Nothing)
End Sub
Private Sub dataGridView1_CellClick(ByVal sender As Object, _
ByVal e As DataGridViewCellEventArgs) _
Handles dataGridView1.CellClick
If turn.Text.Equals(gameOverString) Then Return
Dim cell As DataGridViewImageCell = _
CType(dataGridView1.Rows(e.RowIndex). _
Cells(e.ColumnIndex), DataGridViewImageCell)
If (cell.Value Is blank) Then
If IsOsTurn() Then
cell.Value = o
Else
cell.Value = x
End If
ToggleTurn()
ToolTip(e)
End If
If IsAWin() Then
turn.Text = gameOverString
End If
End Sub
Private Sub dataGridView1_CellMouseEnter(ByVal sender As Object, _
ByVal e As DataGridViewCellEventArgs) _
Handles dataGridView1.CellMouseEnter
Dim markingUnderMouse As Bitmap = _
CType(dataGridView1.Rows(e.RowIndex). _
Cells(e.ColumnIndex).Value, Bitmap)
If markingUnderMouse Is blank Then
dataGridView1.Cursor = Cursors.Default
ElseIf markingUnderMouse Is o OrElse markingUnderMouse Is x Then
dataGridView1.Cursor = Cursors.No
ToolTip(e)
End If
End Sub
Private Sub ToolTip( _
ByVal e As DataGridViewCellEventArgs)
Dim cell As DataGridViewImageCell = _
CType(dataGridView1.Rows(e.RowIndex). _
Cells(e.ColumnIndex), DataGridViewImageCell)
Dim imageColumn As DataGridViewImageColumn = _
CType(dataGridView1.Columns(cell.ColumnIndex), _
DataGridViewImageColumn)
cell.ToolTipText = imageColumn.Description
End Sub
Private Sub dataGridView1_CellMouseLeave(ByVal sender As Object, _
ByVal e As DataGridViewCellEventArgs) _
Handles dataGridView1.CellMouseLeave
dataGridView1.Cursor = Cursors.Default
End Sub
Private Sub Stretch(ByVal sender As Object, _
ByVal e As EventArgs) Handles Button3.Click
For Each column As DataGridViewImageColumn _
In dataGridView1.Columns
column.ImageLayout = DataGridViewImageCellLayout.Stretch
column.Description = "Stretched image layout"
Next
End Sub
Private Sub ZoomToImage(ByVal sender As Object, _
ByVal e As EventArgs) Handles Button4.Click
For Each column As DataGridViewImageColumn _
In dataGridView1.Columns
column.ImageLayout = DataGridViewImageCellLayout.Zoom
column.Description = "Zoomed image layout"
Next
End Sub
Private Sub NormalImage(ByVal sender As Object, _
ByVal e As EventArgs) Handles Button5.Click
For Each column As DataGridViewImageColumn _
In dataGridView1.Columns
column.ImageLayout = DataGridViewImageCellLayout.Normal
column.Description = "Normal image layout"
Next
End Sub
Private Sub MakeCellsLarger(ByVal sender As Object, _
ByVal e As EventArgs) Handles Button2.Click
For Each column As DataGridViewImageColumn _
In dataGridView1.Columns
column.Width = column.Width * 2
Next
For Each row As DataGridViewRow In dataGridView1.Rows
If row.IsNewRow Then Continue For
row.Height = CInt(row.Height * 1.5)
Next
End Sub
Private Function IsAWin() As Boolean
If ARowIsSame() OrElse AColumnIsSame() OrElse ADiagonalIsSame() Then
Return True
Else
Return False
End If
End Function
Private Function ARowIsSame() As Boolean
Dim marking As Bitmap = Nothing
If marking Is blank Then Return False
For Each row As DataGridViewRow In dataGridView1.Rows
If row.IsNewRow Then Continue For
marking = CType(row.Cells(0).Value, Bitmap)
If marking IsNot blank Then
If marking Is row.Cells(1).Value AndAlso _
marking Is row.Cells(2).Value Then Return True
End If
Next
Return False
End Function
Private Function AColumnIsSame() As Boolean
Dim columnIndex As Integer = 0
Dim marking As Bitmap
Do
marking = CType(dataGridView1.Rows(0).Cells(columnIndex).Value, _
Bitmap)
If marking IsNot blank Then
If marking Is _
dataGridView1.Rows(1).Cells(columnIndex).Value _
AndAlso marking Is _
dataGridView1.Rows(2).Cells(columnIndex).Value _
Then Return True
End If
columnIndex = columnIndex + 1
Loop While columnIndex < _
dataGridView1.Columns.GetColumnCount( _
DataGridViewElementStates.Visible)
Return False
End Function
Private Function ADiagonalIsSame() As Boolean
If LeftToRightDiagonalIsSame() Then Return True
If RightToLeftDiagonalIsSame() Then Return True
Return False
End Function
Private Function LeftToRightDiagonalIsSame() As Boolean
Return IsDiagonalSame(0, 2)
End Function
Private Function RightToLeftDiagonalIsSame() As Boolean
Return IsDiagonalSame(2, 0)
End Function
Private Function IsDiagonalSame(ByVal startingColumn As Integer, _
ByVal lastColumn As Integer) As Boolean
Dim marking As Bitmap = CType( _
dataGridView1.Rows(0).Cells(startingColumn).Value, Bitmap)
If marking Is blank Then Return False
If marking Is dataGridView1.Rows(1).Cells(1).Value AndAlso _
marking Is dataGridView1.Rows(2).Cells(lastColumn).Value _
Then Return True
End Function
Private Sub ToggleTurn()
If turn.Text.Equals(xString) Then turn.Text = oString _
Else turn.Text = xString
End Sub
Private Function IsOsTurn() As Boolean
If turn.Text.Equals(oString) Then Return True _
Else : Return False
End Function
<STAThread> Public Shared Sub Main()
Application.Run(New TicTacToe())
End Sub
End Class
using System.IO;
using System.Windows.Forms;
using System.Drawing;
using System;
public class TicTacToe : System.Windows.Forms.Form
{
public TicTacToe()
{
blank = new Bitmap(new MemoryStream(blankImage));
x = new Bitmap(new MemoryStream(xImage));
o = new Bitmap(new MemoryStream(oImage));
this.AutoSize = true;
SetupButtons();
InitializeDataGridView(null, null);
}
private DataGridView dataGridView1;
private Button Button1 = new Button();
private Label turn = new Label();
private Button Button2 = new Button();
private Button Button3 = new Button();
private Button Button4 = new Button();
private Button Button5 = new Button();
private FlowLayoutPanel Panel1 = new FlowLayoutPanel();
#region "bitmaps"
private byte[] oImage = new byte[] {
0x42, 0x4D, 0xC6, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x76,
0x0, 0x0, 0x0, 0x28, 0x0, 0x0, 0x0, 0xB, 0x0, 0x0, 0x0, 0xA,
0x0, 0x0, 0x0, 0x1, 0x0, 0x4, 0x0, 0x0, 0x0, 0x0, 0x0, 0x50,
0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x10,
0x0, 0x0, 0x0, 0x10, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
0x0, 0x80, 0x0, 0x0, 0x80, 0x0, 0x0, 0x0, 0x80, 0x80, 0x0,
0x80, 0x0, 0x0, 0x0, 0x80, 0x0, 0x80, 0x0, 0x80, 0x80, 0x0,
0x0, 0xC0, 0xC0, 0xC0, 0x0, 0x80, 0x80, 0x80, 0x0, 0x0, 0x0,
0xFF, 0x0, 0x0, 0xFF, 0x0, 0x0, 0x0, 0xFF, 0xFF, 0x0, 0xFF,
0x0, 0x0, 0x0, 0xFF, 0x0, 0xFF, 0x0, 0xFF, 0xFF, 0x0, 0x0,
0xFF, 0xFF, 0xFF, 0x0, 0xFF, 0xFF, 0x0, 0xF, 0xFF, 0xF0,
0x0, 0x0, 0xFF, 0x0, 0xFF, 0xF0, 0xF, 0xF0, 0x0, 0x0, 0xF0,
0xFF, 0xFF, 0xFF, 0xF0, 0xF0, 0x0, 0x0, 0xF0, 0xFF, 0xFF,
0xFF, 0xF0, 0xF0, 0x0, 0x0, 0xF, 0xFF, 0xFF, 0xFF, 0xFF,
0x0, 0x0, 0x0, 0xF, 0xFF, 0xFF, 0xFF, 0xFF, 0x0, 0x0, 0x0,
0xF0, 0xFF, 0xFF, 0xFF, 0xF0, 0xF0, 0x0, 0x0, 0xF0, 0xFF,
0xFF, 0xFF, 0xF0, 0xF0, 0x0, 0x0, 0xFF, 0x0, 0xFF, 0xF0,
0xF, 0xF0, 0x0, 0x0, 0xFF, 0xFF, 0x0, 0xF, 0xFF, 0xF0, 0x0,
0x0};
private byte[] xImage = new byte[]{
0x42, 0x4D, 0xC6, 0x0, 0x0, 0x0, 0x0,
0x0, 0x0, 0x0, 0x76, 0x0, 0x0, 0x0, 0x28, 0x0, 0x0, 0x0,
0xB, 0x0, 0x0, 0x0, 0xA, 0x0, 0x0, 0x0, 0x1, 0x0, 0x4, 0x0,
0x0, 0x0, 0x0, 0x0, 0x50, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
0x0, 0x0, 0x0, 0x0, 0x10, 0x0, 0x0, 0x0, 0x10, 0x0, 0x0,
0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x80, 0x0, 0x0, 0x80,
0x0, 0x0, 0x0, 0x80, 0x80, 0x0, 0x80, 0x0, 0x0, 0x0, 0x80,
0x0, 0x80, 0x0, 0x80, 0x80, 0x0, 0x0, 0xC0, 0xC0, 0xC0, 0x0,
0x80, 0x80, 0x80, 0x0, 0x0, 0x0, 0xFF, 0x0, 0x0, 0xFF, 0x0,
0x0, 0x0, 0xFF, 0xFF, 0x0, 0xFF, 0x0, 0x0, 0x0, 0xFF, 0x0,
0xFF, 0x0, 0xFF, 0xFF, 0x0, 0x0, 0xFF, 0xFF, 0xFF, 0x0,
0xF0, 0xFF, 0xFF, 0xFF, 0xF0, 0xF0, 0x0, 0x0, 0xFF, 0xF,
0xFF, 0xFF, 0xF, 0xF0, 0x0, 0x0, 0xFF, 0xF0, 0xFF, 0xF0,
0xFF, 0xF0, 0x0, 0x0, 0xFF, 0xFF, 0xF, 0xF, 0xFF, 0xF0, 0x0,
0x0, 0xFF, 0xFF, 0xF, 0xF, 0xFF, 0xF0, 0x0, 0x0, 0xFF, 0xFF,
0xF, 0xF, 0xFF, 0xF0, 0x0, 0x0, 0xFF, 0xF0, 0xFF, 0xF0,
0xFF, 0xF0, 0x0, 0x0, 0xFF, 0xF, 0xFF, 0xFF, 0xF, 0xF0, 0x0,
0x0, 0xF0, 0xFF, 0xFF, 0xFF, 0xF0, 0xF0, 0x0, 0x0, 0xFF,
0xFF, 0xFF, 0xFF, 0xFF, 0xF0, 0x0, 0x0};
private byte[] blankImage = new byte[] {
0x42, 0x4D, 0xC6, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x76,
0x0, 0x0, 0x0, 0x28, 0x0, 0x0, 0x0, 0xB, 0x0, 0x0, 0x0, 0xA,
0x0, 0x0, 0x0, 0x1, 0x0, 0x4, 0x0, 0x0, 0x0, 0x0, 0x0, 0x50,
0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x10,
0x0, 0x0, 0x0, 0x10, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,
0x0, 0x80, 0x0, 0x0, 0x80, 0x0, 0x0, 0x0, 0x80, 0x80, 0x0,
0x80, 0x0, 0x0, 0x0, 0x80, 0x0, 0x80, 0x0, 0x80, 0x80, 0x0,
0x0, 0xC0, 0xC0, 0xC0, 0x0, 0x80, 0x80, 0x80, 0x0, 0x0, 0x0,
0xFF, 0x0, 0x0, 0xFF, 0x0, 0x0, 0x0, 0xFF, 0xFF, 0x0, 0xFF,
0x0, 0x0, 0x0, 0xFF, 0x0, 0xFF, 0x0, 0xFF, 0xFF, 0x0, 0x0,
0xFF, 0xFF, 0xFF, 0x0, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xF0,
0x0, 0x0, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xF0, 0x0, 0x0,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xF0, 0x0, 0x0, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xF0, 0x0, 0x0, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xF0, 0x0, 0x0, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xF0,
0x0, 0x0, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xF0, 0x0, 0x0,
0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xF0, 0x0, 0x0, 0xFF, 0xFF,
0xFF, 0xFF, 0xFF, 0xF0, 0x0, 0x0, 0xFF, 0xFF, 0xFF, 0xFF,
0xFF, 0xF0, 0x0, 0x0};
#endregion
private Bitmap blank;
private Bitmap x;
private Bitmap o;
private string xString = "X's turn";
private string oString = "O's turn";
private string gameOverString = "Game Over";
private int bitmapPadding = 6;
private void InitializeDataGridView(object sender,
EventArgs e)
{
this.Panel1.SuspendLayout();
this.SuspendLayout();
ConfigureForm();
SizeGrid();
CreateColumns();
CreateRows();
this.Panel1.ResumeLayout(false);
this.ResumeLayout(false);
}
private void ConfigureForm()
{
AutoSize = true;
turn.Size = new System.Drawing.Size(75, 34);
turn.TextAlign = ContentAlignment.MiddleLeft;
turn.Text = xString;
Panel1.Location = new System.Drawing.Point(0, 8);
Panel1.Size = new System.Drawing.Size(120, 196);
Panel1.FlowDirection = FlowDirection.TopDown;
ClientSize = new System.Drawing.Size(355, 200);
Controls.Add(this.Panel1);
Text = "TicTacToe";
dataGridView1 = new System.Windows.Forms.DataGridView();
dataGridView1.Location = new Point(120, 0);
dataGridView1.AllowUserToAddRows = false;
dataGridView1.CellClick += new
DataGridViewCellEventHandler(dataGridView1_CellClick);
dataGridView1.CellMouseEnter += new
DataGridViewCellEventHandler(dataGridView1_CellMouseEnter);
dataGridView1.CellMouseLeave += new
DataGridViewCellEventHandler(dataGridView1_CellMouseLeave);
Controls.Add(dataGridView1);
}
private void SetupButtons()
{
Button1.AutoSize = true;
SetupButton(Button1, "Restart", new EventHandler(Reset));
Panel1.Controls.Add(turn);
SetupButton(Button2, "Increase Cell Size", new EventHandler(MakeCellsLarger));
SetupButton(Button3, "Stretch Images", new EventHandler(Stretch));
SetupButton(Button4, "Zoom Images", new EventHandler(ZoomToImage));
SetupButton(Button5, "Normal Images", new EventHandler(NormalImage));
}
private void SetupButton(Button button, string buttonLabel, EventHandler handler)
{
Panel1.Controls.Add(button);
button.Text = buttonLabel;
button.AutoSize = true;
button.Click += handler;
}
private void CreateColumns()
{
DataGridViewImageColumn imageColumn;
int columnCount = 0;
do
{
Bitmap unMarked = blank;
imageColumn = new DataGridViewImageColumn();
//Add twice the padding for the left and
//right sides of the cell.
imageColumn.Width = x.Width + 2 * bitmapPadding + 1;
imageColumn.Image = unMarked;
dataGridView1.Columns.Add(imageColumn);
columnCount = columnCount + 1;
}
while (columnCount < 3);
}
private void CreateRows()
{
dataGridView1.Rows.Add();
dataGridView1.Rows.Add();
dataGridView1.Rows.Add();
}
private void SizeGrid()
{
dataGridView1.ColumnHeadersVisible = false;
dataGridView1.RowHeadersVisible = false;
dataGridView1.AllowUserToResizeColumns = false;;
dataGridView1.AllowUserToResizeRows = false;
dataGridView1.BorderStyle = BorderStyle.None;
//Add twice the padding for the top of the cell
//and the bottom.
dataGridView1.RowTemplate.Height = x.Height +
2 * bitmapPadding + 1;
dataGridView1.AutoSize = true;
}
private void Reset(object sender, System.EventArgs e)
{
dataGridView1.Dispose();
InitializeDataGridView(null, null);
}
private void dataGridView1_CellClick(object sender,
DataGridViewCellEventArgs e)
{
if (turn.Text.Equals(gameOverString)) { return; }
DataGridViewImageCell cell = (DataGridViewImageCell)
dataGridView1.Rows[e.RowIndex].Cells[e.ColumnIndex];
if (cell.Value == blank)
{
if (IsOsTurn())
{
cell.Value = o;
}
else
{
cell.Value = x;
}
ToggleTurn();
}
if (IsAWin())
{
turn.Text = gameOverString;
}
}
private void dataGridView1_CellMouseEnter(object sender,
DataGridViewCellEventArgs e)
{
Bitmap markingUnderMouse = (Bitmap)dataGridView1.
Rows[e.RowIndex].
Cells[e.ColumnIndex].Value;
if (markingUnderMouse == blank)
{
dataGridView1.Cursor = Cursors.Default;
}
else if (markingUnderMouse == o || markingUnderMouse == x)
{
dataGridView1.Cursor = Cursors.No;
ToolTip(e, true);
}
}
private void ToolTip(DataGridViewCellEventArgs e, bool showTip)
{
DataGridViewImageCell cell = (DataGridViewImageCell)
dataGridView1
.Rows[e.RowIndex].Cells[e.ColumnIndex];
DataGridViewImageColumn imageColumn =
(DataGridViewImageColumn)
dataGridView1.Columns[cell.ColumnIndex];
if (showTip) cell.ToolTipText = imageColumn.Description;
else { cell.ToolTipText = String.Empty; }
}
private void dataGridView1_CellMouseLeave(object sender,
DataGridViewCellEventArgs e)
{
ToolTip(e, false);
dataGridView1.Cursor = Cursors.Default;
}
private void Stretch(object sender, EventArgs e)
{
foreach (DataGridViewImageColumn column in
dataGridView1.Columns)
{
column.ImageLayout = DataGridViewImageCellLayout.Stretch;
column.Description = "Stretched";
}
}
private void ZoomToImage(object sender, EventArgs e)
{
foreach (DataGridViewImageColumn column in
dataGridView1.Columns)
{
column.ImageLayout = DataGridViewImageCellLayout.Zoom;
column.Description = "Zoomed";
}
}
private void NormalImage(object sender, EventArgs e)
{
foreach (DataGridViewImageColumn column in
dataGridView1.Columns)
{
column.ImageLayout = DataGridViewImageCellLayout.Normal;
column.Description = "Normal";
}
}
private void MakeCellsLarger(object sender, EventArgs e)
{
foreach (DataGridViewImageColumn column in
dataGridView1.Columns)
{
column.Width = column.Width * 2;
}
foreach (DataGridViewRow row in dataGridView1.Rows)
{
if (row.IsNewRow) break;
row.Height = (int)(row.Height * 1.5);
}
}
private bool IsAWin()
{
if (ARowIsSame() || AColumnIsSame() || ADiagonalIsSame())
return true;
else return false;
}
private bool ARowIsSame()
{
Bitmap marking = null;
foreach (DataGridViewRow row in dataGridView1.Rows)
{
if (row.IsNewRow) break;
marking = (Bitmap)row.Cells[0].Value;
if (marking != blank)
{
if (marking == row.Cells[1].Value &&
marking == row.Cells[2].Value) return true;
}
}
return false;
}
private bool AColumnIsSame()
{
int columnIndex = 0;
Bitmap marking;
do
{
marking = (Bitmap)
dataGridView1.Rows[0].Cells[columnIndex].Value;
if (marking != blank)
{
if (marking == (Bitmap)dataGridView1.Rows[1]
.Cells[columnIndex].Value
&& marking == (Bitmap)dataGridView1.Rows[2].
Cells[columnIndex].Value) return true;
}
columnIndex = columnIndex + 1;
}
while (columnIndex < dataGridView1.Columns.GetColumnCount(
DataGridViewElementStates.Visible));
return false;
}
private bool ADiagonalIsSame()
{
if (LeftToRightDiagonalIsSame()) { return true; }
if (RightToLeftDiagonalIsSame()) { return true; }
return false;
}
private bool LeftToRightDiagonalIsSame()
{
return IsDiagonalSame(0, 2);
}
private bool RightToLeftDiagonalIsSame()
{
return IsDiagonalSame(2, 0);
}
private bool IsDiagonalSame(int startingColumn, int lastColumn)
{
Bitmap marking = (Bitmap)dataGridView1.Rows[0]
.Cells[startingColumn].Value;
if (marking == blank) return false;
if (marking == dataGridView1.Rows[1].Cells[1]
.Value && marking == dataGridView1.Rows[2]
.Cells[lastColumn].Value) return true;
return false;
}
private void ToggleTurn()
{
if (turn.Text.Equals(xString)) { turn.Text = oString; }
else { turn.Text = xString; }
}
private bool IsOsTurn()
{
if (turn.Text.Equals(oString)) return true;
return false;
}
[STAThread]
public static void Main()
{
Application.Run(new TicTacToe());
}
}
Compiling the Code
This example requires:
- References to the System and System.Windows.Forms assemblies.
For information about building this example from the command line for Visual Basic or Visual C#, see Building from the Command Line (Visual Basic) or Command-Line Building. You can also build this example in Visual Studio by pasting the code into a new project. How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio
How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio
How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio
How to: Compile and Run a Complete Windows Forms Code Example Using Visual Studio
See Also
Tasks
How to: Display Images in Cells of the Windows Forms DataGridView Control
Reference
DataGridView
DataGridViewImageColumn
Other Resources
Programming with Cells, Rows, and Columns in the Windows Forms DataGridView Control