Skip to main content

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:

TipNe 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

ÖzellikAçıklama
NameNesnenin 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.

ÖzellikAçıklama
ItemsSekmelerin listesi (List<TabItem>). Her TabItem bir sekmeyi tanımlar.

Behavior

ÖzellikAçıklama
SelectedIndexSeçili sekmenin sıra numarası (Int32, 0'dan başlar). Kodla değiştirerek açık sekmeyi değiştirebilirsiniz.
SelectedItemSeçili olan TabItem. O an açık sekmeye karşılık gelir; bu özelliğe bir TabItem atayarak da sekme değiştirebilirsiniz.
TabPositionSekme başlıklarının yeri (Position enum: Left / Right / Top / Bottom).
HasScrollbarSekmeler sığmadığında kaydırma çubuğu gösterir (Boolean).
ReadOnlySekme içeriğini salt okunur yapar (Boolean).

Appearance

ÖzellikAçıklama
Visible / Client VisibleNesnenin görünürlüğü. Visible sunucu tarafında, Client Visible tarayıcı tarafında çalışır.
Enabled / Client EnabledNesnenin aktif olup olmadığı.
TitleNesnenin başlığı (MultiLanguageText, çok dilli olabilir).
Style / ContainerStyleŞeridin ve içeriğin stil ayarları.
CustomClassNameÖzel CSS sınıfı.
TabItem üyeleri

Items listesindeki her sekme bir TabItem nesnesidir. Koddan tek bir sekmeyi okumak / değiştirmek için bu üyeleri kullanırsınız:

ÜyeTipAçıklama
KeyStringSekmenin benzersiz anahtarı. Sekmeyi koddan bulurken bunu kullanın.
TitleMultiLanguageTextSekme başlığı (çok dilli).
SelectedBooleanSekme açık mı.
EnabledBooleanSekme tıklanabilir mi. false yaparak tek bir sekmeyi devre dışı bırakırsınız.
OrderNoInt32Sekmenin sıra numarası.
IconStringSekme başlığındaki ikon.
HasScrollbarBooleanO 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;
Sekme gizlemek mi, devre dışı bırakmak mı?

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 SelectedIndex veya SelectedItem değ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.Enabled değerini false yapın.
  • Sekmeleri anahtara göre bulmak için her zaman TabItem.Key kullanın; sıra numarası (SelectedIndex) tasarımda sekme eklenip çıkarıldığında değişebilir, ama Key sabit 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, üzerine Accordion (tek seferde tek bölüm açık) davranışını ekler. Sekme yerine açılır / kapanır gruplar gerektiğinde kullanın; SelectedIndex ile 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.