Silverlight 2.0 Beta 2 ile beraber gelen TabControl incelemesi

0 dakikada yazıldı

7236 defa okundu

Düzenle

Silverlight 2.0 Beta 2 ile beraber gelen yeni kontrollerden biri
olan TabControl özellikle Windows uygulamalarından alışmış olduğumuz
sayfalı uygulama tasarımlı ekranları web ortamında da rahatlıkla
oluşturabilmemizi sağlıyor. System.Windows.Controls.Extended sınıfı
altında bulunan TabControl'u kullanabilmek için projenize söz konusu
sınıfı reference olarak eklemiş olmanız gerekiyor. Visual Studio
içerisinde Silverlight projenize sağ tuş tıklayarak "Add Reference"
dedikten sonra gerekli eklemeleri yapabilirsiniz. Visual Studio
içerisinde araç çubuğundan bir TabControl alarak sahneye
yerleştirdiğinizde de işlem otomatik olarak gerçekleşecektir.
Referanslama kısmı tamamlandıktan sonra Expression Blend içerisinde de
Asset Library'de Custom Controls kısmında projenize referans olarak
eklediğiniz sınıfların altındaki kontrolleri bulabilirsiniz.

Expression Blend 2 June Preview içerisinde TabControl ve TabItem
Expression Blend 2 June Preview içerisinde TabControl ve TabItem

Expression Blend içerisinde sahneye bir TabControl yerleştirdikten sonra
sıra geldi söz konusu TabControl içerisinde TabItem (sayfa)
yerleştirmeye. Kolaylık olması açısından Blend içerisinde yerleştirmiş
olduğunuz TabControl'a "Objects and Timeline" penceresinde çift
tıklarsanız söz konusu kontrolün sarı bir çerçeve içerisine alındığını
göreceksiniz. Bu şekilde herhangi bir kontrol sarı bir çerçeve ile
işaretlendiğinde o kontrol dışında ekranda bulunan her şey kilitlenmiş
olacaktır. Böylece rahatlıkla ekrana yerleştireceğimiz yeni TabItem
kontrollerinin kesinlikle TabControl içerisine yerleştirileceğini
garanti edebiliriz. Aksi halde fare ile kontrol eklerken özel olarak
dikkat etmeniz gerekecektir.

<UserControl
x:Class="SilverlightApplication3.Page"

            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

            Width="400"

            Height="300"

            xmlns:System_Windows_Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"

            xmlns:System_Windows_Controls_Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Extended">

  <Grid
x:Name="LayoutRoot"

        Background="White">

    <System_Windows_Controls:TabControl HorizontalAlignment="Left"

                                       
Margin="8,34,0,64"

                                       
Width="184">

      <System_Windows_Controls:TabItem
Content
="TabItem"

                                     
Header="Tab1"/>

      <System_Windows_Controls:TabItem Content="TabItem2"

                                     
Header="Tab2"/>

    </System_Windows_Controls:TabControl>

  </Grid>

</UserControl>

Yukarıdaki kod içerisinde yerleştirdiğimiz TabControl ve TabItem'ların
XML kodunda namespace olarak uzun uzun System_Windows_Controls adını
gözüyorsunuz. Aslında bu yapıyı değiştirebiliriz; eğer dokümanın
üzerindeki namespace isimlerini değiştirirseniz aynı isimleri kodunuz
içerisinde de rahatlıkla kullanabilirsiniz.

TabItem'ların iki önemli özelliği var; bunlardan ilki Header yani
TabItem'ım sayfa bilgisinin gözüktüğü yerde yazılacak olan yazı, diğeri
ise Content yani TabItem'ın temsil ettiği sayfada gösterilecek olan
içerik. Şimdi örneğimizdeki hem namespace'leri değiştirerek daha
okunaklı bir isim verelim hem de TabItem'larımızın içerisine daha farklı
içerikler yerleştirelim.

<UserControl
x:Class="SilverlightApplication3.Page"

            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

            Width="400"

            Height="300"

            xmlns:Ex="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"

            xmlns:Pri="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Extended"

            xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

  <Grid
x:Name="LayoutRoot"

        Background="White">

    <Ex:TabControl
HorizontalAlignment="Left"

                  Margin="8,34,0,64"

                  Width="184">

      <Ex:TabItem>

      **  <**Ex:TabItem.Header>

          <Grid>

            <Image
