Cuma, Şubat 29, 2008

Yazgeliştir Facebook Grubu ve Uygulaması

Yazgeliştir'in Facebook'daki grubuna http://www.facebook.com/group.php?gid=18643749600 adresinden erişip, gruba üye olabilirsiniz. Ayrıca her kategorideki en son eklenmiş olan makaleleri profilinizde görebileceğiniz facebook uygulamasını da http://apps.facebook.com/yazgelistir/ adresinden profilinize ekleyebilirsiniz.

Perşembe, Şubat 28, 2008

Yüzyüze İletişimde

Ne %7
Nasıl %38
Vücut Dili %55

İlk izlenim 30 sn.
Bu bilgiler karşımızdaki insanla ilk defa karşılaşıyor ve konuşuyorsak çok önemlidir.

Not: Bu bilgiler Yeliz Korkmaz 'ın bloğundan alınmıştır.

Salı, Şubat 26, 2008

Geliştiriciler neden WPF 'yi tercih etmeli?

Win – 32 ile karşımıza çıkan UI grafikleri ve bu yapı kullanılarak oluşturulmuş olan Windows XP yaklaşık 20 yıldır benzerdir. Bu benzerlikler sonucunda bizlere sürekli olarak grafik konusunda birbirlerinde farkı olmayan programlar ve işletim sistemleri sunulmaktaydı. Programların grafiklerinde herhangi bir gelişme gözlenmezken işlemci ve grafik kartı üreticileri sınırları zorlayan ürünler üretmeye başlamışlardı. Bunların başında çift çekirdekli işlemciler ve çift grafik işlemcisi (GPU) kullanan ekran kartları gelmektedir. Tabii bu gelişimler esnasında işletim sistemleri ve geliştiriciler tarafında oluşturulmuş yazılımların bunları kullanmaması çok mantıksız bir düşünce gibi olurdu.

Yukarıda bahsettiğimiz gelişmeler sonucunda Microsoft yeni çıkaracağı (Bir yılını doldurmuş olan işletim sistemi) Windows Vista ‘da grafik işlemlerinin daha önceki sürümlerden farklı olarak ilk olarak grafik kartına yükleneceği açıklanmıştı. Bu durum Windows işletim sistemleri için bir devrim niteliğindeydi. Bu sayede formlar, butonlar ve diğer bütün kontroller grafik işlemleri kullanıyorlarsa grafik kartına ve işletim sisteminde dahil olarak gelen PresentationFontCache.dll ‘ine yüklenecekti. Bu işlem grafik işlemlerinin gerçekleşmesi anında CPU ‘u çok büyük bir yükten kurtarmış olacaktır.

İşletim sistemi konusunda bu gelişimler yaşanırken geliştiriciler için nelerin yapılacağı merak konusuydu. Çünkü bizler grafik konusunda yapacağımız işlemler için CPU ‘u kullanmak zorundaydık. Bu da yapacağımız uygulamalarda performans düşüklüğüne sebep olmaktaydı. Bu durumdan kurtulmakta yeni Framework ‘ün içeriğinin açıklanması ile olmuştu. Artık Avalon kod adında yeni bir yapımız olacak ve bu yapı sayesinde bizlerde grafik işlemlerimizde grafik kartını kullanabilecektik. 2007 yılının başlarında .net Framework 3,0 çıkmış ve AVALON kod adlı yapımız Windows Presentation Foundation adını almıştı. Daha sonra ise 2007 yılının sonlarında Visual Studio 2008 ile .net Framework 3,5 yapısı da bitirilmişti. Artık WPF ‘i rahatlıkla kullanabilmemiz mümkündü.

WPF ‘in temel yapısı ve yapabilecekleri ile ilgili daha önceki makalelerimizde ayrıntılı bir biçimde bahsetmeye çalışmıştık. Bu sefer ise yukarıdaki bilgiler ışığında geliştiricilerin neden WPF ile uygulama geliştirmesi gerektiğini açıklayabilmeye çalışacağız. Bu açıklamayı yaparken ise en değerli 10 özelliğini incelerken Win32 ile neler yapabileceğine de öğrenmiş olacağız.

10 Puan - İleri Düzey Grafikler

Yıllarca alışık olduğumuz grafiklerden yukarıdaki paragraflarda bahsetmeye çalışmıştık. Bu grafik işlemleri oluşturulurken drawing isim alanı (namespace) kullanılmaktaydı. Bu kullanım için ise bütün metotlarının ayrıntılı bir biçimde bilinmesi gerekiyordu. Ayrıca bu isim alanını bilmemiz sadece 2D işlemlerimizi yapabilmemizi olanak tanıyacaktır. Farklı ve daha çok boyutta grafik kullanmak istediğimizde ise daha birçok API ve isim alanı öğrenmek zorunda kalıyorduk. Bu durumun ortadan kaldırılması amacıyla GDI+ içeriğinde birçok yenilik getirilmiştir. Bu yeniliklerin en önemlisi ise daha önceden bizlerin uzun işlemler ile oluşturmuş olduğumuz grafik fonksiyonlarının içeriğine eklenmiş olmasıydı.

GDI+ ‘ta ilk olarak 2D fonksiyonlar eklenmişti. Çünkü bu grafik fonksiyonları daha önceki sürümlerde oldukça fazla kullanılmıştı. Bazı geliştiriciler raporlamalar için hazırlanmış olan 3. Parti yazılımların yerine bile GDI+ ile hazırladıkları grafikleri kullanmaktaydılar. Ayrıca WPF içinde sadece grafik çizimleri değil form kontrollerinin özelleştirilmesi gibi özellikler kullanılacaktı. Açıkladığımız bu sebeplerden ötürüdür ki WPF için geliştirilen GDI+ ta ilk öncelik 2D işlemlerine verilmiştir.

GDI+ içerisinde Bezier eğrileri, karmaşık daireler, yazılar ve daha birçok çizim işlemi bulunmaktadır. Yazı işlemleri için ise vektörsel çizimlerde olduğu gibi anti – aliasing özelliği de eklenmiştir. Bu özellik sayesinde yakınlaştırılan olan yazılarda ve çizilen grafiklerin kenarlarında oluşmakta olan kırılmalar ortadan kalkacak ve pürüzsüz bir görünüme sahip grafikler oluşacaktır. Bu pürüzsüzleştirme işlemini daha önceleri yapmak oldukça zahmet bir işti ve yapılan işlemler bizlere uzun zamanlar kaybettirmekteydi. Artık grafik işlemlerini kolaylık ile yapabilecektik.

GDI+ ve XAML ile WPF ‘de eskiden yapmak istediğimizde oldukça karışık olan fakat yeni yapımız ile oldukça kolay yapabileceğimiz bir uygulamanın örneğine göz atalım.

XAML
<DrawingBrush Viewbox="0,0,1,1" ViewboxUnits="Absolute" Viewport="0,0,0.07,0.2" TileMode="Tile">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="LightGreen"> <!--ikinci ekran görüntüsünde yararlanılacaktır.--!>
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,1,0.6" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>

Yapmış olduğumuz bu uygulama sonucunda karşımıza çıkan örnek ise aşağıdaki gibidir.



Bu örneğimizde, şeffaflık eklenmiş yazı ile dolgu rengini değiştirdiğimizde ise aşağıdaki gibi bir ekran görüntüsü ile karşılaşırız.



Böyle güzel özelliklerinin olması dışında kısıtlanan ufak bir özelliği de var. Yukarıdaki örnek kodumuza dikkat ettiyseniz GDI+ kolaylık ile kullanılabilmektedir. Bu kolaylıktan ötürü .net 3,x isim alanları kullanıldığı durumlarda eskiden olduğu gibi Win32 API ’lerini direkt olarak kullanamıyoruz. Eğer ki kullanmak istersek Windows.System.Shapes isim alanını kaldırıp eskiden kullanmış olduğumuz Windows.System.Drawing isim alanını tanıtmamız 2D işlemler için yeterli olacaktır. Diğer durumlar içinde yeni nesil isim alanları kaldırılıp yerlerine eskileri eklenebilmektedir. Fakat yeni altyapı ile gelen isim alanları hem performans hem de kolaylık açısından bakıldığında geliştiricilere büyük katkıları bulunmaktadır.

GDI ve GDI+ ‘ı eskiden kullandığımız zamanlarda rectangle sınıfı ile çizimlerimizi yapardık. Bu çizim işlemleri sırasında piksellere çizgilerin nasıl yerleştirileceği konusunda büyük sorunlar yaşanırdı. Bu sorunları ortadan gidermek için ise çizginin geçtiği karelere bakılır ve bu karelerin içerisindeki dolgu yüzdesi fazla ise o kare seçilir ve devam edilirdi. Bu yöntem dışında bir de tek kare seçimi yerine birden fazla kareden yararlanılarak yapılan yöntemler kullanılırdı. Bu yöntemler mantıksal olarak uygun yöntemlermiş gibi gözükse de pratikte istenilen sonuçları vermemektedir. Çizilen grafiklerin yaklaştırılması durumunda çizgiler üzerindeki kırılmalar göze çarpıyor ve kusursuz bir çizimi yaşamamış oluyoruz. Bu sorunlar yeni altyapı ile ortadan kaldırılmış durumdadır.

Yukarıda açıkladığımız bu kadar bilginin ışığında kafamıza bir soru takılıyor. Soru ise,Bu grafik işlemlerini form kontrolleri üzerinde de kullanabilir miyiz? biçiminde oluyor. Sorunun cevabı ise kesinlikle evet olacaktır. Çünkü WPF ile birlikte bizlere XAML kod ortamı sunulmaktadır. Bu kod ortamında grafik işlemlerini kullanabilmemiz dışında form kontrollerini dilediğimiz biçimde özelleştirebilmemizde mümkündür. Bu olanaklar yardımıyla form kontrollerini istediğimiz şekilde değiştirebilmemiz ve özelleştirebilmemize olanak vardır.

Bu bilgiler ışında WPF form kontrolüne şeffaflık özelliği eklenerek değiştirilmiş yeni görünüme ait ekran görüntüsü aşağıdadır.



Oluşturabildiğimiz farklı form kontrollerinin dışında bu kontrollerin boyutları konusunda da iyileştirmeler yapılmıştır. Daha önceden hazırlamış olduğumuz uygulamalarda form kontrollerimizin çözünürlük kaliteleri 150dpi iken yeni nesil form kontrolleri ile oluşturabildiklerimizin kaliteleri 200dpi olmuştur. Bu durum ise son kullanıcıların daha düşük çözünürlüklü bir ekran görüntüsü kullandıkların karşılarındaki kontrollerin kenarlarında oluşan kırılmış yapıyı görmemeleri anlamına gelmektedir. Aynı şekilde uygulamanın üzerinde bir noktaya yakınlaştırma yapıldığı zamanda bu durum söz konusu olacaktır.

Grafik işlemlerinin dışında bizler formlarımızın üzerinde animasyon işlemleri yapmak istersek neler yapmalıyız sorusuna değinmeye çalışacağız. Eskiden hazırlamış olduğumuz animasyonlar için GDI, GDI+ veya yönetilebilir DirectX APIleri kullanmamız gerekiyordu. Yine bu işlemlerde grafik işlemleri gibi hazırlanması oldukça zor ve zahmetliydi. Ayrıca bir etken daha var. Eski altyapılar grafik işlemleri ve animasyon işlemlerinde ilk olarak grafik kartı yerine işlemciyi kullanmalarıydı. Bu durumda kullanış olduğumuz bilgisayarın performansında büyük düşüşler gözlenmekteydi. Yukarıdaki paragraflarda neden grafik kartını kullandığını uzunca anlatmıştık. Şimdi ise animasyon işlemlerini XAML yardımı ile ne kadar kolay yapabileceğimize bir örnek ile göz atalım. Örneğimizde yatay eksende bizim belirdiğimiz sürede genişleyen bir dikdörtgen yapılacaktır.

