Carousel elementi, güncel kampanya ve ürün içeriklerinizi otomatik oynatmalı, sayfa göstergeli döngüsel slaytlar halinde sunarak kullanıcıların bir görsele tıkladığında ilgili içeriğin detaylarını ayrı bir ekranda incelemesini sağlar.
Uygulamanızda güncel kampanyaları, ürün vitrinlerini veya öne çıkan içerikleri dinamik ve döngüsel bir yapıda sunmak istiyorsanız, en etkili çözüm Carousel elementini kullanmaktır. Bu element, birden fazla görsel ve metin öğesini ardışık slaytlar halinde göstererek sayfa alanını en verimli şekilde kullanmanızı sağlar.
Şık bir kampanya alanı oluşturmak için, öncelikle ekrandaki tabloyu oluşturun. Ardından Data Sources alanından Actions, New SQL Action adımları ile InsertHolidayCarousel adında örnek verileri getirecek aksiyonu yazın ve tablo adının başına dbo. yazın. Test edip kaydedin. Verileri sağlayan ve filtreleyen aksiyon olan GetCarouselDetail ve tüm verileri sağlayan aksiyon olan GetHolidayCarousel için de aynı işlemleri tekrarlayın. Initial Action sorgusunu ekrana bağlayın. Ardından, Carousel elementini ekrana sürükleyip Properties panelindeki Data Source alanına bu aksiyonu tanımlayın. Hover Background Color alanından sarı rengini seçin. Otomatik oynatma için AutoPlay alanını açın. AutoplaySpeed alanını 3000 olarak ayarlayın, ShowPageIndicator alanını açın. Carousel elementi içerisine bir Vertical Stack elementi yerleştirin, Styling panelindeki Layout alanı ile dikeyde ortalayın. İçerisine Image elementini ekleyin. Value alanından ImageUrl olarak tanımlayın. Styling paneli Layout alanından Width ve Height alanlarını 400 px olarak belirleyin. Image altına bir Label ekleyerek Title seçimini yapın. Styling panelindeki Style alanı ile fontu Heading 2 olarak belirleyin. Aşağıdaki Text alanındaki Color bölümünden rengi değiştirin. Label elementini Duplicate ile çoğaltın. Styling panelindeki Style alanı ile fontu Heading 4 olarak seçin. Properties üzerinden Value alanı içerisinde Description olarak tanımlayın.
Carousel Detail adında yeni bir sayfa oluşturun. New Screen Input ekleyin. Input Name alanına CarouselId yazın ve Type olarak Guid türünü seçin. Initial Action olarak sayfaya GetCarouselDetail aksiyonunu bağlayın. Çıkan alanı ekrandaki gibi tanımlayın. Ekrana bir Panel elementi sürükleyin. Styling alanından Width ve Height ayarını 500 px olarak girin. Style içerisindeki Fill alanında White Background seçeneğini seçin. İçerisine bir adet Vertical Stack sürükleyin, dikeyde ve yatayda ortalayın. Üstteki Padding değerini 10 olarak girin. Onun içerisine ise Image elementi ekleyip Styling paneli Layout alanı ile boyutunu yeniden düzenleyin, Border içerisindeki Radius alanına 50 px değerini girin. Image elementi altına bir Label elementi ekleyin. Value alanından Action Result, GetCarouselDetail, First ve Title adımlarını izleyerek tanımlayın. Styling alanından hizalamasını yapın ve Heading 4 olarak fontu seçin. Altına bir Label daha ekleyin. Action Result, GetCarouselDetail, First ve Description adımlarını izleyerek tanımlayın. Bir Label daha ekleyin ve aynı adımları izleyip Detail seçimini yapın. En başta oluşturduğunuz sayfaya gelin. Image elementine tıklayıp onClick, Navigation, Navigate adımlarını takip edin. To Screen alanına CarouselDetail sayfasını girin. Altındaki açılan alana ise Current, Id olarak bağlayın. Aşağıdaki açılan Width ve Height alanlarındaki değerleri ekrandaki gibi değiştirin.
Uygulama test edildiğinde, Carousel yapısı içerisinde sunulan kampanya kartı görüntülenir. Kart üzerinde üst bölümde kampanyaya ait görsel yer alırken, altında kampanya başlığı ve kısa açıklama metni düzenli bir şekilde konumlandırılmıştır. Kullanıcı kart üzerindeki görsele tıkladığında, seçilen kampanyaya ait detayların yer aldığı bir popup ekran açılır. Bu ekranda kampanya görseli, başlık ve açıklama metni daha geniş bir alanda sunularak içeriğin daha detaylı ve okunabilir şekilde incelenmesi sağlanır.
