Merhaba,
İlk 3 soru için nihai çözümler sunabilirim gibi.
İlk soru ile başlayalım bakalım ;
Öncelikle form ebatlarını 600x350 şeklinde kullandığımı ve adımların bu ebatlara uygun şekilde işlediğini belirtmek isterim. Fakat merak etmeyin ebatlar sadece tercih meselesi. Yani siz istediğiniz ebatları kullanabilirsiniz.
İlk resimde gördüğüm kadarıyla en üstte 3 adet işlem butonu ve altında değerler gösteren ilerleme çubukları var. Bir yerden tanıdık geldiler
Her cihaz için otomatik ölçeklendirme yapılması, eleman sayınızın az olmasından ötürü minimum hata payı ile mümkün durumda. Peki nasıl ?
İşlemler ;
- 600x350 ebatlarında açın. Form’a bir adet layout ekleyin ve özellikler bölümünden align kısmını client yapın :
Layout ekleme sebebi ilk olarak benim çalışma mantığımdan ötürü, ikinci sebebi ise ilerleyen süreçte tasarım değişikliğine gitmek istediğiniz de bileşenleri tek tek taşımak yerine tek parça halinde taşımanıza olanak tanıması. Elbette bu kadarla sınırlı değil, tek ekranda çok katmanlı tasarımlar yapmanıza olanak tanıyan en ideal bileşendir. Alternatifi olarak rectangle kullanılabilir elbette ama layout varsayılan olarak görünmez geldiği ve layout seçili iken ekrana görsel eleman eklendiğinde bunu hemen kendi içerisine dahil etmesi layout’u daha kullanılır yapıyor. Ayrıca temel görevi de bu olduğu için en ideal yol layout kullanmaktır.
- Eklenen layout’un içerisine bir adet GridPanelLayout ekleyin. Ve align özelliğini top yapın :
Bu GridPanelLayout’un yüksekliğinin bize bırakılıp genişliğin form genişliğine uyarlanmasını sağlayacaktır. Column (sütun) ve row (satır) alanlarında isteğe bağlı sayıda ekleme ya da çıkartma yapın. Sizin için ideal olan 3 buton için 2 satır 2 sütun olacaktır. Bu durumda toplam 2 sütun ve 2 satır olacak şekilde ekleme yapıp eklenen bu kısımların value (değer) kısımlarını 100 üzerinden hesaplayarak oranlayın. Yani ilk satır 30 değerinde ikinci satır 70 değerinde ise ikisini seçip value kısmına 50 yazarak ikisinin de eşitlenmesini sağlayabilirsiniz. Fakat dikkat edilmesi gereken nokta, tek seferde eşitlemek mümkün değildir. Bunun için orantı sağlanana yani eşitlenene kadar 50 değerini girmeye devam edin. Aynı işlem sütun içinde geçerlidir. İşlemler bitince her hücre için rectangle ekleyin ve align kısmını client yapın. Böylece rectangle, GridPanelLayout ile eş zamanlı oranlanacaktır. Fakat sadece genişlik hususunda! Yükseklik bizim elimizde. Çünkü align özelliğini top yaptık.
Bu rectangle’ların içerisinde istediğiniz tasarımı yapabilir ve istediğiniz görsel elemanı ekleyebilirsiniz. Her hücre sadece bir görsel eleman alır. Fakat her görsel eleman içerisine n sayısı kadar eleman alabilir.
- Şimdi bir adet daha layout daha alıp ilk layout’un içerisine bunu da atalım ve align kısmını client yapalım. Daha sonra oranlı büyüme sağlaması için bir adet scaledlayout alalım ve bu layout’un içerisine atıp align özelliğini önce client yapıp sonra fit olarak değiştirelim. Bunun sebebi scaledlayout’un önce en boy oranı kazanmasını sağlamak ve sonrada bu oranı korumasını istemek. Bu işlemden sonra artık oranlı büyümesini istediğimiz görsel elemanları scaledlayout içerisine atabiliriz. Burada ince bir ayrıntı mevcut, scaledlayout içerisine attığımız görsel elemanların align, anchors, margins, padding gibi özellikleriyle uğraşmanız gerekmiyor yani sürükle-bırak, istediğin yere konumlandır mantığı ile tıpkı photoshop’daki gibi tasarım yapabilirsiniz. Bunun için tek yapmanız gereken scaledlayout içerisine eklenen görsel elemanların align özeliğini none olarak bırakmak.
Sanırım tek yapılması gerekenler bunlar gibi. Aklıma gelmedi şuan için daha fazlası fakat birkaç notta düşmek isterim.
- Trackbar, edit, progress bar gibi yüksekliği özelliklerinden değiştirilemeyen görsel elemanları ortalamak için align kısımlarını top ya da client değil VertCenter yapın. Böylece ortalanmasını sağlayabilirsiniz.
- Imagelist kullanımında buton ve türevlerinden bağımsız olarak butonlar yerine rectangle ile buton tasarlayıp glyph bileşeni ile imagelist üzerindeki görselleri rectangle içerisinde göstermek daha pratik ve sağlıklı olacaktır. Bir buton da imagelist kullanmak daha kolay görünse de buton üzerindeki görselin büyüklüğünü ayarlamak zahmetli iştir. Nitekim sizin de yakındığınız durum bu anladığım kadarıyla. Bunun önüne geçmek için en ideali fikrimce rectangle içerisine eklenen glyph bileşeni ile görselleri sunmak olacaktır. Bunun en büyük artılarından birisi ise glyph bileşeninin genişlik ve yüksekliği doğrultusunda içerisindeki görsel oranlanacaktır. Yani ekstra bir tasarım editörü açma zahmeti olmayacaktır. Kendi butonunuzu tasarlamanın en büyük avantajı ise ona hükmedebilme olanağınızın olmasıdır.
Scroll olayına gelelim ;
eğer n sayısı kadar üretim sağlanılacak ise bu durumda listbox ya da listview bileşenleri en ideal seçenekler olacaktır. Scrollbox ve türevlerinin içerisinde bileşenleri var etmek bir çok sorun ile karşılaşmanıza neden olabilir. Bunların başlıcası içerisine var edilip konumlandırılacak olan bileşenlerin sıralaması değişebilir. Örneğin 1 2 3...8 9 10 12 11 13 15 14 misali. Tabiki bu ne kadar önem arz ettiğine bağlı.
bunların vücut bulmuş hali de aşağıda. Hazır proje sunmanın yanında hazır olmasını kılan her şeyi de sunmak onu hazır yapmaktan uzaklaştıracaktır. Elimden geldiğince tasarımı yazıya dökmeye çalıştım. Umarım fikir verir. Aklınıza takılan, sormak istediğiniz, merak ettiğiniz ne var ise çekinmeden sorabilirsiniz.
design.zip (Dosya Boyutu: 36,8 KB / İndirme Sayısı: 3)