XAML
<Rectangle Fill="Red" Height="100">
<Rectangle.Triggers>
<EventTrigger
RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard TargetProperty=
"(Rectangle.Width)">
<DoubleAnimation From="20" To="200"
Duration="0:0:5"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>

Animasyon işlemleri dışında medya dosyalarını da MediaElement yardımıyla çağırabilmemiz mümkündür. Şimdi de bu işlemi nasıl yaptığımızı XAML kod bloğunda görelim.

XAML
<MediaElement Name="myVideo"
Source="C:\WINDOWS\system32\oobe\intro.wmv"
Width="450" Height="400" >

Son örneğimiz ile ileri düzey grafikler başlığını bitirmiş oluyoruz. Sadece yukarıda belirtmiş olduğumuz özellikler değil dönüşüm işlemlerinden kontrollere atanan başka stil özelliklerine kadar yapabileceğimiz birçok işlem vardır. Fakat temel bilgi teşkil etmesi açısında yukarıda anlattıklarımızın yeterli olduğunu düşünüyoruz. Bu konular hakkında daha ayrıntı bilgi edinmek isterseniz WPF hakkındaki diğer yazılarımızı okuyabilirsiniz.

9 Puan - Çizim Nesnesi (Drawing Object)

Çizim nesnesinin nasıl kullanıldığını iki biçimde incelememiz daha doğru olacaktır. Birincisi WPF öncesi nasıl kullandığımız, ikincisi ile WPF ile nasıl kullandığımız olacaktır.

WPF öncesi durum için ilk olarak modellenmiş durum şemasına göz atalım;



WPF ‘in grafik sistemi tam olarak kullanılabilen bir yapı olduğundan uzunca bahsedilmişti. WPF öncesi durumda ise sistem tabanlı uygulamalar ile karşılaşmaktaydı. Bu uygulamalarda çizim işlemleri ilk olarak işletim sistemine gönderilir daha sonrasında GDI veya GDI+ gönderilmek üzere uygulamaya işlenmiş olarak geri gönderilirdi. Bu işlenmiş verileri GDI ailesi ile şekiller oluşturulduktan sonra grafik karta gönderilir ve çizim işlemi yapılırdı. Fakat bu durumda ilk olarak GDI kullanıldığı için bu işlemlerin gerçekleşmesi esnasında işleminin tamamını kullanma gereksinimi hissedilmektedir. Böyle bir olayın gerçekleşmesi ise hazırlanmış olan uygulamanın grafik işlemleri esnasında gerçek performansından uzak kalmasına sebep olacaktır. Peki, şu anda kullanılan uygulamalar bu durumları nasıl çözüyorlar. OpenGL ve DirectX APIleri kullanılarak bu yoğunluktan kurtarılabilmesi mümkün oluyordu. Ama kafamıza başka bir soru geliyor. Bu soru; “Uygulamamızda sadece tek bir yerde çizim işlemi uygulayacak bile olsak bu APIleri öğrenmek zorunda mı kalacağız” biçiminde oluyor. Maalesef bu sorunun cevabı evet oluyor.
Başka alternatif çözüm ise WPF kullanmaktadır. WPF ’in çizim nesnesini kullanırken nasıl bir yol izlediğine dair modellenmiş şemasına göz atalım;



WPF kullanılırken arka planda çalışan mantık bir öncekine göre daha kolay gibi gözüküyor. Şimdi bu kolaylığın sebeplerini araştıralım.

Çizim nesnesinin uygulamanın içerisinde oluşturulması GDI ailesine yapılacak olan yüklenmeyi ortadan kaldırmaktadır. Bunun sebebi ise WPF ve XAML içerisinde GDI+ ’in en üst seviyede kullanılıyor olması ve anlık olarak çizilen grafiklerin oluşturulabilmesidir. Bu durum çizim işlemi gerçekleştirilirken işlemciye olan yüklenmeyi ortadan kaldırmaktadır. Ayrıca işletim sistemi derlenme sonucunda nasıl bir çizim işlemi gerçekleşeceği yerine uygulama için hangi protokolleri çalıştırabilirim düşüncesi ile hareket etmektedir. Bu sayede direk WPF ile iletişim içerisinde olmaktadır. Aynı biçimde Uygulama da çizim işlemlerini kod veya XAML ile WPF bünyesinde oluşturduğu için direk grafik kartı ile işlemlerini yapabilmesi mümkün kılmaktadır. Bu sayede çizim işlemeleri grafik kartında oluşturularak sistemin CPU ve RAM gibi bellek elemanlarını zorlamadan yapmış olacaktır.

Tabii bu durumun gerçekleştirilebilmesi için işletim sisteminizin yukarıda açıklamış olduğumuz modele uyumlu olması gerekmektedir. Uyumlu işletim sistemleri ise;

Windows XP + SP3
Windows Vista ve sonrası
Windows Server 2008 (Longhorn) ve sonrası
biçiminde sıralanmaktadır.

C#
public partial class Window1 : Window
{
private Rectangle[] rectangles = new Rectangle[10];

public Window1()
{
InitializeComponent();

Canvas can = new Canvas();
this.Content = can;

Random rand = new Random();
byte[] colors = new byte[3];
for (int i = 0; i < rectangles.Length; ++i)
{
rectangles[i] = new Rectangle();
rand.NextBytes(colors);
rectangles[i].Fill = new SolidColorBrush(Color.FromArgb(
255, colors[0], colors[1], colors[2]));
rectangles[i].Width = 200;
rectangles[i].Height = 100;
Canvas.SetLeft(rectangles[i], i*20);
Canvas.SetTop(rectangles[i], i*10);

can.Children.Add(rectangles[i]);
}
}

protected override void OnMouseWheel(MouseWheelEventArgs e)
{
int diff = e.Delta / 10;
for (int i = 0; i < rectangles.Length; ++i)
{
if (rectangles[i].Width + diff > 0)
{
rectangles[i].Width += diff;
}
}
}
}

Yukarıdaki kod parçacığı sonucunda oluşan uygulamanın ilk açılış anı ve fare kaydırma aracı sonrası oluşan görüntüsü aşağıdadır.




Yukarıdaki örneğimiz yardımı ile grafik işlemleri kolayca nasıl yapabildiğimize değinmiş bulunuyoruz. Yeni nesil grafik uygulamalarında hiç zorlanmadan işlemlerin yapılabilmesi için yeni nesil grafik kartlarının kullanılması uygulamalarımızın gerçek performansları açısından çok yararlı olacaktır.

8 Puan - Zengin Metin Uygulamaları (Rich Text)

Web uygulamalarında uzun zamandır Windows içerisinde kullanılan yazı formatları kullanılabilmekteydi. Kullanmış olduğumuz yazı ve stil işlemlerini daha sonraları tekrardan çağırmamak için bir dil oluşturulmuştu ve buna cascading style sheets (CSS) denilmiştir. Fakat web üzerinde kullanılabilen bu formatlar masaüstü uygulamalarında yeterinde kullanılamamaktaydı. Kullanılanlar ise çok kısa metin dosyalarına uygulanmaktaydılar.

Masaüstü uygulamalarında zengin yazı formatları kullanılmak istendiğinde ise Microsoft Word veya Windows işletim sistemlerinin bünyesinde bulunan zengin yazı formatları kullanılmaktaydı. Fakat buton gibi kontrollerde farklı ve süslü yazı stillerini maalesef tam verim ile kullanamıyorduk. Bu durumun en azında web ortamında ortadan kaldırılması amacıyla Microsoft MSHTML dosya formatının sürmüştü. Fakat bu dosya formatı da beklenen ilgiyi geliştiriciler alamamıştır.

WPF ile zengin yazı uygulamaları konusunda oldukça verim alınmış gibi görünüyor. Bu işlemlerin oluşturulmasındaki en büyük etken ise XAML gözükmektedir. XAML sayesinde form üzerine istediğimiz özelleştirmeleri yapabildiğimiz için hiç zorlanmadan zengin metin dosyalarını oluşturabilmemiz mümkün kılınmıştır.

Yukarıda açıkladığımız özellikler ışığında ufak bir uygulama oluşturalım ve oluşturmuş olduğumuz bu uygulamada zengin formatlı metin işlemleri, yazı stilleri ve renklerini kullanalım. Bu işlemleri daha kolay yapılabilmesi için XAML ortamında yapacağız.

XAML
<Grid>
<TextBlock FontFamily="Calibri" FontSize="11pt">
Merhaba,
<Span FontFamily="Old English Text MT" FontSize="24pt">
Turhal
</Span>
<Italic>
KTU
</Italic>
&lt;<Span Foreground="DarkRed">
TextBlock
</Span>/&gt;
<Hyperlink>
Link
</Hyperlink>
</TextBlock>
</Grid>

Yukarıdaki koda dikkat ederseniz normal form özeliklerinin dışında web uygulamalarından alışık olduğumuz span metoduna kullanılmaktadır. Bu işlem yapısı sayesinde web programcılar ile Windows programcılarının uyum içerisinde çalışmaları amaçlanmıştır. Şimdi yukarıdaki kod bloğu sonucunda karşımıza çıkan ekran görüntüsüne göz atalım;



Peki, zengin metin dosyalarının içerisinde web uygulamalarında olduğu gibi form kontrollerini kullanamıyor muyuz? “ biçiminde bir soru aklımıza takılabilir. Bu sorunun cevabı oldukça açık ve nettir. “Web üzerinde yapmış olduğumuz işlemlerin neredeyse hepsini WPF uygulamaların da kullanabilmemiz mümkündür.

Şimdi bu bahsettiğimiz web uyumunu uygulayan bir örnek verelim. Bu örnekte bir önceki yazı işlemlerimize buton, checkBox ve radioButon ekleyeceğiz. Kod tarafında yukarıdaki kodda </TextBlock> ‘ın alt kısmını vereceğimiz kodları ekliyoruz.

XAML
<CheckBox Height="16" Margin="0,38,0,0" Name="checkBox1" VerticalAlignment="Top"
HorizontalAlignment="Left" Width="120">
CheckBox
</CheckBox>
<RadioButton Height="16" Margin="0,59,0,0" VerticalAlignment="Top"
HorizontalAlignment="Left" Width="120">
RadioButton
</RadioButton>
<Ellipse Margin="97,38,181,124" Name="ellipse1" Stroke="AliceBlue" Fill="Brown" OpacityMask="Beige">
<Ellipse.BitmapEffect>
<EmbossBitmapEffect />
</Ellipse.BitmapEffect>
</Ellipse>
<Button HorizontalAlignment="Left" Margin="0,83,0,0" Name="button1"
Width="75" Height="23" VerticalAlignment="Top" FontFamily="Old English Text MT">
Button
</Button>

Eklediğimiz bu kod parçası sonucunda karşımıza çıkan ekran görüntüsü ise aşağıdaki gibidir.



Zengin metin uygulamalarını WPF ile ne kadar kolay ve performanslı bir biçimde yapacağımıza göz attık. Metin işlemleri ile ilgili diğer işlemleri deneme yanılma yöntemleri veya MSDN yardımı ile öğrenilebilmesi mümkündür.

7 Puan - Kolayca Uyum Sağlanabilen UI Yapısı

WPF öncesi hazırlamış olduğumuz form uygulamalarını derlediğimiz zaman nasıl bir sonuç ile karşılaşacağımızı tam olarak bilemiyorduk. Her ne kadar sürükle bırak form kontrollerinin yerleri biliyor olsak da kod tarafında oluşturduğumuz ekran görüntüleri tamamen piyango gibiydi. Bu durum Visual Studio 2008 ile WPF uygulamaları geliştirilmesi esnasında kod ile tasarım ekranını tam uyum değişmesi ile giderilmeye başlanmıştı. WPF uygulamalarında XAML ile tasarım ekranında yaptığımız bütün işlemlerin tam uyumu bizlere derleme sonrasında nasıl bir ekran ile karşılaşacağımız konusundaki şüphelerimizden kurtulmamızı sağlamıştır.

