Tutorials

/

Marquee Elementi Nasıl Kullanılır?

Marquee, önemli duyuru, canlı döviz kuru veya öne çıkan kampanya gibi içerikleri yatay bir şerit halinde akıcı biçimde kaydırarak kullanıcıların dikkatinden kaçmayacak şekilde, ekran alanından tasarruf ederek sunmanızı sağlayan dinamik bir elementtir.

Uygulamanızda önemli duyuruları, canlı döviz kurlarını veya öne çıkan kampanyaları kullanıcıların gözünden kaçmayacak şekilde vurgulamak istiyorsanız, en dinamik çözüm Marquee elementini kullanmaktır. Bu element sayesinde içeriklerinizi yatay bir şerit halinde akıcı bir şekilde kaydırarak ekran alanından tasarruf etmenizi sağlayabilirsiniz.

Öncelikle Data Sources alanında C# Functions alanı ile DailyExchangeRate adındaki kodunuzu oluşturun. UI Design modülüne gelin ve Add Action ile bir veri kaynağından kur bilgilerini çekecek Recurring Action aksiyonunu ekleyin. Sayfa başlangıcında çalışması için TriggerOnPageInit alanını açık hale getirin. Add Action ile aksiyonu tanımlayın. Ardından Marquee elementini sayfaya sürükleyin. Properties panelinden Marquee elementindeki boşlukları doldurmak için Auto Fill, kullanıcının fareyle üzerine geldiğinde metni durdurup inceleyebilmesi için Pause On Hover özelliklerini aktif hale getirin. Metnin kenarlardan yumuşak bir geçişle kaybolması için GradientColor ve GradientWidth ayarlarını yapılandırın.

Marquee içerisine sürükleyeceğiniz bir FlexGrid elementine sağdaki DataSource alanından aksiyonu bağlayın ve içerisine ekleyeceğiniz Panel elementi ile gelen verileri kart tasarımlarına dönüştürebilirsiniz. Ekranınızda düzenli durması için Styling alanından Width alanını 200 olarak değiştirin. Style alanından arka planı beyaz olarak değiştirin. Border alanından Radius alanını 15 olarak belirleyin. Panel içerisine bir Vertical Stack yerleştirip içerisine Label elementleri ekleyin. Üstteki Label alanının Field to Display alanını CurrencyName, alttaki alanı ise Value olarak belirleyin.

Preview butonuna bastığınızda; verilerinizin tek bir satırda, kesintisiz ve şık bir şekilde aktığı dikkat çekici bir bant ile karşılaşacaksınız.