Merhaba arkadaşlar,

Sizlere silverlight ile adım adım navigasyon bar yapımını anlatacağım. Kullanacağımız araçlar; VS2008, Expression Blend 2.5 .

1- VS2008 de boş bir web sitesi projesi açalım ve adını TutorialNavbar koyalım.

2- Projeye Add New Item diyerek , Silverlight Application u seçelim ve TutorialNavbarXap.csproj ismini verelim.

3-Aşağıdaki ekrandan Create a new Silverlight Project and add it to the solution seçeneğini seçelim ve Add diyelim.

4- VS2008 Tarafından otomatik oluşturulan TutorialNavbarTestPage.aspx sayfasını silelim.

5- TutorialNavbarXap projesini Expression Blend 2.5 ile açalım.

6- Ben aşağıdaki şekilde bir navigator hazırladım. Sizde Expression Blend  ile buna benzer tasarımlar yapabilirsiniz.

7- Ana sayfaya canvas ekleyelim ve adını ContentCanvas yapalım.

8- Bir tane dikdörtgen çizelim ve bunu nav1 in üzerine yani tıklanacak olan alana yerleştirelim. Aynı işlemi nsv2 ve 3 içinde yapalım. Bunların isimlerine Nav1ClickArea, Nav2ClickArea, Nav3ClickArea diyelim ve bu dikdörtgenlerin opacity değerlerini 0 yapalım. Bunu yapmamızın amacı Mouse tıklandığı zaman hangisine tıklandığını anlamak içindir.

9- Birkaç place holder sayfası oluşturalım. Butonlara tıkladıkça bunlara yönlendirme yapacağız. İsimlerini sırasıyla Nav1Page.xaml, Nav2Page.xaml, Nav3Page.xaml yapalım. Nav1Page.xaml de iken “Nav1 Alanı” şeklinde bir text block ekleyelim. Aynı işlemi diğerleri içinde yapalım.

10- Nav1ClickArea seçelim ve özelliklerine gidelim. Buradan evenets butona tıklayıp olaylarını görelim. MouseLeftButtonDown olayına ismi OnNav1Click olan bir olay atayalım.

11- Bu olaya tıklarsanız veya entera basarsanız otomatik olarak page.xaml.cs  sayfasında boş bir metod oluşacaktır. Aynı işlemleri Nav2ClickArea ve Nav3ClickArea içinde yapalım.

private void OnNav1Click(object sender, MouseButtonEventArgs e) 

{ 

} 

12-  page.xaml.cs   sayfasmızdaki kodumuzu aşağıdaki şekle getirin.

public partial class Page : UserControl

{ 

Nav1Page m_nav1Page = new Nav1Page(); 

Nav2Page m_nav2Page = new Nav2Page(); 

Nav3Page m_nav3Page = new Nav3Page(); 

public Page() 

{ 

InitializeComponent(); 

Loaded += new RoutedEventHandler(PageLoaded); 

} 

void PageLoaded(object sender, RoutedEventArgs e) 

{ 

RemoveAll(); 

ContentCanvas.Children.Add(m_nav1Page); 

} 

void RemoveAll() 

{ 

ContentCanvas.Children.Remove(m_nav1Page); 

ContentCanvas.Children.Remove(m_nav2Page); 

ContentCanvas.Children.Remove(m_nav3Page); 

} 

private void OnNav1Click(object sender, MouseButtonEventArgs e) 

{ 

RemoveAll(); 

ContentCanvas.Children.Add(m_nav1Page); 

} 

private void OnNav2Click(object sender, MouseButtonEventArgs e) 

{ 

RemoveAll(); 

ContentCanvas.Children.Add(m_nav2Page); 

} 

private void OnNav3Click(object sender, MouseButtonEventArgs e) 

{ 

RemoveAll(); 

ContentCanvas.Children.Add(m_nav3Page); 

} 

}

13- Projeyi derleyin.

14- Şimdi highlights yani üzerine geldiğiniz belirginleştirme işlemi yapacağız. MouseEnter olayına OnNav1Enter isminde bir olay atayın.diğerleri içinde aynı işlemi tekrar edin.

15- HighlightNone isminde bir metod oluşturun. Bu tüm highlight ları boşaltmaya yarayacak. Bunu PageLoaded olayında çağıracağız. OnNavEnter olayının başındada yine bu HighlightNone metodunu çağırmamız gerekiyor.

void PageLoaded(object sender, RoutedEventArgs e) 

{ 

// Remove all content add then add the Nav1Page 

RemoveAll(); 

ContentCanvas.Children.Add(m_nav1Page); 

// Highlight Nav1 

HighlightNone(); 

Nav1Highlight.Opacity = 100.0; 

} 

private void HighlightNone() 

{ 

Nav1Highlight.Opacity = 0.0; 

Nav2Highlight.Opacity = 0.0; 

Nav3Highlight.Opacity = 0.0; 

} 

private void OnNav1Enter(object sender, MouseEventArgs e) 

{ 

HighlightNone(); 

Nav1Highlight.Opacity = 100.0; 

} 

private void OnNav2Enter(object sender, MouseEventArgs e) 

{ 

HighlightNone(); 

Nav2Highlight.Opacity = 100.0; 

} 

private void OnNav3Enter(object sender, MouseEventArgs e) 

{ 

HighlightNone(); 

Nav3Highlight.Opacity = 100.0; 

}

16- Derleyin ve çalıştırın. Aşağıdaki gibi bir ekran göreceksiniz.

17- NavIndicator üçgeni için biraz animasyon yapalım. Create storyboard Resource penceresini açalım. Ve MoveToNav2 ismini verelim.

18- Key frame yapmadan  NavIndicator  üçgeni nav2 nin altındayken  zamanı 1. saniyeye taşıyalım.

19- NavIndicator de iken  key frame marker ı tıklayalım. Değerleri x1=0 and x2=.5 şeklinde verelim.

20- XAML görünümüne geçtiğinizde 2 tane DoubleAnimationUsingKeyFrames alanını göreceksiniz. Biz NavIndicator un yatay hareket etmesini istediğimiz için 2. DoubleAnimationUsingKeyFrames alanını silmemiz gerekiyor.

21- storyboard ın ismini MoveToNav1 şeklinde değiştirelim.: <Storyboard x:Name="MoveToNav1">

SplineDoubleKeyFrame in value değerini 0 yapalım.: <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0">

22- naventer olaylarına şu kodları ekleyelim

private void OnNav1Enter(object sender, MouseEventArgs e) 

{ 

HighlightNone(); 

Nav1Highlight.Opacity = 100.0; 

MoveToNav1.Begin(); 

} 

private void OnNav2Enter(object sender, MouseEventArgs e) 

{ 

HighlightNone(); 

Nav2Highlight.Opacity = 100.0; 

MoveToNav2.Begin(); 

} 

private void OnNav3Enter(object sender, MouseEventArgs e) 

{ 

HighlightNone(); 

Nav3Highlight.Opacity = 100.0; 

MoveToNav3.Begin(); 

} 

23- fark ettiyseniz geçişler biraz yavaş oldu.Xaml e gidip zamanı .5 ten 1 e çekelim.

<Storyboard x:Name="MoveToNav1">

    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"> 

        <SplineDoubleKeyFrame KeyTime="00:00:00.50" Value="0">

24- Şimdi daha iyi oldu. İşlem tamamlanmıştır.

Kaynak: Mike Dobbles

Mustafa KOÇER

mkocer@dotnetkosesi.com