Win Form geliştiricileri karşılarına gelen ekranları diledikleri oranda kullanabilmekteler. Bu kullanım kolaylığı sayesinde XAML yapısına uyumun çabuk olmasını imkân tanımaktadır.

Kullanım kolaylığı ise Web uygulamaları geliştirirken kullandığımız tablolara benzemektedir. Formu satır ve sütunlara bölerek istediğimiz bölgesine istediğimiz bileşeni ekleyebilmemiz mümkündür.

Win form üzerinde basit bir uygulama geliştirelim. Bu geliştirdiğimiz uygulama HTML tablolarına benzer biçimde olsun ve başlığı, sol sütunu ve sağ sütunu olsun. Sağ sütunda bir çizim nesnesi olsun, sol sütunda ise listBox yer alsın. Şimdi bahsettiğimiz bu örneği XAML kod ile nasıl oluşturabildiğimize göz atalım.

XAML
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="235"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="32" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Background="Cyan" FontSize="18pt" TextAlignment="Center">
Uyumu Kolay UI Yapısı
</TextBlock>

<ListBox Grid.Row="1">
<ListBoxItem>List</ListBoxItem>
<ListBoxItem>On</ListBoxItem>
<ListBoxItem>Left</ListBoxItem>
<ListBoxItem>Hand</ListBoxItem>
<ListBoxItem>Side</ListBoxItem>
</ListBox>

<Rectangle Grid.Row="1" Grid.Column="1" Fill="LimeGreen" />
<Ellipse Grid.Row="1" Grid.Column="1" Fill="White" Margin="10" />
</Grid>

Satır ve sütunları kullanarak uygulamamızı geliştirdiğimiz zaman karşımıza nasıl bir ekran görüntüsü geldiğine göz atalım.



Yukarıda bahsettiğimiz yöntemlerin dışında daha kompleks yapılarda oluşturulabilmesi mümkündür. Oluşturulacak olan uygulamalar tamamıyla sizin hayal gücünüz ile doğru orantılıdır.

Formlar üzerinde oluşturabileceğimiz uygulamalar .net 2,0 ‘a göre daha kolay gibi gözükmekle birlikte aslında daha zordur. Bu karmaşık söze neden kullandığımıza gelirsek, eski form kontrollerinde her şeyi sürükle bırak işlemleri ile yaparken yeni nesil formlarda ise sürükle bırak yerine genellikle kod ile yapılmaktadır. Bu işlemler gerçekleştirilirken geliştirici çok daha dikkatli olmalıdır. Çünkü oluşturulacak olan binding işlemlerinde yapılacak bir hata veritabanına erişim dahil olmak üzere bir çok noktada bizleri sıkıntıya sokabilmektedir. Ayrıca oluşturulacak olan tasarımlarda da bir tasarımcıdan yardım almakta yarar vardır.

6 Puan - Esnek İçerik Modelleri

Birçok kontrollerde sabit özellikleri yerine başka özellikler eklenerek kullanarak kullanılmaktadır. Bu tür kullanıma örnek olarak, form üzerinde olan butonun içerisine bir label ekleyerek eklemiş olduğumuz o labelin yan kısmına yeni bir buton daha ekleyerek buton kontrolünün içeriğini zenginleştirmiş oluyoruz. Bir başka örnek daha vermek gerekirse Tab kontrollerinin içeriklerine yeni kontroller eklenerek işlevi arttırılabilmektedir.

WPF uygulamalarında da bu tür içerikleri esnekleştirebilme olanağımız vardır. Bu işlemi bir örnek ile açıklamamız daha mantıklı olacaktır. Örneğimizde butonun içeriğine yazı ekleyeceğiz, daha sonra bu yazının üzerine sürükle bırak ile yeni bir buton eklemek istediğimizde butonun üstüne eklenebilmekle birlikte yazı bölümünün içerisine daha da uyum içerisinde eklenmesine olanak tanıyacaktır.

XAML
<Grid>
<Button Height="80" VerticalAlignment="Top" Margin="0,0,46,0">
<StackPanel Orientation="Horizontal">
<Ellipse Fill="Navy" Stroke="Yellow"
Width="30" Height="20" />
<TextBlock VerticalAlignment="Center">
Baska bir buton daha ekleyin...
</TextBlock>
</StackPanel>
</Button>
</Grid>

Örneğin ekran görüntüsü ise aşağıdadır.



Eklemek istediğimiz butonu “Baska bir buton daha ekleyin…” yazan kısma sürükleyip bırakıyoruz ve yeni ekran görüntümüz aşağıdaki gibi oluyor.



Esnek içerik modellemelerini yalnızca buton değil daha birçok özellik ile de kullanılması mümkündür. Bu kontrolleri içeriksel olarak arttırabilmekle birlikte tasarımcılar yardımıyla hem grafik yardımı ile hem de içerik yönüyle daha kuvvetli uygulamalar yapılabilmesi mümkündür.

5 Puan - Benzetilebilen Kontroller

İçeriklerin modellenebilmesi ile birlikte WPF ‘de benzetilebilen kontrollere de izin verilmektedir. Bu kontroller için uyumlu özellikler ile birlikte kod tarafında form kontrollerine başlamalar yapılmaktadır. Bu bağlamalar için ise ister LinQ ile ister başka bir sınıf ile kullanılabilmesine olanak vardır.

Biraz daha örneklemek gerekirse, şu ana kadar oluşturulmuş en iyi tasarım kontrollü olan Aero WPF yardımları ile oluşturulmuştur. Aynı şekilde Aero dan farklı bir ara yüz kullanmak isteyen kullanıcılar ve Windows System 2008 kullanıcıları için de Windows 2000 tasarımı oluşturulabilmektedir. Uygulamalarımızda bu biçimde birden fazla tasarım kontrolü oluşturmak sistem gereksinimleri konusunda eksiklikleri olan kullanıcılar açısından yararlı olacaktır.

XAML
<Button>
<Button.Template>
<ControlTemplate>
<Grid>
<Rectangle Fill="VerticalGradient White Red" Stroke="DarkRed"
RadiusX="10" RadiusY="10" />
<ContentPresenter Content="{TemplateBinding Button.Content}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding
HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding
VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Button.Template>
Tikla!
</Button>

Yukarıdaki örneğimizde butona WPF ile değişebilen özelliklerini dinamik olarak binding yapıyoruz standart halinden farklı olmasını sağlıyoruz.

Windows geliştirme araçlarıyla birlikte gelen kontroller en doğal halleri ile geliştiricilere sunulmaktadır. Bu doğal haller ise işletim sisteminde kullanılan temalardan alınmaktadır. Fakat bu temalar başka bir kullanıcıda farklı bir görünüm alabilir. Bu durumu ortadan kaldırabilmek için yapmamız gereken Ellipse ve Rectangle ‘ı Shapes sınıfının içerisinde kullanarak kontrolleri özelleştirebiliriz. Böyle durumlarda XAML kod tarafında kaynaklar diye bir kod bloğu oluşturarak bu kod bloğunun içerisine ne tür tasarı işlemleri yapmak istiyorsak bunları ekleriz. Ekledikten sonra ise forma ekleyecek olduğumuz kontrol ile bağlama işlemleri sonucunda kullanılabilir bir hal alacaktır.

4 Puan - Data-Driven UI (Veri Güdümlü UI)

Biz diğer başlıklarımızda WPF ile içerik modellerini değiştirebilme olanağımızın olduğunu görmüştük. Fakat bu içerikler kod içerisinde olmakta ve herhangi bir dış faktörden etkilenmemekteydi. Günümüz uygulamaların da ise kullanıcıdan alınan verilerin çok değerli olduğunu ve bu verilere göre işlemlerimizi yaptığımızı unutmamız gerekmektedir. Örneğin bir textBox ‘a girilen verinin web uygulamalarında kullanılan Session gibi verileri en son kullanılacak yere kadar bellekte tutarak kullandırabilmesini sağlamamız gerekebilir. Bu tür durumlar TextBox ‘ın içeriğini dinamik olarak okuyabilmemiz gerekmektedir. Böyle bir uygulama geliştirmek istediğimiz durumlarda ise binding işlemi yapmamız yeterli olacaktır.

Dinamik kontrolleri yalnızca textBox için değil buton gibi diğer form kontrolleri içinde kullanılabilmemiz gerekmektedir. Eğer ki herhangi bir verimiz olmadan form kontrollerine bağlama işlemi yaptığımızda aşağıdaki gibi bir ekran görüntüsü oluşacaktır.



Kullanici sınıfının içerisinde ki veriyi okuyamadığı için butonun üzerinde böyle bir mesaj vermiştir. Biz elimizdeki verilerden isim değerini almak istersek ise aşağıdaki gibi kod yazmamız gerekirdi.

Linq
public class Kullanici
{
private string m_name;
private DateTime m_dateOfBirth;

public string Name
{
get { return m_name; }
set { m_name = value; }
}

public DateTime DateOfBirth
{
get { return m_dateOfBirth; }
set { m_dateOfBirth = value; }
}
}

...

Kullanici turhal = new Kullanici();
turhal.Name = "Turhal";
turhal.DateOfBirth = new DateTime(1987, 07, 19);
myButton.Content = Turhal;

XAML
<Button x:Name="benimButon">
<Button.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" />
</DataTemplate>
</Button.ContentTemplate>
</Button>

Yukarıdaki kod bloğu sayesinde istediğimiz veriyi kullanıcıya sunabilmemiz mümkündür. İşlemlerimizi biraz daha farklı yapalım ve butonun üzerinde bu sefer kullanıcının adı ve doğum tarihini gösteren kod bloğuna göz atalım.

XAML
<Window.Resources>
<DataTemplate DataType="{x:Type local:Kullanici}">
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold">Isim:</TextBlock>
<TextBlock Text="{Binding Name}" Margin="2,0,10,0" />
<TextBlock FontWeight="Bold">Dogum Tarihi:</TextBlock>
<TextBlock Text="{Binding DateOfBirth}" Margin="2,0,10,0" />
</StackPanel>
</DataTemplate>
</Window.Resources>

Kod parçacığımızın derlenmesi sonucunda karşımıza çıkan ekran görüntüsü ise aşağıdaki gibidir.



Yukarıda bahsettiğimiz örnekler dâhil olmak üzere Win32 uygulamalarında kullanmış olduğumuz bütün kontrollere bu bağlama işlemlerini yapabilmemiz mümkündür.

3 Puan - İstikrarlı Stiller

Eminim bu yazıyı okuyan herkes en az bir kerede olsa Microsoft Word programının kelime sayacını kullanmıştır. Bu sayaç kelimeleri kontroller ederken herhangi bir yazı formatı diğerlerinden farklı olsa da temelinde netin olduğu için o yazıda kelime olarak sayıyor ve devam ediyordu. Bu düşünceden yola çıkarak stiller ile özelleştirdiğimiz form kontrollerinin aslında birbirlerinden hiç farkları yokturlar. En nihayetinde yapabilecekleri alt yapının sınırlandırdığı ölçüdedir. Eğer ki geliştirici kendine özel sınıfını oluşturup kullanıyorsa durum farklı olabilir. Biz geneli düşünerek konumuzu incelemeye devam edelim.

