İleri XAML Tasarımlar Bölüm 2 [Grid]

Merhaba,

Bu makalemizde Xamarin.Forms Grid yapısını inceleyeceğiz.

Grid hemen hemen tüm UI katmanı olan dillerde bulunan ve sıkça kullanılan bir yapı.
Windows Desktop, WebForm ve daha sonraları ASP.NET MVC uygulamaları geliştirirken aslında bu yapıyı hep kullandık ve incelememiz bittiğinde "ben bu yapıyı zaten biliyormuşum!" diyeceğinizden eminim 🙂

Tabii ki saydığımız platformlarda Grid'i kullanırken platform spesifik durumlar vardı ve Grid'i kullanmak için bunları öğrenmemiz gerekiyordu. Tahmin edeceğiniz gibi Xamarin.Forms için de bu durumlar mevcut. Aslında "platform spesifik" olarak adlandırdığımız durum, sadece kullanılan platform özelinde yazım/kullanım tarzlarından başka bir şey olmadığını göreceğiz. (SPOILER! bu grid bir harika dostum!) 

XAMARIN.FORMS GRID

Xamarin.Forms kontrollerimizin diziliş ve görünüşlerini satırlar ve sütunlar halinde düzenleyebildiğimiz kullanışlı bir tablo yapısıdır.

Hemen kolaydan zora örneklerimize başlayalım..

Grid-1

Gördüğünüz gibi aslında <Grid> tagleri arasına istediğimiz kontrolü atip sadece istediğimiz satır ve sütunda görünmesini istediğimizi belirteceğiz.

Biraz daha kod yazalım..

Grid-2

2 satır ve 2 sütun'dan oluşan bir Grid yapısı kurduk ve hemen görüntüsüne bakalım..

Grid-3

Kodlarımızı okuyalım..

Ben 2 satır ve 2 sütundan bir grid oluşturdum ve..

  • Yukarıdan aşağıya 0. sütun 0. satıra kırmızı kutu
  • Yukarıdan aşağıya 1. sütun 0. satıra mavi kutu
  • Yukarıdan aşağıya 0. sütun 1. satıra sarı kutu
  • Yukarıdan aşağıya 1. sütun 1. satıra mor kutu

ekledim..

Not : Satırların sütunları olmaz, sütunların satırları şeklinde okunmalıdır.

Grid-4

Kaç sütun ve satır olacağına tamamen ben karar veriyorum. 3*3 olarak değiştirdim. Grid benim değil mi?

Bu şekilde oluşturulmuş yapılar otomatik olarak responsive şekilde çalışacaktır.

Grid-5

Fakat tabii ki de siz istediğiniz yükseklik ve genişliği sütun ve satır bazında verebiliyorsunuz.

O halde..

RowDefinitions : Grid içerisinde oluşturduğunuz her satır için yüksellik belirlemenizi sağlar.

ColumnDefinitions : Grid içerisinde oluşturduğunuz her sütun için genişlik belirlemenizi sağlar.

Not : Genişlik ve yükseklik belirtirken sabit bir değer dışında GridUnitType enum sabitinden destek alacağız.

XAML ve .cs tarafta kullanımları biraz değişiyor.

XAML için;

  1. Auto : Satır ve sütun içerisindeki veriye göre otomatik olarak boyutlandırır.
  2. * : Satırlar ve sütunlar tarafından doldurulan alanlar dışında kalan kısımları doldurmak için kullanılır. (Auto + kalan kısımların yüzde şeklinde doldurulması olarak tanımlayabiliriz.)
  3. Sabit değer : Verdiğiniz değer kadar ekran üzerindeki alanı boyutlandırır. (Örneğin 200) 

C# için;

  1. GridUnitType.Auto : Satır ve sütun içerisindeki veriye göre otomatik olarak boyutlandırır.
  2. GridUnitType.Star : Satırlar ve sütunlar tarafından doldurulan alanlar dışında kalan kısımları doldurmak için kullanılır. (Auto + kalan kısımların yüzde şeklinde doldurulması olarak tanımlayabiliriz.)
  3. GridUnitType.Absolute  : Verdiğiniz değer kadar ekran üzerindeki alanı boyutlandırır. (Örneğin 200) 

Grid-6

Kodumuzu okuyalım..

0. satır için yüksekliği otomatik yap. Yani.. 0. satıra eklediğim kontrol yüksekliği kadar yükseklik al demiş oluyorum.

0. satır içerisinde kırmızı kutu var ve bir yükseklik vermedik. Peki ne olacak?

Xamarin.Forms.BoxView varsayılan yükseliği kadar bir değer alacak.

1. satır yükselik değerini * (Star) olarak alacak. Yani.. 0. satır yüksekliğinden ekranda kalan tüm yüksekliği 1. satır alacak.

0. sütun 50, 1. sütun 100, 2. sütun ise 200 değerinde genişlik alacak demiş oluyoruz.

