WPF ile tanışma ve ilk uygulamamız

WPF(Windows Presentation Foundation) yeni nesil windows form teknolojisi olarak geçmektedir standart windows form applicationdan  farkı performans, veri bağlama, tarayıcıda çalışabilme olanağı, tasarım olanağı en öne çıkan kısımlarındandır.

WPF ile tanışma ve ilk uygulamamız

WPF ile tanışma ve ilk uygulamamız

Windows Presentation Foundation .NET Framework 3.0’ın grafik altyapısını oluşturan XAML(eXtensible Application Markup Language) tabanlı sistemdir. Microsoft’un Windows Vista ve sonraki işletim sistemlerinde yüklenmiş olarak gelmektedir. Windows XP SP2 ve Windows Server 2003’te de çalışabilecektir. Windows Presentation Foundation kullanarak yüksek derecede görsel ve etkileşimli arayüzler oluşturabileceksiniz. Bundan dolayı standart windows form application’ın çok güçlü bir alternatifi olmaktadır.

WPF Mimarisi

PresentationFramework: Bu yapı wpf araclarını(button,label vs) barındırır.
Presentation Core: Wpf nesneleri dısında özellesmis yeni nesnelere ihtiyaç oldugunda bu katmanda bulunan nesneler kullanılır.
milcore: Wpf araclarının görüntülenmesini saglayan katmandır. Bu katmanda arayüz olusturma kısmında anlatılanlar (GPU nun kullanılması vs ) gerçeklesir.

Arayüz Farkı

WPF’in klasik Win32 uygulamarına olan en büyük üstünlüğü, eski GDI+ pencereleme sistemini kullanmaması, bunun yerine DirectX üzerine kurulmuş bir mimari sayesinde gelişmiş grafik kartlarının GPU’sunun(Graphics Processing Unit) bütün avantajlarından yararlanmasıdır. Ayrıca Windows7 ve WPF ayrılmaz bir ikilidir. Windows7’nin sunduğu Multitouch ve Microsft’un yeni nesil arayüz teknolojisi Surface’ten faydalanarak kullanıcı arayüz deneyimini yepyeni bir boyuta taşıyabilecektir. Web tabanlı bir WPF teknolohjisi olan Microsoft Silverlight ile uygulamalar masaüstü arabirim zenginliğinden hiçbir şey kaybetmeden web ve mobil ortamlara taşınabilir, MacOS ve Linux tabanlı istemcilerde çalıştırabilir. Web uygulamalarına oldukça benzeyen WPF uygulamalarına XBAP (XAML Browser Application) denilmektedir.

Görüntü Kalitesi Farkı

WPF teknolojisinin yukarıda giriş metninde belirtmiş olduğum gibi startdart windows form uygulamasından en önemli farklarının performans, veri bağlama ve tasarım olanağı olduğunu söylemiştik. Tasarım konusunda değinmemiz gereken bir diğer konuda windows form uygulaması pixel tabanlıdır, WPF uygulaması ise vector tabanlıdır.Standart windows form uygulamasında uygulamayı 1024×768 pixel bir çözünürlüğe sahip bir monitöre göre hazırladığınızda daha büyük çözünürlüğe sahip ekranda daha farklı görünecektir. Farklı gözükme durumu kullanılan görsellerin ve çözünürlük yükselmesinden dolayı kötü ve istenmeyen tasarımsal bozukluklar oluşacaktır.

Alttaki resimde de görüldüğü gibi ekran 4 kart büyütüldüğünde XP’deki pencerenin görüntü kalitesi bozulmasına rağmen, Vistada’ki WPF altyapısı ile oluşturulan pencerenin görüntü kalitesinde en küçük bir değişme olmamıştır.

wpf2_2

DirectX ve Grafik Kartı Desteği

