Marquee elementi, uygulamanızda bir metni yatay olarak kaydırarak kullanıcıların dikkatini çekmek için kullanılan etkili bir görsel elementtir. Hareketli yapısı sayesinde duyurular, kampanyalar, mesajlar veya öne çıkan bilgilere vurgu yapmak için kullanılabilir. Kullanıcıya sürekli görünür bir bilgilendirme alanı sunarak önemli içeriklerin gözden kaçmasını engeller.
Marquee; metin, kısa açıklamalar veya uyarılar gibi içerikleri akıcı bir şekilde soldan sağa veya sağdan sola kaydırabilir. Aynı zamanda hız, yön ve stil özelleştirmeleri ile uygulamanın tasarımına kolayca uyum sağlar.
Marquee elementi, web ve mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Duyuru metinlerini vurgulamak. Önemli bildirimleri, sistem mesajlarını veya kısa uyarıları kullanıcıların gözden kaçırmayacağı şekilde hareketli olarak göstermek için kullanılabilir.
Kampanya veya promosyon bilgilerini göstermek. İndirim duyuruları, kampanya kodları veya dönemsel fırsatlar marquee alanında dikkat çekici biçimde sunulabilir.
Öne çıkan içerikleri tanıtmak. Haber başlıkları, son eklenen içerikler, yeni ürün duyuruları gibi dikkat çekmesi gereken metinler için kullanılabilir.
Sistem mesajları veya durum bilgilendirmeleri göstermek. Akım duyuruları, planlı kesinti bildirimleri veya canlı sistem mesajları marquee alanında sürekli görünür hâlde olabilir.
Dashboard veya uygulama ana sayfalarında hareketli vurgu oluşturmak. Kullanıcının hızlı fark etmesi gereken KPI, bildirim veya kısa açıklamalar hareketli metin ile desteklenebilir.
Etkinlik duyuruları sunmak. Webinar, seminer, toplantı veya etkinlik tarihleri marquee alanında akıcı biçimde listelenebilir.
2. Temel Özellikler
Yatay Kaydırma Desteği. Metnin sağa veya sola doğru akıcı bir şekilde kaymasını sağlar. Kullanıcı dikkatini artırmak için ideal bir görsel hareket oluşturur.
Sonsuz Döngü (Loop) Mantığı. Marquee içeriği, kullanıcı durdurmadığı sürece kesintisiz olarak tekrar eder.
Hız Kontrolü. Metnin kayma hızını ayarlayarak içeriğin daha belirgin veya daha yumuşak şekilde görünmesini sağlayabilirsiniz.
Durma İçin Hover Desteği. Kullanıcı imleci metnin üzerine getirdiğinde kaydırma işlemi durdurulabilir (opsiyonel).
Mobil ve Web Uyumlu Yapı. Tüm cihazlarda akıcı kaydırma deneyimi sunar.
2.1. Marquee Elementi Özellikleri
Marquee elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden metnin kaydırma hızını, yönünü, kullanıcı etkileşimine bağlı durma ayarlarını ve görsel efektlerini detaylı şekilde yapılandırabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır.
Speed: Metnin kayma hızını ayarlar. Değer arttıkça içerik daha hızlı hareket eder. Duyuru veya uyarı gibi vurgulanması gereken içeriklerde hız artırılabilir.
Auto Fill: Marquee içinde yer alan metnin boşluk bırakmadan, alanı sürekli dolduracak şekilde görüntülenmesini sağlar. Uzun metinlerde akıcı bir görünüm elde etmek için kullanılır.
Pause On Hover: Kullanıcı imlecini Marquee üzerine getirdiğinde kayma hareketinin durmasını sağlar. Bu özellik özellikle okunması gereken uzun metinlerde tercih edilir.
Pause On Click: Kullanıcı Marquee alanına tıkladığında kayma hareketi durdurulur. İçeriği incelemek isteyen kullanıcılar için kontrol imkânı sunar.
Gradient Color: Marquee alanının sağ ve sol kenarlarında görünen gölge efektinin rengini belirler. Bu efekt, kayan metnin kenarlardan kayboluyormuş izlenimi yaratmasını sağlar.
Gradient Width: Kenarlarda gösterilecek gölgenin genişliğini (kalınlığını) ayarlar. Daha geniş bir değer, metnin yumuşak geçişli bir şekilde görünmesini sağlar.
2.2. Marquee Elementine Eklenebilen Aksiyonlar
Marquee elementi, metni yatay olarak kaydırmaya odaklanan pasif bir yapıda olduğu için doğrudan kullanıcı etkileşimiyle tetiklenen aksiyonları desteklemez. Bu nedenle element seçildiğinde ADD ACTION butonu görünmez ve Marquee elementine özel bir tetikleyici eklenemez.
Aşağıdaki noktalar Marquee elementinin aksiyon yapısını açıklar:
Marquee, kullanıcı tıklaması, metin üzerine gelme veya kaydırma gibi etkileşimlerde aksiyon çalıştırmaz.
Marquee üzerindeki tüm kullanıcı davranışları (ör. Hover ile durdurma) Properties panelindeki davranış ayarları üzerinden yönetilir, aksiyon olarak tanımlanamaz.
Metin içeriğinin güncellenmesi veya değiştirilmesi gerektiğinde bu işlem Marquee’ye bağlı veri kaynağının dışarıdan tetiklenmesiyle gerçekleştirilir.
Kullanıcı etkileşimi gerektiren senaryolar (ör. “Kullanıcı butona basınca Marquee metni güncellensin”) için aksiyonlar buton, switch, radio group veya diğer kontrol elementleri üzerinden tetiklenmelidir.
Marquee yalnızca kendisine verilen metni kaydırarak gösterir; kendi içinden hiçbir işlem başlatamaz.
Marquee elementi üzerinde aksiyon tanımlanamaz; kaydırılan içerik üzerinde yapılacak tüm değişiklikler dış elementler veya sayfa aksiyonları tarafından yönetilir.
3. Marquee Elementi Nasıl Kullanılır?
Bu bölümde Marquee elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Kayar Döviz Kuru Bilgilendirme Alanı
Bu senaryoda uygulama, Türkiye Cumhuriyet Merkez Bankası (TCMB) tarafından yayımlanan güncel döviz kuru verilerini kullanıcılara Marquee elementi aracılığıyla kayar bir formatta sunar. Belirli periyotlarla veya kullanıcı talebiyle TCMB kaynağından alınan kur bilgileri işlenerek ekranda sürekli akan bir bilgilendirme alanı oluşturulur.
Kullanıcı, dolar ve euro gibi temel para birimlerine ait alış–satış değerlerini tek bir satır üzerinde kesintisiz şekilde takip edebilir. Bu yapı sayesinde güncel finansal veriler güvenilir bir kaynaktan alınarak sade, anlaşılır ve dikkat çekici bir biçimde kullanıcıya sunulur.
Senaryoda:
Uygulama açıldığında, Merkez Bankası tarafından yayımlanan güncel döviz kurları Marquee elementi içerisinde kayar şekilde ekranda gösterilir.
Kullanıcı, dolar ve euro gibi temel para birimlerine ait alış–satış değerlerini tek bir satır üzerinden kesintisiz olarak takip edebilir.
Kur bilgileri sade ve okunabilir bir kayar metin yapısı içerisinde sunularak ekran üzerinde yer kaplamadan bilgilendirme sağlar.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde yeni C# fonksiyonu ekleme:
Datasources modülüne gidin.
Ardından Sources yanındaki ekleme ikonuna tıklayın.
Açılan sayfada C# Functions alanını seçin ve ‘DailyExchangeRate’ adında oluşturun:
Yeni açılan alandaki kodu silin yerine aşağıdaki C# kodunu ekleyin ve sağ üst köşede CREATE tuşuna basın.
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Xml;
namespace Kuika.ThirdPartyApisCollection
{
public classTcmbDoviz{
public static List<ExchangeRate> GetTcmbDovizByKod() {
string bugun = "https://www.tcmb.gov.tr/kurlar/today.xml";
var xmlDoc = new XmlDocument();
xmlDoc.Load(bugun);
string EUR_Satis = xmlDoc.SelectSingleNode("Tarih_Date/Currency[@Kod='EUR']/BanknoteSelling").InnerXml;
string USD_Satis = xmlDoc.SelectSingleNode("Tarih_Date/Currency[@Kod='USD']/BanknoteSelling").InnerXml;
string GBP_Satis = xmlDoc.SelectSingleNode("Tarih_Date/Currency[@Kod='GBP']/BanknoteSelling").InnerXml;
string CHF_Satis = xmlDoc.SelectSingleNode("Tarih_Date/Currency[@Kod='CHF']/BanknoteSelling").InnerXml;
string SAR_Satis = xmlDoc.SelectSingleNode("Tarih_Date/Currency[@Kod='SAR']/BanknoteSelling").InnerXml;
string CAD_Satis = xmlDoc.SelectSingleNode("Tarih_Date/Currency[@Kod='CAD']/BanknoteSelling").InnerXml;
var rates = new List<ExchangeRate>()
{
new ExchangeRate { CurrencyName = "EUR/TRY", Value = Convert.ToDecimal(EUR_Satis, new CultureInfo("en-US")) },
new ExchangeRate { CurrencyName = "USD/TRY", Value = Convert.ToDecimal(USD_Satis, new CultureInfo("en-US")) },
new ExchangeRate { CurrencyName = "GBP/TRY", Value = Convert.ToDecimal(GBP_Satis, new CultureInfo("en-US")) },
new ExchangeRate { CurrencyName = "CHF/TRY", Value = Convert.ToDecimal(CHF_Satis, new CultureInfo("en-US")) },
new ExchangeRate { CurrencyName = "SAR/TRY", Value = Convert.ToDecimal(SAR_Satis, new CultureInfo("en-US")) },
new ExchangeRate { CurrencyName = "CAD/TRY", Value = Convert.ToDecimal(CAD_Satis, new CultureInfo("en-US")) }
};
return rates;
}
}
public classExchangeRate{
public string CurrencyName { get; set; }
public decimal Value { get; set; }
}
}
Panel elementi içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın.
VerticalStack elementi içerisine Elements > Display > Label elementini sürükleyip bırakın.
Label elementi altına tekrar Elements > Display > Label elementi daha sürükleyip bırakın.
İlk Label elementine Label > Properties > Value > Field to display > CurrencyName olarak tanımlayın.
İkinci Label elementine Label > Properties > Value > Field to display > Value olarak tanımlayın.
Preview:
Uygulama test edildiğinde, Merkez Bankası tarafından yayımlanan güncel döviz kurları yatay kayar (marquee) bir kart yapısı içerisinde yan yana görüntülenir. Her bir kartın üst bölümünde ilgili döviz çifti (GBP/TRY, CHF/TRY, SAR/TRY, CAD/TRY, EUR/TRY, USD/TRY) yer alırken, alt bölümde karşılık gelen güncel kur değeri net ve okunabilir biçimde sunulur.
Bu yapı sayesinde kullanıcı, farklı döviz kurlarını tek bir satır üzerinde akıcı şekilde takip edebilir; kurlar arasında hızlı karşılaştırma yaparak sade ve düzenli bir görünümle güncel bilgilere kolayca erişebilir.
4. Ortak Özellikler (Properties)
Marquee elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Kısa ve net metinler kullanın. Marquee sürekli hareket eden bir element olduğu için uzun metinler kullanıcı tarafından zor algılanabilir. Önemli mesajlar kısa ve vurgulu olmalıdır.
Hız ayarını okunabilirliğe göre optimize edin. Çok hızlı kaydırma kullanıcı deneyimini düşürebilir; mesajlar rahatça takip edilebilecek bir hızda olmalıdır.
Pause özelliklerini aktif kullanın. “Pause On Hover” veya “Pause On Click” ayarlarını açmak, kullanıcıya metni durdurup inceleme imkânı sağlar.
Önemli duyurular için dikkat çekici renkler tercih edin. Gradient Color ve Gradient Width ayarları ile mesajın daha görünür olmasını sağlayabilirsiniz.
6. Kısıtlamalar
Aksiyon (Action) eklenemez. Marquee elementi yalnızca metni kaydırmak için tasarlanmış pasif bir bileşendir; bu nedenle ADD ACTION butonu desteklenmez.
Kullanıcı etkileşimi sınırlıdır. Marquee üzerindeki tüm davranışlar Properties panelindeki ayarlarla sınırlıdır; tıklama veya seçime bağlı aksiyon başlatılamaz.
Yalnızca yatay kaydırma desteklenir. Marquee dikey kaydırma moduna sahip değildir.
