C# FlowLayoutPanel Kullanımı – Satranç Tahtası

C# FlowLayoutPanel Kullanımı – Satranç Tahtası dersim ile C# Eğitim setime devam ediyorum. Bu dersimizde yeni tanıştığım bir nesne üzerinde bir örnek yapacağız. Bu örneğimizde hem C# FlowLayoutPanel nesnesini tanıyacağız hemde FlowLayoutPanel kullanarak dinamik butonlar ile bir bir satranç tahtası örneği yapacağız.

C# FlowLayoutPanel Kullanımı – Satranç Tahtası

FlowLayoutPanel nesnesini kısa süre önce öğrendiğimi itiraf etmeliyim. Daha önce hiç merak edip incelememiştim. Aslında ne kadarda faydalı bir nesneymiş. Keşke daha önce uğraşsaydım diye düşündüm. İnternetten araştırmalar yaptım ve nesneyi yeteri kadar öğrendikten sonra dersini yazmak istedim. Bu dersimizde yine internetten bulduğum ama üzerine biraz düzenlemeler ve bana göre iyileştirmeler yaptığım bir örneği anlatacağım.  İlk olarak FlowLayoutPanel nedir? ona bakalım.

FlowLayoutPanel Nedir?

FlowLayoutPanel bir container’dır. Yani bir kapsayıcı nesnedir. Flow kelimesinin anlamına baktığımızda Akış, Akım, Debi olduğunu görürüz. Buna akışkan dememiz çokta yanlış olmayacaktır.  Layout kelimesinin anlamına baktığımızda Yerleşim olduğunu görürüz. Yani içerisine eklediğimiz nesneleri akışkan bir şekilde otomatik olarak yerleştiren bir nesnedir diyebiliriz. Buradaki akışkandan kasıt, içerisine eklenen nesneleri genişlik olarak alanlarının dışına çıkarmadan aşağı doğru düzenli bir şekilde eklenmesidir. Kısacası içindeki nesneleri kendi boyutlarına göre içinde sıralayan bir nesnedir. :)

Bu nesne ne işimize yarar derseniz. Size şu dersimi göstermek isterim. C# Dinamik Nesne Oluşturma ve Forma Ekleme bu dersimi incelerseniz, burada buttonların ekrandan taşmaması sağlamak için formun height ve width özelliği üzerinden hesaplamalar yaparak genişlikte yer kalmadığında alt satıra inmesi amacı ile yazdığımız kodlara bakın. :) O zamanlarda eğer bu nesneyi biliyor olsaydım hiç uğraşır mıydım o kodları yazmakla.

Görüldüğü gibi, FlowLayoutPanel’in boyutları değişşe bile içerisindeki nesneler otomatik olarak sıraya dizilir.

C# FlowLayoutPanel Özellikleri

Burada tüm özelliklerini değilde en çok işimize yarayacak olan özelliklerini anlatacağım.

• AutoScroll (Otomatik Kaydırma Çubuğu): Bu özellik True ise eklenen nesneler FlowLayoutPanel sınırlarından taşıyorsa sağ tarafta aşağı yukarı kaydırma çubuğu çıkar. Bu şekilde aşağı taşan nesnelere ulaşabilirsiniz.
• FlowDirection (Akış Yönü): Bu özellikte dört farklı seçeneğimiz vardır. Bu seçenekler eklenen nesnelerin nasıl dizileceğini ayarlar.
  • LeftToRight : Nesneleri soldan sağa doğru sıralar
  • TopDown : Nesneleri  yukarıdan aşağıya doğru sıralar
  • BottomUp : Nesneleri aşağıdan yukarıya doğru ssıralar
  • RightToLeft : Nesneleri sağdan sola doğru sıralar
• WrapContents (Paket İçeriği):  False olarak ayarlanırsa, eklenen nesneler, FlowLayoutPanel’in  genişliğini dikkate almadan sürekli akış yönüne göre sıralanır. Varsayılan olarak True olduğundan FlowLayoutPanel’in genişlik sınırına kadar gelindiğinde alt satıra geçerek devam eder.