WPF uygulamalarında da aynı durum söz konusudur. Bir kaydırma çubuğunun (slider) maksimum değeri WPF uygulamasında 200 ise Win32 uygulamasında da 200 olacaktır. Ayrıca biz aksini belirtmediğimiz sürece de aynı işlemleri yapacaklardır. Aralarında ki en önemli fark stil dosyalarının kullanım biçimi olmaktadır. Win32 uygulamalarında da stil dosyaları resimler ya da çizim işlemleri ile yapılabilmesi mümkündür. Fakat işlemlerimizi bu biçimde de yapmamız gerektiğini Çizim modelleri konusunda uzunca incelemiştik. WPF, stil dosyalarını kullanırken XAML kod bloğunda CSS gibi bir kaynak dosyası oluşturuyor ve bu stil dosyası kullanılmak istendiğinde kaynak dosyasına Binding yapılarak sınırsız kez kullanımına olanak tanıyordur. Şimdi bu işlemleri nasıl gerçekleştirdiği ile ilgili kod bloklarımıza göz atalım.

XAML
<Window.Resources>
<Style x:Key="butonaStil">
<Setter Property="Control.FontFamily"
Value="Old English Text MT" />
<Setter Property="Control.FontSize" Value="18" />
</Style>
</Window.Resources>

Şimdi ise oluşturmuş olduğumuz stil dosyasını form kontrolüne nasıl ekleyebileceğimize göz atalım.

XAML
<Button Style="{StaticResource butonaStil}">Tikla!</Button>

Bu seferki örneğimizde ise stil özelliği tanımlayarak hazırlamış olduğumuz stillerin form üzerindeki bütün butonlar için gerçeklenmesi ile ilgili olacaktır. Kod bloğunda bu işlemi yapan yer karartılmıştır.

XAML
<Window.Resources>
<!-- Bütün butonlara stilleri veriliyor -->
<Style TargetType="{x:Type Button}">
<Setter Property="Control.FontFamily"
Value="Old English Text MT" />
<Setter Property="Control.FontSize" Value="18" />
<Setter Property="Background"
Value="VerticalGradient Red Black" />
<Setter Property="Foreground"
Value="VerticalGradient Yellow Orange" />
</Style>
</Window.Resources>
...
<!-- Manüel olarak hiç bir stil eklenmemiştir.-->
<Button>Tikla!</Button>

Belirtmiş olduğumuz bu yöntem sayesinde istediğimiz form kontrolüne hazırladığımız özellikleri ve değerleri atayabilmemiz mümkündür. Yukarıdaki örneklerden yararlanılarak stil dosyalarının manüel ve özellik olarak nasıl kullanılacağı öğrenmiş oluyoruz. Şimdi vereceğimiz örnekte ise butonun en çok kullanılan özelliklerine dâhil stil dosyasının nasıl kullanılacağına dair olacaktır.

XAML
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Button.Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Rectangle Fill="VerticalGradient White Red"
Stroke="DarkRed"
RadiusX="10" RadiusY="10" />
<ContentPresenter
Content="{TemplateBinding Button.Content}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

Yukarıdaki kod bloğunu WPF uygulaması ile oluşturulduğunda gelen APP.XAML dosyasının içerisinde kullanırsanız kolaylıkla bu stilleri form kontrollerinin içerisinde kullanabilmeniz mümkün olacaktır.

Genel olarak stil dosyalarını nasıl kullanacağımıza değinmeye çalıştık. Animasyonlarla birlikte form kontrollerini kullanmak isteyen geliştiriciler için bu özellik oldukça yararlı olacaktır.

2 Puan - Tetikleyiciler (Triggers)

Tetikleyiciler uygulamamıza bir olay gerçekleşeceği zaman neler yapılabileceğini makine dili ile anlatabilen yapıdır. Tetikleyiciler WPF bünyesinde animasyon işlemlerinde ve stil dosyalarında kullanılmaktadır. Stil dosyalarında kullanım şekli genellikle fare hareketleri üzerine olmaktadır. Şimdi bu hareketler ile ilgili bir örneğe göz atalım.

XAML
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>

Tetikleyicilerin animasyon işlemlerinde de kullanıldığında bahsetmiştik. Animasyon işlemlerinde kullanımı ile ilgili bir örnek vermek gerekirse form üzerinde bulunan bir butonun fare üzerine getirilip çekildikten sonra ortadan kaybolması olabilir. Bu tür örnekleri arttırabilmemiz mümkündür. Şimdi ise animasyon işlemlerinde tetikleyicileri nasıl kullanacağımıza ilişkin oluşturduğumuz kod bloğuna göz atalım.

XAML
<Rectangle Fill="Blue" Height="100" Width="200" Opacity="0.5">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="(Rectangle.Opacity)">
<DoubleAnimation To="1" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard TargetProperty="(Rectangle.Opacity)">
<DoubleAnimation To="0.5" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>

Yukarıdaki kod bloğu sonucunda uygulamamızda form üzerinde yer alan butonun üzerinden fare çekildiği zaman belirli bir süre içerisinde yarı şeffaflık kazandığını gözlemleyebileceğiz.

Tetikleyicileri WPF bünyesinde neden kullanmalıyız sorusuna gelirsek. Özellikle tasarımcıların Microsoft tarafından çıkartılmış olan Expression Blend veya başka 3. Parti uygulamalar aracılığı ile oluşturacakları animasyon işlemlerini geliştiricilere verdikleri zaman geliştiricilerde XAML yardımı ile bu yapıları anlayabilip kullanabilmesine olanak tanımaktadır. Ayrıca geliştiriciler kendilerine verilen animasyon dosyalarında hoşlarına gitmeyen ufak hatalar olması durumunda ise tekrardan tasarımcıya göndermek yerine XAML kod üzerinde gerekli değişiklikleri yaparak kullanabilmesine olanak tanır. Kısaca Tetikleyiciler, tasarımcı ile geliştirici arasında animasyon işlemlerinde anlaşılabilirlik kolaylığı sağlamaktadır.

1 Puan - Bildirime Dayalı Programlama (Declarative Programming)

Bildirime dayalı programlama yapısı WPF mimarisinde yer almaktadır. Bu yapı sayesinde geliştirmiş olduğumuz uygulamalarda “neden” ve “nasıl” gibi sorunların cevaplarını ararız. Bu tür araştırmalar ise bize en çok SQL ‘i hatırlatmaktadır. SQL sorgularını neden yaptığımızı örnekler ile hatırlarsanız ya bir ürünü kimin veya neden satın aldığı gibi soruları cevaplardık ya da bir olgunun nasıl gerçekleşebileceği sorunun cevaplarını arardık. Kısacası SQL sorgularımız sonucunda bize geri dönen bilgiler ışığında yapacaklarımıza devam edebilmemiz mümkündür. Bu yapı bildirime dayalı programlamaya verilebilecek en iyi örneklerden biridir.

Uygulama geliştiren geliştiriciler zaten bildirime dayalı programlama yapısına güvenmekteydiler. Verileri göstereceğimiz bir ekran oluşturmak istediğimiz de ilk olarak listeleyeceğimiz bileşen içeriği boş bir biçimde ekrana çizilir. Sonrasında içeriği veri ile doldurulacağı için veriyi alacağı bölüme bağlanarak verileri çeker ve bu çektiği verileri listeleme yapacağı bileşene sırası ile eklemeye başlar. Bu ekleme işlemi istenen veriler sonuçlanana kadar devam eder.

Yukarıda bahsettiğimiz listeleme işlemini daha önceden GridView ile yapabilmemiz mümkündü, WPF de ise GridView ‘e ek olarak bizim harici olarak oluşturabildiğimiz grid yapıları eklenmiştir. Bu Gridi oluştururken yapmamız gereken satır ve sütunlarını belirlemek ve verileri içlerine bağlamak olacaktır. Şimdi satır ve sütunu WPF ’de XAML yardımıyla nasıl oluşturabileceğimize göz atalım.

XAML
<Grid.ColumnDefintions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefintions>

<Grid.RowDefintions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefintions>

Oluşturduğumuz grid içerisinde satır ve sütunlar harici olarak bizim XAML kod bölümünde oluşturduğumuz biçimde çizilmiştir. Bu grid, genişliğini ve enini formun boyutu ile doğru orantılı olarak arttırıp azaltmaktadır.

Bildirime dayalı programlama yapısı .net Framework oluşturulduğundan bu yana yapının içerisinde bulunduğu için bunun dahil edilmemesini düşünmek çok mantıksız olacaktır. Çünkü sağladığı kolaylıkların ve performans artışının ne kadar yüksek olduğunu unutmamız gerekmektedir. Bizlerde kodlarımızı yazarken bu özelliği unutmadan hareket etmemiz gerekmektedir.

Son olarak ise XAML sayesinde veri okuma bileşenlerini animasyonlu ve süslü bir biçimde yapabilmesine olanak tanıyor.

Sonuç olarak bir geliştiricinin neden WPF ‘i tercih etmesi sorusuna karşılım gelen 10 cevabı en yüksek önemden en alt öneme doğru sıralamaya çalıştık.

Umarım yararlı olmuştur.

Kaynaklar
MSDN Magazine

Windows Presentation Foundation, Grafik Performans

Merhabalar,

Bu aralar sık sık WPF 'i ve Win. Vista 'yı gerçek performansında nasıl çalıştırabilirim tarzında sorular alıyorum.

Bildiğiniz kadarıyla Win. Vista 'nın gerçek performansını göstermesi için 2CPU 2,0 GHZ, 2GB Memory falan filan gibi özellikler gerekiyordu. Bu özelliklerin dışında bir de grafik kartının önemli olduğundan bahsediyorduk. Bunun için de 1GB 'ye yakın ekran kartlarını tercih etmenizi öneririm.

Peki WPF 'i nasıl bir bilgisayarda çalıştırabiliriz. Vista WPF tabanlı bir işletim sistemi olduğuna göre WPF ile hazırlamış olduğumuz uygulamalarıda Vista sistem gereksinimlerine yakın bir bilgisayarda çalıştırmanız uygulamanızın sağlığı açısında oldukça faydalı olacaktır.

Fakat daha düşük sistem gereksinimlerinde çalışmaz mı diye kafanıza bir soru takılabilir. Tabii ki de çalışıyor. Fakat grafik seriliği dışında bazen gözle görülür bir yavaşlama gözlenebiliyor. Fakat bu durum Win XP ile oluyor. Yine Vista kullanıyorsanız bu tür sorunlar ile karşılaşmanız oldukça düşüktür.

Ayrıca kardeşimin almış olduğu bir bilgisayar var. Sanırım o bilgisayarın ekran kartı gerçek anlamda Vista ve WPF için biçilmiş kaftan gibi gözüküyor. Bu ekran kartının bir resmini aşağıda veriyorum.

Herkese WinForm uygulamalarında başarılı grafik uygulamaları geliştirmelerini diliyorum.

DxDiag

Perşembe, Şubat 21, 2008

YazGelistir.com'dan Ödül Aldım

İçeriği ile yazılım geliştiricilerin pek çok sorununa çözüm bulan ve pek çok konuda da Türkçe içerik sağlayan YazGelistir.com topluluğu dün pek çok editörünün ve yazaranın katıldığı bir toplantı gerçekleştirdi (28 Ocak 2008). Toplantıda genellikle konuşulan konu daha kaliteli bir YazGelistir nasıl olabilirdi bu konuda da oldukça güzel fikirler ortaya atıldı ve çalışmalar başlatıldı yakında çok daha kaliteli bir YazGelistir.com ile karşı karşıya olacağız.

Toplantının bir diğer konusuda 2007 yılı içerisinde en fazla makale yazan yazarlara ödül vermekti. Ben de kotaya girip ödül almaya hak kazanan yazarlar arasında yerimi aldım ve yanda gördüğünüz güzel ödülü bana uygun gördüler. Makale yazarken böyle bir ödül aklımın ucundan dahi geçmiyordu ama ödül alıp emeğinin karşılığını görmek insanı gerçekten mutlu ediyor. Bütün YazGeliştir ailesine bu güzel ödül için teşekkür ederim.


Çankaya Üniversitesinde Büyük Etkinliğimiz Gerçekleşti

