Ahmet Çığşar | XAML ile Tanışmak ve XAML ‘ın Yapısı
364
post-template-default,single,single-post,postid-364,single-format-standard,qode-quick-links-1.0,ajax_fade,page_not_loaded,,qode-theme-ver-11.0,qode-theme-bridge

XAML ile Tanışmak ve XAML ‘ın Yapısı

XAML ile Tanışmak ve XAML ‘ın Yapısı

XAML (eXtensible Application Markup Language) Nedir?

XAML,   WPF uygulamalarında arayüz geliştirmemiz için Microsoft tarafından geliştirilmiş bir işaretleme dildir. XAML , XML’den türetilmiştir ve  XML’in ana yazım kurallarını bünyesinde taşır. Daha önce XML bilginiz varsa  XAML’ı öğrenmeniz kolay olacaktır.

XAML ‘ın Yapısı

XAML, XML ve HTML gibi diğer işaretleme dillerindeki element ve elementi oluşturan attirbute’ları barındırır ve bu yapılar XAML’da  aynı kurallar içerisinde kullanılır.  Aşağıdaki şemada üzerinde Tıkla yazan, btnTikla adında bir buton oluşturulmuştur. Bu basit XAML kodu üzerinde XAML dilinin ana hatlarına bir göz atalım.
XAML-yapisiYukarıda gördüğümüz üzere <Button> tagi bir elementi başlatıyor ve içerisine çeşitli attribute’lar (nitelik) alıyor. Element içerisinde kullandığımız attribute’lara değer atamalıyız çünkü tek başlarına bir şey ifade edemezler. Kısaca attribute’lar ve bunlara atanan değerler elementin bir parçasıdır. WPF uygulamalarımızda XAML kodlarında button, textbox, panel gibi  nesneleri elementler ile, bu nesnelerin özelliklerine (property) ve olaylarına (event) attribute’lar ile erişeceğiz / oluşturacağız.

Aşağıda örnek üzerinden XAML’ın kod yapısına tekrardan bir bakalım.

/// Aşağıda bir buton oluşturdum. Tek satır sadece tek bir elementtir. 
<Button x:Name="btnTikla" Content="Tıkla" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="btnTikla_Click_1"/>

/// Daha anlaşılır olması açısından yukarıdaki kodları satır satır ayırıyorum.
/// Button elementi burada başlıyor.
<Button 

/// Name özelliğine Name attribute'u ile değer atıyorum. Windows form uygulamalrındaki Name property'si ile işlevi aynı.
x:Name="btnTikla" 

/// Butonun üzerinde yazacak yazıyı Content attribute'u ile belirliyorum. Windows formdaki Text property'si ile aynı işlevdedir.
Content="Tıkla"

/// Yatay hizalama yapıyor ve sola yaslıyorum. 
HorizontalAlignment="Left" 

/// Dikey hizalama yapıyor ve butonu en üste hizalıyorum.
VerticalAlignment="Top" 

/// Butonun Genişliğini ayarlıyorum piksel cinsinden. 
Width="85" 

/// Butonun yüksekliğini ayarlıyorum piksel cinsinden.
Height="30"

/// Butonun click event'ini Click attribute'u ile belirliyorum. 
Click="btnTikla_Click_1"

/// Buton elementini kapatıyorum.
/>

Yukarıda dikkat ederseniz bir nesnenin olaylarına (event) ve özelliklerine (properties) attribute’lar yardımıyla eriştik ve değer atadık.

XAML ile tanımladığımız her element  .NET Framework’de bir sınıf karşılığı vardır. Örneğin : XAML ile <Button>  olarak oluşturduğumuz buton System.Windows.Controls.Button sınıfında karşılık bulur.

XAML  ile read-only özelliklere (Properties) erişemeyiz sadece public olarak tanımlanmış ve get – set kullanılmış özelliklere (Properties) erişebiliriz.

XAML ile ASP.NET sayfalarında kullanıldığı gibi “inline code” yani satır içerisine “code-behind” kullanmadan, XAML kodlarıyla birlikte C# veya VB.NET veya .NET Framework’ün desteklediği başka dillere ait kodları ekleyebilirsiniz. Aşağıda örnekte inline kod kullanımına örnek verilmiştir.
( Inline kod yazmak tavsiye edilmez çünkü kodların okunabilirliğini azalttığı gibi, sonradan müdahalelerde karışıklıklara sebep olabilir ayrıca tasarım ve uygulama alanlarının ayrıldığı projelerde WPF ruhuna da aykırıdır. )

