C# WPF ile Paint Uygulaması

                

Bu WPF ile üçüncü uygulamamız. Bu uygulamamızda basit bir paint aracı yaparak WPF ile Mouse event larımızı nasıl kontrol ediyor ve kullanıyoruz bunlara bakıcaz.Yapıcağımız uygulamanın bitmiş hali aşağıdaki gibidir.

                Öncelikle yeni bir WPF projesi oluşturalım. Oluşturulan Projemizde ön tanımlı olarak bulunan Grid i siliyoruz ve Window etiketi içerisine Aşağıdaki gibi bir Canvas  ekliyoruz. Canvas ın ismini cnvs , arka plan rengini ise Azure olarak ayarlıyorum. Burada renkten ziyade Canvas a verdiğimiz isim önemlidir. Eğer ki isim vermezsek C# kodu yazarken Canvas a erişemeyiz.

<Canvas Name="cnvs" Background="Azure"> </Canvas>

                Canvas ı ekledikten sonra paint için kullanacağımız eventlara göz atalım. Düşündüğümüzde Mouse un sol butonuna tıkladığımızda ve basılı tutarak hareket ettirdiğimizde imlecin geçtiği noktalara bir doğru çizmesi gerekiyor , bıraktığımızda ise çizim işleminin de sonlanması gerekiyor. Xaml içerisinde  MouseLeftButtonDown , basılı iken hareket ettiriliyorsa MouseMove ve sol butona tıklama işlemi bitmişse MouseLeftButtonUp elementlerini tanımlamalı ve bunlara birer C# event handler fonksiyonları ekleyerek yapmak istediğimizi yapmış oluruz. Öncelikle bu elementleri yukarıdaki Canvas içerisinde yazıyorum , aşağıdaki ise son hali.

<Canvas Name="cnvs" Background="Azure" MouseLeftButtonDown="cnvs_MouseLeftButtonDown_1" MouseMove="cnvs_MouseMove_1" MouseLeftButtonUp="cnvs_MouseLeftButtonUp_1" MouseDown="cnvs_MouseDown_1"> </Canvas>

                Bu Elementlerin karşılığı olan tırnak içerisindeki fonksiyon adlarını program otomatik tamamlayacaktır. Buradakinden farklı isimlerde kullanabiliriz. Şimdi renk seçimi için çeşitli dörtgenler ekleyelim ve Xaml kısmındaki işimiz bitsin. Canvas etiketleri içerisine aşağıdaki gibi sırası ile kodlarımı ekliyorum.

<Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="5" Fill="Red" />

                Rectangle ile dörtgenim oluşturuluyor. Stroke buradaki dörtgenin çerçeve rengini , Canvas.Left soldan ne kadar uzakta bulunduğunu , Canvas.Top ise üst taraftan ne kadar uzakta olduğu belirtiyor. Bu kodu kopyalayıp hemen altına yapıştırıp birkaç yeri değiştirerek en üstteki resim gibi çeşitli renkler elde ediyorum.

<Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="5" Fill="Red" /> <Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="35" Fill="Green" /> <Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="65" Fill="Yellow" /> <Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="95" Fill="White" /> <Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="125" Fill="Blue" /> <Rectangle Stroke="Black" Width="25" Height="25" Canvas.Left="5" Canvas.Top="155" Fill="Black" />

                Xaml kısmı hazır şimdi yaptığımız değişiklikleri kaydedip C# kısmına geçelim.

Öncelikle kullanacağım değişkenleri tanımlıyorum.

Point nokta; bool durum; Brush fırca = Brushes.Black;

                Nokta şuan ki imleç pozisyonunu , durum resim çizilecek mi çizilmeyecek mi , fırça da boyama rengini belirtiyor.

                Mouse sola tıklandığında aşağıdaki gibi durumu true , noktanın yerini belirliyorum ve CaptureMouse() ile imlecin bulunduğu yeri takip ediyorum.

private void cnvs_MouseLeftButtonDown_1(object sender, MouseButtonEventArgs e) {     durum = true;     nokta = e.GetPosition(cnvs);     cnvs.CaptureMouse(); }

                Mouse basılı iken hareket ettirildiğinde (x1,y1) ile (x2,y2) arasında çizgimin çizilmesini aşağıdaki kodlarla sağlıyorum.

private void cnvs_MouseMove_1(object sender, MouseEventArgs e) {      if (durum)      {         Line line = new Line();         line.X1 = nokta.X;         line.Y1 = nokta.Y;         nokta = e.GetPosition(cnvs);         line.X2 = nokta.X;         line.Y2 = nokta.Y;         line.Stroke = fırca;         line.StrokeThickness = 10;         cnvs.Children.Add(line);      } }

                Mouse sola artık tıklanmıyorsa aşağıdaki gibi durumu false yapıyorum ve ReleaseCaptueMouse() fonksiyonu ile imleci takip etmeyi bırakıyorum.

private void cnvs_MouseLeftButtonUp_1(object sender, MouseButtonEventArgs e) {     durum = false;     cnvs.ReleaseMouseCapture(); }

                Dörtgenlerdeki renkleri aktifleştirmek için aşağıdaki gibi kodumu yazıyorum.

private void cnvs_MouseDown_1(object sender, MouseButtonEventArgs e) {     var rect = e.Source as Rectangle;     if(rect != null)     {         fırca = rect.Fill;     }     else     {         durum = true;         nokta = e.GetPosition(cnvs);         cnvs.CaptureMouse();     } }

                Paint aracımız hazır hale geldi. Bir sonraki WPF yazımızda değişik bir uygulamayla devam ederiz. Sizlere kolay gelsin!