WPF ve Windows Arayüz Tasarımcısı

Microsoft’un son geliştirdiği ürünlerden de görülüyor ki; masaüstü uygulamalarında klasik Windows Form’larının modası geçmiş gidiyor. Gerçi ülkemizdeki yazılım pazarında WPF kullanılarak hazırlanmış ürünlere henüz pek rastlayamasak da; tabi ki bu böyle devam edeceği anlamına da gelmiyor.

Öncelikle şunu söyleyerek başlamakta yarar var diye düşünüyorum : Bu yazının amacı WPF’in mimarisini, XAML’i ya da kontrollerin nasıl kullanılacağını anlatmak değil, masaüstü uygulamalarında arayüz tasarımını tartışmaktır.

Windows Arayüz Tasarımcısı Kimdir?

Bu soruyu öncelikle, Google’a sorayım dedim. Sonuçlar ortada demek isterdim ama; görüldüğü üzere sonuç bile bulunamadı. Aynı aramayı “web arayüz tasarımcısı ”için yaptığımda ise 38.400 sonuç bulundu. Şimdi de bir başka deney :“Windows Tasarım” yazdığımda, 646 sonuç bulunurken; “Web Tasarım” diye aradığımda 7.000.000 sonuç bulundu.

Son bir deneyi de sizlere bırakıyorum. 15 dakikanızı ayırıp, Türkiye yazılım pazarında ürün haline gelmiş masaüstü uygulamalarının nasıl göründüğüne bakarsanız, şu ortak özelliklere rastlıyorsunuz.

• Çoğu zaman gri renkii kötü ekranlar
• Aynı ekranda onlarca buton
• Çoğu zaman köşeli, estetik olmayan kontroller
• Üzerinde düşünülmemiş kontrol yerleşimleri
• Gri olmayan ekranlar ise piyasada bulunan hazır kontrol kütüphanelerinden dolayı, birbirlerini tekrar eden tasarımlar

Halbuki aynı araştırmayı web uygulamaları için yaptığınızda bu maddeler karşımıza çıkmıyor. Peki nedir bu durumun sebebi? Bu maddeler – ki sayıları arttırılabilir – neden varlar? Neden masaüstü uygulamalarında da Web sitelerinde olduğu gibi, çeşitli tasarım örnekleri göremiyoruz? Cevap oldukça basit : Çünkü, masaüstü uygulamalarını tasarlayanlar, arayüze karar verenler, profesyonel tasarımcılar değiller. Çünkü, masaüstü uygulamalarını programcılar tasarlıyorlar. Çünkü, klasik Windows Form programcılığında tasarımcıların yeri yok. İşte bu yüzden, Google’dan da görüldüğü üzere, sektörde  “Windows Form Tasarımı”, “Windows Tasarımı”, “Windows Arayüz Tasarımcısı” vb. pek alışılagelmiş kavramlar değiller. Dolayısıyla yukarıdaki başlıktaki sorunun doğru cevabı, Cem Yılmaz’ın deyimiyle şöyle olmalıydı : “Bilmiyorum, kimdir?”

Klasik Window Form Programcılığında Tasarım

Bildiğiniz üzere, klasik Windows Form programcılığında, IDE’nin Form Design ekranında yapılan tüm işlemler (kontrollerin sürükle-bırak ile toolbox’tan alınması, Properties ekranında kontrollerin property ve event’lerine yapılan yapılan atamalar vb) aslında tasarım anında C# kodlarına dönüşür ve bu kodlar partial class tekniğiyle ayrı bir fiziksel dosyaya yazılırlar. Diğer bir deyişle, tasarım C# kodlarıyla ifade edilir.

Web programcılığında ise durum oldukça farklıdır. Sunucu tarafında oluşan dinamik bir sayfa düşünüldüğünde, bu sayfa iki kısımdan oluşur :

1. Tasarımı : HTML
2. Kodları : Sunucu tarafında çalışan program kodları

Bu sayfanın oluşturulmasında kullanılan web teknolojileri farklıysa da (ASP, PHP, ASP.NET vb), mantık değişmez. Kısacası, sayfanın bir tasarım kısmı bir de kod kısmı bulunur. Bu keskin ayrımın sebebi de, pek tabi ki  tasarımın HTML, kodların ise bir programlama diliyle yazılmasıdır. Böylece tasarımcılar kodlardan bağımsız, programcılar ise tasarımdan bağımsız hale gelebilirler. İşte klasik Windows Form programcılığındaki eksik kısım da tam olarak budur. Yani, tasarımın kodla oluşması ve tasarımcıların çalışabilmeleri için uygun bir ortam sağlayamamasıdır. Sonuç olarak, masaüstü uygulamlarının geliştirilmesinde, arayüz tasarımları programcıların acımasız parmaklarına emanet edilirler ve aslında hiç de iyi edilmezler:)

WPF’de Tasarımcıların Yeri

