Gallery View, ürün kataloğu, tasarım portföyü veya kategori listesi gibi içerikleri kart yapısında, görsel odaklı ve düzenli bir şekilde sunmanızı sağlayan; kullanıcıların öğeler arasında kaydırarak veya tıklayarak kolayca gezinebildiği bir arayüz elementidir.
Uygulamanızda ürün kataloglarını, tasarım portföylerini veya kategori listelerini görsel odaklı ve son derece düzenli bir yapıda sunmak için en ideal çözüm Gallery View elementini kullanmaktır. Kullanıcılar, öğeler arasında kaydırarak veya tıklayarak gezinebilir, içerikler hem estetik hem de düzenli bir görünüm ile sunulur.
Bu ekranı kurmak için, öncelikle ekrandaki gibi tablo yapısını oluşturun. Ardından New SQL Action ile InsertProductGalleryData aksiyonunu oluşturun. Tablo başına dbo. ekleyin, test edip kaydedin. Daha sonra GetProductGalleryData aksiyonunu yazın ve aynı işlemleri burada da tekrarlayın. Add Action alanına tıklayarak verileri getirecek Initial Action sorgunuzu sayfaya bağlayın. Ardından, Gallery View elementini ekrana sürükleyip içerisine bir Row elementi ekleyin, Desktop alanından tek kolon olarak seçin. İçerisine Panel elementi ekleyin. Styling panelinde bulunan Style alanından arka planı White Background olarak ayarlayın. Border içerisindeki Radius alanını 15 px olarak belirleyin. Panel içine Row elementi ekleyin ve Desktop alanından 2 kolon olarak seçin. Sol Column sola yaslı ve dikeyde ortalı; sağ Column sağa yaslı ve dikeyde ortalı olacak şekilde Align içerisinden ayarlayın. Column içlerine Label elementleri yerleştirin. Sağdaki Label elementlerini Styling paneli içerisindeki Style alanından Heading 6 olarak ayarlayın. Label elementlerinin altına Image elementi ekleyin. Styling paneli Layout alanı üzerinden yatayda ve dikeyde ortalayın. Image elementinin boyutunu Width ve Height alanından düzenleyin. Image elementi altına bir Row elementi ekleyin. Desktop alanından tek kolon olarak belirleyin. Column sağa yaslı olacak şekilde Styling paneli içerisinden ayarlayın. İçerisine Horizontal Stack elementi ekleyin ve içerisine Label elementi sürükleyin ve Styling alanındaki varsayılan olarak 100 px yazan Width alanını silin. Aynı işlemi yanına ekleyeceğiniz Label elementi için de tekrarlayın. GalleryView elementi DataSource alanı için aksiyonu tanımlayın. Label elementleri ve Image elementini Value içerisinde bulunan Field to Display alanını ekrandaki gibi tanımlayın. Son Label elementini Symbol Picker olarak seçip Fixed Value alanına TL yazın.
Preview butonuna bastığınızda ise ürün kartlarının Gallery View elementi içerisinde yan yana listelendiği düzenli bir ürün galerisi görüntülenir. Kullanıcı, farklı ayakkabı modellerini tek ekranda karşılaştırabilir; stokta, sınırlı stokta veya tükenmiş ürünleri kolayca ayırt edebilir. Bu yapı sayesinde ürünler düzenli, sade ve kullanıcı dostu bir şekilde listelenerek alışveriş deneyimi desteklenir.