WPF ve C# ile Analog Saat

Maalesef yine bir analog saat yapacağım. Umarım sıkılmazsınız. Bu kez analog saat yapımı için başka bir araç kullananacağım. Microsoft Visual Studio kullanan arkadaşların yabancılık çekmeyeceği bir araç bu: Windows Presentation Foundation yada kısa adıyla WPF. Geçenlerde aldığım bir e-mail üzerine bu yazıyı yazma ihtiyacı duydum. Tartışmanın konusu kısaca şöyle: Basit bir saat yapmak için neden bu kadar kod yazmak zorundayız? WPF kullanarak yapamaz mıyız? Cevap basit: Elbette yapabiliriz! Hemde yok denecek kadar az kod yazarak! Önceki Analog Saat örneklerimde Windows' un klasik pencerelerini kullanarak Widget tarzı programların nasıl oluşturulduğunu göstemeye çalıştım. Geçmiş örneklerdeki en önemli kısım pencerenin katmanlı yapıya geçirilmesiydi. Bu işlem için UpdateLayeredWindow prosedürünü kullandığımızı hatırlayalım. Zorunlu olarak Windows API' den faydalandık. Üstelik ekrandaki her değişiklik için tüm kontrolleri yeniden çizmemiz gerekiyordu. Oldukça zahmetli değil mi? Herkes gibi ben de bu işlemleri otomatikleştirmek için araçlar aradım ve WPF ile tanıştım. Bildiğiniz üzere WPF çok gelişmiş çizim teknikleri içerir. Üstelik doğrudan GPU kullanabilme özelliği de vardır. Microsoft' un beğendiğim yazılım geliştirme ortamlarından biridir açıkçası. Üstelik katmanlı pencere desteği vardır ve tek tuşla aktif hale getirilebilir. Dakikalar içinde masaüstü araçları oluşturabilirsiniz. Yapalım o zaman...

1. TASARIM
Bu projeyi Microsoft Visual Studio 2010 ile .NET 4.0 kullanarak geliştirdim. Tasarım aşamasında dikkat edilmesi gereken bazı noktalar var. C# ile yeni bir WPF Application seçtiğinizde varsayılan olarak çalışma pencereniz katmalı olarak ayarlanmaz. Runtime esnasında klasik bir Windows penceresi ekrana gelir. Oysa biz kenarlık ve başlık satırı istemiyoruz. Saat tasarımı için gerekli resimleri ekrana yerleştirdikten sonra ana pencerenin Properties bölümünden şu özelliklerin ayarlaması gerekir:

• İlk önce WindowStyle özelliği None,
• AllowsTransparency özelliği True,
• Son olarak Background özelliği Transparent olacak. Null Brush seçerseniz de aynı sonucu elde edersiniz.

Eğer Properties penceresinden ayarlamak istemezseniz bu özellikleri WPF mimarisinin temel yapısı olan XAML dosyasından da değiştirebilirsiniz. Bilindiği üzere XAML dosyası basit bir XML yapısından oluşur. Aslında Visual Studio ortamı sizin için XAML dosyası oluşturak gereken özellikleri Attributes kısmına yazar. Bazen elle düzenleme yapmak daha hızlı olabilir. Yukarıdaki işlemlerden sonra pencereniz katmanlı duruma geçer ve Widget tarzı çok şık bir görünüm elde edersiniz.

2. KOD
Gelelim kod kısmına. Yazdığım kod o kadar kısa ki biz buna kod yazdık bile diyemeyiz. Neredeyse Twitter' da bile daha fazla yazı yazıyoruz... C# ile yazılan Kaynak kodun tamamı 69 satırdan ibaret. Üstelik geniş geniş yazdım ki okunabilir olsun. MainWindow.xaml.cs dosya adına sahip kaynak kodun tamamı aşağıdadır. Kod az olunca tamamını yayınlamakta bir sakınca görmedim...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace AnalogSaatWPF
{
    ///

    /// Interaction logic for MainWindow.xaml
    /// 

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            DragMove();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DispatcherTimer clockTimer = new DispatcherTimer();
            clockTimer.Tick += new EventHandler(clockTimer_Tick);
            clockTimer.Interval = new TimeSpan(0, 0, 1);
            clockTimer.Start();
        }

        private void clockTimer_Tick(object sender, EventArgs e)
        {

            // Acilari su anki saate gore hesapla.
            DateTime now = DateTime.Now;

            int hours = now.Hour;
            if (hours > 12) hours = hours - 12;
            int minutes = now.Minute;
            int seconds = now.Second;

            double hourAngle = (hours * 30) + (minutes / 2);
            double minuteAngle = (minutes * 6) + (seconds / 10);
            double secondAngle = seconds * 6;

            hourImage.RenderTransform = new RotateTransform(hourAngle);
            minuteImage.RenderTransform = new RotateTransform(minuteAngle);
            secondImage.RenderTransform = new RotateTransform(secondAngle);

        }

        private void exitMenuItem_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

    }
}

