Tabs
Formu birden çok sekmeye bölen panel nesnesidir. Her sekme kendi içinde başka nesneler barındırır; kullanıcı sekmeler arasında geçiş yaparak farklı alan gruplarına ulaşır.
Bu nesnenin bir değeri yoktur. Tabs bir kapsayıcı (container) nesnedir; içine yerleştirdiğiniz nesneleri tutar, kendisi veri saklamaz. Tek stateful (durumlu) bilgisi açık olan sekmenin sıra numarasıdır (SelectedIndex). Temel sınıfı ContainerControl olduğu için Panel, Section gibi diğer kapsayıcılarla aynı görünürlük / aktiflik özelliklerini paylaşır.
Ne zaman kullanılır?
Uzun formları daha okunur hale getirmek için idealdir. Örneğin "Genel Bilgiler", "Mali Bilgiler" ve "Ekler" gibi mantıksal grupları ayrı sekmelere koyarsınız; kullanıcı tek ekranda kaybolmaz. Sadece görsel ayrım yeterliyse Panel veya Section daha hafif kalır; sekmeli geçiş gerekiyorsa Tabs kullanın. Sekmeler yerine açılır / kapanır (akordeon) gruplar istiyorsanız Collapse nesnesine bakın; aynı sekme yüzeyini miras alır.
Üç ayrı nesneyi karıştırmayın
Sekmeli yapı üç ayrı tipten oluşur. Kodda hangi özelliğin nerede durduğunu bilmek için ayrımı netleştirin:
| Tip | Ne işe yarar | Önemli üyeler |
|---|---|---|
Tabs (ContainerControl) | Sekme şeridinin kendisi. Tüm sekmeleri tutar, açık sekmeyi yönetir. | Items (List<TabItem>), SelectedIndex, SelectedItem, TabPosition, HasScrollbar |
TabItem (Common.TabItem) | Items listesindeki şerit tanımlayıcısı. Bir sekmenin başlık / sıra / aktiflik bilgisini taşır. | Key, Title, Selected, Enabled, OrderNo, Icon, HasScrollbar |
Tab (PanelBase) | Tek bir sekme sayfası (içine nesne koyduğunuz panel). | Key, Selected, OrderNo, Icon, Title, TitleFont, HeaderMode, CollapsedDefault |
Kısaca: Tabs şeridi yönetir, TabItem şerit üzerindeki başlığı tanımlar, Tab ise o sekmenin içeriğini barındıran sayfadır. Key, Icon, OrderNo hem TabItem hem Tab üzerinde bulunur; koddan sekmeleri gezerken çoğunlukla Tabs1.Items (yani TabItem listesi) ile çalışırsınız.
Tasarımcı özellikleri
Bir Tabs seçildiğinde Özellik Görüntüleyici sekmelere ayrılır. Tabs bir kapsayıcı olduğu için Field Name / Size gibi veri alanı özellikleri yoktur.
General
| Özellik | Açıklama |
|---|---|
Name | Nesnenin koddaki adı (ör. Tabs1). Koddan bu adla erişirsiniz. |
Data Source
Sekmelerin kendisi bu nesnenin veri kaynağıdır. Sekmeleri tasarımcıdan ekler, koddan da yönetebilirsiniz.
| Özellik | Açıklama |
|---|---|
Items | Sekmelerin listesi (List<TabItem>). Her TabItem bir sekmeyi tanımlar. |
Behavior
| Özellik | Açıklama |
|---|---|
SelectedIndex | Seçili sekmenin sıra numarası (Int32, 0'dan başlar). Kodla değiştirerek açık sekmeyi değiştirebilirsiniz. |
SelectedItem | Seçili olan TabItem. O an açık sekmeye karşılık gelir; bu özelliğe bir TabItem atayarak da sekme değiştirebilirsiniz. |
TabPosition | Sekme başlıklarının yeri (Position enum: Left / Right / Top / Bottom). |
HasScrollbar | Sekmeler sığmadığında kaydırma çubuğu gösterir (Boolean). |
ReadOnly | Sekme içeriğini salt okunur yapar (Boolean). |
Appearance
| Özellik | Açıklama |
|---|---|
Visible / Client Visible | Nesnenin görünürlüğü. Visible sunucu tarafında, Client Visible tarayıcı tarafında çalışır. |
Enabled / Client Enabled | Nesnenin aktif olup olmadığı. |
Title | Nesnenin başlığı (MultiLanguageText, çok dilli olabilir). |
Style / ContainerStyle | Şeridin ve içeriğin stil ayarları. |
CustomClassName | Özel CSS sınıfı. |
Items listesindeki her sekme bir TabItem nesnesidir. Koddan tek bir sekmeyi okumak / değiştirmek için bu üyeleri kullanırsınız:
| Üye | Tip | Açıklama |
|---|---|---|
Key | String | Sekmenin benzersiz anahtarı. Sekmeyi koddan bulurken bunu kullanın. |
Title | MultiLanguageText | Sekme başlığı (çok dilli). |
Selected | Boolean | Sekme açık mı. |
Enabled | Boolean | Sekme tıklanabilir mi. false yaparak tek bir sekmeyi devre dışı bırakırsınız. |
OrderNo | Int32 | Sekmenin sıra numarası. |
Icon | String | Sekme başlığındaki ikon. |
HasScrollbar | Boolean | O sekmenin içeriğinde kaydırma çubuğu. |
Olaylar
Tabs bir kapsayıcı nesnedir ve kendine ait bir olay yüzeyi yoktur. Sınıf tanımında hiçbir EventHandler üyesi bulunmaz: değer / metin değişim olayı (OnValueChanging, OnTextChanged vb.) yoktur, çünkü Tabs veri tutmaz. Bu nedenle Tabs için ayrı bir "Sunucu olayları / İstemci olayları" tablosu vermiyoruz.
Sekme değişimine tepki vermeniz gerekiyorsa mantığı sekme içindeki nesnelerin olaylarına ya da formun genel akış olaylarına yazın; başlangıçta açık gelecek sekmeyi ise form yüklenirken (örneğin form yükleme kodunda) SelectedIndex ile ayarlayın.
Kod örnekleri
Tabs'in değeri olmadığı için .Value / .Text ile veri okuyup yazmazsınız. Bunun yerine açık sekmeyi (SelectedIndex veya SelectedItem), tek tek sekmelerin aktifliğini (TabItem.Enabled) ve görünürlüğü yönetirsiniz. Sunucu örnekleri turuncu, istemci örnekleri kırmızı çerçevelidir.
Form kodu (C#, sunucu)
Form kodunda nesneye doğrudan adıyla erişirsiniz:
// Açık sekmeyi sıra numarasıyla değiştir (ilk sekme 0'dır)
Tabs1.SelectedIndex = 1;
// Açık sekmeyi okuma
int acikSekme = Tabs1.SelectedIndex;
// Nesneyi gizle / aktiflik
Tabs1.Visible = false;
Tabs1.Enabled = true;
Akış (Flow) kodu (C#, sunucu)
Akış kodunda nesneye Document1.Controls üzerinden erişirsiniz:
// Açık sekmeyi değiştir
Document1.Controls["Tabs1"].SelectedIndex = 1;
// Nesneyi gizle
Document1.Controls["Tabs1"].Visible = false;
İstemci kodu (TypeScript, tarayıcı)
İstemci tarafında nesnelere this. ile erişilir ve özellik adları küçük harfle yazılır:
// Açık sekmeyi değiştir
this.Tabs1.selectedIndex = 1;
// Görünürlük
this.Tabs1.visible = false;
Tüm nesneyi Visible = false ile gizlerseniz bütün sekmeler kaybolur. Tek bir sekmeyi kapatmak istiyorsanız ya o sekmeye karşılık gelen TabItem'in Enabled özelliğini false yapın (sekme görünür ama tıklanamaz), ya da tasarımı SelectedIndex ile yönlendirin.
Örnek 1: Sekmeyi SelectedItem ile değiştirmek
SelectedIndex dışında, doğrudan bir TabItem atayarak da açık sekmeyi değiştirebilirsiniz. Aşağıdaki örnek Key değeri "Mali" olan sekmeyi açar.
// Items içinde anahtarı "Mali" olan sekmeyi bul ve aç
var maliSekme = Tabs1.Items.FirstOrDefault(t => t.Key == "Mali");
if (maliSekme != null)
{
Tabs1.SelectedItem = maliSekme; // SelectedItem set edilebilir bir özelliktir
}
// Açık sekmenin başlığını ve anahtarını okuma
string acikBaslik = Tabs1.SelectedItem?.Title?.ToString();
string acikAnahtar = Tabs1.SelectedItem?.Key;
Örnek 2: Sekmeleri gezip belirli bir sekmeyi devre dışı bırakmak
Items koleksiyonu TabItem nesnelerinden oluşur. Bir döngüyle gezip tek tek sekmeleri açıp kapatabilirsiniz. Burada role göre "Mali Bilgiler" sekmesi pasif yapılıyor.
bool maliYetkisiVar = false; // örnek: kullanıcının yetkisine göre belirlenir
foreach (var sekme in Tabs1.Items)
{
if (sekme.Key == "Mali")
{
sekme.Enabled = maliYetkisiVar; // sekme görünür kalır ama tıklanamaz
}
}
Örnek 3: Sekmeleri sıraya dizmek (OrderNo)
OrderNo her sekmenin sıra numarasıdır. Sekmeleri koddan yeniden sıralamak için bu değeri yazarsınız.
// Sekmeleri istenen mantıksal sıraya göre diz
var sira = new Dictionary<string, int>
{
["Genel"] = 0,
["Mali"] = 1,
["Ekler"] = 2
};
foreach (var sekme in Tabs1.Items)
{
if (sira.TryGetValue(sekme.Key, out int no))
{
sekme.OrderNo = no;
}
}
Örnek 4: Açık sekmeyi forma göre belirlemek (akış kodu)
Form bir onay adımına geldiğinde "Onay" sekmesini öne çıkarmak isteyebilirsiniz. Akış kodunda Document1.Controls üzerinden anahtara göre sekme bulup açabilirsiniz.
var tabs = Document1.Controls["Tabs1"];
// Anahtarı "Onay" olan sekmeyi bul ve aç
var onaySekme = tabs.Items.FirstOrDefault(t => t.Key == "Onay");
if (onaySekme != null)
{
tabs.SelectedItem = onaySekme;
}
else
{
tabs.SelectedIndex = 0; // bulunamazsa ilk sekmeye dön
}
Örnek 5: Tek bir sekmenin başlığını çok dilli güncellemek
TabItem.Title bir MultiLanguageText'tir; düz string değil, kültür-bazlı bir metin tutucudur. Doğru atama bir Dictionary<string,string> ile yapılır.
var maliSekme = Tabs1.Items.FirstOrDefault(t => t.Key == "Mali");
if (maliSekme != null)
{
maliSekme.Title = new MultiLanguageText(new Dictionary<string, string>
{
{ "tr-TR", "Mali Bilgiler" },
{ "en-US", "Financial Info" }
});
}
İpuçları
- Sekmeleri mantıksal gruplara göre ayırın (Genel / Mali / Ekler gibi); her sekmeye çok fazla nesne koymayın.
- Form açılışında belirli bir sekmenin açık gelmesini istiyorsanız form yükleme kodunda
SelectedIndexveyaSelectedItemdeğerini ayarlayın. Tabs'in kendine ait bir olayı olmadığını unutmayın. - Tek bir sekmeyi yetkilendirmeye bağlı kapatmak için tüm nesneyi gizlemek yerine ilgili
TabItem.Enableddeğerinifalseyapın. - Sekmeleri anahtara göre bulmak için her zaman
TabItem.Keykullanın; sıra numarası (SelectedIndex) tasarımda sekme eklenip çıkarıldığında değişebilir, amaKeysabit kalır. - Çok sayıda sekme varsa
HasScrollbarözelliğini açarak başlıkların taşmasını önleyin.
İlgili nesneler
- Collapse (
Bimser.CSP.FormControls.Controls.Collapse : Tabs) — Tabs yüzeyinin tamamını (Items,SelectedIndex,SelectedItem,HasScrollbar) miras alır, üzerineAccordion(tek seferde tek bölüm açık) davranışını ekler. Sekme yerine açılır / kapanır gruplar gerektiğinde kullanın;SelectedIndexile açık bölümü aynı şekilde yönetirsiniz. - Panel ve Section — sekmeli geçiş gerekmediğinde daha hafif kapsayıcılardır.
Tüm tasarımcı özellikleri (tam liste)
General: Name
Data Source: Items (List<TabItem>)
Behavior: HasScrollbar, ReadOnly, SelectedIndex, SelectedItem, TabPosition, DefaultReadOnly
Appearance: Caption, ClientEnabled, ClientVisible, Enabled, Title, Visible, Style, ContainerStyle, CustomClassName, ControlId, ContextMenuKey, ContextMenuColumnKey, ContextMenuTarget, DefaultEnabled, DefaultClientEnabled, Loading
TabItem üyeleri: Key, Title (MultiLanguageText), Selected, Enabled, OrderNo, Icon, HasScrollbar
Tab (sekme sayfası) üyeleri: Key, Title, Selected, OrderNo, Icon, TitleFont, HeaderMode, CollapsedDefault
Olaylar: Yok. Tabs bir kapsayıcıdır; sınıfında hiçbir EventHandler üyesi tanımlı değildir.