16 Şubatta Çankaya üniversitesinde daha önce iki kez Istanbulda düzenlemiş olduğumuz etkinliğimizi gerçekleştirdik. Tüm katılımcılara faydalı olduğumuzu umarım. Etkinliğin düzenlenmesinde başta İlker Acar olmak üzere, diğer MSP arkadaşlara teşekkür ederiz.
Resimleri daha büyük görebilmek için üzerlerine tıklayınız.





Microsoft Yeni Teknolojileri - II Tamamlandı

26 Kasım 2007 C.Tesi günü Microsoft Türkiye sponsorluğunda düzenlediğimiz "Microsoft Yeni Teknolojileri - II" etkinliği başarılı bir şekilde bitti. Yoğun bir katılımın gerçekleştiği etkinliğimize WF den WCF’’e , C# 3.0 dan Yazılım Süreçlerine, Visual Studio 2008 ’den LINQ to SQL, Silverlight’’tan WPF’’e kadar bir çok yeni konu ile ilgili sunumlar gerçekleştirdik. Toplam 9 saat süren etkinlikte 100’’ün üzerinde dinleyici ile buluştuk. Fiziksel imkanların el verdiği limitin üzerinde katılımcı katılmasına rağmen bir çok üyemizin gelmek isteyipte kayıtların dolması sebebi ile gelemediğini biliyoruz. Etkinliğimizin tekrarlanması için üyelerimizden gelen onlarca e-maili dikkate alarak bu etkinliği tekrarlamayı planlıyoruz. Aynı şekilde Ankara, İzmir ve Trabzon gibi büyükşehirlerde bu etlinliğin benzerini düzenlemeyi planlamaktayız. Etkinlik tarihleri ilgili bilgiler sitemizden takip edebilirsiniz

Etkinliğimize katılıp bize gün boyunca yorulmadan dinleyen herkese teşekkür ediyoruz. Microsoft Türkiye’’nin de vermiş desteğe ayrıca teşekkür ediyoruz.
Etkinlik resimlerini daha büyük görebilmek için üzerlerine tıklayınız...

Salı, Şubat 19, 2008

Microsoft Silverlight - Yazı, Görüntü ve Medya İşlemleri

Bir önceki makalelerimizde Silverlight ’ı tanımış, Canvas nesnesini incelemiş ve bu canvas nesnesinden yararlanarak geometrik objeler oluşturmuştuk.

Bu makalemizde ise Canvas nesnesi tabanlı işlemlerimize devam edeceğiz.İlk olarak resimlerimiz üzerinde nasıl işlemler yapacağız uygulamalı olarak onları inceleyeceğiz.Daha sonra yazılar üzerinde nasıl işlemler yapabileceğimizi inceleyeceğiz.En son olarak ise video dosyaları üzerinde neler yapacağımızı inceledikten sonra Silverlight ile temel işlemleri tamamlamış olacağız.Bu yaptığımız işlemler sonucunda bir sonraki makalemizde ise benim de çok hoşuma giden animasyon işlemlerini inceleyeceğiz.

Silverlight ile Görüntü İşlemleri

Silverlight ile resimler üzerinde işlemler yaparken Canvas nesnesinin bünyesine bulunan image özelliğinden yararlanırız.Bu image özelliliği ile gösterebileceğimiz resim formatları JPG ve PNG dir.Image özelliğinde görüntünün boyutu enini sıkışıklığını esnekliğini gibi özelliklerini hiç zorlanmadan gösterebilmeyizdir.

Şimdi görüntü üzerinde yapabileceğimiz işlemleri bir kaç örnek ile açıklamaya çalışalım.

İlk olarak yapacağımız örnek image özelliği yardımıyla görüntümüzü ekranda göstermek olacaktır.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UntitledProject5="clr-namespace:UntitledProject5;assembly=ClientBin/UntitledProject5.dll"
x:Class="UntitledProject5.Page;assembly=ClientBin/UntitledProject5.dll"
x:Name="Page"
Width="640" Height="480"
Background="White"
>
<Image Source="1.jpg"/>
</Canvas>



Silverlight yardımı ile web sayfamızda resmimizi göstermek için yapmamız gereken tek şey Image özelliğinde resmin bulunduğu yeri belirtmekti.

Şimdi farklı işlemler üzerinde duralım.Görüntümüzü enlemesine ve boylamasına uzatmak işlemlerini yapmak istediğimizde nasıl işlemler yapmak istediğimize bir göz atalım.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UntitledProject5="clr-namespace:UntitledProject5;assembly=ClientBin/UntitledProject5.dll"
x:Class="UntitledProject5.Page;assembly=ClientBin/UntitledProject5.dll"
x:Name="Page"
Width="640" Height="480"
Background="White"
>
<Image Source="1.jpg" Stretch="None"
Height="100" Width="200" Canvas.Left="100" />

<Image Source="1.jpg" Stretch="Fill"
Height="100" Width="200" Canvas.Top="100" Canvas.Left="100" />

<Image Source="1.jpg" Stretch="Uniform"
Height="100" Width="200" Canvas.Top="200" Canvas.Left="100" />
</Canvas>



Yukarıda ki işlemde tek yaptığımız Stretch özelliğini ayarlamak oldu.Sonrasında düşündüğümüze yakın bir sonuç karşımızda oldu.

Görüntü işlemleri ile yapabileceğimiz temel işlemler bunlardan örnekleri sizler hayal gücünüze dayanarak arttırabilirsiniz.Ayrıca bir önceki silverlight ile çizim işlemleri makalemizde ki geometrik şekiller üzerinde yapabileceğiniz bütün işlemleri görüntüler üzerinde de yapabilirsiniz.

Yukarıda ki kodların aynısını XAML dosyanızın içerisine kopyalamanız durumunda sorunsuz bir biçimde çalışabilmektedir.Resimlerin gözükebilmesi için yapmanız gereken tek şey projeyi çalıştırdığınız dizinin içerisine resimlerinizi kopyalamaktır.Tekrar hatırlatmak isterim ki JPG ve PNG uzantılı resimleri kullanabiliyorsunuz.

Sırada yazılar üzerinde yapabileceğimiz işlemler var.Şimdi ayrıntılı olarak bu işlemleri inceleyeceğiz.

Yazı İşlemleri

İnceleyeceğimiz konular arasında ki şu anki sırayı yazı(text) işlemleri almaktadır.Text işlemlerini silverlight ile sorunsuz çalıştırabilmemiz için Canvas nesnesine bağlı olan TextBlock özelliğini kullanmamız yeterli olacaktır.Bu özellik sayesinde yazılar üzerinde yapmak istediğimiz bütün işlemleri yapabilmemiz mümkündür.

Şimdi text işlemlerini örnekler yardımı ile ayrıntılı bir biçimde incelemeye başlayalım.

İlk yapacağımız örnek, ilk yapılan programlarda ki gibi Hello World olacaktır.Tek farkı ise Hello Silverlight World olacaktır.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=agclr"
Loaded="Page_Loaded"
x:Class="Text.Page;assembly=ClientBin/Text.dll"
Background="White"
>
<TextBlock>Hello Silverlight World!</TextBlock>
</Canvas>



Sırada yapacağımız örnek renk geçişleri olan bir yazı şekli olacaktır.Fakat bu işlemi yapmadan önce değinmemiz gereken bir kaç özellik var.Bu özellikleri açıkladıktan sonra işlemlerimize devam edebiliriz.

  • FontSize: Yazımızın boyutunu ayarlıyoruz.
  • FontStyle: Yazımızın stilini belirliyoruz.Normal veya Italic olabiliyor.
  • FontStretch: Görünümünün nasıl gözükeceğini seçiyoruz.Alabilieceği değerler;Choices, UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal, Medium, SemiExpanded, Expanded, ExtraExpanded ve UltraExprended ’dir.
  • FontWeight: Yazının genişliğini belirlemektedir.Alabileceği değerler; Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack ’tir
  • FontFamily: Kullandığımız yazının hangi aileye bağlı olduğunu seçmemize yarar.Örneğin;Arial, Calibri, ...
  • Foreground: Yazımızın rengini ve arka planında renk belirlemize yarar.


Temel özelliklerine artık hakim olduğumuza göre yazımızın rengini stilini değiştirerek farklı bir görüntü oluşturabiliriz.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=agclr"
Loaded="Page_Loaded"
x:Class="Text.Page;assembly=ClientBin/Text.dll"
Background="White"
>
<TextBlock FontSize="40"
FontFamily="Georgia"
FontStyle="Italic" FontWeight="Bold"
FontStretch="Expanded"
Canvas.Top="20" Canvas.Left="20">

Hello Silverlight World!

<TextBlock.Foreground>
<LinearGradientBrush>
<GradientStop Color="SlateBlue" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Canvas>




Sırada yapacağımız örnek ise Font-Size özelliği ile olacaktır.Bu özelliği kullanarak yaptığımız örnek aşağıdadır.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=agclr"
Loaded="Page_Loaded"
x:Class="Text.Page;assembly=ClientBin/Text.dll"
Background="White"
>
<TextBlock>
Hello <Run FontSize="20">Silverlight</Run> <Run FontSize="30">World!</Run>
</TextBlock>
</Canvas>



Yukarıda ki örneği dikkat ederseniz Run özelliği yardımı ile istediğimiz bir yazı topluluğunun boyutunu rahatlık ile ayarlayabiliyoruz.

İnceleyeceğimiz özelliklerden biriside FontFamily olacak.Bu özellik yardımı ile yazdığımız yazının karakterlerini değiştirebiliyoruz.Örnek ile incelemek gerekirse...

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=agclr"
Loaded="Page_Loaded"
x:Class="Text.Page;assembly=ClientBin/Text.dll"
Background="White"
>
<TextBlock FontFamily="Calibri"
Text="Hello Silverlight World" FontSize="20"/>
<TextBlock FontFamily="Times New Roman, Arial" Canvas.Top="40"
Text="Csharp?.com" FontSize="20"/>
<TextBlock FontFamily="Portable User Interface" Canvas.Top="80"
Text="Turhal TEMIZER" FontSize="20"/>
</Canvas>



Yukarıda ki örnek yardımıyla FontFamily özelliğinin de kullanımını görmüş olduk.

Genel olarak yazım ile ilgili özellikleri burada bitirmiş durumdayız.Yazı ile yapabileceğimiz bütün özellikleri elimizden geldiğince kullanış olduk.Şimdi inceleyeceğimiz yapı ise medya özelliği.Bakalım medya konusunda Silverlight bize ne gibi yenilikler sunmaktadır.

Media İle İlgili İşlemler

Media ile yapılan işlemlerde MediaElement özelliğinden yararlanılmaktadır.Bu özellik yardımıyla çok basit bir media player örneğini silverlight ile yapabilmemiz mümkündür.Fakat media player yapmadan önce ilk yapmamız gereken Silverlight ile hazırlanmış bir sayfada video oynatabilmek olacaktır.Şimdi bu örneği nasıl yapabileceğimizi inceleyelim.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UntitledProject5="clr-namespace:UntitledProject5;assembly=ClientBin/UntitledProject5.dll"
x:Class="UntitledProject5.Page;assembly=ClientBin/UntitledProject5.dll"
x:Name="Page"
Width="640" Height="480"
Background="White"
>
<MediaElement Source="Silverilgth_dusk_dreamscene.wmv"></MediaElement>
</Canvas>



Artık medya dosyalarını MediaElement yardımı ile Silverlight ile hazırladığımız web sayfalarında görebilmekteyiz.

