Blog

  • 02 Mar 2009

Silverlight TabControl Kontrolü

Merhaba arkadaşlar bu makalemiz de Silverlight kontrol kütüphanesinde bulunan TabControl kontrolünü inceleyeceğiz

TabControl, Windows ve Web uygulamalarındaki gibi diğer kontrollere konteynır’lık eder ve form üzerinde ki diğer kontrollerin sekmeler içerisinde gösterilmesini sağlar. Kontrolü inceleyecek olursak içerisinde Tab’ler oluşturabilmemiz için TabItem türünden bir koleksiyon var. Bu sayede ister Expression Blend de istersek de dinamik olarak kod ile Tab’ler oluşturabiliyoruz.

Yeni bir Silverlight projesi başlatalım ve TabControl’ü projemiz de kullanalım. Projeyi başlattıktan sonra “Asset Library” den bir adet TabControl ekleyelim.

Yeni tab’ler oluşturmak için TabControl’in Common Properties sekmesinde bulunan Items Sekmesine tıklayalım.

Resim 2

Sonrasında açılan pencerede “Show System Assemblies” seçeneğini işaretleyip search ekranına TabItem yazıp gelen ekrandan TabItem’ı seçelim.

Resim 5

Ben 3 tane TabItem ekledim. Oluşan XAML kodunu inceleyecek olursak;

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"x:Class="TabPanelControl.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">

<Grid x:Name="LayoutRoot" Background="White">
    <basics:TabControl x:Name="tabPanel">
        <basics:TabItem Header="1. Sekme"></basics:TabItem>
        <basics:TabItem Header="2. Sekme"></basics:TabItem>
        <basics:TabItem Header="3. Sekme"></basics:TabItem>
    </basics:TabControl>
</Grid>

</UserControl>


Aynı işlemi dinamik olarak da yapalım. Yeni bir event listener oluşturalım ve bu event içinde de yeni TabItem’ı TabControl’e ekleyelim.

public Page()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(Page_Loaded);
}

voidPage_Loaded(object sender, RoutedEventArgs e)
{
    tabPanel.Items.Add(new TabItem() { Header ="Dinamik Tab" });
}

Son haline bakacak olursak aşağıdaki gibi oldu.

Resim 1

TabItem’ın header özelliğinde text dışında başka bir kontrol yada herhangi bir Layout Kontrolünü(Canvas, Grid, StackPanel) kullanarak başka kontroller de ekleyebiliyoruz. Layout kontrolü kullanmayacaksak sadece bir tane UIElement kontrolü ekleyebiliyoruz.

Resim 3

<basics:TabControl x:Name="tabPanel" SelectionChanged="tabPanel_SelectionChanged">

<basics:TabItem>
    <basics:TabItem.HeaderTemplate>
        <DataTemplate>
            <Grid> // Layout kontrolü içerisinde istediğimiz kadar kontrol ekleyebiliriz…
                <Rectangle Width="30"Height="30" Fill="Red"></Rectangle>
                <TextBlock>Selam</TextBlock>
            </Grid>
        </DataTemplate>
    </basics:TabItem.HeaderTemplate>
    <TextBlock>Birinci Sekme</TextBlock>
</basics:TabItem>

<basics:TabItem>
    <basics:TabItem.HeaderTemplate>
        <DataTemplate>
            <Ellipse Width="30" Height="30" Fill="Red"></Ellipse> //Sadece bir tane kontrol ekleyebiliriz…
        </DataTemplate>
    </basics:TabItem.HeaderTemplate>
    <TextBlock>İkinci Sekme</TextBlock>
</basics:TabItem>

</basics:TabControl>

Kontrolün çok işimize yarayacak SelectionChanged isimli bir eventi var. Bu event tablar arasında gezinirken yani bir tab’den diğer tab’e geçerken çalışır. Örneğin tab değiştiğinde TabControl’e bir animasyon verebilirsiniz... Örnek kullanımı aşağıdaki gibidir.

<basics:TabControl x:Name="tabPanel" SelectionChanged="tabPanel_SelectionChanged"></basics:TabControl>

private void tabPanel_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    MessageBox.Show("Tab değişti...");
}

Makalenin sonuna geldik, başka bir makalede görüşmek üzere. .NET ve Silverlight ile kalın ;)

Sem GÖKSU
www.semgoksu.com  | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net

Yorum (0)

Bu yazıya henüz yorum yapılmamış...

Yorum Yaz