Makale Özeti

Bu makalede mobil uygulamalarda Panel, ListView ve Image list kullanımı hakkında bilgi vermeye çalışacağım.

Makale

Merhaba arkadaşlar. Bu makalemde sizlerle geliştireceğiniz projelerde Panel, ListView ve bununla ilişkilendirebileceğiniz ImageList componentleri hakkında bilgi vermeye çalışacağım. Proje oluşturma ile ilgili açıklama detaylarına bu makalede girmek istemiyorum diğer birçok örnek makalede mobil proje oluşturma örnekleri incelemeniz mümkün. Ben oluşmuş proje üzerinden devam etmek istiyorum. Projemizi oluşturduktan sonra standart boş form, Microsoft Visual Studio tarafından otomatik olarak oluşturulacaktır. Formumuza sol tarafta yer alan ToolBox üzerinden Device Containers grubundan sırası ile iki adet panel ekleyelim. Benim tavsiyem tüm Windows ve Mobil uygulamalarında panel kullanma alışkanlığı edinin ve ekran tasarımlarınızda her zaman panel kullanın. Panel kullanımı ekran tasarımlarınızın şık ve kullanışlı olması açısından çok önemli bir yere sahiptir. Panelleri arka arkaya eklemememiz gerekmektedir eğer arka arkaya panel componentine tıklarsak paneller iç içe gelecektir.

 

Ekran Görüntüsü -  1 (Birinci Aşama – Form Oluşturma ve Forma Panel Ekleme)

İlk paneli ekledikten sonra fare ile formun herhangi bir yerine tıklarsak ekleyeceğimiz diğer panelin form üzerine gelmesini sağlayabiliriz. Form üzerine eklediğimiz panellere pnlLV ve pnlButtons isimlerini verelim. Bu konuda da bir hatırlatmam olacak eğer büyük çaplı projeler yapacaksanız projenin ileriki boyutlarında component isimlendirmesi sizin can damarınız olacaktır. Bu isimlendirmeleri de belli kriterler bazında yapacak olursanız geriye dönük yapılacak müdahalelerin içinden çok daha kolay bir şekilde çıkabilirsiniz.

Ekran Görüntüsü -  2 (Form’a Panel Ekleme)

Formumuzda pnlButtons isimli paneli ekranın alt kısmına diğer panelide ekranın tamamına yayılacak şekilde ayarlayacağız. Bunu yapmaktaki amacımız ListView ve ListView görünümlerini değiştireceğimiz butonların ekranda düzgün görüntülenmesini sağlamak. pnlButtons ve pnlLV panellerini ekranda istediğimiz gibi yerleştirmek için Microsoft Visual Studio ekranının sağ tarafında bulunan Properties yardımcı ekranından faydalanabiliriz. Bu yardımcı ekran hangi component seçili ise ona ait özelliklere müdahale etme imkanı sağlamaktadır. İlk önce pnlButtons panel componentini seçtikten sonra ister Mouse yardımı ile ister klavyeden F4 tuşuna basarak properties yardımcı ekranını aktif hale getirelim ve seçeneklerden Dock özelliğini aktif hale getirelim ve bu seçenekten pnlButtons’un özelliğini Bottom yapalım. Bu işlemden sonra panel otomatik olarak ekranın alt kısmını kaplayacaktır. Yine properties ekranında bulunan Size kısmından da Height özellik değerini 35 olarak belirleyelim. Bu işlemlerden sonra pnlButtons içerisine buton yerleştirecek moda gelecektir. Aynı işlemleri pnlLV içinde yapacağız ancak bu sefer pnlButtons’un Dock özelliğini Fill olarak belileyeceğiz bu özelliği Fill olarak seçtiğimizden dolayı Size özelliği altında yer alan Height özelliği otomatik olarak değer alacaktır.

 Ekran Görüntüsü -  3 (Ekranda Panellerin Ayalanması)

            Paneller üzerinde gerekli düzenlemeleri yaptıktan sonra pnlLV paneline ListView’imizi pnlButtons panelinede butonlarımızı sırası ile yerleştirelim ve ListView’imizin Dock özelliğinide Fill olarak belirleyelim. Birde formumuza ImageList eklemeyi unutmayalım. Formumuzda bulunan compenentleri derli toplu olacak şekilde tekrar edecek olursak.

 

            Tab Name                               Component

            ------------------------                 --------------------------------------------------------------

            Device Containers                  Panel

            Device Components               ImageList

            Common Device Controls     ListView

 