Geliştiriciler için en radikal değişikliklerin başında kullanıcı arayüzünün oluşturulmasında sistem düzeyindeki işlemlerin artık farklı bir mimaride tasarlanmış olmasıdır. Windows API leri ile geliştirme yaptığımız zamanlarda (Visual Basci 6.0, MFC veya .NET framework ile Windows Forms altyapısını kullanarak) geliştirici için iki önemli sistem bileşeni kullanılır. User32 (user32.dll) dediğimiz pencerelerin, kontrollerin (tetbox, button, listebox gibi) oluşturulması ve gösterilmesini sağlayan, diğeri de yazılar , resimler, geliştiricinin kendi tasarladığı şekilleri çizmek için kullanılan GDI/GDI+ bileşenleridir.Hangi geliştirme ortamı olursa olsun arka planda yine aynı temel bileşenler (User32 ve GDI/GDI+) kullanılacaktır. Peki o zaman neden pencere tabanlı uygulamalar geliştirirken .NET’in Windows Forms altyapısını kullanarak en iyi şekilde geliştirme nasıl yapılıyor sorusu aklımıza geldiğinde vereceğimiz cevap; User32 ile GDI+ arasındaki etkileşimi en iyi şekilde sağlayan ve bu bileşenleri kullanmak için geliştirilen kütüphanelerin (System.Windows.Forms.dll , System.Drawing.dll) geliştiriciye kolay ve esnek bir yapı sunarak kullanıcı arayüzü geliştirmesine olanak sağlamasından kaynaklanıyor olmasıdır. Hernekadar kolay olsa da hala var olan kontrolleri özelleştirme ve çizim işlemlerindeki performans sorununun halledilememesi yeni çözüm arayışlarına yol açmıştır.Tekrar değinmek gerekirse bu problemler tamamen işletim sisteminin (arka planda GDI/GDI+ kullanıyor olması ) mimarisi gereği ortaya çıkmaktadır.

WPF’de yeni gelen mimari ile artık gerek kontrollerin oluşturulması ve gösterilmesi, karmaşık çizim işlemleri, ses ve görüntü işlemede GDI/GDI+ yerine tamamen DirectX kullanmaktadır.Bu da kullanıcı arayüzünün oluşturulmasında ve görüntülenmesinde DirectX’den yararlanıldığı için kazanılan performans oldukça tamin edicidir. Çünkü DirectX GDI/GDI+ gibi merkezi işlemciye (CPU) yüklenmektense (ki piksel piksel işlem yapıldığından işlemciye yük binmesi gayet doğaldır) grafik kartının çizim işlemleri için özelleştirilmiş günümüzde oldukça güçlenmiş GPU (Graphics Processing Unit) olarak isimlendirilen birimini kulanmaktadır.

 

İlk WPF  Projemizi Oluşturalım

Visual Studio’da klasik olarak File(Dosya) > New(Yeni) > Project(Proje) yolu ile yada Ctrl + Shift + N tuş kombinasyonu ile Yeni proje penceresinin açılmasını sağlıyoruz.

Açılan pencerede Templates > Visual C# > Windows > Classic Desktop(Visual studio versiyonuna göre farklılık gösterir arama kutusuna WPF yazarakda ulaşabilirsiniz.) yoluna erişiniz, bu yola eriştiğinizde alttaki görüntüye benzer seçeneklerde bir ekran gelecektir. Burada şuan makale konusu gereği 2 seçenek sadece bizi ilgilendirmektedir Biri WPF Application diğeri WPF Browser Application’dır. Bu iki seçeneğin farkı ise WPF Applicaiton ile masaüstü uygulamalar geliştirebilir fakat WPF Browser Application’da adında belirtildiği gibi tarayıcı uygulaması oluşturabiliriz yani bir web projesi oluşturabiliriz. Fakat şuna dikkat edilmesi gerekir WPF Browser Application Html, CSS çıktıları şeklinde tüm popüler tarayıcıların çalıştırabileceği bir çıktı vermez java applet’lerde olduğu gibi bir applet’e ihtiyaç duyar html tabanlı değildir.

Listeden WPF Application’ı seçerek uygulama oluşturuyoruz ve Solution Explorer’da alttaki gibi dosyalar oluşacaktır.

wpf solucation explorer window

Burada dikkatimizi hemen makale içerisinde adı geçen bir terim olan xaml ifadesinin dosyaların uzantısında geçtiğini görebilirsiniz MainWindow.xaml dosyasını açtığınızda üstte önizleme penceresi altta ise xml tabanlı xaml kodlarını göreceksiniz pencere içerisindeki her nesne ve nesneye ait her özelliğe ait detayı kolaylıkla xaml kodlarında görebilirsiniz. Startdart windows form uygulaması ile karşılaştırıldığında App.xaml dosyası Program.cs dosyasına karşılık gelmektedir ve bu dosyaya tıkladığınızda herhangi bir önizleme penceresi gelmeyecektir nedeni ise sadece uygulama ile ilgili çeşitli ayarların yapıldığı dosyadır.