Sorunu anladıktan sonra gelelim WPF’in bu konudaki çözümüne. WPF ile uygulama geliştirilmesinde tasarım ve kodlar birbirinden bağımsız ele alınabilmektedir. Kısacası, az önce üzerinde durduğumuz tasarım ve kodların birbirinden bağımsız hale getirilmesi WPF ile masaüstü uygulamalarında da sağlanmıştır. Peki nasıl?

1. Tasarım : XAML
2. Kodları : C#, VB.NET gibi .NET dil ailesinden biriyle yazılmış program kodları

Web programcılığında sayfanın nasıl görüneceği HTML kodlarıyla ifade edilirken, klasik Windows Form programcılığında HTML gibi bir işaret dili yoktur. Bu yüzden de tasarım, kodlardan bağımsız değildir. Fakat görülüyor ki, WPF ile uygulama geliştirilmesinde aynen HTML’ e benzeyen bir işaretleme dili kullanılmaktadır. Bir başka deyişle, tasarım ve kodun tam olarak ayrılması söz konusudur. Öyleyse XAML’in, HTML benzeri bir işaretleme dili olduğu ve bu dilin WPF arayüzleri kodlamak için kullanıldığı söylenebilir. Toparlarsak, WPF uygulamalarında tasarımcıların yeri hazır : XAML.

WPF ile Uygulama Geliştirilmesi

WPF ile uygulama geliştirilmesi şekli Web programcılığına oldukça benzemektedir. Bunu anlamak için öncelikle bir ASP.NET uygulamasının nasıl ortaya çıktığını hatırlayalım :

• Tasarımcı öncelikle grafik çalışmasını gerçekleştirir. Örneğin butonlarını çizer, menüleri oluşturur vb.
  Adobe Photoshop gibi pixel tabanlı çizim araçları
  
• Bu çalışmalar, HTML ve CSS kullanılarak Web’e uygun hale getirilir.
  Expression Web ya da Dreamweaver gibi bir HTML editörü
  
• Daha sonra programcı bu arayüzün arkasındaki kodları tamamlar.
  Visual Studio

Şimdi de bir WPF uygulamasının geliştirilmesi adımlarını izleyelim :

• Tasarımcı öncelikle grafik çalışmasını gerçekleştirir. Örneğin butonlarını çizer, menüleri oluşturur vb.
  Expression Design, Adobe Ilustrator gibi vektör tabanlı çizim araçları ya da Adobe Photosop gibi pixel tabanlı çizim araçları
  
• Bu çalışmalar, XAML kullanılarak WPF’e uygun hale getirilir.
  Expression Blend
  
• Daha sonra programcı bu arayüzün arkasındaki kodları tamamlar.
  Visual Studio

Kullanılan araçlar değişse de WPF ile uygulama geliştirilmesi, Web programcılığındaki temele oldukça benzemektedir. Yani WPF uygulamalarının geliştirilmesinde tasarımcı, arayüzü C# kodlarından bağımsız şekilde tasarlayabilir. Böylece web tasarımı yapan tasarımcılar, kullandıkları mevcut araçlara XAML editörü olan Expression Blend’i de ilave ederlerse, bu kişiler WPF arayüzleri oluşturabilirler.

Başarılı Tasarım – Kod ayrımı dışında, XAML’in birçok getirisi daha bulunmaktadır. Bunlardan birkaçını sıralarsak :

• Kendi kontrollerimizi kolayca tasarlayabiliriz. Örneğin, yuvarlak bir buton, termometre görünümünde bir progress bar gibi.
• Kolayca animasyonlar oluşturabiliriz. Bu animasyonlar, sadece estetiğe değil, programın daha anlaşılır ve kullanışlı olmasına da büyük katkı sağlarlar.
• Drop Shadow, Emboss, Glow gibi efektleri uygulayabiliriz.
• Veri bağlama işlemlerini yapabiliriz. Böylece kod tarafındaki bu kısımla ilgili kalabalıklığın da önüne geçebiliriz.

Sonuç Olarak?

Sonuç olarak, WPF zamanla, “window tasarımcısı”, “windows arayüz tasarımı” gibi arayıp da bulamadığımız kavramların oluşmasını sağlayacaktır. Böylelikle masaüstü uygulamalarında eksikliği hissedilen estetik ve fonksiyonel arayüzler, WPF ile gerçekleştirilebilecektir. Tabi ki, şu ekonomik şartlar altında, pazarda böyle bir pozisyonun oluşması ne kadar kolay ve ne kadar zaman alır tartışılır. Umuyorum ki, bu güçlü kütüphane, güçlü ürünlerle birlikte yazılım piyasasında yerini alır. Böylece, yıllardır görmeye alıştığımız gri, çirkin masaüstü uygulamalarının yerlerine, çok daha estetik görünen, fonksiyonel ve kolay kullanılabilen zengin masaüstü uygulamaları gelir.