Şimdi yapacağımız örnekte biraz daha eğlence noktasına odaklanalım.Bir medya dosyasında ki kişinin üzerinde bir elips bulunsun.Bu işlemi de diğerleri gibi çok kolay bir biçimde yapabilmemiz mümkündür.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UntitledProject5="clr-namespace:UntitledProject5;assembly=ClientBin/UntitledProject5.dll"
x:Class="UntitledProject5.Page;assembly=ClientBin/UntitledProject5.dll"
x:Name="Page"
Width="640" Height="480"
Background="White"
>
<MediaElement Source="Silverlight WEB 720p 2M-128 vbr.wmv"></MediaElement>
<Ellipse Height="200" Width="200" Canvas.Left="60" Canvas.Top="60"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
Opacity="0.6" />
</Canvas>



İzlemekte olduğumuz bir media dosyasının bir noktasından da olsa takip edebilme olanağı bulduk.

Sıradaki örneğimiz,basit bir media player olacak.Göreceksiniz ki bu işlemi yapmakta oldukça kolay olacak.Yapağımız tek farklı nokta çok az javaScript yazacak olmamızdır.Onun dışında uzun zamandır yaptığımız örnekler dışında hiç bir farkları yoktur.

<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- Source yazan yere sizin ekleyeceğniz bir videoyu ekleyebilirsiniz. -->
<MediaElement x:Name="media"
Source="Silverlight.wmv"
Width="300" Height="300" />

<!--Vidyomuzu durduruyoruz..-->
<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="10" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Orange" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
</Canvas>

<!-- Vidyomuzu duraklatıyoruz. -->
<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>

<!-- Vidyomuzu başlatıyoruz. -->
<Canvas MouseLeftButtonDown="media_begin"
Canvas.Left="130" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="LimeGreen" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
</Canvas>

</Canvas>



Kullanmış olduğumuz javaScript kodu ise;

function media_stop(sender, args) {
sender.findName("media").stop();
}

function media_pause(sender, args) {
sender.findName("media").pause();
}

function media_begin(sender, args) {
sender.findName("media").play();
}




Artık ufak, basit bir media player’ ımız oldu.Bunu biraz daha güzelleştirelim tam ekran olarak görüntüle seçeneğini ekleyelim.Bu işlemi gerçekleştirebilmek için yapmamız gereken media elementine bağlı olan ActualWidth ve ActualHeight özelliklerini kullanmamız yeterli olacaktır.

<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="canvas_loaded">

<MediaElement x:Name="media"
Source="Silverlight.wmv"
Width="300" Height="300" />

<Canvas x:Name="buttonPanel">


<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="10" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Orange" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
</Canvas>


<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>


<Canvas MouseLeftButtonDown="media_begin"
Canvas.Left="130" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="LimeGreen" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
</Canvas>

<!-- Tam ekrana gecis. -->
<Canvas MouseLeftButtonDown="toggle_fullScreen"
Canvas.Left="190" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="85">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Gray" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5"
Foreground="White" >full screen</TextBlock>
</Canvas>

</Canvas>

</Canvas>



function media_stop(sender, args) {

sender.findName("media").stop();
}

function media_pause(sender, args) {

sender.findName("media").pause();
}

function media_begin(sender, args) {

sender.findName("media").play();
}

function canvas_loaded(sender, args)
{

var plugin = sender.getHost();
plugin.content.onfullScreenChange = onFullScreenChanged;

}

function toggle_fullScreen(sender, args)
{
var silverlightPlugin = sender.getHost();
silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen;

}

function onFullScreenChanged(sender, args)
{


var silverlightPlugin = sender.getHost();
var buttonPanel = sender.findName("buttonPanel");

if (silverlightPlugin.content.fullScreen == true)
{
buttonPanel.opacity = 0;
}
else
{
buttonPanel.opacity = 1;
}

var mediaPlayer = sender.findName("media");
mediaPlayer.width = silverlightPlugin.content.actualWidth;
mediaPlayer.height = silverlightPlugin.content.actualHeight;

}

 

JavaScriptimiz...





Tam ekranda yapabilen çok güzel bir media playerimiz oldu.

MediaElement yardımı ile yapabileceğimiz en iyi projelerden birini media player ’ımızı oluşturduk.Artık bizimde bir mediaPlayer ’ımız mevcut durumdadır.

Geldik bir makalenin sonuna daha, Zamanlar ilerledikçe Silverlight konusunda ki bilgilerimiz gittikçe artmaktadır.Artık silverlight ile çizimden text işlemlerine ,görüntü işlemlerinden media işlemlerine kadar bir çok konuya hakim olmaya başladık.Çok kolay olarak projeler geliştirdik.Aynı zamanda bu işlemleri yaparken çok fazla şekilde eğlenebiliyoruz.

Bu makaleden sonraki makalemiz Silverlight temellerini bitirecek olduğumuz animasyon işlemleri olacaktır.Bir çok geliştirici ile birlikte benimde en sevdiğim özellik olan animasyon işlemlerinde görüşmek dileğiyle.

Umarım yararlı olmuştur...

Silverlight ile mutlu ve eğlenceli projeler, İyi çalışmalar.

Kaynaklar
www.microsoft.com/silverlight

Yukarıda değinmiş olduğumuz MediaPlayer örneği için linke tıklayınız...

Microsoft Silverlight - Animasyon, JavaScript ve Form Kontrollerinin Kullanımı

Bu makalemizde Silverlight ile yapabileceğimiz animasyon işlemlerini incelemeye çalışacağız.

Silverlight ile animasyon işlemlerini yaparken bir çok özellikle yaptığımızdan farklı olmaksızın Canvas nesnesini kullanmaya devam edeceğiz.

Pratik yapmamız için Canvas nesnesine bağlı olan Ellipse özelliğini kullanarak küçük bir şekil oluşturalım.Bu bize hem eski çalışmalarımızı hatırlamış olacağız.

Yapacağımız örnek en baştan beri yaptığımız elips örneği olacak.Elips oluşturabilmek için;

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="Animation.Page;assembly=ClientBin/Animation.dll"
Width="640"
Height="480"
Background="White"
>
<Ellipse Canvas.Left="20" Canvas.Top="20" Opacity="0.4" Stroke="Blue" Height="100"
Width="125" Fill="Green"></Ellipse>
</Canvas>



Şeklimizi sorunsuz bir biçimde oluşturmuş olduk.Bu oluşturduğumuz şekil sanki masaüstü program oluştururken ilk kodumuz olan "Hello World" gibi oldu.Her zaman ilk örnek olarak bu işlemi yaparak kendimizi ısıtmaya başlıyoruz.Şimdi ısındığımıza göre animasyon işlemleri için kullanacağımız özellikleri incelemeye başlayabiliriz.

Silverlight ile yaptığımız görsellik işlemleri için bizim işlemlerimizi kolaylaştıran bir çok özellik oluşturulmaktadır.Bu özellikler animasyon işlemleri için de gayet başarılı bir biçimde oluşturulmuştur.Bu özellik EventTrigger nesnesi olmuştur.Oluşturacak olduğumuz bütün animasyon işlemleri için daima bir EventTrigger nesnesi ile başlangıcı yapmamız gerekmektedir.Bu güzel ve yararlı nesneye yardım eden özellikleri temel olarak tanımamız gerekirse.

RoutedEvent:Şeklimizin hangi yönde hareket edeceğine değinmektedir.
BeginStoryboard:Oluşturduğumuz şeklin başlangıç yerini belirlememize yarayacaktır.(İsmide çok hoş.Hikaye ekranında başlangıç...)
Loaded:Yaptığımız şeklin EventTrigger nesnesinden Canvas nesnesine yüklenmesini sağlamaktadır.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="Animation.Page;assembly=ClientBin/Animation.dll"
Width="640"
Height="480"
Background="White"
>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>

<!-- Islemlerimiz buraya eklenecek. -->
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>

<Ellipse Canvas.Left="20" Canvas.Top="20" Opacity="0.4" Stroke="Blue" Height="100"
Width="125" Fill="Green"></Ellipse>
</Canvas>



Yukarıdaki örneğimizde koyu renkle belirlenen bölgede ki kod parçacığını daima yazmamız gerekmektedir.Bu işlem sayesinde istediğimiz animasyon işlemleri için gerekli altyapı sağlanmış olur.

Animasyonu sağlayabilmemiz için gerekli olan altyapıyı da oluşturduğumuza göre hareketi artık sağlayabiliriz.Yaptığımız şekillerin hareketi sağlayabilmemiz için temel olarak iki özelliği kullanmamız gerekmektedir.Bunlardan birincisi DoubleAnimation diğeri ise Duration ’dur.Şimdi bu özellikleri ne için kullanacağımıza değinelim.

DoubleAnimation:Oluşturduğumuz şekli çağırıp hareket ettirmemize yarayacak.
Duration:Şeklimizin hareket edebilmesi için gerekli olan hızı belirleriz.Örneğin:(Duration="0:0:1")

Silverlight projelerinde hareketi hangi özelliklerin sağladığını öğrendiğimize göre ufak bir örnek yardımı ile bu özelliği pekiştirebiliriz.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="Animation.Page;assembly=ClientBin/Animation.dll"
Width="640"
Height="480"
Background="White"
>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="elipse"
Storyboard.TargetProperty="(Canvas.Left)"
To="300"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>

<Ellipse x:Name="elipse"
Canvas.Left="20" Canvas.Top="20"
Opacity="0.4" Stroke="Blue"
Height="100" Width="125"
Fill="Green">
</Ellipse>
</Canvas>




Cismimiz çok şirin bir biçimde hareket etti.Yapacağımız örneği biraz daha değiştirelim.Bu sefer yine bir elipsimiz bulunsun ama bu sefer elipsin iç rengi renkler arası geçişte bulunsun.Bu işlem için ise yapmamız gereken yalnız hangi renkten başlayıp hangi renkte bitireceğimizi belirtmemiz yeterli olacaktır.Bu işlemi yaparken şeklimizin içeriğini doldurabilmemiz için gerekli olan Fill özelliğinin SolidColorBrush özelliğinden yararlanacağız.Örnekle incelememiz gerekirse,

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="Animation.Page;assembly=ClientBin/Animation.dll"
Background="White"
>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="e1_brush"
Storyboard.TargetProperty="Color"
From="Red" To="Blue" Duration="0:0:5" />
<ColorAnimation
Storyboard.TargetName="e2"
Storyboard.TargetProperty="(Fill).(Color)"
From="Red" To="Blue" Duration="0:0:5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>

<Ellipse
Height="100" Width="100" Canvas.Left="30" Canvas.Top="30">
<Ellipse.Fill>
<SolidColorBrush x:Name="e1_brush" Color="black"/>
</Ellipse.Fill>
</Ellipse>

<Ellipse x:Name="e2" Fill="Black"
Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>
</Canvas>




Yukarıda ki elipslerimizin hangi renkler arasında hareket ettiğimizi belirttiğimiz nokta From="Red" To="Blue"’ dir.Burada hangi renkten başlayıp hangi renkte sonlanacağını belirterek bu renkler arasındaki geçişin sağlanması sağlanabilmektedir.

Yukarıdaki örneklerde kullanıpta değinmediğimiz bir özellik daha mevcut ki bu Storyboard.TargetName özelliğidir.Bu şekillerimizi oluştururken tekrar kullanılabilmesi için isimler ekliyorduk.İşte bu eklediğimiz isimleri Storyboard.TargetName ile çağırıp animasyonlardan yararlanabilmesini sağlayabiliyoruz.

Değinmediğimiz ve kullanmadığımız özelliklerden iki tanesinden daha bahsedeceğim.Bunlar FillBehavior ve RepeatBehavior ’dır.Şimdi bu özelliklere değinmemiz gerekirse.
FillBehavior:Animasyon bittiği zaman ne yapacağını belirtiriz.Sadece iki değer almaktadır.Bunlar; HoldStop ve Stop ’tur.Eğer bu özelliğe harhangi bir değer atamazsak kendiliğinden HoldStop olarak atanacaktır.
RepeatBehavior: Şekillerimizin üzerindeki animasyon işlemleri sonlandırıldığı için bu özelliği verilen değerler sayesinde hareketleri sürekli kılabiliyorsunuz.Eğer herhangi bir değer vermezsek ilk değeri boşmuş gibi algılıyoruz.Eğer hareketlerinizi hiç durmadan sağlamak istiyorsanız ise de "Forever" yazmanız yeterli olacaktır.