Startdart windows form uygulamasında hangi pencerenin ilk açılacağı ile ilgili işlemi Program.cs adlı dosyada alttaki kodda işaretli satırda yapılmaktadır.

Aynı işlemi WPF uygulamasında App.xaml dosyası içerisinde Application elementinde yer alan StartupUri adlı attribute’e başlatılmasını istediğimiz .xaml uzantılı dosyayı yazarak gerçekleştirebiliyoruz.

Şimdi ise MainWindows.xaml dosyası içeriğine gözatalım.

Window elementi standart form application ile karşılaştırıldığında Form’a karşılık gelmektedir root element budur ve bu elementte birçok attribute olduğunu görüyorsunuz burada xmlns attribute’leri c# kod tarafında kullanmak istediğimiz nesneler için öncesinde nasıl Namespace ekleme gereği duyuluyorsa buradada aynı durum sözkonusu açılımıda xml namespace’tir.

Diğer elementler ise x:Class elementi’de Bu forma karşılık gelen code dosyasının direk namespace’ini değer olarak geçiyoruz. Böylelikle burada oluşturulan elementlere kod tarafında müdahale etme gibi durumlarda kod tarafında bu nesneleri görebilmek için tanımlamanın bu şekilde yapılması zorunludur.

Title ise pencerenin adıdır standart form uygulamasında olduğu gibi.

Width pencerenin genişliğidir.

Height pencerenin yüksekliğidir.

Diğer Önemli Bazı Window Özellikleri

Icon – Pencere için bir görsel tanımlayabilirsiniz eklediğiniz ikon pencere başlığının sol tarafında yer alır.

ResizeMode – Ölçeklendirme modunun ne olabileceğini buradaki enumlardan birini seçerek gerçekleştirebilirsiniz 4 farklı seçenek yer almaktadır. CanMinimize sadece küçültüp büyütme ve kapatma tuşunu etkin bırakıp tam ekran yapma butonunu etkisiz yapmaktadır ve manuel olarak pencerenin boyutunu değiştiremezsiniz. CanResize varsayılan olarak seçili olan budur ölçeklendirme ile ilgili herşey etkindir(küçültme, tam ekran, kapat, manuel ölçeklendirme). NoResize hiçbir şekilde küçültme, tam ekran yapma yada manuel ölçeklendirme yapılmasına izin verilmez sadece kapatma tuşu gözükür. CanResizeWithGrip CanResize özelliklerinin tümünü sahiptir ve ekstra olarak pencerenin sağ altına bir ölçeklendirme simgesi ekler.

ShowInTaskbar – Görev çubuğunda uygulamanın gösterilip gösterilmeyeceği belirtilir true/false olarak. Varsayılan değeri true’dır.

Topmost – Tüm pencerelerin üzerinde gösterilecek şekilde ayarlamaya yarar true/false olarak değer alır. Varsayılan değeri false’dır.

WindowState – Pencerenin başlangıç durumunu belirtir. Normal varsayılan değeridir pencere belirlediğiniz pencere boyutunda açılır. Maximized Tam ekran olarak açılır. Minimized Görev çubuğunda küçültülmüş olarak açılır.

WindowStartupLocation – Pencerenin açılacağı konum belirtilir. Manuel varsayılan değeridir Window özelliklerinde belirtilen Top ve Left değerlerine göre ekranında istediğiniz pozisyonunda açabilirsiniz. CenterScreen pencere ekranın tam ortasında açılır.

Son olarak Grid bir Layout kontrolüdür bu layout kontrolü içerisine eklenen kontrolleri düzgün biçimde sunabilmek ve yerleşimlerini düzgün olarak yapabilmek için kullanmanızı tavsiye ederim. Grid haricinde kullanılabilecek StackPanel, WrapPanel, Canvas, RelativePanel gibi panellerde mevcuttur bu panellerin hepsini ayrı olarak farklı makalelerde ele alacağım.

Windows Presentation Foundation’u tanıdık ve ufak bir örnek oluşturarak standart windows form uygulamasından ne gibi farkları olduğunu, dosya içeriklerini ve elementlerin ne işe yaradığı gibi işlemleri anlattık bundan sonraki WPF örneklerimiz kontroller üzerine devam edecektir.

Kaynak

WPF ile tanışma ve ilk uygulamamız
4.7 (93.33%) 3 oy

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. Anonim dedi ki:

    Pretty nice post. Thank you so much!

Bir Cevap Yazın