Bu makalede ListView öğelerinin tasarım modunda nasıl eklendiğini göreceğiz başka makalelerde ListView’e item (öğe) ekleme örneklerini inceleyebiliriz

            ListView için yukarıda anlatılan işlemler yapıldıktan sonra ListView’e item ekleme tasarım aşamasında şu şekilde yapılmaktadır. Fare yardımı ile ListView seçilir ve Properties kısmından Items alanına gelinir bu alana geldiğimizde ekranda beliren butonu tıkladığımız zaman karşımıza ListViewItem Collection Editor ekranı gelmektedir. Bu ekranda ne kadar item ekleyeceksek o sayıda Add butonuna tıklamamız gerekmektedir. Ekranda tıklama sayımız kadar item Members kısmında listelenecektir. Bizim örnek uygulamamızda biz her bir item için Text, ImageIndex ve Tag özelliklerine müdahale edeceğiz.

            Text                :Item’in ekranda görünen yazı özelliğidir.

            ImageIndex    :Item için belirleyeceğimiz resim görüntüsüdür.

            Tag                  :Genelde programcılar tarafından kullanılan ve yapılan özel işler için atanan sayısal değer alanıdır. Bizde bu örnek uygulamamızda Tag değerine bakarak proje ile ilişkili diğer formları çağırma işinde Tag değerini kullanacağız.

 

Ekran Görüntüsü -  4 (ListView’e Tasarım Modunda Item Ekleme)

Bu örnek projemizde biz toplam 4 adet item ekledik. Itemlerin Tag değerleri kod aşamasında bize gerekli olacaktır. Gerekli Item’leri ekledikten sonra OK butonuna tıklayarak editör ekranını kapatırız. Bizim amacımız ListView’i projemizin ana formu olarak kullanmak ve kullanıcıyı ListView üzerinden diğer ekranlara yönlendirmek. Bundan dolayı tasarım ekranında ListView seçili iken properties ekranından ListView özelliklerinden LargeImageList alanında formumuza daha önceden eklemiş olduğumuz ImageList componentine ilişki kuruyoruz. Bu alan seçili iken beliren listeleme kutusundan ilMain olarak isimlendirdiğimiz ImageList’i seçiyoruz. Ön değer  olarakta View özelliğinide LargeIcon olarak belirliyoruz. Tüm bu işlemleri tamamladıktan sonra tasarım modunda ekran görüntüsü aşağıdaki gibi olacaktır.

Ekran Görüntüsü -  5 (ListView’e Itemlerin Eklenmesinden Sonraki Görünüm)

            Bu aşamada da ListView’e eklemiş olduğumuz Item’ların ImageList Item’ları ile ilişkilendirilmesini yapalım. Öncelikle ImageList’imize eklemek istediğimiz resim görüntülerini ilave edelim. Projemizde bizim kullanacağımız image formatı Icon olacak ve boyutuda 32x32 olacaktır. Bunun için tasarım aşamsında ImageListi’imizi seçtikten sonra properties ekranından Images alanına geliriz bu alanda beliren butona tıkladığımız zaman karşımıza ImageCollection Collection Editor ekranı gelmektedir bu ekranı kullanarak projemizde kullanacağımız iconları belirleyeceğiz ekran üzerinde Add butonuna tıkladığımız zaman karşımıza resim dosyalarını yükleyebileceğim Aç (Open) ekranı gelmektedir. Yardımcı ekran aracılığı ile istediğimiz dosyayı ImageListCollection itemlerine ekleyebiliriz.

 

