Merhabalar,

var

  MainForm : TclForm;

  AnaLayout : TclLayout;       // Tüm nesneleri tutan ana kutu

  ArkaPlanPanel : TclProPanel; // Mavi çubuk (Yol)

  YuvarlakButon : TclProPanel; // Sürüklenebilen beyaz top

  YuzdeEtiketi : TclProLabel;  // %0 yazan metin

  Surukleniyor : Boolean;      // Şu an sürükleniyor mu?

  HedefX : Integer;            // Butonun gitmesi gereken yeni X konumu

// 1. FARE TIKLANDIĞINDA (Sürükleme Başlar)

void OlaySuruklemeBasladi;

{

  Surukleniyor = True;

  // Görsel tepki: Rengi gri yapalım ki basıldığı anlaşılsın

  YuvarlakButon.clProSettings.BackgroundColor = clAlphaColor.clSilver;

  YuvarlakButon.SetclProSettings(YuvarlakButon.clProSettings);

}

// 2. FARE BIRAKILDIĞINDA (Sürükleme Biter)

void OlaySuruklemeBitti;

{

  Surukleniyor = False;

  // Rengi tekrar beyaza döndür

  YuvarlakButon.clProSettings.BackgroundColor = clAlphaColor.clWhite;

  YuvarlakButon.SetclProSettings(YuvarlakButon.clProSettings);

}

// 3. POZİSYONU GÜNCELLE VE YÜZDE HESAPLA (Ortak Fonksiyon)

void PozisyonuUygula;

var 

  MaksimumMesafe, Yuzde : Integer;

{

  // Gidilebilecek en son nokta: Panel Genişliği - Buton Genişliği

  MaksimumMesafe = ArkaPlanPanel.Width - YuvarlakButon.Width;

  // --- SINIRLAMA (Dışarı taşmayı engelle) ---

  if (HedefX < 0) HedefX = 0;

  if (HedefX > MaksimumMesafe) HedefX = MaksimumMesafe;

  

  // Butonu yeni yerine taşı

  YuvarlakButon.Left = HedefX;

  

  // Yüzde Hesaplama: (Şu anki Konum / Toplam Yol) * 100

  if (MaksimumMesafe > 0)

    Yuzde = Round((HedefX / MaksimumMesafe) * 100);

  else 

    Yuzde = 0;

  

  YuzdeEtiketi.Text = '%' + IntToStr(Yuzde);

}

// 4. FARE ARKA PLAN ÜZERİNDEYKEN HAREKET EDERSE

void OlayArkaPlanHareket;

{

  if (Surukleniyor)

  {

    // Farenin panel üzerindeki konumu direkt alınır.

    // Butonun tam ortası fareye gelsin diye buton genişliğinin yarısını çıkarıyoruz.

    HedefX = MainForm.clSenderMousePosX - (YuvarlakButon.Width / 2);

    PozisyonuUygula;

  }

}

// 5. FARE BUTONUN KENDİSİ ÜZERİNDEYKEN HAREKET EDERSE

void OlayButonHareket;

{

  if (Surukleniyor)

  {

    // Fare zaten butonun üzerinde olduğu için hesaplama biraz farklıdır.

    // Mevcut Konum + Farenin Buton içindeki konumu - Yarım Genişlik

    HedefX = YuvarlakButon.Left + MainForm.clSenderMousePosX - (YuvarlakButon.Width / 2);

    PozisyonuUygula;

  }

}