Kaynak koda göz atmanız bittiyse bazı püf noktaları verebiliriz artık. WPF ile yazılım geliştiren arkadaşlarımız Toolbox bölümünde Timer bileşeninin olmadığını bilirler. Saat programı yapıyorsak bizim kesinlikle bir zamanlayıcıya ihtiyacımız var. Maalesef bu işlemi kod yazarak halletmek zorundayız. Neyseki WPF bize bu desteği sağlıyor. Ana penceremizin Loaded olayına küçük bir kod yazdım. Yukarıdaki kod parçasında 35-41 arası satırlara tekrar göz atmanızı öneririm. Ekrandaki saat parçalarının belli bir eksen etrafında dönmesi sağlamak için Image sınıfının RenderTransform özelliğini değiştirmek yeterlidir. Örneğimizde RotateTransform sınıfını kullandım doğal olarak.

WPF ve C# ile analog saat projesi hakkında söyleyeceklerim şimdilik bu kadar. Aşağıdaki bağlantılardan projenin kaynak kodu ve çalıştırılabilir demosunu indirebilirsiniz...

	Microsoft Visual Studio 2010 Framework .NET 4.0 Kaynak Kod İndir [72 KB] Demo İndir [38 KB]
	Microsoft Visual Studio 2008 Framework .NET 3.5 Kaynak Kod İndir [71 KB] Demo İndir [38 KB]

C# ile Hava Durumu Programı

C# ile örnek programlarımıza devam ediyoruz. Bu kez bir Hava Durumu programı tasarladım. Aslında amacım hava durumu takip programı yapmaktan öte birkaç teknik göstermek. Öncelikle göstermek istediğim şey resimlerin C# ve GDI+ ile nasıl renklendirileceği. Ayrıca Kış Uykusu konusunda çok mail aldım. Bende C# ile kış uykusu denilen şeyin nasıl yapılacağını göstermeye çalıştım. Başlıyoruz...

1. TASARIM

C# ile Hava Durumu Programı Tasarım Aşaması

Son derece çirkin bir ekran görüntüsü değil mi? Tasarım aşamasında seçtiğim renklere takılmayın. Sadece ana form üzerinde çok fazla kontrol vardı ve ayırt etmek güç olduğundan farklı farklı renklerle boyadım. Hepsi bu. Programın çalışma zamanındaki ekran görüntüsü çok şık olacak inanın. Tasarım aşamasında önceki yazılarımda belirttiğim gibi ana formun FormBorderStyle özelliğini None olarak ayarlıyoruz. Form üzerindeki resimler için Picturebox ve yazılar için Label bileşenlerini kullanacağız. Siz, konumlar üzerinde değişikilik yaparak farklı ekran tasarımları elde edebilirsiniz. Denemenizde fayda var. Bu arada tasarım kısmında form üzerindeki birçok kontrol disable durumdadır. Bunun sebebi çalışma sırasındaki sürükleme işleminde kolaylık sağlaması. Sürükleme işlemini ana formun MouseMove olayına bağlamak en kolay yoldu benim için. Gelelim kod kısmına...

2. KOD

Diğer örneklere nazaran biraz daha fazla kod yazdım. Özellikle Renklendirme ve Kış Uykusu için gerekliydi. Ama gözünüz korkmasın oldukça kolaydır. Hava durumu bilgilerini MSN Weather Service' ten alıyoruz. Kaynak kod içinde gerekli URL adresleri mevcut. GetWeatherData() isimli prosedür gerekli internet bağlantısını sağlıyor. Bildiğiniz gibi bu tip bağlantılar için WebClient sınıfınından bir nesne kullanmak en kolay yoldur. Diğer projelerden farklı olarak WebClient ile oluşturduğumuz bağlantıyı asenkron (Async) yapacağız ki bağlantı sırasında diğer ekran işlemleri kesintiye uğramasın. Bağlantıyı sağlayan GetWaetherData() prosedürü aşağıdaki şekildedir. Detaylar kaynak kod içinde mevcut.