C# FlowLayoutPanel Kullanımı – Satranç Tahtası

İlk olarak bir form açalım ve toolbox’tan ya da kod ile dinamik olarak FlowLayoutPanel nesnesini formumuza ekleyelim. Ben bu dersimde FlowLayoutPanel nesnesini kod ile forma ekleyeceğim. Satranç tahtası örneğini de bir button nesnesi bir de picturebox nesnesi ile yapacağım. Tabi button ve picturebox nesneleri de dinamik olarak eklenecek.

Ekran görüntüsü şu şekilde olacak. Soldaki satranç tahtası dinamik butonlarla, sağdaki tahtada picturebox’lar ile yapılmıştır.

Şimdi kodlarımızı vermeye geçebiliriz.

        private void santranc_tahtasi_Load(object sender, EventArgs e)
        {
            this.Height = 500;
            this.Width = 950;
            this.BackColor = Color.Gray;
            button_ile();
            picturebox_ile();
        }

Nesneleri forma eklemeden önce formun genişliğini ayarlayalım. Eklenen nesnelerin daha net görülmesi için formun arkaplan rengini de gri yaptık.

Button İle Satranç Tahtası

  void button_ile()
        {
            FlowLayoutPanel flowLayoutPanel1 = new FlowLayoutPanel();
            flowLayoutPanel1.Height = 450;
            flowLayoutPanel1.Width = 450;
            flowLayoutPanel1.Location = new Point(0, 0);
            flowLayoutPanel1.WrapContents = true;
            this.Controls.Add(flowLayoutPanel1);

            int sira = 0;
            for (int i = 0; i < 8; i++)
            {
                for (int j = 0; j < 8; j++)
                {
                    Button btn = new Button();
                    btn.Size = new Size(50, 50);
                    if (i % 2 == 0)
                    {
                        if (sira == 0)
                        {
                            sira++;
                            btn.BackColor = Color.White;
                        }
                        else
                        {
                            sira = 0;
                            btn.BackColor = Color.Black;
                        }
                        flowLayoutPanel1.Controls.Add(btn);
                    }
                    else
                    {
                        if (sira == 0)
                        {
                            sira++;
                            btn.BackColor = Color.Black;
                        }
                        else
                        {
                            sira = 0;
                            btn.BackColor = Color.White;
                        }
                        flowLayoutPanel1.Controls.Add(btn);
                    }
                }
            }
        }

Kodları açıklamak gerekirse;

• İlk olarak dinamik olarak ekleyeceğimiz FlowLayoutPanel nesnesini üretiyoruz.
• FlowLayoutPanel’in özelliklerini ayarlıyoruz.
• FlowLayoutPanel nesnesini forma ekliyoruz.
• sira adında bir değişken tanımladık. Bu değişkeni kullanarak satranç tahtasını görüntüsünü oluşturacağız. Bu sebeple önemlidir.
• İlk for döngüsüyle satranç tahtasının ilk satırını eklemeye başlıyoruz..
• ikinci döngüye girdiğimizde, ilk döngünün i değerinin modunu alıyoruz.
  • Bunu yapmamızın sebebi eklenen ilk satır beyaz ile başlarken eklenecek ikinci satırın siyah ile başlamasını istiyoruz.
  • Eğer burada mod alma işlemi yapmadan devam edersek ilk kolon full beyaz olacak.
  • 0%2 = 0 ilk satır beyaz ile başlar.
  • 1%2 = 1 ikinci satır siyah ile başlar.
  • 2%2 = 0 üçüncü satır beyaz ile başlar.
• Sıra değişkenine değer ataması yapıp sıfırlayarak bir beyaz bir siyah button ekliyoruz.
• İlk for döngüsünde bir döngü tamamlandıktan sonra görselde gördüğünüz ilk satır eklenmiş oluyor.
• Tablo mantığı ile düşünürsek, ilk döngü sayesinde ilk satır, ikinci döngü sayesinde de ilk satıra 8 kolon eklenmiş oluyor.

