PathListBox'a giriş.

0 dakikada yazıldı

12060 defa okundu

Düzenle

Silverlight tarafında en sık ihtiyaç duyduğumuz ve benim de en çok
karşılaştığım sorulardan biri eldeki nesnelerin bir yol üzerinde
konumlandırılması oluyor. Belki de bu soruyu özellikle hatırlamamın
nedeni Silverlight 4'e kadar güzel bir cevabımın olmamasıydı :)
Silverlight ile beraber güzel bir kontrol geliyor, adı da
PathListBox. İşte bu yazımızda PathListBox'a göz atacağız.

PathListBox'ın aslında özünde normal bir ListBox'tan farkı yok. Yani
farkı derken eksiği yok fazlası var. Normal bir ListBox gibi
kullanılırken ek özellikler sağlayabiliyor. Bunların en temeli ise
elindeki ListBoxItem'ları (ki PathListBox senaryosunda bunlar
PathListBoxItem oluyor) belirli bir Path / yol üzerine
yerleştirebiliyor olması.

PathListBox yollarında...
PathListBox yollarında...

Yukarıdaki ekran görüntüsünde de görebileceğiniz üzere örnek
uygulamamızda basit bir Ellipse var. Bu ellipsin üzerine sağ
tıkladığımızda "Path / Make Layout Path" komutunu verdiğimiz gibi
karşımıza bir PathListBox geliyor. PathListBox'ın yanı sıra tabi ki
Ellipse de sahnede durmaya devam edecek. Burada önemli olan nokta artık
söz konusu Ellipse'in PathListBox'ın Item'larını üzerine koyacağı yolu
referans veriyor olması. Yani PathListBox'ın Ellipse ile güzel bir
ilişki içerisinde :)

Bu işlemi yaptıktan sonra hemen PathListBox'a bir isim verip kod
tarafında dummy itemlar ekliyoruz. Bu arada Ellipse'in Opacity değerini
de %10'a alıyorum ki şimdilik örnekte neler olduğunu görelim. Normalde
Ellipse'i tamamen görünmez yapmak gerek hatta PathListBox'ın arkasına
atmayı da unutmayın ki PathListBox'ın tıklanmasını engellemesin.

[VB]

Partial Public Class MainPage
    Inherits UserControl
 
    Public Sub New()
        InitializeComponent()
    End Sub
 
    Private Sub MainPage_Loaded(ByVal sender As Object,
                                ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        For index = 1 To 10
            pListBox.Items.Add(index)
        Next
    End Sub
End Class

[XAML]

    <Grid x:Name="LayoutRoot"
          Background="White">
        <Ellipse x:Name="ellipse"
                 Margin="91,48,113,57"
                 Stroke="Black"
                 StrokeThickness="7"
                 Opacity="0.1" />
        <ec:PathListBox x:Name="pListBox"
                        Margin="91,48,113,57">
            <ec:PathListBox.LayoutPaths>
                <ec:LayoutPath SourceElement="{Binding ElementName=ellipse}"
                               Orientation="OrientToPath" />
            </ec:PathListBox.LayoutPaths>
        </ec:PathListBox>
    </Grid>

XAML koduna özellikle dikkat ederseniz dışarıdaki Ellipse'in ismi ile
bir LayoutPath yaratılıp PathListBox'ın LayoutPaths kolleksiyonuna
eklendiğini görebilirsiniz. İşte bir önceki adımda bahsettiğimiz ilişki
buydu. Element Binding ile eldeki Ellipse'in LayoutPath'e
SourceElement olarak verilmiş durumda.

Get Microsoft Silverlight
PathListBox denememiz...

Yukarıdaki örneğe bakarken bir ListBox ile karşı karşıya olduğunuzu
unutmayın :) Her sayı tek tek seçilebilir durumda. Sayı ekleyip çıkarma
durumunuzda doğrudan Path üzerine eklenip çıkarılacak. Daha da güzeli
var aslında :) Eğer isterseniz PathListBoxItem'ların merkez noktaya göre
yönlerini değiştirmelerini sağlayabilirsiniz. Tek yapmanız gereken
Orientation özelliğini OrientToPath olarak değiştirmek.

OrientToPath
OrientToPath

Böylece artık her bir Item Ellipse'e göre yönünü değiştirecek üzerine
bir de Distribution özelliği "Even" yaparsanız sürekli olarak
eşit aralıklarla nesneler Path / yol üzerine dağıtılacaktır.

Get Microsoft Silverlight
Yeni Item'lar ekleyin bakalım neler olacak.

Son olarak PathListBox'ın Start ve Padding özellikleri de güzel
sonuçlar almanızı sağlayabilir. Start özelliği ile PathListBoxItem'ın
PathListBox içerisinde nerede bulunacağını ayarlar. Bu değeri
değiştirdiğinizde animasyonumsu hareketler yaratabilirsiniz hatta bu
değerleri animasyonlarda değiştirirseniz aslında :) istediğiniz
animasyonu da yapmış olursunuz.

Aşağıdaki örnekte Slider kontrolünün değeri doğrudan Start değerine
bind edilmiş durumda. Elle siz Slider'ı değiştirdikçe aslında
PathListBox'ın Start değerini değiştirmiş oluyorsunuz. Ayrıca sol alt
düğme de Start değerini anime eden bir animasyona bağlı.

Get Microsoft Silverlight
Start özelliğini anime ediyoruz.

Sanırım bu noktadan sonra PathListBox ile neler yapılabileceğini hayal
etmek zor değil :) Aslında bir ListBox olsa da sanırım çoğunlukla
PathListBox çok daha farklı işler için kullanılacak :) Nitekim bir
Path etrafında nesneleri anime etmenin şu an için hem tek hem de en
kolay yolu gibi duruyor.

Son olarak gelin bir de Padding özelliğine göz atalım. Padding özelliği
nesneler arası mesafeyi belirliyor. Tabi bunun için PathListBox'ın
Distribution özelliği Even değil Padded olmalı. Sonrasında
aynı Start özelliği gibi Padding'i de anime edebilirsiniz.

Get Microsoft Silverlight
Start özelliğini anime ediyoruz.

Hem Padding hem de Start'ın beraber anime olabileceğini de unutmamak
gerek tabi ki :) Şimdi tüm bunların üstüne Ellipse'i de tamamen şeffaf
hale getirirseniz ve tabi PathListBox'ın içinde sayılar değil de daha
güzel görseller yer alırsa iş çok daha farklı yerlere gidecektir diye
tahmin ediyorum.

Hepinize kolay gelsin!

Örnek Kaynak Kod : 05092010_7.rar (44,48
KB)