Coding Evolution: Delphi XE (Move Control) เทคนิคการลากคอนโทรล

การใช้เทคนิคการเคลื่อนย้าย Control ด้วยการลาก และวาง เป็นวิธีนึงที่ทำให้โปรแกรมดูเป็นมืออาชีพ และมีความเป็นมิตรกับผู้ใช้ (User Friendly) ยิ่งหากเป็นโปรแกรมที่จำเป็นต้องใช้งานอย่างมาก เช่นโปรแกรมที่มีรูปแบบเป็น Visual จำพวกโปรแกรมทำนามบัตร ทำการ์ด ออกแบบรายงาน

การเพิ่ม Control
สร้าง Project เป็นแบบ VCL Forms Application โดยที่กำหนดสีเป็นสีขาว (สมมุติว่าเป็นหน้ากระดาษ)
เพิ่ม TPopupMenu เข้ามาในฟอร์ม

เพิ่ม Popup menu ให้กับฟอร์ม

เขียนคำสั่งใน Event OnClick ของ Menu Add Label

procedure TForm1.AddLabelClick(Sender: TObject);
Var
appLabel: TEdit;
begin
appLabel:=TEdit.Create(Self);
appLabel.Parent:=Self;
appLabel.Text:='Label';
appLabel.Visible:=true;
end;

ตอนนี้เมื่อคลิ๊กเมาส์ขวาแล้วเลือก Add Label ก็จะปรากฎ Edit ขึ้นอยู่ที่ด้านมุมของฟอร์มแล้ว แต่ยังไม่สามารถเคลื่อนย้ายได้ จนกว่าจะทำการ Implement Event ให้ครบสมบูรณ์

ประกาศ Interface ของ Event method ทั้งหมด 4 method มีขอบเขตเป็น Private
เพื่อรองรับ Event ที่จะเกิดขึ้นกับ Control TEdit

procedure MouseDown(Sender: TObject; Button: TMouseButton;Shift: TShiftState; X, Y: Integer);
procedure MouseMove(Sender: TObject; Shift: TShiftState; X,Y: Integer);
procedure MouseUp(Sender: TObject; Button: TMouseButton;Shift: TShiftState; X, Y: Integer);
procedure KeyDown(Sender: TObject; var Key: Word;Shift: TShiftState);

และในส่วนของ Interface ที่เป็น Public ประกาศตัวแปร 2 ตัวคือ

mousePoint: TPoint; (mousePoint ทำหน้าที่เก็บพิกัดของเคอเซอร์บนฟอร์ม)
Move: Boolean; (Move เก็บสถานะของการใช้เคอเซอร์)

คำสั่งภายใน Method : MouseDown

procedure TForm1.MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
if Button=mbLeft then //ถ้าคลิ๊กเมาส์ซ้าย
Begin
Move:=true; //ให้สถานะการเคลื่อนย้ายเป็น true
mousePoint.X:=X; //เก็บค่า X ของเคอเซอร์
mousePoint.Y:=Y; //เก็บค่า Y ของเคอเซอร์
End;
end;

คำสั่งภายใน Method : MouseMove

procedure TForm1.MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);
begin
if Move then //ถ้าสถานะเป็นการเคลื่อนย้าย
Begin
if Sender is TEdit then //ถ้าเป็น Control ประเภท TEdit
Begin
//ปรับค่า Left และ Top ของ TEdit ตามค่าของเคอเซอร์
if X > mousePoint.x then TEdit(Sender).Left:=TEdit(Sender).Left + (x+mousePoint.X) else
if X < mousePoint.x then TEdit(Sender).Left:=TEdit(Sender).Left - (mousePoint.X - X) else
if Y > mousePoint.Y then TEdit(Sender).Top:=TEdit(Sender).Top + (y + mousePoint.Y) else
if Y < mousePoint.Y then TEdit(Sender).Top:=TEdit(Sender).Top - (mousePoint.Y - Y);
End;
end;
end;

คำสั่งภายใน Method : MouseUp

procedure TForm1.MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
Move:=false; //เก็บสถานะการเคลื่อนย้ายเป็น false
end;

คำสั่งภายใน Method : KeyDown
method นี้คือการทำงานของ Event เมื่อกดปุ่ม Delete บน Keyboard เพื่อที่จะลบ Control TEdit ออกไป

procedure TForm1.KeyDown(Sender: TObject; var Key: Word; Shift: TShiftState);
begin
if Key=VK_DELETE then //หากมีการกดปุ่ม Delete
Begin
Sender.Destroy; //ลบ Control ออก
End;
end;

จากนั้นเพื่อให้ Edit ที่ Add เข้าไปจากเมนู Add Label ทำตาม Event ต่างๆ
เราก็ต้องเพิ่ม Event ให้กับ Edit ที่เพิ่มเข้ามาในฟอร์ม โดยกลับไปเพิ่มที่เมนู Add Label เดิมให้สมบูรณ์

procedure TForm1.AddLabelClick(Sender: TObject);
Var
appLabel: TEdit;
begin
appLabel:=TEdit.Create(Self);
appLabel.Parent:=Self;
appLabel.Text:='Label';
appLabel.Visible:=true;
//เพิ่ม Event
appLabel.OnMouseDown:= Self.MouseDown;
appLabel.OnMouseMove:=Self.MouseMove;
appLabel.OnMouseUp:=Self.MouseUp;
appLabel.OnKeyDown:=Self.KeyDown;
end;

จากนั้นก็จะสามารถเคลื่อนย้าย Edit ที่เราใส่เข้าไปได้อย่างอิสระ และเมื่อกดปุ่ม Delete Edit ก็จะถูกลบออกไป