Silverlight 2.0 içerisinde Carousel kullanımı.

0 dakikada yazıldı

8977 defa okundu

Düzenle

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...