‫Tekrar hoş geldiniz.
‫Şimdi nihayet Grid'i kullanma zamanı.
‫Ve daha önce yığın panelinin ve raf panelinin nasıl kullanıldığını gördünüz ve bunlar güne iyi bir şekilde istiflendi ve işleri
‫tamamladı.
‫Şimdi de nesneleri bir ızgara içinde konumlandırmamızı sağlayan ızgaraya göz atacağız ve basitçe iki
‫kere iki ızgara kullanarak başlayacağız.
‫Her şeyden önce, bunun için ihtiyacımız olan şey bir sütun ve bir satır tanımıdır, böylece ızgaramızın içinde ilerleyebiliriz.
‫Örnek dosyanıza gidin ve ızgara içinde bir ızgara nokta sütun tanımı oluşturun.
‫Ve burada farklı sütunlarınızı tanımlayabilirsiniz.
‫Öncelikle, çoğul sütun tanımlarına ihtiyacınız var ve ardından devam edip bireysel sütun tanımlarınızı
‫oluşturabilirsiniz.
‫Örneğin, devam edip burada bir tane oluşturabilirsiniz.
‫Tek bir satırda basit tutacağım, aynen böyle.
‫Ve burada tanımlamak istediğim şey sadece genişlik ve en.
‫Diyelim ki bunu 100 olarak ayarladım ve şimdi de 100 genişliğinde olacak başka bir sütun
‫oluşturalım.
‫Şimdi bu yeterli değil.
‫Ayrıca satırlara da ihtiyacımız var, ancak yalnızca bir satıra sahip olmak istiyoruz.
‫Şimdi sadece bir satırla başlayalım ve ilk olarak bir düğme oluşturacağım
‫ve bu düğme "Merhaba" gibi bir şey söyleyecek ve ızgara nokta sütunu sıfırda olacak.
‫Ve şimdi ikinci bir düğme oluşturuyorum, bu da ızgara, yani birinci sütun olmalı.
‫Şimdi tasarımımıza bakarsak iki düğmemiz olduğunu görebiliriz.
‫Merhaba.
‫Nasıl göründüğünü görmek için kodumuzu çalıştıralım.
‫Bu arada, burada görebileceğiniz gibi sadece 100 piksel genişliğindedirler, bu nedenle genişlik 100 piksel ile sınırlıdır.
‫Yani buraya bir toplam değer eklerseniz, bu değer genişlikte piksel olarak kullanılacaktır.
‫Burada görebileceğiniz gibi, bir sütun bu kadar geniştir.
‫Ve elbette, buraya kolayca birkaç sütun daha koyabileceğimizi söyleyebiliriz.
‫Bunu yapabiliriz ve daha sonra da yaparız.
‫Ancak bunu yapmadan önce size çok önemli bir şey göstermek istiyorum.
‫Şimdi XAML'imi buraya sürüklersem, bu aslında yararlı olacaktır çünkü farkı doğrudan kullanıcı arayüzümüzde göreceğiz.
‫Ve genişliği 100'den otomatik olarak değiştirmek istiyorum.
‫Ve gördüğünüz gibi, otomatik ne yapar.
‫Otomatik olarak yalnızca öğenin içinde bulunan tüm içeriği sığdırmak için gereken genişliği
‫alır.
‫Yani bizim durumumuzda, düğmenin Hi there adında bir metni var ve hi there'nin ihtiyaç duyduğu veya gerektirdiği alan
‫bu kadar.
‫Ayrıca düğmemizin genişliği de bu kadar olacak.
‫Ve görebileceğiniz gibi, bu ilk sütun tanımı içindir.
‫Bu yüzden ilk sütun tanımında, orada merhaba yazan düğmemiz bu şekilde veya bu düğme değiştirilir.
‫Şimdi görebileceğiniz gibi 59 olarak değişti. 5 piksel.
‫Biraz daha metin eklersem, biraz daha metin, 153'e genişlettiğini görebilirsiniz. 5 piksel.
‫Dolayısıyla, her şeyin gerçekte ne kadar alana ihtiyaç duyduğuna bağlı olarak doğru şekilde sığmasını istiyorsanız, kolayca devam edebilir ve otomatik
‫kullanabilirsiniz.
‫Ancak sütunları tam olarak aynı genişlikte yapmak istersem ne olur?
‫Elbette burada tam değerleri veya sabit değerleri kullanabilirim, ancak yıldız da kullanabilirim.
‫Ve yıldızın yapacağı şey, eğer hepsinde yıldız varsa, basitçe diyecek ki, tamam, tüm
‫alanı kapla.
‫Ve bu durumda, yalnızca bu sütunun sahip olduğu alan mevcut ve diğerleriyle tamamen
‫aynı.
‫Yani artık bir ağırlıklandırma var.
‫Yani bunun bir ağırlığı var ve bunun da bir ağırlığı var.
‫Yani eşit ağırlıktadırlar, bu da eşit genişlikte oldukları anlamına gelir.
‫Bunu değiştirmek istersek, diyelim ki buradaki ikinci düğmeyi ilkinin iki katı
‫genişliğinde yapmak istiyorum, çift yıldız kullanabilirim.
‫Şimdi bu ilkinden iki kat daha geniş olacak.
‫Örneğin, genişlik olarak sol tarafta beşte üç ve sağ tarafta 2/5 olmasını
‫istersem.
‫Burada görebileceğiniz gibi bu yaklaşımı basitçe kullanabilirim.
‫Yani yıldızın üç katı ve yıldızın iki katı.
‫Yani yaptığı şey, aslında hepsini toplamak ve sonra sadece burada ayarlanmış olanın çoklu saniyesini almak.
‫Diyelim ki elimizde üç ve iki var.
‫Peki ne yapıyor, diyor ki, tamam, şimdi toplam beş oldu.
‫Mevcut birimler ve ben bu birimlerin 5'te 3'ünü alacağım.
‫Şimdi, devam edip 100 gibi bir şey bile yapabilirsiniz.
‫Gördüğünüz gibi bu 100 dolar alıyor.
‫Ve bu sadece iki kişi alır.
‫Böylece genişliklerle bu şekilde oynayabilirsiniz.
‫Aynı şey yükseklikler için de geçerli.
‫Şimdi devam edelim ve bir satır tanımı oluşturalım.
‫Yani ızgara nokta satır tanımları.
‫Ve burada devam edip satır tanımlarımızı oluşturabiliriz.
‫Birincisi ve ben de basit tutacağım, tek sıra gibi.
‫Ve bunun bir yüksekliğe ihtiyacı var.
‫Bu yüzden diyeceğim ki, tamam, yıldız yüksekliğine sahip olmak istiyorum.
‫Ve şimdi aynı şeyi ikinci sıra için tekrar kullanıyoruz.
‫Ve şimdi görebileceğiniz gibi iki satırımız var.
‫Biri burada, ikincisi de altta.
‫Ve gördüğünüz gibi, ikinci satırda henüz herhangi bir içerik yok.
‫Şimdi bunu değiştirelim, diyelim ki öncelikle bu düğmeyi en alta koyalım.
‫Doğru.
‫Peki bunu nasıl yapabiliriz?
‫Basitçe grid nokta satırını kullanırız ve satır birde olduğunu söyleriz.
‫Şimdi, neden bir tane olduğunu merak edebilirsiniz.
‫Neden iki değil?
‫Muhtemelen programlamada zaten bildiğiniz gibi, saymaya sıfırla başlarız.
‫Yani ilk sıra sıfır, ikinci sıra birdir.
‫Şimdi yüksekte ikinci sıra var, bu da birinci sıra.
‫Şimdi devam edelim ve iki düğme daha oluşturalım ve hatta belki de adlarını gerçek bilgileri
‫hakkında daha fazla şey söyleyen bir şeyle değiştirelim.
‫Bu yüzden bunu birinci satırdaki sıfırıncı sütuna koyacağım ve bu
‫aslında sıfır bire geri koyacağım ve bu bir birde olacak ve aslında bu şekilde birinci sütun ve sıfırıncı satır olacak.
‫Şimdi tüm düğmelerimiz var ve bu bir tane olacak.
‫Bu düğme ikinci, üçüncü ve dördüncü düğme olacaktır.
‫Harika.
‫Şimdi buna başlarsak, bunu göreceksiniz.
‫Bu, kullanıcı arayüzünün kendisi için de geçerli.
‫Yani bir, iki, üç, dört.
‫Tamam.
‫Izgara sütunlarını ve satırlarını nasıl kullanacağınızı gördüğünüz için şimdi sizin için küçük bir meydan okuma.
‫Lütfen devam edin ve burada sekiz düğmeli üç çarpı üç bir ızgara oluşturun.
‫Yani 1'den 8'e kadar düğmeler ve dokuzuncu pozisyon olmalıdır.
‫Dolayısıyla, sağ alt konum veya ızgara öğesi bir metin bloğu olmalıdır.
‫Bu yüzden lütfen videoyu duraklatın ve bunu yapmaya çalışın.
‫Tamam.
‫Umarım denemişsinizdir.
‫Şimdi yapacağım şey, buraya bir sütun tanımı ekleyerek başka bir sütun eklemek olacak ve bu sütun eşit genişlikte
‫olacak ve yükseklik için de aynı şey geçerli olacak.
‫Eşit yükseklikte olacak.
‫Ve şimdi, gördüğünüz gibi, düğmeler biraz garip görünüyor.
‫Ama bu sadece yapmadığım için.
‫Henüz yakınlaştırılmış.
‫Şimdi doğru şekilde görebiliriz.
‫Şimdi sıfır bir ve benzeri düğmelerimiz var.
‫Bu düğmeyi buraya kopyalayacağım ve ikinci sütuna yerleştireceğim.
‫Yani satır sıfır ve sütun iki.
‫Şimdi, elbette, satırla başlamanın ve ardından sütunu girmenin daha mantıklı olduğunu savunabilirsiniz.
‫Bunu yapabilirsiniz ama benim durumumda tam tersi.
‫Sonuçta önemli olan her ikisini de doğru şekilde kullanmanızdır.
‫Şimdi en üstte üç düğmemiz var.
‫Şimdi devam edelim ve ikinci satırı oluşturalım veya ikinci satırı sonlandıralım.
‫Ve bu da ikinci sütun.
‫Ve bunu üç kez kopyalayacağım, aslında iki kez yeterli.
‫Ve bu bir, sıfırıncı pozisyonun satırı ve ikinci satır, birinci pozisyon veya birinci sütun olacaktır.
‫Şimdi, elbette, değerleri değiştirmemiz gerekiyor.
‫Yani bir, iki, üç, dört, beş, altı, yedi ve sekiz.
‫Ve dediğim gibi, sol altta bir metin bloğu olmasını istiyorum.
‫Metin bloğu da ızgaralarla aynı yaklaşıma sahiptir.
‫Bir sütun ve bir satıra sahip olmanız gerekir.
‫Bu yüzden bunun sütun iki ve ızgara satır iki olacağını söyleyeceğim.
‫Şimdi en alttayız, solda veya sağ altta, şimdi devam edebilir ve biraz metin verebiliriz.
‫Ve ben sadece metin gibi bir şey söyleyeceğim.
‫Şimdi diyebilirsiniz ki, oh, bundan hoşlanmadım.
‫Metin sol üsttedir.
‫Yatay hizalama gibi bir şey girerek bunu kolayca değiştirebilir ve burada ortayı kullanabilirsiniz.
‫Şimdi yatay olarak ortalandı.
‫Görebilmeniz için yakınlaştıralım.
‫Tamam.
‫Ve şimdi dikey olarak da ortalamak istersem, sadece dikey hizalamayı kullanıyorum ve burada da ortayı
‫kullanıyorum.
‫Şimdi gördüğünüz gibi, düğme mükemmel bir şekilde ortalandı ve hatta devam edip yazı
‫tipi boyutunu değiştirebiliriz çünkü yapabiliriz ve 32 gibi biraz daha büyük yapalım.
‫Ve şimdi sekiz düğme ve bir metin içeren üç çarpı üç bir ızgaramız olduğunu görebilirsiniz.
‫Şimdi devam edebilir ve pencerenizdeki tüm farklı türdeki öğeleri burada ana pencerenizde ve ızgaranızda hizalayabilirsiniz.
‫Izgara kullanmanın güzelliği de burada.
‫Ve gördüğünüz gibi, bir şeyleri üst üste yığabilirsiniz.
‫Birden fazla ızgaraya sahip bir yığın paneli oluşturabilir ve ek olarak arada bir metin veya bunun gibi bir şey kullanabilirsiniz.
‫Yani burada tek bir öğe kullanmakla sınırlı değilsiniz.
‫Gördüğünüz gibi, devam edebilir ve diyelim ki bunu bir yığın paneline koyabiliriz.
‫Panoyu böyle istifle.
‫Bu yüzden ızgarayı sürükleyeceğim.
‫Şimdi görebileceğiniz gibi, pencere örneği, ana pencere yalnızca ilkini bildiği için şikayet ediyor.
‫Dolayısıyla, şimdi görünümümüzü kontrol edersek yalnızca STACK panelini görecektir.
‫Aslında, şimdi geçersiz işaretleme dediğini görebilmek için durduralım.
‫Eğer tüm ızgarayı Yığın panelimizin içine alırsak, görebileceğiniz gibi, oradadır ve metin yukarıdadır.
‫Yani alt kısımda bolca yer var.
‫Bunun mümkün olduğunu görebilmeniz için buraya başka bir düğme ekleyebiliriz ve
‫bu düğmenin yüksekliği 100 olacaktır.
‫Ve şimdi, gördüğünüz gibi, hepsi tepede birikiyor.
‫Ve bu yüksekliğe sahip olmamıza rağmen, hepsi aynı yükseklikte, bu metin o kadar çok alana ihtiyaç duyuyordu ki bunu
‫görmezden geliyordu.
‫Yani yazı tipi boyutu çok büyük.
‫Yani 16'ya geri dönersek, hala çok büyük.
‫Diyelim ki şimdi 12'ye çıkarsak daha çok benziyor.
‫Dolayısıyla, bu yıldızla satır tanımlarını kullandığınızda dikkatli olmalısınız.
‫Bir öğe olduğundan daha fazla alana ihtiyaç duyarsa, taşacaktır.
‫Tamam.
‫Yani iki ızgara var.
‫Orada sahip olduğumuz güzel standart ızgaraya geri döneceğim.
‫Ve genel olarak, böyle bir şey gördükten ve böyle bir şey öğrendikten sonra her zaman önerdiğim
‫şey, lütfen devam edin ve onunla oynayın.
‫Sadece farklı türde öğelerle oynayın.
‫Bazılarını zaten gördünüz ve daha sonra çok daha fazla kontrole bakacağız.
‫Şimdiye kadar kullandıklarımız çoğunlukla düğmeler, sağ ve metin bloklarıydı, ancak
‫gelecek videolarda farklı güzel kontroller kullanacağız.
‫Orada görüşürüz.