IT Knowledge: Button ใน Datagridview แบบ Step by Step ด้วย C#.net

Thursday, May 17, 2012

Button ใน Datagridview แบบ Step by Step ด้วย C#.net

อันที่จริงแล้ว C# ก็มีการเตรียม Datagridview Button มาให้เราแล้ว แต่จะเป็น Datagridview Button ที่มีการแสดงผลเต็ม cell ของ Datagridview ไม่สามารถที่จะบันทึกข้อมูลใน cell นั้นได้ ดังนั้น บทความที่จะนำเสนอต่อไปนี้ เป็นการสร้าง Datagridview Button ที่สามารถทั้ง คลิกปุ่ม เพื่อไปยัง Form ค้นหา หรือจะบันทึกข้อมูลที่ cell ตรง ๆ ก็ได้ เริ่มกันเลยดีกว่าครับ
1. สร้างโปรเจคขึ้นมา 1 โปรเจค กำหนดชื่อโปรเจคเป็น “Button in Datagridview”

2. เพิ่ม Datagridview เข้ามาใน Form1

3. ทำการ Add Column ขึ้นมา 2 Columns โดยใช้ชื่อเป็น “Column1”,”Column2” โดยกำหนด ColumnType เป็น DataGridViewTextBoxColumn ทั้ง 2 Columns

4. ที่ Solution Explorer ทำการสร้าง folder ใหม่ ให้ชื่อเป็น “resources” พร้อมกับเพิ่มรูปที่ต้องการให้ไปแสดงใน Button โดยกำหนดชื่อรูปเป็น “finds”

5. ทำการ Double Click ที่ Form1 จะเข้าสู่หน้าจอการเขียน Code

6. ให้ทำการเขียน Code ด้านล่างนี้ก่อนบันทัด public Form1()

Button btnSelector = new Button(); //สร้าง Buttnon

int pCase; //สำหรับ เก็บส่วนของการเลือก Column

#region Event Select Button
private void SelectorClick(object sender, EventArgs e)
{
switch (pCase)
{
case 1: //value from dataGridView1_CellEnter
{
MessageBox.Show("Show Dialog here!!");
break;
}
}
}

void CreateButton(ref Button myButton)
{
myButton.FlatStyle = FlatStyle.Flat;
myButton.FlatAppearance.BorderSize = 0;
myButton.Size = new Size(25, 19);
myButton.ImageAlign = ContentAlignment.MiddleCenter;
myButton.FlatAppearance.MouseDownBackColor = Color.Transparent;
myButton.FlatAppearance.MouseOverBackColor = Color.Transparent;
myButton.BackColor = Color.Transparent;
myButton.Image = Properties.Resources.finds;//กำหนดรูปภาพ
//myButton.Text = "...";

myButton.Hide();
myButton.Click += new EventHandler(this.SelectorClick);
//--------------------------------------------
}
#endregion

7. แล้วจะพบกับ Error ดังรูปด้านล่าง ก็ไม่ต้องตกใจครับ ให้ทำตามข้อ 8 เลยครับ

8. ที่ Solution Explorer ให้คลิกขวาที่ Resources.resx แล้วเลือก View Designer จะได้ดังรูป

9. คลิกที่ลูกศรลงข้าง Add Resource แล้วเลือก Add Existing File

10. Browse หารูปที่ต้องการแสดงใน Button ในตัวอย่างนี้ผมใช้รูป finds.png แล้วกดปุ่ม open

11. กรณีที่เคยใช้รูปนี้แล้ว โปรแกรมจะถามให้ Save รูปทับรูปเดิมหรือไม่ ให้ตอบ Yes แต่ถ้าไม่พบ warning นี้ ให้ข้ามไปข้อต่อไปเลยครับ

12. จะได้ resource มาดังรูป

13. จากนั้นทำการ save ก็จะพบว่า error ได้หายไปแล้ว

14. กลับไปหน้าต่างการเขียน Code ของ Form1 ทำการเพิ่ม Code ด้านล่างนี้ เข้าไปใน events : CellEnter ของ dataGridView1

if (dataGridView1.Columns[e.ColumnIndex].Name == "Column1")
{
pCase = 1;
Rectangle Loc = dataGridView1.GetCellDisplayRectangle(e.ColumnIndex, e.RowIndex, false);
int Wid = dataGridView1.CurrentCell.Size.Width;
btnSelector.Location = new Point(Loc.X - 25 + Wid, Loc.Y);
btnSelector.Show();
}

15. จะได้ code ดังรูป ซึ่ง code ชุดนี้เป็นการวาด MyButton ใน Cell ของ Column1 ที่ถูก forcus

16. จากนั้นก็เพิ่ม code ด้านล่าง เข้าไปใน events : CellLeave ของ dataGridView1

if (btnSelector.Focused != true)
{
btnSelector.Hide();
}

17. ได้ผลดังรูป อธิบาย code ชุดนี้ได้ว่า เมื่อออกจาก cell นั้น ๆ แล้วก็จะทำการ Hide ปุ่มไว้

18. จากนั้นเพิ่ม code ด้านล่าง เข้าไปใน procedure : private void Form1_Load

CreateButton(ref btnSelector);
dataGridView1.Controls.Add(btnSelector);

19. ได้ผลดังรูป อธิบาย code ชุดนี้เป็นการสร้าง Button ไว้รอตอนที่ทำการโหลด Form1 แต่ยังไม่ได้ทำการวาด Button ลงใน Datagridview1 จนกว่าจะทำการ click cell ใน Column1