Şimdi yapacağımız örnek yukarıda anlattığımız bütün özelliklerin toplamı anlamını da taşıması açısından çok yararlı olacaktır.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="Animation.Page;assembly=ClientBin/Animation.dll"
Background="White"
>

<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard
Storyboard.TargetName="e1"
Storyboard.TargetProperty="(Canvas.Left)"
BeginTime="0:0:1">
<DoubleAnimation To="300" />
<DoubleAnimation To="300" Storyboard.TargetName="e2"/>
<DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width"/>
<DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/>
<DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/>
<DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/>
<DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/>
<DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/>

</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Line Height="100" Canvas.Left="100" Canvas.Top="100" Stroke="Yellow"></Line>
<TextBlock FontStyle="Oblique"
Canvas.Top="80"
FontSize="10" Text="E8"></TextBlock>
<Ellipse x:Name="e1" Fill="Red"
Height="10" Width="10" Canvas.Left="30" Canvas.Top="80">

</Ellipse>
<TextBlock FontStyle="Oblique"
Canvas.Top="10"
FontSize="10" Text="E1"></TextBlock>
<Ellipse x:Name="e2" Fill="Black"
Height="10" Width="10" Canvas.Left="30" Canvas.Top="10"/>
<TextBlock FontStyle="Oblique"
Canvas.Top="20"
FontSize="10" Text="E2"></TextBlock>
<Ellipse x:Name="e3" Fill="Blue"
Height="10" Width="10" Canvas.Left="30" Canvas.Top="20"/>
<TextBlock FontStyle="Oblique"
Canvas.Top="30"
FontSize="10" Text="E3"></TextBlock>
<Ellipse x:Name="e4" Fill="Yellow"
Height="10" Width="10" Canvas.Left="30" Canvas.Top="30"/>
<TextBlock FontStyle="Oblique"
Canvas.Top="40"
FontSize="10" Text="E4"></TextBlock>
<Ellipse x:Name="e5" Fill="Brown"
Height="10" Width="10" Canvas.Left="30" Canvas.Top="40"/>
<TextBlock FontStyle="Oblique"
Canvas.Top="50"
FontSize="10" Text="E5"></TextBlock>
<Ellipse x:Name="e6" Fill="Green"
Height="10" Width="10" Canvas.Left="30" Canvas.Top="50"/>
<TextBlock FontStyle="Oblique"
Canvas.Top="60"
FontSize="10" Text="E6"></TextBlock>
<Ellipse x:Name="e7" Fill="Orange"
Height="10" Width="10" Canvas.Left="30" Canvas.Top="60"/>
<TextBlock FontStyle="Oblique"
Canvas.Top="70"
FontSize="10" Text="E7"></TextBlock>
<Ellipse x:Name="e8" Fill="Pink"
Height="10" Width="10" Canvas.Left="30" Canvas.Top="70"/>
</Canvas>



Bize bu güzel animasyon şeklini sağlayan özellik daha önceden de bahsettiğimiz gibi DoubleAnimation ’dur.Ayrıca bu özellik içerisinde kullandığınız FillBehavior özelliklerinin de ne işe yaradıklarını ayrıntılı bir biçimde öğrenmiş olduk.Bu örnekteki projenin kaynak dosyasına da vereceğim link üzerinden ulaşabileceksiniz.

Bu örneğimiz yardımı ile Silverlight üzerinde ki animasyon işlemlerini sonlandırmış bulunuyoruz.Sırada ki inceleyeceğimiz özellik,en baştan beri Silverlight ile çok işimize yarayacak diye belirttiğim javaScript olacaktır.Unutmayalım ki web sayfalarını mükemmelleştiren asıl etken daima javaScriptlerdir.

Silverlight ile JavaScript Kullanımı

Silverlight ile bir çok temel işlemin nasıl yapıldığını örnekleri yardımıyla inceledik, fakat bunların hiç birinin gerçek anlamda bir web uygulaması olduğu izlenimi vermedi.Bunlara javaScript eklememiz durumunda ise gerçek bir web uygulaması olduğu izlenimi ile karşımızda bulunacaktır.Peki javaScript ’lere web uygulamalarında neden ihtiyaç duyarız.Çünkü yapmak istediğimiz bir çok kontrolü, yönlendirmeyi ve diğer bir çok işlemi javaScriptler yardımı ile kolaylıkla yapabilmekteyizdir.Bize sağladığı en büyük kolaylıklardandır bu javaScript ’in.Ayrıca javaScript sadece kendisi ile değil kendisi taban alınarak geliştirilen Silverlight ve Ajax gibi teknolojileri de bizlere kazandırmıştır.

JavaScript ile ilgili temel bilgilerlimize edindikten sonra yapacağımız ilk iş örnekler yardımı ile bu bilgileri kavramak olacaktır.İlk yapacağımız örnek bir yazıya tıkladığımızda bize mesaj vermesi olacaktır.

<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="canvas_loaded" MouseLeftButtonDown="deneme">
<TextBlock Text="denemeeee" FontSize="30"></TextBlock>
</Canvas>



function deneme(sender,args){
alert("deneme");
}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" dir="ltr" lang="tr" version="1.0.0.0">
<head>
<title>UntitledProject5</title>

<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="Default_html.js"></script>
<script type="text/javascript" src="JScript1.js"></script>
<style type="text/css">
.silverlightHost {
height: 480px;
width: 640px;
}
</style>
</head>

<!-- Give the keyboard focus to the Silverlight control by default -->
<body onload="document.getElementById(’SilverlightControl’).focus()">
<div id="SilverlightControlHost" class="silverlightHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>

HTML dosyamıza java script’i eklemeyi kesinlikle unutmayınız...



İlk JavaScript kullanarak Silverlight uygulamamızı da böylece gerçekleştirmiş oluyoruz.

Şimdi yapacağımız örnek ise yine bir pencere çıkıp mesaj verecek fakat bu sefer mesaj verirken ekrandaki yazıya bir arka plan rengi verecek ve bu arka plan renginin ekranda kapladığı alanın yüksekliğini verecek.Şimdi bu işlemleri nasıl yaptığımıza bir göz atalım.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="canvas_loaded" MouseLeftButtonDown="renkDegis">
<TextBlock Text="denemeeee" FontSize="30"></TextBlock>
</Canvas>


function renkDegis(sender, args) {
sender.background = "red";

alert("Height is " + sender.Height);
}



JavaScript yardımıyla bu istediğimiz işlemi de kolaylıkla yapabildik.Bu örneklerin pratik amaçlı olduğunu asla unutmayalım.Çünkü gerçek anlamda projeler geliştirmek istiyorsak Proje geliştirmek istediğimiz teknolojinin inceliklerini ayrıntılı bir biçimde bilmemiz gerekmektedir.

Şimdi yapacağımız örnek ekranda ki yazıya tıkladığımız zaman bizim belirlediğimiz bir oranda hareket etmesidir.Bu işlemin gerçekleşebilmesi için javaScript’imizin içerisinde Canvas.Top="" özelliğini kullanmamız gerekmektedir.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="canvas_loaded" MouseLeftButtonDown="yerDegis">
<TextBlock Text="denemeeee" FontSize="30"></TextBlock>
</Canvas>



function yerDegis(sender, args) {

sender["Canvas.Top"] = 70;
}




Yukarıda ki örnekte de görebileceğiniz gibi bizim fare ile tıklamamız sonucunda yazımız bulunduğu üst bölgeden resimde gördüğünüz yere gelmiştir.

Şimdi yapacağımız örnekte biraz daha karmaşık şeyler yapalım.Şeklin üstüne geldiğinde rengi değişsin.Tıklanıldığında değişsin.Anlayacağını karmaşık ama bir o kadar da ilgi çekici olan bir örnek yapalım.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="canvas_loaded">

<Ellipse x:Name="e1" MouseMove="e1Disinda"
MouseEnter="e1Ustunde" MouseLeave="e1Ayrildi"
MouseLeftButtonDown="e1Tikladi" MouseLeftButtonUp="e1Kaldirdi"
Height="100" Width="100" Canvas.Left="80" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>

</Canvas>



function e1Ustunde(sender, args) {
sender.stroke = "red";
}

function e1Ayrildi(sender, args) {
sender.stroke = "black";
}

function e1Tikladi(sender, args) {
sender.fill = "Green";
}

function e1Kaldirdi(sender, args) {
sender.fill = "LightBlue";
}

function e1Disinda(sender, args) {
sender.fill = "yellow";
}




Fare üzerinde değilken, fare üzerinde iken, şeklin üzerine tıklandığı zaman.

Bu örneğimizi de başarılı bir biçimde tamamlamış olduk.Bu işlemlerde tahmin ettiğimizden kolay tamamlanmış oldu.

İnceleyeceğimiz sıradaki örnek ise.Yazının üzerine tıkladığımız zaman oluşturduğumuz şeklin içerisindeki rengin değişmesi olacaktır.Bu işlemi yapabilmemiz için ilk olarak java Script yardımıyla bir şekil çizeceğiz.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="canvas_loaded">

<Ellipse Loaded="ellipse_yukle"
Height="200" Width="200"
Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>

</Canvas>



function ellipse_yukle(sender, args) {
sender.Fill = "Red";
}



JavaScript yardımı ile şeklimizi oluşturduğumuza göre şimdi gerçek yapmak istediğim örneğe geçebiliriz.JavaScript içersinde oluşturduğumuz elipsi çağırarak iç dolgusunu (Fill) özelliğini değiştirerek sonuca ulaşabiliriz.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Transparent"
MouseLeftButtonDown="EllipseRenkDegis">

<TextBlock Text="Bi Tıklasana..." FontSize="20"/>
<Ellipse x:Name="Ellipse"
Height="100" Width="100"
Canvas.Left="20" Canvas.Top="50"
Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>

</Canvas>



function EllipseRenkDegis(sender, args) {
sender.findName("Ellipse").Fill = "red";
}


Şeklin üzerine tıklanmadan önce,Tıklandıktan sonra

Bu örneğin sonucunda ekranda bulunan bir şekle verilen ismi kullanarak bu şekil üzerinde değişiklikler yapabilmeyide öğrenmiş olduk.Sırada ki örneğimiz ise yine bir önceki örnekle alakalı fakat bu sefer mevcut bir şeklin içerisini değiştirmeyeceğiz.Onun yerine bir yazıya tıklandığı zaman ekranımıza yeni bir şeklin gelmesini sağlayacağız.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="Transparent"
MouseLeftButtonDown="ellipseOlustur">

<TextBlock Text="Ellipse olusturmak için tıklaa" FontSize="20"/>

</Canvas>


function ellipseOlustur(sender, args) {

var slControl = sender.getHost();
var e =
slControl.content.createFromXaml(
’<Ellipse Height="200" Width="200" Fill="Blue"/>’);
var canvas = sender;
canvas.children.Add(e);
}



Bir örneğimizi daha istediğimiz şekilde bitirmiş olduk

Şimdi yapacağımız örnek ise animasyon işlemlerini ve javaScript ’i kullanarak yapacak olduğumuz basit bir top hareketi ile ilgili bir örneğimiz olacak.Aranıza bilgisayar grafikleri dersi alan arkadaşlarımız var ise, şu anda yapacağımız işlemlerin eski teknolojiler ile yapıldığı zaman ne kadar fazla zaman kaybına ve uğraşa sebep olduğunu bilirler.Bakalım nasıl bir uygulama sonucunda istediğimiz sonuca erişebileceğiz.

