Facebook RSS Feed
 

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

Micro Framework üzerinde WPF Uygulamaları, ListBox gibi kontrolleri kullanabilmemize olanak sağlamaktadır. ListBox ile grafiksel olarak birden çok eleman arasında seçim yapabiliriz. Listbox kontrolü, bir öncekli yazıda üzerinde durduğumuz GPIO Button Input Provider sınıfı ile entegre çalışarak eleman seçmemizi kolaylaştırmaktadır. Örneğimizde ListBox oluşturmayı, eleman eklemeyi, seçili elemanın rengini değiştirmeyi ve debug mesajı olarak almayı ele alacağız.

ListBox Oluşturmak ve Eleman Eklemek

İlk aşamada bir pencere oluşturarak içerisine ListBox kontrolü ekleyeceğiz. Daha sonra ListBox'a birkaç eleman ekleyerek ListBox'ı ana pencerenin alt elemanı (Child) olarak belirleyeceğiz. Uygulamayı çalıştırdığımızda aşağıdaki görüntü oluşacak:

-

Visual Studio üzerinden yeni bir Micro Framework Window Application oluşturup Program.cs dosyasının içeriğini aşağıdaki gibi düzenleyelim:

Program.cs

using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Input;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Hardware;
 
namespace MF_WPF_Listbox_Kullanimi
{
    public class Program : Microsoft.SPOT.Application
    {
        public static void Main()
        {
            Program myApplication = new Program();
            Window mainWindow = myApplication.CreateWindow();
 
            // GPIO pinlerini butonlara bağlayan GPIO Button Input Provider objesi oluşturalım:
            GPIOButtonInputProvider inputProvider = new GPIOButtonInputProvider(null);
 
            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;
 
            // ListBox elemanlarında kullanılacak bir yazı tipi belirleyelim:
            Font fontSmall = Resources.GetFont(Resources.FontResources.small);
 
            // ListBox oluşturalım:
            ListBox listBox1 = new ListBox();
 
            // ListBox'a birkaç eleman ekleyelim:
            for (int i = 1; i < 16; i++)
            {
                listBox1.Items.Add(new Text(fontSmall, "Eleman " + i));
            }
 
            // ListBox'ı ana pencerenin alt elemanı olarak ekleyelim:
            mainWindow.Child = listBox1;
 
            // Pencereyi görünür yapalım:
            mainWindow.Visibility = Visibility.Visible;
 
            return mainWindow;
        }
    }
}

Geliştirdiğimiz bu uygulamayla yalnızca eklediğimiz elemanları ekranda göstermiş olduk. Elemanlar arasında seçim yapmak ve seçili elemanı vurgulamak için uygulamayı modifiye etmemiz gerekmektedir.

Seçilebilir ListBox Elemanları ve Diğer Özellikler

Şimdi ListBox'ımızı modifiye ederek boyutuyla ve rengiyle oynayacağız. Ayrıca seçili elemanın vurgulanmasını sağlayıp hangi elemanın seçili olduğunu debug mesajı olarak alacağız. Uygulama çalıştığında aşağıdaki görüntüyü göreceğiz:

-

ListBox kontrolü, orjinal haliyle seçili elemanın vurgulanmasını (arkaplan renginin değiştirilmesini) desteklemiyor. Bu nedenle ListBoxItem sınıfından türeme bir SecilebilirEleman sınıfı oluşturarak ListBoxItem'ın seçimi değiştiğinde fırlayan OnIsSelectedChanged eventini override edeceğiz. Bu işlem sonrasında her seçim değişiminde seçili elemanın vurgulanması mümkün olacak.

SecilebilirEleman.cs

using System;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
 
namespace MF_WPF_Listbox_Kullanimi
{
    class SecilebilirEleman : ListBoxItem
    {
        public SecilebilirEleman() { }
 
        protected override void OnIsSelectedChanged(bool isSelected)
        {
            if (isSelected) // Eleman seçiliyse, arkaplan rengini ayarla:
                this.Background = new SolidColorBrush(ColorUtility.ColorFromRGB(98, 122, 173));
            else // Değilse, arkaplan rengi kullanma:
                this.Background = null;
        }
    }
}

Bu aşamadan sonra ListBox'ımıza seçilebilir elemanlar ekleyeceğiz ve ListBox'ın boyutlarını ve hizzalamasını değiştireceğiz. Ayrıca, buton ile seçili elemanı değiştirdiğimizde ve enter ile seçimi onayladığımızda üzerinde durduğumuz elemanları debug mesajı olarak alacağız.

