Makale Özeti

Silverlight 2.0 ile beraber hazır bir Carousel yapısı gelmese de açık kaynaklı olarak dağıtılan bağımsız bir Carousel kontrolünün Silverlight içerisinde kullanımını inceliyoruz.

Makale

Carousel kontrolleri son dönemin modası diyebiliriz. Çoğu yazılımın arayüzünde Carousel kontrolleri görmeye başladık. Özellikle web sitelerinde de neredeyse RIA denildiği anda bir yere bir Carousel konulması gibi bir moda da mevcut. Bu çerçevede Silverlight 2 uygulamalarınızda Carousel yapılarından faydalanmak isterseniz herşeyi sıfırdan yazmanıza gerek yok. Bu yazımda sizlere açık kaynak kodu ile dağıtılan hazır bir Carousel kontrolünü tanıtacağım.

Coolmenu Carousel kontrolü

İlk olarak gelin kullanacağımız kontrolü kendi web sitesinden bir bilgisayarımıza indirelim. Aşağıdaki adresten indirebileceğin kontrolün tüm kaynak kodları ile alıp inceleme şansınız var. Biz şimdilik RC0 için hazırlanmış olan paketi alarak içerisinde Coolmenu.DLL dosyasını kullanacağız. Yani kaynak kodları ile uğraşmayacak doğrudan kontrolün Compile edilmiş halini projelerimize entegre edeceğiz.

http://pagebrooks.com/archive/2008/08/21/coolmenu-a-silverlight-menu-control.aspx

Projemize Carousel ekleyelim!

Projemizde Coolmenu Carousel kontrolünü kullanabilmek için ilk olarak download paketinden Coolmenu.Dll dosyasına Silverlight projemize referans olarak eklemeliyiz. Sonrasında XAML tarafında söz konusu kontrolü sayfaya koyabilmemiz için gerekli namespace tanımlarını yapmamız şart.

[XAML]

<UserControl x:Class="SilverlightApplication8.Page"

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

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

   Width="400" Height="300"

   xmlns:SilverlightContrib_Controls="clr-namespace:SilverlightContrib.Controls;assembly=CoolMenu">

    <Grid x:Name="LayoutRoot" Background="White">

        <SilverlightContrib_Controls:CoolMenu x:Name="Carousel"/>

    </Grid>

</UserControl>

Yukarıdaki XAML kodunu incelediğiniz özellikle dikkat etmemiz gereken aslında iki nokta var. Bunlardan ilki xmlns tanımımız. SilverlightContrib_Controls adında tanımladığımız yeni XML namespace'imiz doğrudan Coolmenu assembly'sini hedefliyor. Böylece söz konusu assembly içerisindeki tüm kontrollü XAML içerisinde kullanabileceğiz. Bir sonraki adımda da tanımladığımız NameSpace'i kullanarak CoolMenu kontrolünden bir adet ekrana yerleştirerek adını da Carousel olarak tanımlıyoruz. Bu aşamadan sonrası için kod tarafına geçmemiz ve bu Carousel içerisinde gösterilecek öğeleri tanımlamamız gerek.

[VB]

Dim Foto As New Image

Foto.Source = New Imaging.BitmapImage(New Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute))

Carousel.Items.Add(New SilverlightContrib.Controls.CoolMenuItem() With {.Content = Foto})

Foto = New Image

Foto.Source = New Imaging.BitmapImage(New Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute))

Carousel.Items.Add(New SilverlightContrib.Controls.CoolMenuItem() With {.Content = Foto})

Foto = New Image

Foto.Source = New Imaging.BitmapImage(New Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute))

Carousel.Items.Add(New SilverlightContrib.Controls.CoolMenuItem() With {.Content = Foto})

[C#]

Image Foto = new Image();

Foto.Source = new Imaging.BitmapImage(new Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute));

Carousel.Items.Add(new SilverlightContrib.Controls.CoolMenuItem { Content = Foto });

Foto = new Image();

Foto.Source = new Imaging.BitmapImage(new Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute));

Carousel.Items.Add(new SilverlightContrib.Controls.CoolMenuItem { Content = Foto });

Foto = new Image();

Foto.Source = new Imaging.BitmapImage(new Uri("http://daron.yondem.com/tr/images/vesikalik2.png", UriKind.Absolute));

Carousel.Items.Add(new SilverlightContrib.Controls.CoolMenuItem { Content = Foto });

Örnek kodlarımız içerisinde sürekli yeni Image nesneleri yaratarak bunları tek tek birer öğe (CoolMenuItem) olarak Carousel kontrolümüze ekliyoruz. Her bir CoolMenuItem'ın Content özelliğine herhangi bir Silverlight nesnesi atayabilirsiniz. Bu ister bizim örneğimizdeki gibi bir resim ister bir video, yani MediaElement olabilir.

Get Microsoft Silverlight
Örnek Carousel Kontrolü (Tıklamayı unutmayın :))

Hepinize kolay gelsin...