Ekran Görüntüsü -  6 (ImageList Collection Editor)

            ImageList’imize istediğimiz Icon’ları ekledikten sonra ListView item’ları ile doğru görüntüleri ilişkilendirdiğimiz zaman ekran görüntüsü aşağıdaki gibi olacaktır. ListViewItem Collection Editor ekranı yardımı ile Item bazında ImageIndex özelliğini kullanarak ilişkilendirme işlemini yapabilmekteyiz.

 

Ekran Görüntüsü -  7 (ImageList Item ve ListView Item İlişkisinden Sonra Ekran Görüntüsü)

Şimdide kod aşamasına bir adım daha yaklaşalım ve daha önceden formumuza eklemiş olduğumuz pnlButtons paneline ListView’in View özelliğini çalışma zamanında değiştirebileceğimiz butonları ekleyelim bunun için panele üç adet buton ekleyelim; Büyük Simgeler, Küçük Simgeler ve Liste butonları. Buton isimlerini de btnLageIcon, btnSmallIcon ve btnList olarak verelim. Butonlara ait kaynak kodları yazabilmemiz için tasarım aşamasında butonlara birer kez tıklamamız yeterli olacaktır. Bu işlemi yaptığımız zaman her bir buton tıklama olayına aşağıdaki örnekte olduğu gibi ilgili görünüm seçeneğini bağlamamız yeterli olacaktır.

 

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Text;

using System.Windows.Forms;

 

namespace MobileListView

{

    public partial class frmListView : Form

    {

        public frmListView()

        {

            InitializeComponent();

        }

 

        private void btnLargeIcon_Click(object sender, EventArgs e)

        {

            LV.View = View.LargeIcon;

        }

 

        private void btnSmallIcon_Click(object sender, EventArgs e)

        {

            LV.View = View.SmallIcon;

        }

 

        private void btnList_Click(object sender, EventArgs e)

        {

            LV.View = View.List;

        }

    }

}

 

Ekran Görüntüsü -  8 (Görünüm Değiştirme Butonlarının Eklenmiş Hali)

            Bir başka kod örneği olarak ta ListView componentinin SelectedIndexChanged olayına bir örnek vererek makalemizi tamamlayalım kod örneğinde ListView Item’larının tag değerlerine bakarak ekrana değişik mesajlar gösterme konusuna değişik örnekler verelim.

 

        private void LV_SelectedIndexChanged(object sender, EventArgs e)

        {

            if (LV.FocusedItem != null)

            {

                if (LV.FocusedItem.Tag.ToString() == "0")

                {

                    MessageBox.Show("Bağlantı ayarları seçildi");

                }

                else if (LV.FocusedItem.Tag.ToString() == "1")

                {

                    MessageBox.Show("Stok sayım işlemleri seçildi");

                }

                else if (LV.FocusedItem.Tag.ToString() == "2")

                {

                    MessageBox.Show("Peşin satış işlemleri seçildi");

                }

                else if (LV.FocusedItem.Tag.ToString() == "3")

                {

                    MessageBox.Show("Aktivasyon işlemleri seçildi");

                }

            }

        }

 

Kodu inceleyecek olursak dikkat ettiğiniz gibi ilk aşamada kullanıcının ListView üzerinde herhangi bir item’ı seçip seçmediğini null özelliği ile kontrol ediyoruz eğer bu kontrolü yapmazsak hata mesajı alırız ve bu mesajdan sonra program kırılır ve kapanır. Daha sonrada seçilen item’ın tag değerine bakılarak kullanıcının önüne gerekli uyarı mesajını MessageBox.Show fonksiyonu ile göndermekteyiz.