HorizontalAlignment="Right"

                  Width="76"

                  Source="Dock.jpg"/>

            <TextBlock>Bölüm 1</TextBlock>

          </Grid>

        </Ex:TabItem.Header>

        <TextBlock>Deneme amaçlı metin</TextBlock>

    **  </**Ex:TabItem>

      <Ex:TabItem
Content="TabItem2"

                  Header="Tab2"/>

    </Ex:TabControl>

  </Grid>

</UserControl>

Kodumuz içerisinde yer alan TabItem'ın hem Header (başlık) kısmını hem
de içeriğini özel olarak düzenliyoruz. <Ex:TabItem.Header> tagları
arasında TabItem için header görseli olarak farklı Silverlight
kontrolleri kullanabiliyoruz. Tek bir sınırlamamız var; Header
içerisinde kök element sadece bir adet olabiliyor. Bu sorunu aşmak için
Container Elementlerimizden Grid'i kullanabiliriz. Header içerisine
yerleştirdiğimiz bir Grid içerisine istediğimiz kadar Silverlight
kontrolü koyabiliriz. Header tagları haricinde doğrudan TabItem'ın
içerisine de TabItem'ın sayfa içeriğinde gözükmesini istediğimiz
kontrolleri koyabiliyoruz.

Özelleştirilmiş TabItem kontrolümüz karşımızda!
Özelleştirilmiş TabItem kontrolümüz karşımızda!

TabItem'ların Header'ları içerisine farklı Silverlight kontrollerini
koymanın yanı sıra istersek Header'ın tamamen görsel şablonunu da
değiştirebiliriz. Bunun için bir ControlTemplate hazırlayarak
TabItem'ımıza bağlamamız gerekecek.

<UserControl
x:Class="SilverlightApplication3.Page"

            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

            Width="400"

            Height="300"

            xmlns:Ex="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"

            xmlns:Pri="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Extended"

            xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

  <UserControl.Resources>

    <ControlTemplate x:Key="TabItemControlTemplate1"

                    TargetType="Ex:TabItem">

      <Grid>

        <Image
HorizontalAlignment="Left"

              Width="100"

              Source="Forest.jpg"/>

        <ContentPresenter Content="{TemplateBinding Header}"/>

      </Grid>

    </ControlTemplate>

  </UserControl.Resources>

  <Grid
x:Name="LayoutRoot"

        Background="White">

    <Ex:TabControl
HorizontalAlignment="Left"

                  Margin="8,34,0,64"

                  Width="184">

      <Ex:TabItem
Template="{StaticResource
TabItemControlTemplate1}
">

        <Ex:TabItem.Header>

          <Grid>

            <Image
HorizontalAlignment="Right"

                  Width="76"

                  Source="Dock.jpg"/>

            <TextBlock>Bölüm 1</TextBlock>

          </Grid>

        </Ex:TabItem.Header>

        <TextBlock>Deneme amaçlı metin</TextBlock>

      </Ex:TabItem>

      <Ex:TabItem
Content="TabItem2"

                  Header="Tab2"/>

    </Ex:TabControl>

  </Grid>

</UserControl>

Kodumuzda yarattığımız ControlTemplate içerisinde bir Grid ve onun
içinde de bir Image ile ContentPresenter yer alıyor. Söz konusu
ContentPresenter'ın Content özelliğini Template'in uygulanacağı
kontrolün Header özelliğine bağlanmış. Böylece bu şablonu bağlı bir
TabItem'ın Header'ına yerleştirilen kontrollerin bu şablon
uygulandığında şablon içerisindeki ContentPresenter'ın içerisine
yerleştirilecek. XAML kodunu çok uzatmamak adına örnekte sürekli Image
nesneleri kullandığımız için ortaya çıkan örnek çok anlamlı olmayacaktır
fakat Expression Blend içerisinde biraz daha detaylı bir çalışma ile
güzel sonuçlar alınabilir.

Expression Blend 2 July Preview içerisinde Silverlight ControlTemplate desteği.
Expression Blend 2 July Preview içerisinde Silverlight ControlTemplate
desteği.

Tüm bu yapıları tamamen XAML kodları yazarak oluşturabileceğiniz gibi
Expression Blend içerisinde araçları kullanarak da yapabilirsiniz.
Herhangi bir TabItem kontrolüne sağ tuş ile tıklayarak yukarıdaki
şekilde "Edit Control Parts / Edit Template" diyerek TabItem'ların
görselliklerini Blend içerisinde de ayarlayabilirsiniz. Her kontrol için
ilk başta "Edit a Copy" diyerek var olan görsellikten bir şablon kopyası
alarak veya "Create Empty" diyerek boş bir şablon yaratarak
ilerleyebilirsiniz.

Son olarak her TabControl'ün bir de TabStripPlacement özelliği
olduğundan bahsetmek gerek. Bu özelliğe verdiğiniz değerler ile
TabItem'ların Header kısımlarının TabControl'ün üstünde, sağında,
solunda veya altında gözükmesini sağlayabilirsiniz.

Hepinize kolay gelsin.