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

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

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

1.     mousePoint: TPoint; (mousePoint ทำหน้าที่เก็บพิกัดของเคอเซอร์บนฟอร์ม)
2.     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 ก็จะถูกลบออกไป

จากตัวอย่างเราสามารถนำไปประยุคใช้กับ Control อื่นๆได้ โดยใช้หลักการเดียวกัน




อ้างอิง : http://www.youtube.com/watch?v=jG2AHvXo4R0