Tutorials

/

Flex Grid Elementi Nasıl Kullanılır?

FlexGrid elementi, otomatik yenilenen verileri kart yapısındaki panellerde ekran genişliğine göre otomatik uyum sağlayarak düzenli ve karşılaştırılabilir bir grid görünümünde listeler.

Uygulamanızda ürün listeleri, görsel galeriler gibi çoklu öğeleri esnek ve ekran genişliğine göre otomatik uyum sağlayan bir yapıda sunmak istiyorsanız, en güçlü çözüm FlexGrid elementini kullanmaktır. 

Öncelikle Data Source modülü içerisinde Development başlığı altında bulunan C# Functions alanından DailyExchangeRate adındaki kodunuzu yazın.

UI Design modülünde sayfanıza Add Action bölümünden Recurring Actions ekleyin. Sayfa başlangıcında çalışması için triggerOnPageInit alanını açık olarak ayarlayın. Add Action ile DailyExchangeRate aksiyonunu bağlayın.

Ardından, FlexGrid elementini ekranınıza sürükleyip DataSource alanına aksiyonunuzu bağlayın. FlexGrid içerisine sürükleyeceğiniz Panel elementinin Width değerini 200 px olarak Styling alanından değiştirip dikeyde ortalayın. Arka planı Style alanından White Background olarak ayarlayın. Border alanındaki Radius değerini 15 px olarak değiştirin. Vertical Stack elementi ekleyip içerisine iki tane Label elementi sürükleyin. İlk Label elementinin Value alanındaki Field to Display için CurrencyName olarak tanımlayın, ikinci Label için ise Value olarak tanımlayın. 

Bu yapı sayesinde kullanıcı, farklı döviz kurlarını tek ekranda karşılaştırabilir ve sade, düzenli bir görünümle kur bilgilerine hızlıca erişebilir.