|
Bir resmin bir yerden başka bir yere hareketi için resme ait 5 tane olayı tanımlamamız gerekiyor. Biz kodlamayı seçenek olarak kolay seçildiğinde yapmaya başlamıştık. Br resim için 5 olay söz konusuysa 4 resim için 20 olay tanımlamamız gerekiyor. Bu da kodlamanın artmasına ve hakimiyetin azalmasına sebep olmaktadır. Tanımlanan bu 5 olayı tüm resimler için ortak olarak tanımlamamız gerekir. Bunun hangi resim üzerinde işlem yaptığımıza ve bu resmin hangi resmi etkilediğine dikkat etmemiz gerekir. Şimdi bu işlemleri yapalım.
Adım 1: Öncelikle resimlere ait olan olayları silelim. Bunun için img1 resmini seçelim. MouseDown, MouseUp, MouseMove, DragEnter, DragDrop olaylarını silelim. Projeyi kaydedip çalıştıralım. Hata yapmayalım.
Adım 2: Şimdi mg2 resmini seçelim. MouseDown, MouseUp, MouseMove, DragEnter, DragDrop olaylarını silelim. Projeyi kaydedip çalıştıralım. Hata yapmayalım.
Adım 3: Hatırlarsanız iki resim için toplam 10 tane olay tanımlıydı. img2 ile başlayan MouseDown, MouseUp, MouseMove, DragEnter, DragDrop olaylarını silelim. Projeyi kaydedip çalıştıralım. Hata yapmayalım.
Adım 4: Şimdi img1 resmi için olayları yeniden tanımlayacağız. Öncelikle MouseDown olayını tanımlayalım. Burada program olayın ismini img1_MouseDown olarak tanımlamıştı. Bu olayı aşağıdaki gibi tanımlayalım.
private void img_MouseDown(object sender, MouseEventArgs e)
{
i = 0;
img2.AllowDrop = true;
img2.BorderStyle = BorderStyle.Fixed3D;
}
Adım 5: Yukarıdaki kodlarda i değeriyle hangi resmin tetiklendiğini belirlemiştik. Ancak biz bu işlemi otomatik olarak yapacağız. Hatırlarsanız resimlerin isimleri için img isminde bir dizi tanımlamıştık. MouseDown olayının hangi resim tarafından kullanıldığını belirledikten bu resmin kaçınsı sırada olduğunu belirlememiz gerekir.
private void img_MouseDown(object sender, MouseEventArgs e)
{
i = Array.FindIndex(img, val => val.Equals(((PictureBox)sender)));
}
Adım 6: Resim seçildiğinde sürükleme işlemi için gerekli olan yolun belirlenmesi için yollar isminde bir dizi tanımlamıştık. Hatırlarsanız ilk resmi seçtiğimizde ikinci resmin AllowDrop özelliğini true yapıp BorderStyle özelliğini de Fixed3D yapmıştık. Şimdi bunu dizi yardımıyla gerçekleştirelim.
private void img_MouseDown(object sender, MouseEventArgs e)
{
i = Array.FindIndex(img, val => val.Equals(((PictureBox)sender)));
img[yollar[i][0]].AllowDrop = true;
img[yollar[i][1]].AllowDrop = true;
img[yollar[i][0]].BorderStyle = BorderStyle.FixedSingle;
img[yollar[i][1]].BorderStyle = BorderStyle.FixedSingle;
}
Adım 7: İlk olayımızı resimlerden bağımsız bir şekilde tanımladık. Artık bunu tüm resimlere tanımlayabiliriz. Seçenek olarak kolay seçildiği için şu an 4 tane resmimiz var. İlk resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseDown olayına gelelim. Açılır kutudan img_MouseDown olayını seçelim. Projeyi kaydedip çalıştıralım. İlk resmi seçtiğimizde ikinci ve üçüncü resmin etrafının çizildiğini görürsünüz.
Adım 8: İkinci resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseDown olayına gelelim. Açılır kutudan img_MouseDown olayını seçelim. Projeyi kaydedip çalıştıralım. İkinic resmi seçtiğimizde birinci ve dördüncü resmin etrafının çizildiğini görürsünüz.
Adım 9: Üçüncü resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseDown olayına gelelim. Açılır kutudan img_MouseDown olayını seçelim. Projeyi kaydedip çalıştıralım. Üçüncü resmi seçtiğimizde birinci ve dördüncü resmin etrafının çizildiğini görürsünüz.
Adım 10: Dördüncü resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseDown olayına gelelim. Açılır kutudan img_MouseDown olayını seçelim. Projeyi kaydedip çalıştıralım. Dördüncü resmi seçtiğimizde ikinci ve üçüncü resmin etrafının çizildiğini görürsünüz.
Adım 11: Dikkat ettinizmi bilmiyorum, tek olayla 4 resmi kontrol etmiş olduk. Şimdi MouseUp olayını düzenleyelim. Program bu olaya img1_MouseUp ismini vermişti. Bu olayı aşağıdaki gibi tanımlayalım.
private void img_MouseUp(object sender, MouseEventArgs e)
{
if (i > -1)
{
dragging = false;
img2.AllowDrop = false;
img2.BorderStyle = BorderStyle.None;
i = -1;
}
}
Adım 12: Burada i değeri -1 değerinden büyük ise mevcut ayarların pasif hale gelmesini sağlıyorduk. Buna göre bu işlemleri tanımladığımız diziler yardımıyla gerçekleştirelim.
private void img_MouseUp(object sender, MouseEventArgs e)
{
if (i > -1)
{
dragging = false;
img[yollar[i][0]].AllowDrop = false;
img[yollar[i][1]].AllowDrop = false;
img[yollar[i][0]].BorderStyle = BorderStyle.None;
img[yollar[i][1]].BorderStyle = BorderStyle.None;
i = -1;
yedek = null;
}
}
Burada yedek isimli bir değişken var. Bu değişken yardımıyla resmi kopyala işlemini gerçekleştiriyoruz.
Adım 13: Şimdi tanımladığımız bu olayı tüm resimlerin MouseUp olayına ekleyelim. İlk resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseUp olayına gelelim. Açılır kutudan img_MouseUp olayını seçelim. Projeyi kaydedip çalıştıralım. İlk resmi seçtiğimizde ikinci ve üçüncü resmin etrafının çizildiğini, bıraktığımızda iptal olduğunu görürsünüz.
Adım 14: İkinci resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseUp olayına gelelim. Açılır kutudan img_MouseUp olayını seçelim. Projeyi kaydedip çalıştıralım. İkinci resmi seçtiğimizde birinci ve dördüncü resmin etrafının çizildiğini, bıraktığımızda iptal olduğunu görürsünüz.
Adım 15: Üçüncü resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseUp olayına gelelim. Açılır kutudan img_MouseUp olayını seçelim. Projeyi kaydedip çalıştıralım. Üçüncü resmi seçtiğimizde birinci ve dördüncü resmin etrafının çizildiğini, bıraktığımızda iptal olduğunu görürsünüz.
Adım 16: Dördüncü resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseUp olayına gelelim. Açılır kutudan img_MouseUp olayını seçelim. Projeyi kaydedip çalıştıralım. Dördüncü resmi seçtiğimizde ikinci ve üçüncü resmin etrafının çizildiğini, bıraktığımızda iptal olduğunu görürsünüz.
Adım 17: Sıra geldi MouseMove olayına. Program bu olaya img1_MouseMove ismini vermişti. Bu olayı aşağıdaki gibi tanımlayalım.
private void img_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left && i > -1)
{
((PictureBox)sender).DoDragDrop(((PictureBox)sender).Image, DragDropEffects.Copy);
}
}
Adım 18: Burada da i değişkeninin değerine göre dizi elemanları yardımıyla resimşerin özelliklerini sıfırlayalım.
private void img_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left && i > -1)
{
((PictureBox)sender).DoDragDrop(((PictureBox)sender).Image, DragDropEffects.Copy);
}
}
Adım 19: Şimdi tanımladığımız bu olayı tüm resimlerin MouseMouse olayına ekleyelim. İlk resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseMove olayına gelelim. Açılır kutudan img_MouseMove olayını seçelim. Projeyi kaydedip çalıştıralım. İlk resmi seçtiğimizde ikinci ve üçüncü resmin etrafının çizildiğini, bıraktığımızda iptal olduğunu görürsünüz.
Adım 20: İkinci resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseUp olayına gelelim. Açılır kutudan img_MouseUp olayını seçelim. Projeyi kaydedip çalıştıralım. İkinci resmi seçtiğimizde birinci ve dördüncü resmin etrafının çizildiğini, bıraktığımızda iptal olduğunu görürsünüz.
Adım 21: Üçüncü resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseUp olayına gelelim. Açılır kutudan img_MouseUp olayını seçelim. Projeyi kaydedip çalıştıralım. Üçüncü resmi seçtiğimizde birinci ve dördüncü resmin etrafının çizildiğini, bıraktığımızda iptal olduğunu görürsünüz.
Adım 22: Dördüncü resmi seçelim. Properties panelinden şimşek işaretini seçelim. MouseUp olayına gelelim. Açılır kutudan img_MouseUp olayını seçelim. Projeyi kaydedip çalıştıralım. Dördüncü resmi seçtiğimizde ikinci ve üçüncü resmin etrafının çizildiğini, bıraktığımızda iptal olduğunu görürsünüz.
Adım 23: Şimdi resimlere ait sürükle bırak olayılarını düzenleyelim. İlk önce DragEnter olayını düzenleyelim. Program bu olayın ismini img1_DragEnter olarak belirlemişti. Bu olayı aşağıdaki gibi tanımlayalım.
private void img_DragEnter(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent(DataFormats.Bitmap) && i > -1)
{
e.Effect = DragDropEffects.Copy;
dragging = true;
}
else
{
e.Effect = DragDropEffects.None;
dragging = false;
}
}
Adım 24: Şimdi tanımladığımız bu olayı tüm resimlerin DragEnter olayına ekleyelim. Bu işlemi kısa yoldan şöyle yapabiliriz. Bu olayı kullanacak tüm resimleri Ctrl tuşuna basarak farenin sol tuşuyla seçelim. Properties panelinden şimşek işaretini seçelim. DragEnter olayına gelelim. Açılır kutudan img_DragEnter olayını seçelim. Projeyi kaydedip çalıştıralım. Seçilen resmin gideceği yollarda sürükleme işleminin yapılabildiğini görürsünüz.
Adım 25: Şimdi DragDrop olayını düzenleyelim. Program bu olayın ismini img1_DragDrop olarak belirlemişti. Bu olayı aşağıdaki gibi tanımlayalım.
private void img_DragDrop(object sender, DragEventArgs e)
{
if (i > -1 && dragging == true)
{
imgYedek = ((PictureBox)sender).Image;
Image getPicture = (Bitmap)e.Data.GetData(DataFormats.Bitmap);
((PictureBox)sender).Image = getPicture;
img1.Image = imgYedek;
img2.AllowDrop = false;
img2.BorderStyle = BorderStyle.None;
i = -1;
imgYedek = null;
dragging = false;
}
}
Adım 26: Burada ikinci resmin kopyasının imgYedek değişkeniyle hafızaya alındığını görürsünüz. Daha sonra bu resmin ilk resme aktarıldığı görülmektedir. Ayrca tüm işlemlerin sıfırlandığına dikkat edelim. Bu işlemleri i değişkeni yardımıyla dizilerde gerçekleştireceğiz.
private void img_DragDrop(object sender, DragEventArgs e)
{
if (i > -1 && dragging == true)
{
imgYedek = ((PictureBox)sender).Image;
Image getPicture = (Bitmap)e.Data.GetData(DataFormats.Bitmap);
((PictureBox)sender).Image = getPicture;
img[i].Image = imgYedek;
img[yollar[i][0]].AllowDrop = false;
img[yollar[i][1]].AllowDrop = false;
img[yollar[i][0]].BorderStyle = BorderStyle.None;
img[yollar[i][1]].BorderStyle = BorderStyle.None;
i = -1;
imgYedek = null;
dragging = false;
}
}
Adım 27: Şimdi tanımladığımız bu olayı tüm resmilerin DragDrop olaylarına aktaralım. Resimleri seçelim. Properties panelinden şimşek işaretini seçelim. DragDrop olayına gelelim. Açılır kutudan img_DragDrop olayını seçelim. Projeyi kaydedip çalıştıralım. Resimlerin yer değiştirdiğini görürsünüz.
Uygulamanın bu aşamasına ait kodları buradan indirebilirsiniz.
|