/

Uygulamanızda benzer ürün önerileri, kampanya bannerları veya kısa bilgi kartları gibi çoklu içerikleri ekran alanından tasarruf ederek kompakt bir yapıda sunmak istiyorsanız, en pratik çözüm Horizontal Grid elementini kullanmaktır. Bu element, içeriklerinizi yatay bir düzende listeleyerek modern bir tasarım ile ekranınıza getirir.

Bu videoda Kampanyalı Benzer Ürünler Gösterimi senaryosu üzerinden örnek Horizontal Grid elementinin kullanımını inceleyeceğiz. Öncelikle ekrandaki gibi BaseProduct ve CampaignSimilarProducts adındaki iki tablo yapısını da oluşturun. Ardından New SQL Action alanından aksiyonu oluşturup tablo adınızın önüne dbo. yazarak test edip kaydedin. Aynı işlemleri GetBaseProduct ve GetCampaignSimilarProducts aksiyonu için de yapın.

UI Design modülüne geçin. Add Action alanından verileri çekecek olan Initial Action sorgularınızı sayfaya bağlayın. BaseProductID alanı için Action Result, GetBaseProduct, First, ID adımlarını takip edin. Panel elementini sayfanıza ekleyin. Styling alanından Width değerini %70 olarak ayarlayın. Style alanından arka planı White Background olarak seçin. Border içerisindeki Radius alanını 45 px olarak ayarlayın; dikeyde ve yatayda ortalayın. Panel içerisine Row elementini sürükleyip bırakın. Desktop alanından 2 kolon olacak şekilde seçin. İlk Label elementini sola ikincisini ise sağa doğru Layout içerisindeki Align alanından yaslayın. İçlerine Label elementi ekleyin. İkinci Label elementini Style alanından Heading 6 olarak ayarlayın. Label altına Image elementi ekleyip Column alanına tıklayın, Styling içerisindeki Align alanı ile ortalayın. Image elementinin Width ve Height değerlerini 232 px seçerek boyutlandırın. Image altına Row elementi ekleyin. Tek kolon olarak Desktop alanından ayarlayın. Styling içerisindeki Align alanından sağa hizalayın ve içerisine Horizontal Stack ekleyin. İki tane label elementi sürükleyin. Styling içerisindeki Width alanında varsayılan olarak gelen 100 px değerini her ikisi için de silin.  Ardından sayfaya bir Horizontal Grid elementi ekleyin. Bu element içerisine DataSource alanından sorgunuzu bağlayın. Ekranda değişen ürün sayısını SlideToScroll , gösterilecek ürün sayısı ise SlideToShow ile belirleyebilirsiniz. Sürüklemeyle değiştirme özelliğini aktif etmek için Swipe özelliğini açın. Kartların kendiliğinden akması için ise Auto Play özelliğini açın. AutoPlaySpeed değerinizi girin. Horizontal Grid elementini yatayda ve dikeyde ortalayın.

Ana ürün için hazırladığınız Panel element grubunu kopyalayın. Horizontal Grid elementine tıklayın ve yapıştırın. Image elementi boyutunu uygun şekilde Styling, Layout alanından ekrandaki gibi ayarlayın. Label elementini ekleyin ve Styling panelinden ortalayın. Alttaki Label yanına bir Label elementi daha ekleyin. Alttaki ilk Label rengini Text Color alanından belirleyin ve Decoration alanından uygun seçimi yapın. Öncelikle üstte oluşturduğumuz yapıdaki Label ve Image elementlerine sırasıyla Properties paneli üzerinden Value alanlarına tanımlamaları yapın. Ardından aşağıdaki yapı için Value içerisindeki Field to display alanındaki seçimleri sırasıyla yapın.

 Uygulama test edildiğinde, üst bölümde öne çıkan ana ürün kartı ve alt bölümde yan yana listelenen diğer ürün kartlarından oluşan bir ürün vitrini görüntülenir. Ana ürün kartında ürün adı, stok durumu, büyük ürün görseli ve fiyat bilgisi belirgin şekilde sunulurken; alt kısımdaki kartlarda kampanya oranları, stok durumu, ürün görselleri ve indirimli fiyatlar birlikte gösterilir.