Facebook RSS Feed
 

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




 
Hoşgeldiniz!
Son güncelleme: 25.12.2016
-
Yeni Teknik Yazılar
Latte Panda İncelemesi
Turta IoT HAT İncelemesi
USB Gamepad Kullanımı
GPIO Kullanımı
VEML6075 UV Sensör Kullan...
-
İlgili Gruplar
.NET MF ve Gadgeteer FB Grubu
İst. IoT & Wearables Meet-up
-
 

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.Copyright © 1999 - 2017, Umut Erkal. Bu materyal, "Creative Commons Public Licence" ile sunulmuştur.
Kaynak göstererek ve ücretsiz olarak, aynı şartlar altında paylaşabilir ve kullanabilirsiniz. | Kullanım Sözleşmesi