Bu işlemi yaparken unutmayalım ki şekillerimizin hareketi sağlayan DoubleAnimation özelliğini kullanacağız.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Canvas.Resources>

<Storyboard x:Name="animation"
Storyboard.TargetName="e1"
Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation RepeatBehavior="Forever" To="300"/>
</Storyboard>

</Canvas.Resources>

<Ellipse x:Name="e1"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="30">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="White" Offset="0.0" />
<GradientStop Color="Black" Offset="0.5" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>

<Canvas MouseLeftButtonDown="animation_bitir" Canvas.Left="20" Canvas.Top="60">
<Rectangle Stroke="Black"
Height="40" Width="60" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Orange" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5" Text="Bitir"></TextBlock>
</Canvas>

<Canvas MouseLeftButtonDown="animation_durdur"
Canvas.Left="80" Canvas.Top="60">
<Rectangle Stroke="Black"
Height="40" Width="60" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5" Text="Durdur"></TextBlock>
</Canvas>

<Canvas MouseLeftButtonDown="animation_baslat" Canvas.Left="140" Canvas.Top="60">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="40" Width="60">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="LimeGreen" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5" Text="Başlat"></TextBlock>
</Canvas>
</Canvas>



function animation_bitir(sender, args) {
sender.findName("animation").stop();
}

function animation_durdur(sender, args) {
sender.findName("animation").pause();
}

function animation_baslat(sender, args) {
sender.findName("animation").begin();
}




Bu örneğimizi de tamamladığımıza göre animasyon işlemleri ve javaScript kullanımını burada noktalamış oluyoruz.Bu işlemleri yapmanın C# dahil olmak üzere .net FrameWork 3.0 ve 3.5 ile doğal olarak ta Silverlight ile ne kadar kolay bir biçimde uygulayabileceğimizi görmüş olduk.

Değinmek istediğim bir konu daha olacak ve bu konumuzuda tamamladıktan sonra silverlight ile ilgili temel sayılabilecek herşeyi bol örnek ile incelemiş ve öğrenmiş olacağız.Şimdi inceleyeceğimiz konu ise temel kontrol işlemleri,

Temel kontrol işlemleri

Temel kontrol işlemleri denildiği zaman hepimizin aklına ilk gelen şey linkler, butonlar gibi araçlardır.İşte bu konumuzda da temel kontrol işlemlerinin Silverlight ’ta nasıl yapıldığına değinmeye çalışacağız.

İlk inceleyeceğimiz temel kontrol bir HyperLink olacaktır.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<!-- Hyperlink -->
<Canvas Width="90" Height="30" Canvas.Left="20" Canvas.Top="20"
Background="Transparent"
Cursor="Hand"
MouseEnter="hyperlink_MouseUzerinde"
MouseLeave="hyperlink_MouseAyrildi"
MouseLeftButtonDown="hyperlink_MouseSagTiklama">
<TextBlock Text="hyperlink" Foreground="Blue"/>
<Line Stroke="Blue" StrokeThickness="1" X1="0" Y1="20" X2="65" Y2="20"
x:Name="hyperlink_line" Opacity="0"/>
</Canvas>
</Canvas>


function hyperlink_MouseSagTiklama(sender, args) {
window.location = "Deneme.html";
}

function hyperlink_MouseUzerinde(sender,args)
{
sender.findName("hyperlink_line").opacity = 1;
}

function hyperlink_MouseAyrildi(sender,args)
{
sender.findName("hyperlink_line").opacity = 0;
}




Projelerimizde kullanabileceğimiz bir HyperLink ’imizde var artık biz bu linke ek olarak bir de buton ekleyelim ne dersiniz.Web uygulamalarında butona çok ihtiyaç duyuyoruz.Bakalım Silverlight ’ta bunu nasıl çözebiliriz.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- Button -->
<Canvas
x:Name="button"
Canvas.Top="10" Canvas.Left="100"
MouseLeftButtonDown="button_MouseLeftButtonDown"
MouseLeftButtonUp="button_MouseLeftButtonUp"
MouseEnter="button_MouseEnter"
MouseLeave="button_MouseLeave">
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="button_transform" X="0" Y="0"/>
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle Stroke="#FF000000" Fill="sc#1, 0.8123474, 0.8123474, 0.8123474"
Width="128.8" Height="56" x:Name="button_rectangle"/>
<Rectangle Stroke="sc#1, 0.912730157, 0.37122494, 0.17111966" StrokeThickness="5"
Width="126.8" Height="54" Canvas.Left="1" Canvas.Top="1"
Opacity="0"
x:Name="button_highlight"/>
<TextBlock Text="Tıkla bana!" FontSize="20" Canvas.Left="22" Canvas.Top="12"/>
</Canvas>

</Canvas>




var mouseOver = false;
var pressed = false;

function button_MouseLeftButtonDown(sender,args) {
sender.captureMouse();
mouseOver = true;
pressed = true;
updateVisuals(sender);
}

function button_MouseLeftButtonUp(sender,args) {
sender.releaseMouseCapture();
pressed = false;

updateVisuals(sender);

if (mouseOver) {
alert("Fareye tıkladın...!");
}
}

function button_MouseEnter(sender,args) {
mouseOver = true;
updateVisuals(sender);
}

function button_MouseLeave(sender,args) {
mouseOver = false;
updateVisuals(sender);
}

function updateVisuals(sender) {
//background
if (pressed && mouseOver) {
sender.findName("button_rectangle").fill = "sc#1, 0.548430264, 0.5354195, 0.5354195";
var transform = sender.findName("button_transform");
transform.x = 2;
transform.y = 2;
} else {
sender.findName("button_rectangle").fill = "sc#1, 0.8123474, 0.8123474, 0.8123474";
var transform = sender.findName("button_transform");
transform.x = 0;
transform.y = 0;
}

// highlight
if (mouseOver || pressed) {
sender.findName("button_highlight").opacity = 1;
} else {
sender.findName("button_highlight").opacity = 0;
}
}




Çok güzel süslü bir buton ile buton uygulamamızı da gerçekleştirmiş olduk.Bu süsten ötürü biraz javaScript ’imiz kabarmış olsada yaptığımız işin göze hoş gelmesi her zaman güzel bir durumdur.

Son olarak inceleyeceğimiz kontrol Durum Çubuğu olacaktır.Eğer Silverlight ile yapılmış örnekleri incelediyseniz bu durum çubuğuna çok sık bir şekilde denk geleceksiniz.Özelliklede resimlerim boyutunu arttırıp azaltırken.Bizde bu kadar sık kullanılıyorsa modadan ayrılmayalım dedik ve bu uygulamayı da uygulamıza ekleyelim dedik.İşte Durum Çubuğu.

<Canvas Width="300" Height="400"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- ProgressBar -->
<Canvas x:Name="slider"
Canvas.Top="50" Canvas.Left="20" Width="200" Height="45"
Background="Transparent">

<Line x:Name="slider_line"
Stroke="Black" StrokeThickness="1"
X1="0" Y1="25" X2="200" Y2="25" />

<Rectangle
Fill="Transparent"
Width="200" Height="45"
MouseLeftButtonDown="slider_MouseLeftButtonDown" />

<Path x:Name="slider_thumb" Stroke="#FF000000"
Fill="sc#1, 0.548430264, 0.5354195, 0.5354195"
Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
MouseMove="slider_thumb_MouseMove"
MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
</Canvas>

</Canvas>




var mouseDownPosition = 0;
var mouseDownValue = -1;
var thumbCenter = 5.75;

function slider_Loaded(sender, args) {
slider_SetValue(sender, 0);
}

function slider_MouseLeftButtonDown(sender, args) {

var coordinate = args.getPosition(null).x;
var slider = sender.findName("slider");
coordinate -= slider["Canvas.Left"];
slider_SetValue(slider, coordinate - thumbCenter);
}

function slider_thumb_MouseLeftButtonDown(sender, args) {
var slider = sender.findName("slider");
sender.captureMouse();
mouseDownValue = slider_GetValue(slider);
mouseDownPosition = args.getPosition(null).x;
}

function slider_thumb_MouseLeftButtonUp(sender, args) {
var slider = sender.findName("slider");
slider.releaseMouseCapture();
mouseDownValue = -1;
}

function slider_thumb_MouseMove(sender, args) {
var slider = sender.findName("slider");
if (mouseDownValue != -1) {
var newValue = mouseDownValue + (args.getPosition(null).x - mouseDownPosition);
slider_SetValue(slider, newValue);
}
}

function slider_GetValue(sender) {
var thumb = sender.findName("slider_thumb");
return thumb["Canvas.Left"];
}

function slider_SetValue(sender, newValue) {

if (newValue > sender.width ) {
newValue = sender.width;
mouseDownValue = -1;
}
if (newValue < - thumbCenter) {
newValue = - thumbCenter;
mouseDownValue = -1;
}
var thumb = sender.findName("slider_thumb");

thumb["Canvas.Left"] = newValue;
}




Durum çubuğu örneğimizi de tamamladıktan sonra hem temel controller konumuzu hem de Silverlight ’ı daha rahat kavrayıp öğrenebilmemiz için gerekli olan makale serisini tamamlamış oluyor.

Bu makalemizde neler öğrendiğimize değinmek gerekirse.Silverlight ’ta animasyon işlemlerinin nasıl yapıldığına ayrıntılı bir biçimde inceleme fırsatı bulduk.Daha sonraki işlemlerimizde web için olmazsa olmazlar arasında yer alan javaScript ’in silverlight ile uyumunu ve Silverlight ile yapabileceğimiz projeleri ne kadar kuvvetlendirebileceğini bol bol örnekle inceledik.Son olarak ise temel kontrollerimiz arasında yer alan linki butonun ve bunun gibi özellikleri nasıl oluşturabileceğimize değindik.

Bu uygulamalara çalışırken alışık olduğunuz sürükle bırak metodlarından hiç birini kullanmadık.Çünkü hem Silverlight ’ın tam sürümünün henüz sunulmamış olması hem de gerçek anlamda bir konunun uzmanı olmak istiyorsak arka planda gerçekleşen bütün işlemlerden haberimiz olması gerektiğini düşünüp savunduğum için makalelerimizde böyle bir uygulamayı tercih ettik.

Yaptığımız örnekleri inceleyebilmeniz için iki editör kullanabilirsiniz.Bunlardan birincisi Visual Studio 2008 ikincisi ise Expression Studio ve buna bağlı olarak şu an için Expression Blend2 December Preview ’ı kullanabilirsiniz.

Bundan sonraki Silverlight ile ilgili makalelerimizde yukarıdaki editörler yardımı ile Silverlight projeleri geliştirmek olacaktır.Eğer incelediğimiz özelliklerin dışında da yeni bir özellik Silverlight bünyesine eklenirse bunun açıklanmasından çok kısa bir süre içerisinde sizlere sunmaya çalışacağız.

Silverlight kavramak adına başlattığımız yazı dizisi burada sona ermektedir.Bu makaleleri inceleyerek yapacağınız projeler Türkiye ’nin dışında da dünyada da hazırlanmış ilk uygulamalar olacaktır.Çünkü bu uygulama bizlerle birlikte diğer ülkelerde yaşayan geliştiriciler içinde yeni bir yazılım ve kaynakta çok zor bulunmaktadır.Bizim yapmamız gereken bu bilgilerimizi pratikler yardımı ile daha da geliştirerek başarılı yazılımcılar olmak olacaktır.

Umarım Silverlight ’ı öğrenmenizde bir yardımım olmuştur.

İyi çalışmalar.


Projende değinilmiş olan uygulamalar için linklere tıklayınız.
Animasyon konusundaki örnek için tıklayınız.
JavaScript konusunda ki örnek için tıklayınız.
Temel kontroller konusundaki örnek için tıklayınız.

Kaynaklar
www.microsoft.com/silverlight
www.microsoft.com/expression