<Grid>
     // Butonumuzu oluşturuyoruz. 
     <Button x:Name="btnTikla" Content="Tıkla" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>

     // x:Code ile inline-code alanımızı açıyoruz.
     <x:Code>

     // XML kullananlar bilirler <![CDATA[ ]]> ile XML yorum alanı açıp öyle kodları yazmamız gerekiyor ki yazacağımız uygulama kodları XAML kodu gibi yorumlanmasın.
     <![CDATA[

     // Aşağıda btnTikla adlı butonun (C# ile yazılmış)  Button_Click_1 eventini görüyoruz.
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
             MessageBox.Show("Naber Dünya :)");
        }

     ]]>
     </x:Code>
</Grid>

XAML ile WPF Arayüzleri Tasarlamak İçin Gerekli Araçlar

XAML bir işaretleme dili olduğu için derlenmez dolayısı ile bir metin editörü ile örneğin notepad  ile XAML kodları yazabilir, WPF arayüzleri geliştirebilirsiniz. Tabi bu durum işin sadece romantik tarafı çünkü pratikte notepad ile XAML kodları yazıp WPF arayüzleri geliştirmek bize hiçbir şey kazandırmayaz aksine kaybettirir (Ör: zaman kaybı, bol bol kod hatası… gibi).

Microsoft Visual Studio : Microsoft tarafından geliştirilen eşsiz bir [tooltip text=”IDE” gravity=”n”]Integrated development environment, Türkçe karşılığı entegre geliştirme ortamıdır. Bilgisayar programcılarının hızlı ve rahat bir şekilde yazılım geliştirebilmesini amaçlayan, geliştirme sürecini organize edebilen birçok araç ile birlikte geliştirme sürecinin verimli kullanılmasına katkıda bulunan araçların tamamını içerisinde barındıran bir yazılım türüdür.[/tooltip]’dir bilmeyenimiz, duymayanımız yoktur. Visual Studio ile WPF arayüzlerini kolayca oluşturabiliriz, daha az XAML koduyla boğuşma lüksümüz var. Visual Studio olmazsa olmaz uygulamamızdır.
Buraya tıklayarak Visual Studio’yu inceleyebilir ve ücretsiz deneme sürümünü indirebilirsiniz. Ayrıca tamamen ücretsiz ve tam sürüm Visual Studio Express‘i de kurabilirsiniz. Express sürümünün Visual Studio ana sürümüne göre yeteneklerinin kısıtlı olduğunu unutmayalım.

Microsoft Expression Blend : Mükemmel WPF arayüzleri tasarlayabileceğimiz, eğer tasarımcıysanız lezzetli tasarımlar ortaya çıkarabileceğiniz bir uygulamadır. Adobe Photoshop ve Adobe Illustrator dosyalarını Expression Blend ile içe aktarabilir ve bu materyalleri kullanarak WPF arayüzleri oluşturabilirsiniz. Olmazsa da olur evet fakat olursa  görsellik açısından çok daha harika şeyler olur diyebileceğimiz bir uygulamadır. Buraya tıklayarak inceleyebilir ve deneme sürümünü indirebilirsiniz.

Kaxaml : Kaxaml ücretsiz bir XAML editörüdür. Açıkcası arayüz geliştirmelerinde aktif olarak kullanılmaz ama bazen XAML dosyalarını sağ tık yapıp hızlıca değiştirmek (editlemek) isteyebilirsiniz. Kaxaml bu işler için harika bir araçtır. Kod renklendirmesi, anlık önizleme, sürükle bırak ve renk paleti gibi leziz özellikleri vardır.  Buraya tıklayarak indirebilirsiniz.

2 Yorum Var
  • Nithat M.
    14:36h, 01 Mart Cevapla

    Güzel yazı olmuş xaml’ı şimdi anladım teşekkürler.

    • Ahmet Çığşar
      19:20h, 02 Mart Cevapla

      Yazılarımın amacına ulaştığını görmek güzel. İşinize yaramasına sevindim. Teşekkürler.

Yorum Yapın