Silverlight Fish Eye Menu yapımı

Silverlight ile sonunda bir projede çalıştım. Daha onceden pek fırsat bulamamıstım silverlight ile birşeyler geliştirmeye ama bu projeden sonra sanırım daha içli dışlı olacağım gibi gorunuyor. Aslında yapılmak istenen şey gayet basit. Bir resim dizisi var mouse ile uzerine gelinen resimler ekrana yaklasiyor ve tıkladığınız zaman sizi ilgili sayfaya yonlendiriyor hepsi bu.
Öncelikle yeni bir silverlight application oluşturalim ve oluşturduğumuz solutionda yeni bir Silverlight User Control ekleyelim ve ismini FishEyeMenu.xaml olaraktan değiştirelim. ve aşağıdaki kodu Xaml kısmına ekleyelim.
<UserControl x:Class="SilverlightApplication.FishEyeMenu"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="550"
Height="100" >
<Canvas x:Name="LayoutRoot">
<Canvas.Background>
<ImageBrush ImageSource="../images/cas.jpg"/>
</Canvas.Background>
</Canvas>
</UserControl>

Şimdi projemizde bulunan Page.xaml dosyasını aşagıdaki gibi değiştiriyoruz.

<UserControl x:Class="SilverlightApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="550" Height="100">
<Canvas x:Name="LayoutRoot"></Canvas>
</UserControl>

Şimdi sıra geldi geldi C# kodlarını yazmaya. Öncellikle Page.xaml.cs dosyasına gidiyoruz ve default constructor u aşağıdaki gibi değiştiriyoruz.

public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
FishEyeMenu fishEyeMenu = new FishEyeMenu();
LayoutRoot.Children.Add(fishEyeMenu);
}
}

Ve düzenlememiz gereken son kısım elbette FishEyeMenu.xaml.cs, aslında butun olay burada gerceklestiriliyor. Şimdi aşağıdaki kodları yazıyoruz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;
using System.Windows.Browser;
namespace SilverlightApplication
{
public partial class FishEyeMenu : UserControl
{
private static String[] IMAGES = {
"images/image1.png",
"images/image2.png",
"images/image3.png",
"images/image4.png",
"images/image5.png",
"images/image6.png",
"images/image7.png" };

private static String[] URLs = {
"Customer.aspx","BusinessPartner.aspx", "Catalog.aspx","ShippingOrderList.aspx","User.aspx",
"InProcessOrders.aspx",
"MainPage.aspx" };

private static double MARGIN = 15;
private static double IMAGE_WIDTH = 48;
private static double IMAGE_HEIGHT = 48;
private static double MAX_SCALE = 3;
private static double MULTIPLIER = 60;
private List<Image> _images = new List<Image>();

public FishEyeMenu()

{
InitializeComponent();
addImages();
this.MouseMove += new MouseEventHandler(FishEyeMenu_MouseMove);
this.MouseLeave += new MouseEventHandler(FishEyeMenu_MouseLeave);
this.MouseLeftButtonDown += new MouseButtonEventHandler(FishEyeMenu_MouseLeftButtonDown);
}

private void FishEyeMenu_MouseLeave(object sender, MouseEventArgs e)

{
this.Cursor = Cursors.Arrow;
}

private void FishEyeMenu_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{
try
{
Image myImage = (Image)e.OriginalSource;
string currentUrl = HtmlPage.Document.DocumentUri.ToString();
int index = currentUrl.LastIndexOf("/");
String url = currentUrl.Substring(0, index + 1);
url = url + myImage.Tag.ToString();
HtmlPage.Window.Navigate(new Uri(url));
}
catch
{}
}
void FishEyeMenu_MouseMove(object sender, MouseEventArgs e)
{
this.Cursor = Cursors.Hand;
for(int i = 0 ; i < _images.Count; i++){
Image image = _images[i];
double imageScale = MAX_SCALE -
Math.Min(MAX_SCALE - 1,
Math.Abs(e.GetPosition(this).X - ((double)
image.GetValue(Canvas.LeftProperty) +
image.Width / 2)) / MULTIPLIER);
resizeImage(image, IMAGE_WIDTH * imageScale, IMAGE_HEIGHT * imageScale,
i, IMAGES.Length);
image.SetValue(Canvas.ZIndexProperty,
(int) Math.Round(IMAGE_WIDTH * imageScale));
}
}
private void addImages(){
for(int i = 0; i < IMAGES.Length; i++){
string url = IMAGES[i];

Image image = new Image();
image.Source = new BitmapImage(new Uri(url, UriKind.Relative));
image.Tag = URLs[i];
resizeImage(image, IMAGE_WIDTH, IMAGE_HEIGHT, i, IMAGES.Length);
LayoutRoot.Children.Add(image);
_images.Add(image);
}

}

private void resizeImage(Image image, double imageWidth, double imageHeight, int index, int total){
image.Width = imageWidth;
image.Height = imageHeight;
image.SetValue(Canvas.TopProperty, Height / 2 - image.Height / 2);
image.SetValue(Canvas.LeftProperty, Width / 2 + (index - (total -1) / 2) * (MARGIN + IMAGE_WIDTH) - image.Width / 2);
}

}

}

Bu işlemi tamamladıktan sonra fish eye menümüz hazırlanmış oluyor. Kodların tektek ne işe yaradıklarını anlatmadım ama hangi kodun ne işe yaradığını bilmek isterseniz bana mail atın açıklamaya çalışırım. Umarım yardımcı olur hepinize iyi kodlamalar.