Burada dikkat edilmesi gereken kısım butonların ve FlowLayoutPanel ‘in ölçüleridir. Her satırda ve kolonda 8’er button var. Yani toplamları 450 px yapıyor. Eğer FlowLayoutPanel 450 piksel genişliğinde olmazsa yukarıdaki görselde gördüğünüz görüntüyü elde edemezsiniz. Diyelim ki butonları 75 piksel yaptınız. O zaman FlowLayoutPanel ‘in genişliği ve yüksekliği 75*8 = 600 piksel olmalıdır.

Aşağıda, yukarıdaki kodların picturebox ile yapılmış hali vardır.

        void picturebox_ile()
        {
            FlowLayoutPanel flowLayoutPanel1 = new FlowLayoutPanel();
            flowLayoutPanel1.Height = 450;
            flowLayoutPanel1.Width = 450;
            flowLayoutPanel1.Location = new Point(475, 0);
            this.Controls.Add(flowLayoutPanel1);

            int sira = 0;
            for (int i = 0; i < 8; i++)
            {
                for (int j = 0; j < 8; j++)
                {
                    PictureBox pc = new PictureBox();
                    pc.Size = new Size(50, 50);
                    if (i % 2 == 0)
                    {
                        if (sira == 0)
                        {
                            sira++;
                            pc.BackColor = Color.White;
                        }
                        else
                        {
                            sira = 0;
                            pc.BackColor = Color.Black;
                        }
                        flowLayoutPanel1.Controls.Add(pc);
                    }
                    else
                    {
                        if (sira == 0)
                        {
                            sira++;
                            pc.BackColor = Color.Black;
                        }
                        else
                        {
                            sira = 0;
                            pc.BackColor = Color.White;
                        }
                        flowLayoutPanel1.Controls.Add(pc);
                    }
                }
            }
        }

C# FlowLayoutPane ile Yapılabilecek Örnekler

Örnek 1:

Bir otobüs firmasında seçilen otobüslerin koltuklarının durumu hakkında görsel bir çalışma yapmak isteyebilirsiniz. Bu nesneyi kullanarak tablodan otobüs bazlı çektiğiniz rezervasyon, satış gibi bilgilerle hangi koltuğun dolu, rezerve yada boş olduğunu gösterebilirsiniz. İnternet üzerinden yapılan koltuk rezervasyonu sitelerinde göründüğü gibi. Butonların arkaplan rengi ile koltukta oturan kişinin bay mı bayan mı olduğunu da gösterebilirsiniz.

Örnek 2:

Bir sinema salonu için seçilen salondaki koltukların satılıp satılmadığını bu nesneye eklediğiniz butonlar üzerinden otobüs firması uygulamasında olabileceği gibi gösterebilirsiniz.

Yukarıdaki örnekleri göz önüne alırsak benzer bir çok proje için kullanılabilir.

• Bir araç kiralama uygulamalarında mevcut araçların durumlarını göstermek için,
• Bir oteldeki odalarının durumunu göstermek için,
• Bir güzellik salonunda salonların rezervasyon durumları için,

Ve daha bir çok benzer uygulama türü için kullanılabilir. Gerçekten çok kullanışlı bir nesnedir.

C# FlowLayoutPanel Kullanımı – Satranç Tahtası dersimiz de bu kadardı arkadaşlar. Diğer derslerimizde görüşmek üzere.

C Sharp Eğitim Seti eğitimi sayfasına gitmek için tıklayınız. Derslerime özel olarak hazırladığım Github Projeme bu bağlantıdan ulaşabilirsiniz… Basit bir konu olduğundan dolayı bu kodları içeren projeyi Github’a yükleme gereği duymadım.

Sağlıcakla ve takipte kalın.