private void GetWeatherData()
{
	locationLabel.Text = Properties.Resources.Connecting;

	RepaintLayeredForm();
	UpdateLayeredForm();

	string requestURL = String.Format(dataFormat, locationCode, degreeType, culture);
	WebClient webclient = new WebClient();
	webclient.Encoding = Encoding.UTF8;
	webclient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(OnDownloadStringCompleted);
	webclient.DownloadStringAsync(new Uri(requestURL));
}

Bu yazıda İnternet bağlantısı ve veri çekme işlemlerinden bahsetmeyeceğim. Bizi asıl ilgilendiren konulara giriş yapalım. Yukarıda belirttiğim gibi Renklendirme ve Kış Uykusu temel hedefimiz.

RENKLENDİRME
GDI+ renklendirme işlemi için bir matris kullanır. Bu matris 5x5 şekilinde kare bir matristir. Sadece köşegenleri 1 olan ve diğer elemanları 0 olan bir matristir bu. C# içinde ColorMatrix adıyla tanımlanmıştır. Temel renklendirme matrisi C# için şu şekildedir:

ColorMatrix matrix = new ColorMatrix(new float[][]
{
	new float[]{ 1f, 0f, 0f, 0f, 0f },
	new float[]{ 0f, 1f, 0f, 0f, 0f },
	new float[]{ 0f, 0f, 1f, 0f, 0f },
	new float[]{ 0f, 0f, 0f, 1f, 0f },
	new float[]{ 0f, 0f, 0f, 0f, 1f }
});

Benim geliştirdiğim tüm projelerde bu matris kullanılmıştır. Fakat işin sırrı matriste değil kullandığım resimlerde gizlidir. Resimlerimin tamamı gri tonlarından oluşmuştur. Ancak bu tip bir resimde renklendirme istenilen sonucu verir. Hava durumu projesinde ekrandaki resimleri herhangi bir renge çevirmek istediğinizde matris içindeki ilk üç köşegeni değiştirmek yeterlidir. Kodu şu şekilde yazabiliriz:

matrix.Matrix00 = (float)color.R / (float)255;
matrix.Matrix11 = (float)color.G / (float)255;
matrix.Matrix22 = (float)color.B / (float)255;

Burada dikkat edilirse renk değerleri 255' e bölünmüştür. GDI+ renkler için normalize edilmiş değerler kullanır. Sebebi tamamen bu. Kaynak kod içinde DrawColorizedPicture adında bir prosedür mevcut. Burada PictureBox türünden bir nesne istenilen bir renkte çizilebiliyor.

private void DrawColorizedPicture(PictureBox picture, Color color)
{
	ColorMatrix matrix = new ColorMatrix(new float[][]
	{
		new float[]{ 1f, 0f, 0f, 0f, 0f },
		new float[]{ 0f, 1f, 0f, 0f, 0f },
		new float[]{ 0f, 0f, 1f, 0f, 0f },
		new float[]{ 0f, 0f, 0f, 1f, 0f },
		new float[]{ 0f, 0f, 0f, 0f, 1f }
	});
	matrix.Matrix00 = (float)color.R / (float)255;
	matrix.Matrix11 = (float)color.G / (float)255;
	matrix.Matrix22 = (float)color.B / (float)255;
	using (ImageAttributes attr = new ImageAttributes())
	{
		attr.SetColorMatrix(matrix);
		graphics.DrawImage(picture.Image, picture.Bounds, 0f, 0f, picture.Image.Width, picture.Image.Height, GraphicsUnit.Pixel, attr);
	}
}

KIŞ UYKUSU
Bu ifade tamamen benim uydurduğum bir şeydir. Programlama dünyasında Prevent Dragging (Sürükleme önlemi yada engeli) olarak bilinir. Bir de saydamlık ekledim. Daha şık olur diye düşündüm. Bu işlemi yapmak için penceremize WS_EX_TRANSPARENT özelliği eklememiz gerekiyor. Bu özellik pencerenizin fare ile yapılacak tüm olaylara geçirgen davranmasını sağlar. En basit olarak fare ile pencerenin hiçbir yerine tıklatamazsınız. C# ile bir pencereyi kış uykusu moduna geçirmek ve kış uykusundan çıkmasını sağlamak için şu kodları kullanabiliriz:

private void DoHibernate()
{
	long style = Win32.GetWindowLong(this.Handle, Win32.GWL_EXSTYLE).ToInt32();
	if ((style & Win32.WS_EX_TRANSPARENT) == 0)
	{
		style |= Win32.WS_EX_TRANSPARENT;
		Win32.SetWindowLong(this.Handle, Win32.GWL_EXSTYLE, (IntPtr)style);
		opacity = 0x80;
	}
}

Uyandırma işlemi için gereken kod:

private void DoWakeup()
{
	long style = Win32.GetWindowLong(this.Handle, Win32.GWL_EXSTYLE).ToInt32();
	if ((style & Win32.WS_EX_TRANSPARENT) != 0)
	{
		style &= ~Win32.WS_EX_TRANSPARENT;
		Win32.SetWindowLong(this.Handle, Win32.GWL_EXSTYLE, (IntPtr)style);
		opacity = 0xff;
	}
}

Kış uykusuna geçmiş bir pencereyi uyandırmak için yukarıdaki kodu nasıl kullanacağız? Bu işlem biraz daha kod gerektiriyor: Madem ki fare ile tıklatamıyorum o zaman klavyedeki tuşları takip ederim bende... Basit bir Timer bileşeni ile tuşları takip edebilirim aslında. Benim kullandığım teknik şu: Kış uykusuna geçtikten sonra ekranda farenin koordinatlarına bakıyorum ve klavyeden CTRL tuşuna basılıp basılmadığını kontrol ediyorum. Bu iki durum oluşmuşsa pencerenin uyanmasını istiyorum. Tabi bu işlemleri bir Timer' in OnTick olayı içinde yapmanız gerekiyor. Klavyeden CTRL tuşunu ve ekrandaki farenin pencere üzerinde olup olmadığını şu şekilde kontrol edebiliriz:

private void keyTimer_Tick(object sender, EventArgs e)
{
	Win32.Rect rect = new Win32.Rect();
	Win32.GetWindowRect(this.Handle, ref rect);
	Win32.Point p = new Win32.Point();
	Win32.GetCursorPos(ref p);
	if (Win32.PtInRect(ref rect, p))
	{
		short keyState = Win32.GetKeyState(Win32.VK_CONTROL);
		if ((keyState & 0x8000) != 0)
		{
			hibernate = false;
			SetHibernateState(hibernate);
		}
	}
}

Evet. Kabaca anlatmaya çalıştım. Eğer kaynak kodu indirip incelerseniz çok daha kolay anlayacağınızı umuyorum. C# ile Hava Durumu programının kaynak kodunu aşağıdaki linkten indirebilirsiniz.

havadurumu-csharp-source.rar [1.85 MB]

C# ile Dijital Saat (Digital Clock)

Analog Saat ve Döviz.NET projelerinden sonra bir Dijital Saat yapmak geldi içimden. Aslında bu işin ne kadar kolay olduğunu göstermekti amacım. Basit bir form tasarlıyorsunuz ve ona uygun resimler ile süslüyorsunuz. Gerisi zaten kaynak kod ile geldiğinden size sadece kodları projenize eklemek kalıyor. Hepsi bu. Dijital saat yapımında Yahoo! Widgets kütüphanesinde bulunan Digital Clock çalışmasını örnek aldım. Yani resimlerin tamamı bu projeden. Elbette birebir aynı değil. Bazı özellikeri devre dışı bırakmak zorunda kaldım. Malum amacımız temel bazı şeyleri öğretmek olduğundan oldukça sade bir proje yapmalıyız. Bu projeye Tema özelliği de ekledim. Eğer ana pencere üzerinde farenin sağ tuşuna basarsanız içerik menüsü görüntülenecektir. Ekrandaki Temalar menüsünden 4 farklı temadan birini seçebilirsiniz. Çalışma esnasında seçtiğiniz tema hemen uygulanactır. Daha fazla söze gerek yok sanırım. İndirin ve tecrübelerinizi bizimle paylaşın. Kolay gelsin...

digital-clock-csharp-source.rar [641 KB]