Skip to main content

ListBox

Kullanıcının açık bir şekilde görünen listeden bir ya da birden çok değer seçtiği nesnedir. Seçenekler açılır kutuda gizlenmez, hepsi ekranda görünür. Rol, yetki, departman ya da etiket gibi aynı anda birden çok seçim yapılabilen alanlar için uygundur.

Ne zaman kullanılır?

Seçeneklerin görünür kalması ve kullanıcının birden çok değeri kolayca işaretlemesi gerektiğinde idealdir: yetkiler, ilgili birimler, etiketler. Tek seçim ve az yer kaplaması gerektiğinde ComboBox, evet/hayır tipi tekil işaretlemelerde CheckBox daha uygundur.

Değer tipi: object

Tasarımcı özellikleri

Bir ListBox seçildiğinde Özellik Görüntüleyici sekmelere ayrılır.

General

ÖzellikAçıklama
NameNesnenin koddaki adı (ör. ListBox1). Koddan bu adla erişirsiniz.
Field NameVeritabanındaki alanın adı.

Label

Nesnenin yanındaki etiketi yönetir.

ÖzellikAçıklama
Caption / TextEtiketin yazısı (çok dilli olabilir).
PositionEtiketin yeri: solda (Left) veya üstte (Top).
Width / HeightEtiketin boyutu.
FontYazı tipi, kalın / italik / altı çizili.
Show ColonEtiketin sonuna iki nokta (:) ekler.
Horizontal Align / Vertical AlignEtiketin hizası.
VisibleEtiketi gösterir veya gizler.

Data Source

ListBox'ın seçeneklerini bu sekmeden beslersiniz. Seçenekleri elle girebilir ya da bir veri kaynağına bağlayabilirsiniz.

ÖzellikAçıklama
ItemsElle girilen seçenek listesi. Her satırın bir metni ve bir değeri olur.
Data SourceSeçenekleri besleyen veri kaynağı (sorgu / liste).
Data Source TypeVeri kaynağının türü.
DataKoda gelen ham seçenek verisi (metin/değer çiftleri).
Selected Item ValuesSeçili öğelerin değerleri.
Selected ValuesSeçili değerler listesi.
Text SeparatorBirden çok seçim gösterilirken metinleri ayıran karakter.
Value SeparatorBirden çok değer saklanırken değerleri ayıran karakter.

Behavior

ÖzellikAçıklama
ReadOnlyAlanı salt okunur yapar; seçim değiştirilemez.
RequiredAlanı zorunlu yapar; seçim yapılmazsa form kaydedilmez.
AllowSelectAllListenin tümünü tek seferde seçmeyi sağlayan bir seçenek ekler.
ShowSearchListenin üstüne arama kutusu ekler. Uzun listelerde işe yarar.
SelectedItemsO an seçili olan öğeler.
DirectionÖğelerin diziliş yönü (dikey / yatay).
ValueTypeSaklanan değerin türü (metin, sayı, tarih vb.).
DateValueFormatDeğer tarih olduğunda kullanılan biçim.
DecimalValuePrecisionDeğer ondalıklı sayı olduğunda basamak sayısı.
Tab IndexTab tuşuyla geçiş sırasını belirler.

Appearance

ÖzellikAçıklama
Visible / Client VisibleNesnenin görünürlüğü.
Enabled / Client EnabledNesnenin aktif olup olmadığı.
TextSeçili öğelerin ekranda görünen metni.
TitleÜzerine gelince çıkan başlık (tooltip).
ValueNesnenin saklanan değeri (seçili öğelerin değerleri).

Olaylar

Bir nesne açılırken olaylar belirli bir sırayla tetiklenir; kullanıcı seçim yapınca da ayrı olaylar çalışır. Doğru kodu doğru olaya yazmak için bu sırayı bilmek işinizi kolaylaştırır.

Açılış sırası: OnInitOnLoadOnDataLoadOnPreRenderOnRender

Kullanıcı seçim yaparken: OnValueChangingOnValueChanged

Olaylar iki tarafta çalışabilir: sunucu olayları C# kodunda, istemci olayları tarayıcıdaki TypeScript kodunda. ListBox'ın iki tarafta sunduğu olaylar farklıdır.

Sunucu olayları (Server)

OlayNe zaman çalışır
OnInitForm açılırken nesne oluşturulduğunda, en başta.
OnLoadOnInit'in hemen ardından, nesne yüklenince.
OnRenderNesne ekrana çizilirken.
OnValueChangingSeçim değişmeden hemen önce (iptal edilebilir).
OnValueChangedKullanıcı seçimi değiştirdiğinde. En sık kullanılan olaydır.
OnTextChangingGörünen metin değişmeden hemen önce.
OnTextChangedGörünen metin değiştikten hemen sonra.
OnValidatingDeğer doğrulanırken (geçerli mi diye kontrol edilirken).

İstemci olayları (Client)

Sunucudaki olaylara ek olarak tarayıcı tarafında şunlar da vardır:

