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 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]

Delphi ile Generic Clock

Son günlerde Delphi ve GDI+ ile ilgili oldukça mail almaktayım. Aslında uzun zamandır yazmak istediğim bir yazı bu. Yazının konusu Delphi bilen yazılımcı arkadaşları yakından ilgilendiriyor. Başlıktan da anlaşılacağı üzere Delphi ile GDI+ kullanımı hakkında. Geçen sene bir arkadaşımız bana mail göndermişti. Hava Cıva! kodunun karışık olduğunu söylüyodu. Hava Cıva! gibi bir arayüzün daha basit bir şekilde nasıl yapılacağını merak etmiş. Bende üşenmedim ona çok basit bir saat programı yazmıştım. Delphi ile temel GDI+ tekniklerinin nasıl kullanılacağını göstermiştim. İşte konumuz bu işlemin nasıl yapılacağını anlatıyor. Eğer Delphi biliyorsanız çok basit bir şekilde Hava Cıva! gibi bir arayüz tasarlayabileceksiniz. Hemen başlayalım...

Projenin adı Generic Clock. Adından da anlaşılacağı üzere temel bir saat projesi. Uygulama geliştirme ortamı olarak Delphi 7 kullandım. Ayrıca GDI+ kütüphanesi de gerekli bizim için. Gerçi projenin kaynak kodunda GDI+ kütüphanesi mevcut ama yine de orjinal kütüphaneyi indirmek isteyenler için adresi verelim: Delphi için GDI+ Kütüphanesi

1. TASARIM
Doğal olarak ilk önce ekran tasarımını yapmamız gerekiyor. Bunun için projenin ana formunda bazı değişiklikler yapılmalı. Bunlardan en önemlisi ana formun BorderStyle özelliğinin bsNone olarak ayarlanması. Neden mi? Widget (yada Gadget) tarzı arayüze sahip uygulamalarda pencerelerin kenarlı olması pek işimize yaramaz. Hatta işimizi daha da zorlaştırır. Bu uygulamada olduğu gibi zemin için bir resim seçeceğiz ve formumuzun zeminini seçtiğimiz resim ile kaplayacağız. Başlıksız ve kenarlıksız bir pencereye resmi uydurmak çok daha kolay olacaktır. Formun başlık bölümü olmadığına göre doğal olarak Kapat düğmeside olamıyor. Bu sorunu gidermek için formumuza bir Kapat düğmesi eklememiz gerekiyor. Bu düğmeyi ekledikten sonra bir StaticText ve bir de Timer bileşenin ekliyoruz. Son olarak pek önemli olmayan detaylar var. Örneğin ben ana formun Position özelliğini poScreenCenter olarak ayarladım. Ekranın ortasından başlasın diye. Diğer bileşenlerin boyutları ve konumları sizin isteğinize bağlı aslında. Ama örneğe sadık kalırsanız karışıklık olmadan anlayabilirsiniz. Tasarım kısmında hepsi bu. Tasarım için örnek bir resim aşağıda görüntüleniyor.

Delphi ile Generic Clock Tasarımı