Grid-7

Biraz daha anlaşılır hale geldiğini düşünüyorum.

Grid-8

0. ve 1. satır yüksekliklerini yüzdesel olarak otomatik ayarla diyoruz.

0. ve 1. sütun genişlikleri 2. sütun genişliğinden kalan değerleri paylaşacak. Yani 200'den kalan ekran genişliğini 0. ve 1. sütun paylaşacak 🙂

Grid-9

Biraz daha anlaşılır hale geldiğini düşünüyorum.

Grid-10

Ufak bir değişiklik..

2. sütun genişliğine Auto verdik. 0. ve 1. sütunların genişliği tahmin edeceğiniz gibi 2. sütun içerisindeki Text özelliği'nin kapladığı alandan kalan ekran genişliğini paylaşacaklar.

Grid-11

Bence tamamen anlaşıldı 🙂

İncelememiz gereken 1-2 nokta daha var ve Grid kullanımı için gerçekten çok önemli.

RowSpacing : Satırlar arası boşluk.

ColumnSpacing : Sütunlar arası boşluk

<Grid RowSpacing="15" ColumnSpacing="30"> şeklinde kullanabilirsiniz.

Grid-12

Tanım yazarken tablo yapısıdır diye söyledin sanki.. satır ve sütun birleştirme nerde?

Calm Down Champion!

Grid-13

Not : Gird içerisindeki her satır ve sütun için ayrı ayrı aralarındaki boşlukları (Spacing) ve genişlik/yükseklik (ColumnDefinition, RowDefinition) değerlerini verebilirsiniz.  Grid.ColumnDefinition ve Grid.RowDefinition. Satırlar ve sütunlar için bunu kullanırken nazik olun kendileri çok kırılgan ve alıngandırlar.

ve çıktımız..

Don't try this at home!

Grid-14

Görüntü çok kötü oldu fakat durumun anlaşıldığını düşünüyorum 🙂

Xamarin.Forms.Grid gerçekten çok kullanışlı ve esnek bir yapıya sahip.

Xamarin ile uygulamalarınızı geliştirirken kesinlikle yardım isteyebileceğiniz bir arkadaş.

Görüşmek üzere,

Yiğit

Xamarin Developer, Consultant & Architect. Community Leader and Director of Xamarin Türkiye

7 Comments

You can post comments in this post.


  • Çok teşekkürler hocam sayende bu yapıyıda anladık..

    asil 2 sene ago Reply


    • Harika! 😉

      Yiğit 2 sene ago Reply


  • Hocam ellerinize sağlık çok teşekkür ederim

    Fatih Çetin 2 sene ago Reply


  • Merhabalar,
    İki gündür kafayı yemek üzereyim 🙂 Grid’de definition’ları tanımlamak istediğim hata alıyorum fakat tanımlamadan yaptığımda ise her hangi bir hata ile karşılaşmıyorum. Konu hakkında yardımcı olursanız çok sevinirim…
    —————————————————————————————————————————————————————————————————
    Hata Alan Kod:

    —————————————————————————————————————————————————————————————————
    Alınan Hata:
    An exception of type ‘System.ArgumentException’ occurred in mscorlib.ni.dll but was not handled in user code

    Additional information: Object of type ‘Xamarin.Forms.RowDefinition’ cannot be converted to type ‘Xamarin.Forms.View’.
    —————————————————————————————————————————————————————————————————
    Çalışan Kod:

    Hakan Altındiş 2 sene ago Reply


  • Kodlar üst tarafta çıkmadığı için burada tekrar yazıyorum. küçük büyüktür işaretlerini bilerek çıkardım

    Hata Alan Kod:
    Grid
    Grid.RowDefinitions
    RowDefinition Height=”*” /
    RowDefinition Height=”*” /
    /Grid.RowDefinitions>

    Button Grid.Row=”0″ Text=”Birinci”/
    Button Grid.Row=”1″ Text=”İkinci”/
    /Grid

    Çalışan Kod:
    Grid

    Button Grid.Row=”0″ Text=”Birinci”/
    Button Grid.Row=”1″ Text=”İkinci”/
    /Grid

    Hakan Altındiş 2 sene ago Reply


    • Selam, 1. hafta videosundaki anlatımı izledin mi? Gerçi buradaki gibi yazdıysan sorun olmamalı. Ek olarak Örneği incelemeni öneririm.

      Yiğit 2 sene ago Reply


  • Videoyu izledim bende buradakilerin aynısını yaptım fakat olmadı. Ama C# üzerinden Grid nesnesi oluşturup bunu içini doldurduğumda düzgün bir şekilde çalışıyor.

    Neden xaml üzerinde definition’ları yaptığımda çalışmıyor bir türlü anlamadım. 🙁

    Hakan ALTINDİŞ 2 sene ago Reply


Post A Reply