การเขียนโปรแกรมด้วย PocketC# ตอนที่ 5
สวัสดีครับเพื่อน ๆ ทุกคน เรามาถึงตอนที่ 5 แล้วนะครับ ซึ่งในตอนนี้เราจะมารู้จักกับ Control ที่แสนสนุกอีกตัวหนึ่งคือ PictureBox
PictureBox มีหน้าที่แสดงภาพให้ปรากฏบนฟอร์มของเรา ไม่ว่าจะเป็นภาพวาด ภาพถ่าย ซึ่ง PictureBox จะรับข้อมูลภาพที่เรียกว่า Image มาจากคำสั่งในการดึงภาพเข้าสู่โปรแกรมคือคำสั่ง Bitmap ซึ่งสามารถดึงภาพที่มีนามสกุล bmp, jpg, gif และ png ได้ แต่มีข้อจำกัดคือต้องเป็นภาพที่มีความละเอียดไม่เกินประมาณ 1,200x1,200 pixels
เรามาลองสร้าง PictureBox กันดูครับ
เริ่มด้วยการเพิ่มคำสั่งกำหนดว่าจะให้มี control PictureBox ในส่วนของ //Control Declaration ภายใน class iami : Form ของเรา และเพิ่มส่วนของ //Control Properties สำหรับ PictureBox ใน method iami() โดยกำหนดตำแหน่งและกรอบภาพที่จะให้แสดงในฟอร์ม และคำสั่ง Add controls เพื่อให้แสดง PictureBox
class iami : Form
{
//controls declaration
Button button1=new Button();
TextBox textBox1=new TextBox();
Label lbl1=new Label();
PictureBox picBox1=new PictureBox();
static void Main()
{
}
iami()
{
//pictureBox properties
picBox1.Location=new Point(10,120);
picBox1.Size=new Size(220,140);
picBox1.SizeMode=PictureBoxSizeMode.StretchImage;
//Add all controls
Controls.Add(picBox1);
}
จากนั้นขอให้เพื่อน ๆ ลอง build และ run จะเห็นว่า เหมือนเดิม คือไม่เห็นภาพอะไรเลย ทั้งนี้เพราะเรายังไม่ได้สั่งให้ PictureBox รับภาพมาแสดง
คราวนี้ให้เพื่อน ๆ ลองเลือกภาพสักภาพหนึ่งที่มีขนาดไม่เกิน 1200x1200 pixel ก๊อปปี้มาใส่ไว้ใน main memory คือใน My Device โดยไม่ให้เข้าไปอยู่ในโฟลเดอร์ใด ๆ เลยนะครับ แล้วเพิ่มคำสั่งนี้ลงใน method iami() ในส่วนของ //pictureBox properties
picBox1.Image=new Bitmap(
\\Pond.jpg);โดยข้อความภายใน Bitmap( \\ ); ก็คือชื่อไฟล์ภาพของเรานั่นเอง
ลอง build และ run ใหม่ จะเห็นภาพปรากฏออกมาแล้วครับ
ในส่วน คุณสมบัติของ PictureBox มีอยู่บรรทัดหนึ่งคือ SizeMode ซึ่งเรากำหนดให้เป็น StretchImage หมายความว่า ไม่ว่าภาพจะใหญ่เล็กอย่างไร เมื่อมาแสดงใน PictureBox ของเรามันก็จะทำการย่อขยายให้เต็มกรอบโดยอัตโนมัติ สะดวกมากครับ
คราวนี้ถ้าภาพของเราอยู่ในโฟลเดอร์ย่อย ๆล่ะ ทำอย่างไร เราก็สามารถใส่โฟลเดอร์ย่อย ๆ ลงไปได้โดยผ่านเครื่องหมาย \\ ที่อยู่ใน Bitmap เช่น ภาพของเราอยู่ใน My Documents ก็ต้องกำหนดดังนี้
picBox1.Image=new Bitmap(
\\My Documents\\Pond.jpg);ง่ายมากใช่ไหมครับ ลองเปลี่ยนภาพอื่นๆ ขึ้นมาแสดงบ้างเพื่อความคล่องแคล่วในการเขียนโปรแกรมครับ
คราวนี้เพื่อน ๆ อาจจะรู้สึกเบื่อที่ต้องมาแก้ไขโปรแกรม build และ run ใหม่บ่อย ๆ เมื่อต้องการเปลี่ยนภาพ ไม่ต้องตกใจ เรามีตัวช่วยครับ คือการใช้ control อีกตัวหนึ่งทำหน้าที่เปิดไฟล์ ที่เรียกว่า FileDialog เพื่อเราจะสามารถเลือกไฟล์รูปภาพที่ต้องการนำมาแสดงได้อย่างสะดวกง่ายดาย
ขอให้เพื่อน ๆ เพิ่มคำสั่งกำหนด control อีกตัวหนึ่ง ลงในส่วนของ //controls declaration ใน class iami : Form ของเรา
OpenFileDialog ofDlg=new OpenFileDialog();
จากนั้นเราจะกำหนดให้การกดปุ่ม ออก ของเราที่ทำไว้แล้ว เป็นปุ่มที่สั่งให้เปิดไฟล์รูปภาพให้เราเลือกนำมาแสดงใน PictureBox ของเราครับ ขอให้เพื่อนๆ เพิ่มคำสั่งใน method button1_Click(..) ดังนี้ครับ
private void button1_Click(object sender, EventArgs evArgs)
{
ofDlg.Filter=Jpeg|*.jpg|Bitmap|*.bmp|Gif|*.gif;
if(DialogResult.OK= = ofDlg.ShowDialog())
picBox1.Image=new Bitmap(ofDlg.FileName);
}
ในการพิมพ์คำสั่งของ ofDlg.Filter เป็นการกำหนดให้แสดงไฟล์ที่มีนามสกุลเป็น jpg,bmp และ gif เท่านั้น เครื่องหมาย | ที่คั่นกลางระหว่างนามสกุลไฟล์ คือเครื่องหมายขีดแนวตั้งที่มีช่องว่างเล็ก ๆ ตรงกลางนะครับไม่ใช่ตัวแอลหรือตัวไอ
ส่วนคำสั่ง if(DialogResult.OK = = ofDlg.ShowDialog()) เป็นคำสั่งเงื่อนไข คือเมื่อมีการเลือกไฟล์ภาพที่ต้องการแล้ว จึงจะนำไปแสดงผลใน picBox1 ในบรรทัดต่อไป สังเกตว่าท้ายบรรทัดของ if นี่ไม่ต้องมี ; นะครับ
คราวนี้ลอง build และ run ดูครับ จากนั้นลองกดปุ่ม ออก ก็จะเข้าสู่หน้าจอให้เลือกไฟล์รูปภาพ เมื่อเลือกแล้ว ก็จะแสดงภาพที่เราเลือกขึ้นหน้าจอตามต้องการเลยครับ
ก็เท่ากับว่าเพื่อน ๆ ได้เขียนโปรแกรม ดูภาพตามใจฉัน สำเร็จได้ด้วยตนเองแล้วครับ เพื่อน ๆ อาจดัดแปลงเพิ่มขนาด picBox1 ให้ใหญ่เต็มจอ หรือย่อลงเล็ก ๆ ก็ได้ตามแต่การออกแบบเลยครับ เห็นไหมครับ เผลอแป๊บเดียว เขียนโปรแกรมเป็นแล้ว
ขอให้สนุกครับ
[email protected]7 สิงหาคม 2550