WPF

WPF’e Giriş – İlk Makalem

Merhabalar. Bu benim Tekno Date’ de ilk makalem. Bu makalemde WPF’e giriş yapacağım.Artık vakit, Windows Form dan uzaklaşma vakti diyerek ilk adımı atalım.

1. WPF’e Giriş

WPF in tam olarak açılımı, Windows Presentation Foundation’dır. Bir Web projesinde, arayüz tasarımcısı yani grafik kodlama, Web ön yüz tasarımı yapan kişiler ve bir de code behind tarafında çalışan geliştiriciler yer almaktadır yani bir ayrım söz konusudur. Fakat Windows form uygulamalarında bu ayrım yoktu WPF çıkana kadar. Eski yapılan uygulamalara bakarsanız (Örneğin; bir mağazada, kasada kullanılan bilgisayarda bulunan muhasebe programları vb.) her şey standart gri Windows formlar, standart köşeli butonlar tarzında tasarlanmıştır.

WPF, masaüstü uygulamalara da bu yönde yeni bir tarz kazandırmıştır. Artık Web uygulamaları kadar güzel Windows Forms uygulamaları yapabileceksiniz. Visual Studio 2010’a, Office 2010’a baktığınızda WPF yeteneklerini görebilmektesiniz. Ne kadar göze hitap ediyor, değil mi? Tasarımcı arkadaşları heyecanlandırdı mı acaba?

Yani kısaca, size WPF sayesinde uygulama geliştirme aşamasında,  tasarım ve kodlamanın birbirinden bağımsız olduğunu anlatmaya çalıştım. Tasarımcı yeteneklerini konuştururken geliştirici de hünerlerini gösterebilir ve bu iki durum oluştuğunda da günümüz uygulamalarından çok daha iyileri çıkabilir.

Şimdi WPF’e tam olarak giriş yapabiliriz.Öncelikle Visual Studio’yu açıyoruz. Daha sonra New Project ya da menüden File > New Project seçiyoruz.

Ekranımıza gelen diyalog kutusundan Visual C# > WPF Application’ı seçip, OK diyerek projemizi oluşturuyoruz.(Resim 1)

WPF New Project WPF Application

Resim 1

Projemiz oluştu şimdi biraz inceleyelim.(Resim 2)

WPF Application

Resim 2

Penceremiz(window)  görüldüğü gibi beyaz kısımdır.Bu kısım design kısmıdır.Şuanda hem design kısmını hem de XAML kısmını görebiliyoruz. WPF in farkı burda ortaya çıkıyor. Windows Form da sadece Properties penceresinden düzenleyebildiğimiz form nesenelerinin özelliklerini, WPF de ise XAML ve Properties penceresinden düzenleyebiliyoruz. Şuanda çalışma alanında bulunan penceremizin içinde gördüğünüz beyaz kısım Grid(klavuz) nesnesidir. WPF projemi oluşturduğumuzda bize direk olarak penceremizin içine atılan bir nesne. Resim 2 ‘nin alt tarafına doğru bakarsanız eğer <Window> etkiketi içerisinde title kısmında  penceremizin üst kısmında bulunan ve pencerenin isminin yazıldığı bölümdür. Height boy olarak uzunluğu pixel cinsinden yazılır.Width ise en olarak uzunluğu yine pixel cinsinden yazılır. Hem title kısmında hem de height ve width kısmında istenilen şekilde değişiklik yapılabilir. WPF in farkı burda tekrar ortaya çıkıyor.

XAML kısmında görüldüğü gibi window etiketi içerisinde grid etiketi bulunmaktadır. Bir kaç cümle önce bahsettiğim gibi penceremizin içine otomatik olarak gelen grid nesnesinin XAML kısmı burasıdır.Penceremizin içine ekleyeceğiniz herhangi bir form nesnesi design kısmında  grid nesnesinin üzerine ve grid etiketleri arasına XAML kodlaması gelecektir.

2.Form Nesnesi Ekleme

Programlamaya girerken öncelikle bir form nesnesi üzerinden işlem yapmamız doğru olacaktır.İlk olarak Toolbox penceremizden (Eğer açık değilse 1-Wiew menüsünden  2-Ctrl+Alt+X ile  Açabilirsiniz. )

WPF Toolbox

Resim 3

Açılan toolbox penceresinden Button nesnesine çift tıklarsanız sabit boyutlarda pencerenize ekler eğer eklerken boyutlandırmak istiyorsanız

1.Form nesnesine bir kere tıklayın.

2.Pencerinizin üzerinde bir kere daha tıklayıp boyutlandırabilirsiniz.

Toolboxtan eklediğiniz bir form nesnesi design kısmında görsel olarak görebildiğiniz gibi XAML tarafında da kodlama olarak görebilir ve değişiklik yapabilirsiniz.

WPF Form Nesnesi Buton

Resim 4

Pencereme bir adet buton ekledim ve bu buton grid etkiletleri içerisine geldi. Design kısmından butonu görebilirsiniz. Windows Form dan artık daha da uzaklaşıyoruz. Çünkü nesnelerimizin içerisine yazı yazmak istediğimizde properties penceremizden “Text” özelliğini değiştiriyorduk. WPF de bu “Content” olarak değişiyor. Örnekte, butonun içerisine yazılan yazının “Button” olduğunu görebiliyoruz.

3.Kodlamaya Giriş

Bu kısımda ise eklediğimiz butonun tıklama(click) olayında(event) işlem yaptıracağız. En basit olarak mesaj kutumuza tıklandığı anda yazı yazdıracağız. Görelim.

XAML kısmında butonumun özelliklerini

<Button x:Name=”btnGoster” Content=”Tıkla” HorizontalAlignment=”Left” VerticalAlignment=”Top” Width=”75″/> olarak değiştiriyorum.

Bir diğer yöntem ise design tarafında butonunuza tıklayarak properties pencerenizden (Eğer açık değilse  1-Wiew menüsünden  2-F4 ile Açabilirsiniz.) Name kısmına “btnGoster” ve Content kısmına “Tıkla” yazınız.

WPF Button Properties

Resim 5

Şimdi ise butonumuzun tıklandığında yapılacak işlemleri yazacağımız yeri görelim öncelikle

 WPF Properties Button

Resim 6

Resim 6 da gördüğünüz gibi ayarlar simgesinin yanındaki olaylar simgesine tıklayıp click olayının yanındaki kısma çift tıklıyoruz.

WPF KOD .CS

Resim 7

 “Name”_”Olay”  >  btnGoster_Click.

Click olayımızın içine şimdi bir işlem yaptıracağız yani butonumuza basıldığı anda bir işlem yapacak. Örnek olarak message box kullanabiliriz.

WPF KOD .CS Messagebox

Resim 8

Kod : MessageBox.Show("Tıklandı");

Projemizi kaydedelim ve başlatalım. (Ctrl+S yaparak kaydedin ardından F5 ile projeyi başlatın)

Sonuç :

WPF START F5 CLICK

Bu makalemizde WPF ile Windows Form’u karşılaştırdık ve giriş yaptık.Bir sonraki makalemde matematiksel işlemler yapılan bir proje yapmayı planlıyorum.Makalemin sonuna geldik.Bir sonraki makalemde görüşmek dileğiyle.

download-indir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir