Gallery View elementi, uygulamanızda görselleri veya içerikleri düzenli bir şekilde sergilemenizi sağlar. Kullanıcılar, içeriklerinizi kolayca keşfedebilir ve çoklu görseller arasında geçiş yapabilir. Özellikle resim galerileri, portföyler ve çoklu içerik sergileme ihtiyaçlarında etkilidir.

Kullanım Alanları

• Ürün fotoğraf galerileri,
• Tasarımcı/Fotoğrafçı portföyleri,
• Blog görsel koleksiyonları,
• Emlak ilanları veya kataloglar vb.

Gallery View elementi, web ve mobil uygulamalarda desteklenir.

Ürün Listesi Senaryosu

Bir spor ayakkabı mağazası uygulamasında, kullanıcıya “Newest” ve “Popular” sekmeleri altında ürünlerin görselleri, isimleri, fiyatları ve stok durumları Gallery View elementi ile gösterilir. Kullanıcı ürünleri kolayca keşfeder, farklı kategoriler arasında geçiş yapabilir.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.
2. Tables başlığı yanındaki + ikonuna tıklayın ve tabloya ProductGallery ismini verin.
3. Aşağıdaki tabloyu oluşturun.

4. Ardından SQL Actions’a tıklayın ve aksiyona “ProductGallery” ismini verin. C# ile de oluşturabilirsiniz.
5. Aşağıdaki SQL komutunu girin. 

SELECT 'https://cdn.example.com/kyrie6.png' AS ImageUrl,        'Kyrie 6 PRE HEAT' AS ProductName,        100.00 AS Price,        'On stock' AS StockStatusUNION ALLSELECT 'https://cdn.example.com/nike-joyride.png',        'Nike Joyride Run Flyknit',        120.00,        'On stock';

UI Design Modülü işlemleri

• Uygulama ekranında sağ kenarda bulunan Add Action butonuna tıklayın. 
• Ardından Custom > ProductGallery’i seçin. 

Özelliklerin Senaryo Bağlamında Kullanılması

• Datasource → ProductGallery bağlanır.
• GalleryView Elementi → Listeleme mantığı buradan yönetilir.‍
• No Data Found Message: “Gösterilecek ürün bulunamadı.”‍
• Show No Data Found Image: (eklenecek görsel)‍
• Row Bg Color: Satır hover rengini kontrol eder.‍
• Phone Columns Count: 1‍
• Tablet Columns Count: 2‍
• Desktop Columns Count: 3‍
• Hover Font Color / Hover Bg Color: Hover efektleri.‍
• Horizontal Gutter / Vertical Gutter: Kartlar arası boşluklar.

Image Elementi (GalleryView içine eklenmiş)

• Yedek görsel olarak çalışır, yani veri bulunmadığında hem mesaj hem bu görsel birlikte gösterilir.
• Örnek: “no-products.png” gibi bir illüstratif görsel.

Senaryo Adımı Tamamlandığında

• Kullanıcı Kyrie 6 PRE HEAT (100 €) ve Nike Joyride Run Flyknit (120 €) ürünlerini görür.
• Ürünler görsel, isim, fiyat ve stok bilgisiyle listelenir.
• Mobilde tek kolon, tablette 2 kolon, masaüstünde 3 kolon görünür.
• Hover efektleri ile kullanıcı deneyimi zenginleştirilir.
• “Newest” ve “Popular” sekmeleri farklı veri kaynaklarına bağlanarak ürün listesi dinamik hale getirilebilir.

Kısıtlamalar

• Çok fazla ürün yüklendiğinde performans yavaşlayabilir.
• Görseller yüksek çözünürlüklü olursa yükleme süreleri uzar.
• Mobil cihazlarda uzun ürün isimleri tasarımı bozabilir.

İpuçları ve Best Practices

• Ürün görsellerini optimize edilmiş boyutlarda (ör. 400x400px) kullanın.
• Fiyat alanında decimal (2 basamak) tercih edin.
• StockStatus alanını etiket gibi göstermek için ikon/renk ekleyin (örn. “On stock” → yeşil).
• Kullanıcı deneyimi için mobil görünümde tek kolon bırakın.
• Çok sayıda ürün varsa sayfalama veya “infinite scroll” kullanın.