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 Analog Clock

Delphi ile Generic Clock örneği işinizi görmüştür umarım. Generic Clock projesinde yapacağımız küçük bir değişiklikle yeni projeler üretebiliriz aslında. Bilgisayar kullanıcılarının en çok tercih ettiği masaüstü araçlarından biri olan "Analog Clock" bu yazmının konusunu oluşturuyor. Siz Delphi kullanıcıları için elimden geldiği kadar sadeleştirmeye çalıştım. Başlayalım...

1. TASARIM

Delphi ile Analog Clock Tasarımı

Form tasarımı aşamasında dikkat edilmesi gereken birkaç ufak tefek ayrıntı var. Önceki örneklerde açıkladığım gibi öncelikle ana formun BorderStyle özelliğini bsNone olarak ayarlamalıyız. Diğer önemli kısım ise Sağ Tuş Menüsü eklemek. Programda görselliği bozmamak için "Kapat" düğmesi kullanmadım. Bu yüzden farenin sağ tuşuna bastığımızda içerik menüsüne ihtiyaç duyacağız. Burada programdan çıkış işlemini "Kapat Menüsü" yardımıyla yapacağız. Tasarım aşamasını şöyle özetliyebiliriz:

• Ama formun Client boyutları saat resminin boyutları ile aynı olacak (ClientWidth = 130, ClientHeight = 130)
• BorderStyle özelliği bsNone olarak ayarlanacak
• Ana forma Timer ve PopupMenu bileşenleri eklenecek

Tasarım kısmı bu kadar. Yukarıdaki ekran alıntısında örnek bir görüntü mevcut. Gelelim algoritma kısmına...

2. ALGORITMA

Algoritma kısmında temel çizim işlemlerinden bahsetmeyeceğim. Bu konulara daha önceki örnekte değinmiştim. Fakat açıklanması gereken önemli bir kısım var:  Akrep, yelkovan ve saniye gibi saati oluşturan parçaların çizilmesi... Temel olarak bu parçalar belli bir eksen etrafında belirli açılarla dönerler. Bu açılar saatin kaç olduğuna göre değişmektedir. Örnegin Akrep çizimi için saatin 03:00:00 olduğu durumda 45 derecelik açı ile çizilmesi gerekmektedir. Bu hesaplamalar basit matematik işlemlerinden başkası değildir. Bu projede açı hesaplamalarını PaintElements prosedürü içine yerleştirdim. Aşağıdaki kod parçasını incelemekte fayda var sanırım.

procedure TForm1.PaintElements;
var
Hour, Minute, Second, MSec: Word;
State: GraphicsState;
Dx, Dy, Ox, Oy: Single;
AngleS, AngleM, AngleH: Single;
begin
{ Acilari su anki saate gore hesapla. }
DecodeTime(SysUtils.Now, Hour, Minute, Second, MSec);
AngleS := Second * 6;
AngleM := Minute * 6 + AngleS / 60;
AngleH := Hour * 30 + AngleM / 12;
{ Orta noktayi ekran genisligine gore bul. }
Dx := Self.Width / 2 - 1;
Dy := Self.Height / 2 - 1;
Ox := -6; // -13 div 2
Oy := -64; // -129 div 2
with FGraphics do
begin
{ Cizim alaninin durmunu sakla. }
State := Save();
{ Baslangic cizim noktasini formun ortasina konumlandir. }
TranslateTransform(Dx, Dy);
{ Saat parcasini ciz }
RotateTransform(AngleH);
DrawImage(FHour, Ox, Oy, 13, 129);
RotateTransform(-AngleH);
{ Dakika parcasini ciz }
RotateTransform(AngleM);
DrawImage(FMinute, Ox, Oy, 13, 129);
RotateTransform(-AngleM);
{ Saniye parcasini ciz }
RotateTransform(AngleS);
DrawImage(FSecond, Ox, Oy, 13, 129);
RotateTransform(-AngleS);
{ Nokta parcasini ciz }
DrawImage(FDot, Ox, Oy, 13, 129);
{ Cizim alaninin durumunu eski haline getir. }
Restore(State);
end;
end;

GDI+ ile belirli bir açıda resim çizme işlemi biraz karışıktır. Dikkat edilmesi gereken en önemli kısım çizim alanımızın başlangıç kooardinatlarının ayarlanması. Varsayılan olarak başlangış koordinatları (0, 0) sol üst köşe olarak seçilmiştir. Buradaki örnekte Dx, Dy değişkenleri formun orta noktasına işaret ediyor. GDI+ ile başlangış koordinatlarını değiştirmek için TranslateTransform fonksiyonunu kullanmamız gerekiyor. Başlangıç koordinatlarını (0, 0) noktasından (Dx, Dy) noktasına taşıyoruz. Açıklanması gereken önemli bir kısım ise resimlerin çizilirken başlangıç noktasına göre yeni koordinatlarının hesaplanması işlemi. Örneğimizde Ox ve Oy değişkenlerini bunun için kullanancağız. Akrep ve yelkovan resimlerimizin boyutları 13x129 piksel olduğundan bu resimlerin orta noktası tam sayı olarak (6,64) olacaktır. Fakat Transform işleminden dolayı resmin orta noktası (-6, -64) olacaktır. Açı hesaplamaları kaynak kod içinden anlaşılabilir durumda. Bu bölüme değinmeğe gerek yok sanırım. Eğer Transform ve Rotate işlemleri sırasında sorun yaşarsanız bana mail atabilirsiniz. Şimdilik bu proje hakkında söyleyeceklerim bu kadar. Analog Clock projesinin kaynak kodunu aşağıdaki linkten indirebilirsiniz.

analog-clock-source.rar [366 KB]