ListBox'ın daha okunabilir olması için Resources.resx dosyasına "C:\Program Files (x86)\Microsoft .NET Micro Framework\v4.1\Fonts" konumunda bulunan "NinaB.tinyfnt" yazı tipini ekleyelim.

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.Hardware;
 
namespace MF_WPF_Listbox_Kullanimi
{
    public class Program : Microsoft.SPOT.Application
    {
        public static void Main()
        {
            Program myApplication = new Program();
            Window mainWindow = myApplication.CreateWindow();
 
            // GPIO pinlerini butonlara bağlayan GPIO Button Input Provider objesi oluşturalım:
            GPIOButtonInputProvider inputProvider = new GPIOButtonInputProvider(null);
 
            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;
 
            // ListBox elemanlarında kullanılacak bir yazı tipi belirleyelim:
            Font fontNinaB = Resources.GetFont(Resources.FontResources.NinaB);
 
            // ListBox oluşturalım:
            ListBox listBox1 = new ListBox();
            
            // ListBox'a birkaç eleman ekleyelim:
            for (int i = 0; i < 20; i++)
            {
                SecilebilirEleman eleman = new SecilebilirEleman();
                eleman.Child = new Text(fontNinaB, "Eleman " + i);
                listBox1.Items.Add(eleman);
            }
 
            // ListBox'ın özelliklerini ayarlayalım: (İsteğe bağlı)
            // Arkaplan rengi:
            listBox1.Background = new SolidColorBrush(ColorUtility.ColorFromRGB(218, 217, 223));
 
            listBox1.Width = 100;  // Genişlik
            listBox1.Height = 200; // Yükseklik
            
            listBox1.HorizontalAlignment = HorizontalAlignment.Center; // Yatay hizzalama
            listBox1.VerticalAlignment = VerticalAlignment.Center;     // Dikey hizzalama
 
            listBox1.ScrollingStyle = ScrollingStyle.LineByLine; // Kaydırma stili
            listBox1.SetMargin(0, 0, 0, 0);                      // Kenar boşlukları
            listBox1.SelectedIndex = 5;                          // Başlangıçta seçili eleman
 
            // ListBox üzerinde seçim değiştiğinde fırlayacak eventi belirleyelim:
            listBox1.SelectionChanged += new SelectionChangedEventHandler(ListBox1SecimDegisimi);
 
            // Listbox üzerinde butona basıldığında fırlayacak eventi belirleyelim:
            listBox1.AddHandler(Buttons.ButtonDownEvent, new RoutedEventHandler(ListBox1ButonBasimi),
                false);
 
            // ListBox'ı ana pencerenin alt elemanı olarak ekleyelim:
            mainWindow.Child = listBox1;
 
            // Pencereyi görünür yapalım:
            mainWindow.Visibility = Visibility.Visible;
 
            // Button Focus'u pencereye ayarlayalım.
            Buttons.Focus(listBox1);
 
            return mainWindow;
        }
 
        // Listbox üzerindeyken butona basıldığında:
        private void ListBox1ButonBasimi(object sender, RoutedEventArgs args)
        {
            ListBox listBox = (ListBox)sender;
            ButtonEventArgs e = (ButtonEventArgs)args;
 
            // Seçim butonuna basıldıysa, seçili elemanı debug mesajı olarak gönder:
            if (e.Button == Button.VK_SELECT) Debug.Print(listBox.SelectedIndex + ". eleman seçildi");
        }
 
        // Listbox üzerindeyken seçim değiştiğinde:
        private void ListBox1SecimDegisimi(object sender, SelectionChangedEventArgs args)
        {
            // Seçili elemanı debug mesajı olarak gönder:
            Debug.Print(args.SelectedIndex + ". eleman üzerinde");
        }
    }
}

Uygulamayı çalıştırıp yukarı / aşağı / enter butonlarına basarak ListBox seçimini değiştirdiğinizde, seçili elemanın ekranda vurgulanmasının yanısıra, Visual Studio Output penceresinde aşağıdaki gibi debug mesajları göreceksiniz.

6. eleman üzerinde
7. eleman üzerinde
8. eleman üzerinde
9. eleman üzerinde
10. eleman üzerinde
10. eleman seçildi
11. eleman üzerinde
11. eleman seçildi

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