Blog

Yeni bir şey öğrenme arzusu bende her zaman çok büyük heyecanlar yaratmıştır. Framework 3.0’ı makinama ilk kurduğumda ve daha sonra yaptığım araştırmalarda karşıma çıkan ilk şey XAML oldu. Katıldığım bir seminer de bir ustamızın “buton programcılarının devri bitti, XAML, BAML geliyor” demesi ile de başladım araştırmalara ve sonuçta bu makale çıktı ortaya (: Bu makalemiz de anladığınız üzere XAML’i ve bize kazandırdıklarını anlatacağım.

Kısaca WPF

Windows Presentation Foundation (WPF), windows isletim sistemleri için arayüzler gelistirmek için tasarlanmıstır. Zengin kullanıcı arayüzleri olusturabilmek için bizlere çok büyük kolaylıklar saglar. Windows Presentation Foundation (WPF), web uygulamalarındaki gibi windows uygulamaları gelistirmemizi saglıyor. Windows Presentation Foundation (WPF), Windows XP, Windows Server 2003 ve Vista sistemlerinde çalısıyor fakat genel olarak Vista için gelistirilmisdir.

Daha detaylı bilgi için http://wpf.netfx3.com adresine bakınız.

XAML Nedir?

EXtensible Application Markup Language (XAML), Zamel olarak okunan ve .net uygulamaları için statik yada dinamik kullanıcı arayüzleri olusturmak için microsoftun gelistirmis oldugu yeni bir markup(isretleme) dilidir. XML tabanlı çalısır ve XML'in tüm özelliklerini kullanır. Uzantısı *.xaml dir. XAML, Windows Vistada Kullanıcı arayüzleri olusturmak için kullanılır fakat Windows XP veya Windows Server 2003'de uygulanabilir.

XAML, Uygulama kodundan kullanıcı arayüzü kodundan ayırmak için geldi. Bu yapı Javanın kullandıgı MVC(Model View Controller)'a çok benzer. XAML, Windows vista ve .NET 3.0 ile uygulamalar gelistirmek için WPF'e baglıdır.

XAML aynı XML gibidir. XML'in tüm özelliklerini kullanır. XML için geçerli olan tüm kurallar XAML içinde geçerlidir. Örnek olarak baslatılan her element sonlandırılmak zorundadır yada büyük küçük harf duyarlılıgı. Her bir XAML Elementi .NET CLR Class'ını temsil eder.

XAML'in WPF ile birlesmesi yazılımcılar için zengin kullanıcı arayüzleri gelistirmelerini saglıyor, bu ASP.NET deki code behind ile code inline modeline benziyor. Yani ister ayrı bir dosya içerisine yada inline olarak uygulama kodlarını yazabiliriz. Yani uygulama katmanı ile sunum katmanını tamamen birbirinden bagımsız hale getirebiliyoruz.

XAML, BAML dosyalarını derler. BAML XAML'den daha küçüktür ve okumak için daha basittir bu yüzden yüklenmesi çok hızlıdır.

XAML Elementleri

Her bir XAML Elementi .NET CLR Class'nı temsil eder. Çogu XAML elementi System.Windows.UIElement, System.Windows.FrameworkElement, System.Windows.FrameworkContentElement and System.Windows.ContentElement'den inherit edilir.

Ø Root Elementleri : Windows ve Page elementlerini root elementini çok sık kullanır. Bu elementler diger elementleri içerir ve XAML dosyaları için root elementtir.
Ø Panel Elementleri : Bu elementler kullanıcı arayüzleri için layoutlar saglar. Temel panel elementleri StackPanel, DockPanel, Grid ve Canvas' dir.
Ø Control Elementleri : Bu element XAML kontrollerinin farklı tiplerini tanımlar ve onları kisisellestirmemizi saglar.
Ø Geometric Elementler : Bu element arayüzümüz üzerinde geometric grafikler ve sekiller çizmemize yardım eder. Bazı Geometric elementler; LineGeometry, EllipseGeometry, PathGeometry ve LineSegment' dir.
Ø Document Elementleri : Bu elementler dökümanın sunumu istendiginde isimize yarayacaktır. 2 ana grubu vardır. Inline ve Block elementler. Bazı inline elementler; Bold, LineBreak ve Italic. Bazı Block elementler; <p>, <table> ve <i> gibi HTML Elementleridir.

Stack Panel Kullanımına bir örnek;

<StackPanel>
    <Button Content="Dokunma Bana (:"/>
</StackPanel>

XAML Attribututelari

XAML attributeları .net Classındaki Properties'lerle aynıdır... Inline yada Expcilit attribute tanımlayabiliriz. Her attributet ana elementin özelliklerini inherit eder yada onları override eder. Bazı XAML elementleri diger elementler içinde onların özelliklerini alır. Bunlara Attached Properties attributetelar denir.

XAML Syntax;

<Button>
    <Button.Background>
        <SolidColorBrush Color="Blue"/> 
    </Button.Background>
    <Button.Foreground>
        <SolidColorBrush Color="Red"/> </Button.Foreground> 
    <Button.Content>This is a button </Button.Content>
</Button>

Bir buton olusturduk ve özelliklerini belirledik. Ilk element nesnenin tipini belirtiyor. <NesneTipi> Alt elementlerde nesne tipini ve nesne tipinin özelligini yada eventini belirtir. belirtiyor. <NesneTipi.[Özellik, Event]>

Neden XAML?

Ø Kullanıcı arayüzleri olusturmak XAML ile çok basittir.
Ø Önceki UI Dizayn teknikleri için kullanılan kodlardan daha kısadır.
Ø Dizayn edilen arayüz diger ortamlarda tasınması ve sunulması basittir. Örnegin Web yada Windows uygulamaları üzerinde gelistirdigimiz arayüzleri kullanabiliriz.
Ø Dinamik arayüz gelistirmek XAML ile çok kolaydır.

Nasıl XAML Gelistiririm?

Windows Vista, Windows XP ve Windows server 2003 ile XAML ve WPF gelistirebiliriz. Visual Studioda XAML ve WPF gelistirmek için WinFX SDK ve Visual Studio 2005 Extensions for WinFX kurulum dosyalarını indirmemiz ve kurmamız gereklidir. WinFXSDK'yı yükleyerek XAML için gelistirme aracına sahip olacagız. Visual studio extension ile de gelismis bir debuging mekanizmasına sahip olacagız.

ÖRNEK

Evet, ilk XAML uygulamamızı gerçeklestiriyoruz. Ben gerçekten çok heyecanlıyıım (:

Visual Studio'u çalıstıralım ve yeni bir proje olusturalım;

NET Framework 3.0 adında yeni bir proje tipi geldigini görüyoruz. Burada WPF ile ilgili yeni proje tipleri yer almaktadır. Biz Windows Application (WPF)'i seçiyoruz.

Yukarıda da belirttigimiz gibi form desing'i için gerekli kodlar Xaml içerisinde tutuluyor. Kodlarımızı yazacagımız kısım ise yine *.xaml.cs içerisinde olacak. Bu örnegimiz içerisinde bir button'a tıkladıgımızda textbox içerisinde o anki saati görüntüleyecegiz. Formum üzerine toolbox penceresinden bir button ve textbox ekliyorum.

Farklo kontrollerin ve kontrol tablarınında eklendigini görüyoruz. Bunlarıda ilerleyen zamanlardas sizlere aktarıyor olacagım.

Kontrollerimizi forma ekledikten sonra aynı html deki gibi tüm propertyleri ve eventleri geldi. Button için yeni bir event yazalım. Önce Xaml tarafında bunu belirleyelim.

<Button Height="20" Margin="119,0,38,84.5" Click="AbiSaatKac" VerticalAlignment="Bottom">
    Saat Kaç ?
</Button>

Butona tıklandıgında AbiSaatKac isimli metoda gidecek ve onun altına yazacagımız kodları çalıstıracak. Simdi formun code kısmına gidelim.

void AbiSaatKac(object sender, RoutedEventArgs e)
{
    MyTextBox.Text = DateTime.Now.ToShortTimeString();
}

Yukarıdaki metodu olusturdum. Butona tıkladıgımızda Textbox içerisine o anki saati yazacak.

Butona tıklayalım;

Bu makalenin de sonuna geldik, Olumlu ve olumsuz tüm görüsleriniz için simdiden tesekkür ederim.

Örnek Kodlar için mail adresimi kullanabilirsiniz
info@semgoksu.com

Sem GÖKSU
www.semgoksu.com | www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com