Facebook RSS Feed
 

.NET Micro Framework: WPF Uygulamalarında Canvas Kullanımı

Canvas, alt elemanı olarak eklenen UIElement nesnelerinin kendi üzerinde istenilen pozisyonda gösterilmesini sağlar. Canvas ile Stack Panel ve Scroll Viewer birlikte kullanılarak interaktif uygulama arayüzleri de oluşturulabilir. Örnek uygulamamızda Canvas üzerine görsel nesne eklemek üzerinde duracağız.

Canvas Oluşturmak ve Görsel Nesne Eklemek

Geliştireceğimiz uygulama, 3 dörtgen ve bir yazı nesnesini Canvas üzerinde istenilen noktalara yerleştirecek ve aşağıdaki gibi bir görüntü verecek:

-

Canvas'ın basit bir çalışma mantığı var. Önce nesneler ve onları tutacak bir Canvas oluşturulur. Nesneler Canvas'ın alt elemanları (Children) olarak eklenir. Son aşamada ise her bir nesnenin Canvas sınırlarından uzaklığı belirtilerek istenilen konumda gösterilmesi sağlanır.

Visual Studio üzerinde yeni bir Micro Framework Window Application oluşturalım ve Canvas uygulamamızı geliştirmek üzere Program.cs dosyasını modifiye edelim:

Program.cs

using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Shapes;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Presentation.Controls;
 
namespace MF_WPF_Canvas
{
    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;
 
            // Görsel nesnelerde kullanılacak renkleri tanımlayalım:
            SolidColorBrush mavi1 = new SolidColorBrush(ColorUtility.ColorFromRGB(80, 80, 255));
            SolidColorBrush mavi2 = new SolidColorBrush(ColorUtility.ColorFromRGB(120, 120, 255));
            SolidColorBrush mavi3 = new SolidColorBrush(ColorUtility.ColorFromRGB(160, 160, 255));
            Pen siyahCizgi = new Pen(ColorUtility.ColorFromRGB(0, 0, 0));
 
            // Yazı yazarken kullanılacak yazı tipini tanımlayalım:
            Font fontSmall = Resources.GetFont(Resources.FontResources.small);
 
            // Üzerine görsel nesneleri yerleştireceğimiz bir Canvas oluşturalım:
            Canvas canvas1 = new Canvas();
 
            // Canvas'ın özelliklerini ayarlayalım:
            canvas1.Width = 300;  // Genişlik
            canvas1.Height = 220; // Yükseklik
            canvas1.HorizontalAlignment = HorizontalAlignment.Center; // Yatay hizzalama
            canvas1.VerticalAlignment = VerticalAlignment.Center;     // Dikey hizzalama
  
            // Canvas'a eklenecek 3 tane görsel nesne oluşturalım:
            Rectangle dortgen1 = new Rectangle(50, 50); // 50x50 Boyutlarında dörtgen
            dortgen1.Fill = mavi1;                      // Dolgu rengi
            dortgen1.Stroke = siyahCizgi;               // Çerçeve rengi
 
            Rectangle dortgen2 = new Rectangle(50, 50);
            dortgen2.Fill = mavi2;
            dortgen2.Stroke = siyahCizgi;
 
            Rectangle dortgen3 = new Rectangle(50, 50);
            dortgen3.Fill = mavi3;
            dortgen3.Stroke = siyahCizgi;
 
            // Canvas'a eklenecek bir yazı oluşturalım:
            Text yazi1 = new Text(fontSmall, "Micro Framework Canvas");
            yazi1.ForeColor = ColorUtility.ColorFromRGB(0, 0, 255);
 
            // Oluşturduğumuz görsel nesneleri Canvas'ın alt elemanları olarak ekleyelim:
            canvas1.Children.Add(dortgen1);
            canvas1.Children.Add(dortgen2);
            canvas1.Children.Add(dortgen3);
            canvas1.Children.Add(yazi1);
 
            // Görsellerin pozisyonlarını belirleyelim:
            Canvas.SetTop(dortgen1, 10);
            Canvas.SetLeft(dortgen1, 10);
 
            Canvas.SetTop(dortgen2, 80);
            Canvas.SetLeft(dortgen2, 120);
 
            Canvas.SetTop(dortgen3, 160);
            Canvas.SetLeft(dortgen3, 240);
 
            Canvas.SetTop(yazi1, 10);
            Canvas.SetRight(yazi1, 10);
            
            // Canvas'ı ana pencerenin alt elemanı olarak ekleyelim:
            mainWindow.Child = canvas1;
 
            // Pencereyi görünür yapalım:
            mainWindow.Visibility = Visibility.Visible;
 
            return mainWindow;
        }
    }
}

Uygulamayı çalıştırdığınızda, görsel nesnelerin belirlediğimiz pozisyonlara yerleştirildiğini göreceksiniz.

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