Slider
Kullanıcının bir kaydırma çubuğunu (sürgüyü) sağa sola sürükleyerek sayısal bir değer seçmesini sağlayan nesnedir. Belirli bir alt ve üst sınır arasında, sayıyı elle yazmadan hızlıca seçmek için kullanılır.
Ne zaman kullanılır?
Belirli bir aralıkta sayısal değer seçilmesi gerektiğinde idealdir: yüzde, puan, öncelik seviyesi, miktar. Kullanıcı değeri sürükleyerek görsel olarak ayarlar. Serbest sayı girişi için Numeric, listeden seçim için ComboBox daha uygundur.
Değer tipi: int? (Nullable<Int32>)
Slider yalnızca tek bir int? Value taşır. Üzerinde seçilebilecek sayılar tamamen Min, Max ve Step ile belirlenir; bir Items listesi veya DataSource bağlama özelliği yoktur. Değer aralığını hazır bir listeden beslemeye çalışmayın, bunun yerine Min/Max/Step kullanın.
Tasarımcı özellikleri
Bir Slider seçildiğinde Özellik Görüntüleyici sekmelere ayrılır.
General
| Özellik | Açıklama |
|---|---|
Name | Nesnenin koddaki adı (ör. Slider1). Koddan bu adla erişirsiniz. |
Field Name | Veritabanındaki alanın adı. |
Behavior
| Özellik | Açıklama |
|---|---|
Min | Seçilebilecek en küçük değer (int?). |
Max | Seçilebilecek en büyük değer (int?). |
Step | Sürgü her hareket ettiğinde değerin kaçar kaçar değişeceği (adım miktarı, int). |
ReadOnly | Alanı salt okunur yapar; kullanıcı sürgüyü hareket ettiremez. |
Required | Alanı zorunlu yapar; değer seçilmezse form kaydedilmez. |
Tab Index | Tab tuşuyla geçiş sırasını belirler. |
Indexable | Alanın arama/dizinleme kapsamına alınıp alınmayacağı. |
Appearance
| Özellik | Açıklama |
|---|---|
Visible / Client Visible | Nesnenin görünürlüğü. |
Enabled / Client Enabled | Nesnenin aktif olup olmadığı. |
Caption | Nesnenin yanındaki etiket (ControlCaption); yazı, konum, hizalama gibi etiket ayarlarını taşır. |
Title | Nesnenin başlığı / ipucu metni (MultiLanguageText, çok dilli olabilir). |
Olaylar
Slider yalnızca üç gerçek olay üyesi sunar. Kullanıcı sürgüyü hareket ettirdiğinde değer olayları, form kaydedilirken de doğrulama olayı çalışır. Bunlar dışında bu nesnenin metin (Text) olayı veya ayrı bir yaşam döngüsü olay listesi yoktur.
Olaylar iki tarafta çalışabilir: sunucu olayları C# kodunda, istemci olayları tarayıcıdaki TypeScript kodunda.
Sunucu olayları (Server)
| Olay (üye adı) | Tip | Ne zaman çalışır |
|---|---|---|
ValueChanging | PropertyChangingEventArgs<int?> | Değer değişmeden hemen önce. İptal edilebilir (e.Cancel = true). |
ValueChanged | PropertyChangedEventArgs<int?> | Sürgü bırakılıp değer kesinleştiğinde. En sık kullanılan olaydır. |
ValidatingEvent | ValidatingEventArgs | Form kaydedilmeden önce değeri doğrulamak için (salt okunur üye, OnValidating ile bağlanır). |
İstemci olayları (Client)
İstemci tarafında değer olaylarının küçük harfli karşılıkları kullanılır:
| Olay | Ne zaman çalışır |
|---|---|
OnValueChanging | Değer değişmeden hemen önce (iptal edilebilir). |
OnValueChanged | Değer kesinleştiğinde. |
ValueChanging olayının parametresi (args TS, e C#) şunları taşır:
newValue/NewValue— seçilmek istenen yeni değer (int?)oldValue/OldValue— önceki değercancel/Cancel—trueyapılırsa değişiklik iptal edilir (yalnızcaChangingolayında)
ValueChanged olayında cancel yoktur (değişiklik artık gerçekleşmiştir).
Kod örnekleri
Bir Slider'a üç yerden erişebilirsiniz. Slider'ın değeri sayıdır (int?), bu yüzden okurken null olabileceğini unutmayın. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir.
Form kodu (C#, sunucu)
Form kodunda nesneye doğrudan adıyla erişirsiniz:
// Oku
int? deger = Slider1.Value;
// Yaz
Slider1.Value = 50;
Akış (Flow) kodu (C#, sunucu)
Akış kodunda nesneye Document1.Controls üzerinden erişirsiniz. Burada indeksleyici object döndürür, bu yüzden okurken dönüştürmeniz gerekir:
// Oku (null güvenli)
var ham = Document1.Controls["Slider1"].Value;
int? deger = ham != null ? Convert.ToInt32(ham) : (int?)null;
// Yaz
Document1.Controls["Slider1"].Value = 50;
İstemci kodu (TypeScript, tarayıcı)
İstemci tarafında nesnelere this. ile erişilir ve özellik adları küçük harfle yazılır (value):
// Oku
let deger = this.Slider1.value;
// Yaz
this.Slider1.value = 50;
Sürgünün seçebileceği değerler Min ile Max arasındadır ve Step kadar adımlarla ilerler. Örneğin Min=0, Max=100, Step=10 ise sürgü yalnızca 0, 10, 20 ... 100 değerlerini alır. Koddan değer set ederken de bu aralığın dışına çıkmayın.
Örnek: değeri doğrulama (OnValueChanging)
OnValueChanging değer değişmeden hemen önce çalışır; istemediğiniz bir değeri burada iptal edebilirsiniz. Aşağıdaki örnekte 80'den büyük değer seçilmesi engellenir.
İstemci (TypeScript):
async Slider1_OnValueChanging(args: Controls.EventArgs.IPropertyChangingEventArgs<number>) {
if (args.newValue > 80) {
args.cancel = true; // Değer değişimini iptal eder
this.showMessage("Uyarı", "En fazla 80 seçilebilir.", "Validation");
}
}
Sunucu (C#):
void Slider1_OnValueChanging(object sender, PropertyChangingEventArgs<int?> e)
{
if (e.NewValue > 80)
{
e.Cancel = true;
ShowMessage("Uyarı", "En fazla 80 seçilebilir.",
Bimser.CSP.FormControls.RuleManager.AlertType.Validation);
}
}
Örnek: kayıtta doğrulama (ValidatingEvent)
ValidatingEvent, form kaydedilmeden önce sunucuda çalışır. Değeri reddetmek için e.Cancel = true yapıp e.Messages listesine bir doğrulama mesajı eklersiniz. Handler ServerEvents üzerinden OnValidating adıyla bağlanır.
void Slider1_OnValidating(object sender, ValidatingEventArgs e)
{
if (Slider1.Value == null || Slider1.Value < 10)
{
e.Cancel = true;
e.Messages.Add(new Bimser.CSP.FormControls.RuleManager.ValidationMessage
{
Message = "En az 10 seçmelisiniz.",
Type = Bimser.CSP.FormControls.RuleManager.AlertType.Validation
});
}
}
İpuçları
Min,MaxveStepdeğerlerini formun mantığına göre ayarlayın; örneğin yüzde içinMin=0,Max=100kullanın.- Değer okunurken
nullgelebilir (kullanıcı sürgüye hiç dokunmadıysa). Hesaplamadan önceif (Slider1.Value != null)kontrolü yapın. - Slider'ın bir liste/
DataSourcebağlama özelliği yoktur; durulacak değerleriMin/Max/Stepile sınırlandırın. - Tasarım zamanında atanan varsayılan değeri kod ile temizlemek için
Slider1.ClearDefaultValue()çağırabilirsiniz. - Değere kutulanmış (
object) biçimde ihtiyaç duyduğunuzdaSlider1.GetValueAsObject()kullanabilirsiniz.
Tüm tasarımcı özellikleri (tam liste)
General: Name, Field Name
Behavior: Min, Max, Step, ReadOnly, DefaultReadOnly, Required, Tab Index, Indexable, EntityPath
Appearance: Visible, Client Visible, Enabled, Client Enabled, DefaultEnabled, DefaultClientEnabled, Caption, Title, Style, Container Style, Custom Class Name, Context Menu Key, Context Menu Column Key, Context Menu Target
Olaylar (Server): ValueChanging, ValueChanged, ValidatingEvent
Olaylar (Client): OnValueChanging, OnValueChanged
Metotlar: ClearDefaultValue(), GetValueAsObject(), GetData(), GetDifferences(object)