2. ALGORITMA
Bu bölümde GDI+ ile Delphi formlarının nasıl ilişkilendirileceğinden bahsedeceğim. İlk öğrenmemiz gereken kısım klasik GDI çizim tekniklerini formumuzda kullanamayacağımızdır. Eğer gölgeli, saydam ve şık bir arayüz istiyorsak GDI tarafından sağlanan araçlar işimizi görmez. En başta GDI' nin renk desteği zayıftır. Oysa GDI+ Alpha channel ile 32-bit renk desteği sağlar. Bu sayede saydam pencereler oluşturabiliriz.
Şimdi aklımızdan kesinlikle çıkarmamız gereken çok önemli bir kısma geldik: LayeredWindows! Katmanlı Pencereler olarak çevireceğiz bu terimi. Windows 2000 ile birlikte gelen bir pencere özelliğidir bu. Widget tarzı programların temelini oluşturur. Eğer formumuza katmalı pencere özelliği eklemezsek boşa uğraşmış oluruz. Peki nasıl yapacağız? O kısım oldukça kolay aslında. Formumuzun FormCreate olayına aşağıdaki kodu ekleyeceğiz.
SetWindowLong(Handle, GWL_EXSTYLE, GetWindowLong(Handle, GWL_EXSTYLE) or WS_EX_LAYERED);Bu kodu ekledikten sonra diğer önemli bir kısımdan bahsetmek gerek. Microsoft MSDN' de belirttiği üzere "eğer pencereniz katmanlı olarak ayarlandıysa WM_PAINT mesajı oluşturulmaz!" MSDN' de bu yazıyı okuduktan sonra ne yapacağımı şaşırmıştım açıkçası. Windows'ta WM_PAINT mesajı oluşmuyorsa Delphi' de OnPaint olayı da oluşmaz! Bu karmaşayı aşmak için yine Windows API' den faydalanmamız gerekecek. Çözüm için UpdateLayeredWindow fonksiyonunu kullanacağız. Bu fonksiyon oldukça karışıktır. Benden söylemesi. Detaylı açıklamayı MSDN' den mutlaka okuyunuz (MSDN: UpdateLayeredWindow). Ben bu fonksiyonun nasıl kullanılacağını kaynak kod içinde gösterdim. UpdateLayeredForm yordamına bakmanız yeterlidir.
procedure TForm1.UpdateLayeredForm;
var
SrcDC, DestDC: HDC;
BitmapHandle, PrevBitmap: HBITMAP;
BlendFunc: _BLENDFUNCTION;
Size: TSize;
P, S: TPoint;
begin
{ Desktop ile uyumlu bir DC olustur. (Yada 0 yerine GetDesktopWindow yazabiliriz) }
SrcDC := CreateCompatibleDC(0);
{ Olusturdugumuz DC ile uyumlu yeni bir DC daha olusturmaliyiz. Kopyalama icin. }
DestDC := CreateCompatibleDC(SrcDC);
{ Cizim yaptigimiz resmin Windows tarafidan anlasilan HBITMAP turunden degiskene ata. }
{ Bu kisim onemli. Cizim yaptigimiz resmi gercek dunyaya getiriyoruz. }
{ BitmapHandle degiskeni artik Windows tarafindan kullanilanilabilir duruma geldi. }
FBitmap.GetHBITMAP(0, BitmapHandle); { 0 = Background transparent, out BitmapHandle }
{ SrcDC de bitmap secilmeli }
PrevBitmap := SelectObject(SrcDC, BitmapHandle);
{ Boyutlar ve konum }
Size.cx := Width;
Size.cy := Height;
P := Point(Left, Top);
S := Point(0, 0);
with BlendFunc do
begin
BlendOp := AC_SRC_OVER;
BlendFlags := 0; { Sifir olmali }
SourceConstantAlpha := FOpacity; { Ana formun donukluk degeri. 0 = tam saydam, 255 = tam donuk. }
AlphaFormat := AC_SRC_ALPHA;
end;
{ Microsoft'un sihirli fonksiyonu! Oylesine onemli ki, aslinda butun kiyamet burada kopuyor. }
{ Detayli aciklamayi MSDN' den mutlaka okuyunuz. http://msdn.microsoft.com/en-us/library/ms633556(VS.85).aspx }
UpdateLayeredWindow(Handle, DestDC, @P, @Size, SrcDC, @S, 0, @BlendFunc, ULW_ALPHA);
{ SrcDC yi eski haline getir. }
SelectObject(SrcDC, PrevBitmap);
{ ve Bitmap'i yok et. Yoksa hafiza sizmasi olur. }
DeleteObject(BitmapHandle);
{ DC leri yok et. }
DeleteDC(DestDC);
DeleteDC(SrcDC);
end;Karmaşa hala devam ediyor... Madem windows bizim için WM_PAINT olayını oluşturmuyor o zaman bizim elle bu olayı tetiklememiz gerekiyor! Kendinizi resim yapıyor gibi düşünün. Önce zemini çizeceğiz sonra diğer bileşenleri vs. Böylelikle oluşan resmi formumuzda göstereceğiz. Mantık basit: Resmi çiz (RepaintForm) ve ekranda güncelle (UpdateLayeredForm).
Örneğin bu projede saati saniye saniye ekranda göstermemiz gerekiyor. Bu durumda her saniye form alanını güncellemeliyiz. Bunun için Timer bileşeninden faydalanacağız.
procedure TForm1.Timer1Timer(Sender: TObject);
begin
{ Her saniye form alanini yeniden cizmek zorundayiz. }
RepaintForm;
{ Ayrica cizdigimiz form alanini guncellemeliyiz. }
UpdateLayeredForm;
end;

Bu proje hakkında yazacaklarım şimdilik bu kadar. Widget tarzı programlarda can alıcı noktaları açıklamaya çalıştım. Projenin kaynak kodunu aşağıdaki linkten indirebilirsiniz.

generic-clock-source.rar [290 KB]