.NET Micro Framework: WPF (Window) Uygulaması Geliştirmek
Micro Framework, gelişmiş grafik uygulamalarında WPF kullanımına
olanak sağlar. Masaüstü uygulamalarından farklı olarak XAML dosyası ile değil,
uygulama kodları içerisinde tanımlamalar yapılır. Kullanılan metodlar büyük
ölçüde .NET Framework sürümüyle paralellik gösterir. Örneğimizde temel bir WPF
uygulaması oluşturup yazı, şekil ve resim ekleme konularına değineceğiz.
Adım 1: Proje Oluşturmak
Visual Studio üzerinde yeni bir Micro Framework Window
Application oluşturarak işe koyulalım. Console uygulamalarından farklı olarak
Window uygulamalarında Microsoft.SPOT.Graphics.dll kütüphanesinin referanslar
arasına eklendiğini göreceksiniz. Aynı zamanda GPIOButtonInputProvider sınıfı da
buton girişlerini yönetmek amacıyla proje dosyalarının arasına önceden eklenmiş olacak.
Yeni oluşturulmuş bir projede Program.cs dosyasını
incelediğimizde LCD üzerine "Hello World!" yazan uygulama kodlarıyla
karşılaşacaksınız. Kodlarda hiçbir değişiklik yapmadan F5 ile uygulamayı
çalıştırdığınızda Hello World! yazısı ekranda görünecektir.
Bir Micro Framework Window uygulaması oluşturduğunuzda
Program.cs dosyasına önceden eklenmiş namespace'leri inceleyelim:
using System; // Temel sınıfları, value ve referance veri tiplerini, event'leri ve handler'ları içerir.
using Microsoft.SPOT; // Micro Framework sınıf, delege ve enum'larını içerir.
using Microsoft.SPOT.Input; // WPF Giriş sistemini destekleyen sınıf, delege ve enum'ları içerir.
using Microsoft.SPOT.Presentation; // Grafiksel kullanıcı arabirimini (GUI) oluşturan sınıfları içerir.
using Microsoft.SPOT.Presentation.Controls; // Kullanıcının uygulamaya müdahalesini sağlar.
Şimdi Program.cs dosyasının içeriğini temizleyerek nasıl Window uygulaması
oluşturulacağını görelim:
Adım 2:
Pencere ve Panel Eklemek
Micro Framework WPF uygulamalarındaki hiyerarşik yapı, Pencere > Panel >
Elementler şeklinde gider. Yani uygulama oluşturulduktan sonra önce bir Window
oluşturulur. Bu Window içerisine Panel'ler eklenir ve her bir panelin istenilen
konumuna Child Element'ler (Yazı, resim, dörtgen...) yerleştirilir.
Şimdi ekran boyutlarında bir Window oluşturarak buna panel ekleyeceğiz. Panelin
sol üst noktasına merhaba yazdıracağız.
Program.cs
using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Input;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
namespace MFWPFUygulamasi
{
public class Program : Microsoft.SPOT.Application
{
public static void Main()
{
Program myApplication = new Program();
Window mainWindow = myApplication.CreateWindow();
myApplication.Run(mainWindow);
}
private Window mainWindow;
public Window CreateWindow()
{
// Ekran çözünürlüğünde bir Window objesi oluşturalım:
mainWindow = new Window();
mainWindow.Height = SystemMetrics.ScreenHeight;
mainWindow.Width = SystemMetrics.ScreenWidth;
// Ekran nesnelerini tutacak bir panel oluşturalım:
Panel panel1 = new Panel();
// Small yazı tipiyle Merhaba yazdıralım:
Text text1 = new Text(Resources.GetFont(Resources.FontResources.small), "Merhaba");
// Yazdığımız yazıyı panelin alt elemanı olarak ekleyelim:
panel1.Children.Add(text1);
// Paneli Main Window'un alt elemanı olarak ekleyelim:
mainWindow.Child = panel1;
// Pencereyi görünür yapalım:
mainWindow.Visibility = Visibility.Visible;
return mainWindow;
}
}
}
Uygulamayı çalıştırdığınızda Merhaba yazısını göreceksiniz.
Geliştirdiğimiz bu uygulama, tek obje içeren en basit Window uygulamasıdır.
Adım 3: Yazı Objesini Modifiye Etmek
Eklediğimiz yazının özelliklerini değiştirmeyi inceleyelim.
Yatay ve dikey düzlemde yazıyı ortalayıp rengini değiştireceğiz. Daha sonra yazı
metnine ekleme yapmayı göreceğiz. Kod eklemelerini yaptığınızda aşağıdaki gibi
bir sonuç oluşacaktır.
Program.cs:
using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Input;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
namespace MFWPFUygulamasi
{
public class Program : Microsoft.SPOT.Application
{
public static void Main()
{
Program myApplication = new Program();
Window mainWindow = myApplication.CreateWindow();
myApplication.Run(mainWindow);
}
private Window mainWindow;
public Window CreateWindow()
{
// Ekran çözünürlüğünde bir Window objesi oluşturalım:
mainWindow = new Window();
mainWindow.Height = SystemMetrics.ScreenHeight;
mainWindow.Width = SystemMetrics.ScreenWidth;
// Ekran nesnelerini tutacak bir panel oluşturalım:
Panel panel1 = new Panel();
// Small yazı tipiyle Merhaba yazdıralım:
Text text1 = new Text(Resources.GetFont(Resources.FontResources.small), "Merhaba");
// Yazının özelliklerini değiştirelim:
text1.VerticalAlignment = VerticalAlignment.Center; // Dikey hizzalama
text1.HorizontalAlignment = HorizontalAlignment.Center; // Yatay hizzalama
text1.ForeColor = ColorUtility.ColorFromRGB(255, 0, 0); // Yazı rengi (Kırmızı)
text1.TextWrap = false; // Satır kaydırma
text1.TextContent += " Dunya!"; // Yazının içeriğine " Dünya!" kelimesini ekledik
// Yazdığımız yazıyı panelin alt elemanı olarak ekleyelim:
panel1.Children.Add(text1);
// Paneli Main Window'un alt elemanı olarak ekleyelim:
mainWindow.Child = panel1;
// Pencereyi görünür yapalım:
mainWindow.Visibility = Visibility.Visible;
return mainWindow;
}
}
}
Text'in SetMargin() metodu ile yazı kenarlarına kaydırma boşluğu
eklenerek istenilen noktaya yerleştirilebilir.
Adım 4: Dörtgen Çizdirmek
Şimdi panel içerisine bir dörtgen çizdirip bunu panelin alt
elemanı (Child) olarak ekleyeceğiz. Uygulama tamamlandığında aşağıdaki görüntü
ortaya çıkacak:
Program.cs
Geometrik şekillerin çizdirilebilmesi için namespace'ler arasına
Microsoft.SPOT.Presentation.Shapes referansını eklemeniz gerekiyor.
using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Input;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Presentation.Shapes;
namespace MFWPFUygulamasi
{
public class Program : Microsoft.SPOT.Application
{
public static void Main()
{
Program myApplication = new Program();
Window mainWindow = myApplication.CreateWindow();
myApplication.Run(mainWindow);
}
private Window mainWindow;
public Window CreateWindow()
{
// Ekran çözünürlüğünde bir Window objesi oluşturalım:
mainWindow = new Window();
mainWindow.Height = SystemMetrics.ScreenHeight;
mainWindow.Width = SystemMetrics.ScreenWidth;
// Ekran nesnelerini tutacak bir panel oluşturalım:
Panel panel1 = new Panel();
// Kenarlardan 10'ar px boşluk kalacak şekilde bir dörtgen oluşturalım:
Rectangle dortgen1 = new Rectangle(300, 220); // 300 x 220 boyutlarında bir dörtgen
dortgen1.VerticalAlignment = VerticalAlignment.Center; // Yatay hizzalama
dortgen1.HorizontalAlignment = HorizontalAlignment.Center; // Dikey hizzalama
dortgen1.Fill = new SolidColorBrush(ColorUtility.ColorFromRGB(218, 217, 223)); // İç renk
dortgen1.Stroke = new Pen(ColorUtility.ColorFromRGB(0, 0, 0), 2); // Çerçeve, 2px kalınlık
// Small yazı tipiyle Merhaba yazdıralım:
Text text1 = new Text(Resources.GetFont(Resources.FontResources.small), "Merhaba");
// Yazının özelliklerini değiştirelim:
text1.VerticalAlignment = VerticalAlignment.Center; // Dikey hizzalama
text1.HorizontalAlignment = HorizontalAlignment.Center; // Yatay hizzalama
text1.ForeColor = ColorUtility.ColorFromRGB(255, 0, 0); // Yazı rengi (Kırmızı)
text1.TextWrap = false; // Satır kaydırma
text1.TextContent += " Dunya!"; // Yazının içeriğine " Dünya!" kelimesini ekledik
// Yazıyı ve dörtgeni panelin alt elemanları olarak ekleyelim:
panel1.Children.Add(dortgen1);
panel1.Children.Add(text1);
// Paneli Main Window'un alt elemanı olarak ekleyelim:
mainWindow.Child = panel1;
// Pencereyi görünür yapalım:
mainWindow.Visibility = Visibility.Visible;
return mainWindow;
}
}
}
Adım 5: Resim Eklemek
Micro Framework uygulamaları BMP, JPG, GIF, PNG ve TIFF
biçimindeki resimleri destekler. Kullandığımız resimler hafıza kartında,
İnternet üzerinde, memory stream içerisinde yada Resources dosyası içerisinde
(mikrodenetleyicinin uygulama Flash ROM'unda)
depolanabilir. Resources dosyasına eklediğimiz bir GIF resmini panele eklemeyi
inceleyelim:
Program.cs
using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Input;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Presentation.Shapes;
namespace MFWPFUygulamasi
{
public class Program : Microsoft.SPOT.Application
{
public static void Main()
{
Program myApplication = new Program();
Window mainWindow = myApplication.CreateWindow();
myApplication.Run(mainWindow);
}
private Window mainWindow;
public Window CreateWindow()
{
// Ekran çözünürlüğünde bir Window objesi oluşturalım:
mainWindow = new Window();
mainWindow.Height = SystemMetrics.ScreenHeight;
mainWindow.Width = SystemMetrics.ScreenWidth;
// Ekran nesnelerini tutacak bir panel oluşturalım:
Panel panel1 = new Panel();
// Kenarlardan 10'ar px boşluk kalacak şekilde bir dörtgen oluşturalım:
Rectangle dortgen1 = new Rectangle(300, 220); // 300 x 220 boyutlarında bir dörtgen
dortgen1.VerticalAlignment = VerticalAlignment.Center; // Yatay hizzalama
dortgen1.HorizontalAlignment = HorizontalAlignment.Center; // Dikey hizzalama
dortgen1.Fill = new SolidColorBrush(ColorUtility.ColorFromRGB(218, 217, 223)); // İç renk
dortgen1.Stroke = new Pen(ColorUtility.ColorFromRGB(0, 0, 0), 2); // Çerçeve, 2px kalınlık
// Resources dosyasına eklediğimiz bir GIF resmini gösterelim:
Image resim1 = new Image(Resources.GetBitmap(Resources.BitmapResources.Entegre));
resim1.VerticalAlignment = VerticalAlignment.Top; // Yatay hizzalama
resim1.HorizontalAlignment = HorizontalAlignment.Center; // Dikey hizzalama
resim1.SetMargin(0, 15, 0, 0); // Resmin köşelerinden eklenecek kaydırma boşlukları
// Small yazı tipiyle Merhaba yazdıralım:
Text text1 = new Text(Resources.GetFont(Resources.FontResources.small), "Merhaba");
// Yazının özelliklerini değiştirelim:
text1.VerticalAlignment = VerticalAlignment.Center; // Dikey hizzalama
text1.HorizontalAlignment = HorizontalAlignment.Center; // Yatay hizzalama
text1.ForeColor = ColorUtility.ColorFromRGB(255, 0, 0); // Yazı rengi (Kırmızı)
text1.TextWrap = false; // Satır kaydırma
text1.TextContent += " Dunya!"; // Yazının içeriğine " Dünya!" kelimesini ekledik
// Yazıyı, dörtgeni ve resmi panelin alt elemanları olarak ekleyelim:
panel1.Children.Add(dortgen1);
panel1.Children.Add(resim1);
panel1.Children.Add(text1);
// Paneli Main Window'un alt elemanı olarak ekleyelim:
mainWindow.Child = panel1;
// Pencereyi görünür yapalım:
mainWindow.Visibility = Visibility.Visible;
return mainWindow;
}
}
}
Image'ın SetMargin() metodu ile resmin köşelerinden istenilen
kaydırma boşluğu eklenerek pozisyonlama sağlanır. Pozisyonlama, resmin dikey ve
yatay ortalaması referans noktası alınarak yapılacaktır.
Uygulama kodlarını buradan indirebilirsiniz.