OlayNe zaman çalışır
OnDataLoadNesnenin seçenek verisi yüklendiğinde.
OnPreRenderNesne ekrana çizilmeden hemen önce.
OnClick / OnDoubleClickNesneye tıklanınca / çift tıklanınca.
OnPropertyChanging / OnPropertyChangedBir özellik kodla değiştirilmeden önce / sonra.
Olay parametreleri

OnValueChanging / OnTextChanging olaylarının parametresi (args TS, e C#) şunları taşır:

  • newValue / NewValue — seçilmek istenen yeni değer
  • oldValue / OldValue — önceki değer
  • cancel / Canceltrue yapılırsa değişiklik iptal edilir (yalnızca Changing olaylarında)

Changed olaylarında cancel yoktur (değişiklik artık gerçekleşmiştir).

Kod örnekleri

Bir ListBox'a üç yerden erişebilirsiniz. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir. ListBox çoklu seçime izin verdiği için değeri çoğu zaman bir öğe listesidir; tipi object olduğu için okurken türüne göre çevirmek gerekir.

Form kodu (C#, sunucu)

Form kodunda nesneye doğrudan adıyla erişirsiniz:

// Oku (seçili değer)
var secilen = ListBox1.Value;

// Seçili öğelerin değerlerini oku
var degerler = ListBox1.SelectedValues;

// Görünen metni oku
string gorunen = ListBox1.Text;

// Yaz (bir değer seç)
ListBox1.Value = "ROL_YONETICI";

Akış (Flow) kodu (C#, sunucu)

Akış kodunda nesneye Document1.Controls üzerinden erişirsiniz:

// Oku
var secilen = Document1.Controls["ListBox1"].Value;

// Yaz
Document1.Controls["ListBox1"].Value = "ROL_YONETICI";

İstemci kodu (TypeScript, tarayıcı)

İstemci tarafında nesnelere this. ile erişilir ve özellik adları küçük harfle yazılır (value, text):

// Oku
const secilen = this.ListBox1.value;
const gorunen = this.ListBox1.text;

// Yaz
this.ListBox1.value = "ROL_YONETICI";
.Value mi .Text mi?

.Value saklanan değerdir (ör. "ROL_YONETICI"), .Text ekranda görünen metindir (ör. "Yönetici"). Birden çok seçimde değerler Value Separator, görünen metinler Text Separator ile ayrılır. Tek tek seçili öğelerle çalışmak için SelectedValues daha pratiktir.

Örnek: seçime göre işlem yapma (OnValueChanging)

OnValueChanging seçim değişmeden hemen önce çalışır; istemediğiniz bir seçimi burada iptal edebilirsiniz. Aşağıdaki örnekte "PASIF" değerinin seçilmesi engellenir.

İstemci (TypeScript):

async ListBox1_OnValueChanging(args: Controls.EventArgs.IPropertyChangingEventArgs<object>) {
if (args.newValue == "PASIF") {
args.cancel = true; // Seçimi iptal eder
this.showMessage("Uyarı", "Pasif değer seçilemez.", "Validation");
}
}

Sunucu (C#):

void ListBox1_OnValueChanging(object sender, PropertyChangingEventArgs<object> e)
{
if (e.NewValue?.ToString() == "PASIF")
{
e.Cancel = true;
ShowMessage("Uyarı", "Pasif değer seçilemez.",
Bimser.CSP.FormControls.RuleManager.AlertType.Validation);
}
}

İpuçları

  • Aynı anda birden çok seçim gerekiyorsa ListBox doğru tercihtir; tek seçim yeterliyse ComboBox daha az yer kaplar.
  • Uzun listelerde ShowSearch özelliğini açın; kullanıcı listede yazarak arar.
  • Tümünü seçtirmek isterseniz AllowSelectAll özelliğini açın.
  • Seçenekleri elle (Items) yerine bir veri kaynağına (Data Source) bağlarsanız listeyi tek yerden güncellersiniz.
  • Değer tipi object olduğundan, seçili öğelerle çalışırken SelectedValues üzerinden ilerlemek null hatasını önler.
Tüm tasarımcı özellikleri (tam liste)

General: Name, Field Name

Label: Caption, Text, Position, Left, Width, Height, Font (Bold / Italic / Underline), Ellipsis, Visible, Show Colon, Horizontal Align, Vertical Align, Mark Char, Mark Position

Data Source: Data, DataSource, DataSourceType, Items, SelectedItemValues, SelectedValues, TextSeparator, ValueSeparator

Behavior: AllowSelectAll, DateValueFormat, DecimalValuePrecision, Direction, ReadOnly, Required, SelectedItems, ShowSearch, TabIndex, ValueType

Appearance: ClientEnabled, ClientVisible, Enabled, Text, Title, Value, Visible

Olaylar (Client): OnInit, OnLoad, OnPreRender, OnRender, OnPropertyChanging, OnPropertyChanged, OnClick, OnDoubleClick, OnDataLoad, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnValidating

Olaylar (Server): OnInit, OnLoad, OnRender, OnValueChanging, OnValueChanged, OnTextChanging, OnTextChanged, OnValidating