{

  MainForm = TclForm.Create(Self);

  Surukleniyor = False;

  // --- ANA DÜZEN (Layout) ---

  // Ekranın ortasında duracak, diğer her şeyi içinde tutacak kutu

  AnaLayout = MainForm.AddNewLayout(MainForm, 'AnaLayout');

  AnaLayout.Align = alCenter;

  AnaLayout.Height = 100;

  AnaLayout.Width = 350;

  // --- YÜZDE ETİKETİ (Sağ Taraf) ---

  YuzdeEtiketi = MainForm.AddNewProLabel(AnaLayout, 'YuzdeEtiketi', '%0');

  YuzdeEtiketi.Align = alRight; // Sağa yasla

  YuzdeEtiketi.Width = 60;

  YuzdeEtiketi.Margins.Left = 10;

  YuzdeEtiketi.clProSettings.FontSize = 24;

  YuzdeEtiketi.clProSettings.FontColor = clAlphaColor.clBlack;

  YuzdeEtiketi.clProSettings.FontVertAlign = palCenter; // Dikey ortala

  YuzdeEtiketi.SetclProSettings(YuzdeEtiketi.clProSettings);

  // --- ARKA PLAN ÇUBUĞU (Mavi Yol) ---

  ArkaPlanPanel = MainForm.AddNewProPanel(AnaLayout, 'ArkaPlanPanel');

  ArkaPlanPanel.Align = alClient; // Kalan boşluğu doldur

  ArkaPlanPanel.Height = 40; 

  ArkaPlanPanel.Margins.Top = 30;    // Dikey ortalamak için boşluk

  ArkaPlanPanel.Margins.Bottom = 30;

  

  // Görünüm Ayarları (Yuvarlak Köşeli Mavi)

  ArkaPlanPanel.clProSettings.BackgroundColor = clAlphaColor.clCornflowerblue;

  ArkaPlanPanel.clProSettings.RoundHeight = 20;

  ArkaPlanPanel.clProSettings.RoundWidth = 20;

  ArkaPlanPanel.SetclProSettings(ArkaPlanPanel.clProSettings);

  // --- YUVARLAK BUTON (Sürüklenecek Top) ---

  // DİKKAT: Butonu 'ArkaPlanPanel' içine ekliyoruz.

  YuvarlakButon = MainForm.AddNewProPanel(ArkaPlanPanel, 'YuvarlakButon');

  

  // *** EN ÖNEMLİ KISIM ***

  // 'alNone' demezsek buton sola yapışık kalır, hareket etmez!

  YuvarlakButon.Align = alNone; 

  

  YuvarlakButon.Width = 40;

  YuvarlakButon.Height = 40;

  YuvarlakButon.Left = 0; // Başlangıç konumu

  YuvarlakButon.Top = 0; 

  

  // Görünüm Ayarları (Beyaz Yuvarlak)

  YuvarlakButon.clProSettings.BackgroundColor = clAlphaColor.clWhite;

  YuvarlakButon.clProSettings.RoundHeight = 20;

  YuvarlakButon.clProSettings.RoundWidth = 20;

  YuvarlakButon.clProSettings.BorderColor = clAlphaColor.clGray;

  YuvarlakButon.clProSettings.BorderWidth = 1;

  YuvarlakButon.SetclProSettings(YuvarlakButon.clProSettings);

  // --- OLAYLARI (EVENTS) TANIMLAMA ---

  

  // 1. Arka Plan için Olaylar (Kullanıcı boşluğa tıklayıp sürüklerse)

  MainForm.AddNewEvent(ArkaPlanPanel, tbeOnMouseDown, 'OlaySuruklemeBasladi');

  MainForm.AddNewEvent(ArkaPlanPanel, tbeOnMouseUp, 'OlaySuruklemeBitti');

  MainForm.AddNewEvent(ArkaPlanPanel, tbeOnMouseMove, 'OlayArkaPlanHareket'); 

  

  // 2. Buton için Olaylar (Kullanıcı butonu tutup sürüklerse)

  MainForm.AddNewEvent(YuvarlakButon, tbeOnMouseDown, 'OlaySuruklemeBasladi');

  MainForm.AddNewEvent(YuvarlakButon, tbeOnMouseUp, 'OlaySuruklemeBitti');

  MainForm.AddNewEvent(YuvarlakButon, tbeOnMouseMove, 'OlayButonHareket'); 

  MainForm.Run;

}