BTP206– Görsel Programlama II
Gelişmiş Kontroller, Menüler, Araç
Çubukları, ve Durum Çubuğu
1
İçerik
• Geleneksel Kontroller
– Label, Text Box, Buton, Check Box, List Box, Combo
Box
• Gelişmiş Kontroller
– Timer, Tabbed Dialog Box, Image List, List View,
Tree View
• Menüler
• Araç çubukları
• Durum çubuğu
2
Timer
• Timer kontrolünün tek amacı, belirlenen özel
bir zaman aralığında bir olay tetiklemektir.
• Bu zaman aralığı Interval özelliği tarafından
belirlenir.
• Interval özelliği milisaniyeler ile ayarlanır.
• Kullanılan timer’in aktif olması için Enabled
özelliğinin true olması gerekir.
• Tanımlanan aralık dolduğunda, Timer’in Tick
olayı meydana gelir.
3
Timer Örneği
• Yeni bir proje oluşturun.
• Ana formunuza bir adet label ve timer ekleyin.
• Timer’in Enable özelliğini True yaparak
interval özelliğini 1000 milisaniye olarak
ayarlayın.
• Timer üzerinde çift tıklayarak Tick olayını açın
ve aşağıdaki kod bloğunu buraya yazın:
lblClock.Text = DateTime.Now.ToLongTimeString();
4
Timer Example at Runtime
5
Tabbed Dialog box
• Kullanılan tabbed dialog
box, kontrolleri
gruplayarak ekranda
kullanılan alanın daha
verimli kullanılmasını
sağlar.
• Tabbed dialog box’ları
dizayn etmek için
TabControl kullanılır.
6
TabControl
• Bir TabControl’ün tabları, TabPages özelliğini
kullanarak eklenebilir, silinebilir yada değiştirilebilir.
• TabControl üzerindeki her sayfa bir container gibi
davranır; bu yüzden tab sayfasındaki kontroller
sürüklenebilir.
• Dizayn sırasında bütün tab sayfaları başlıklarına
tıklayarak seçilebilir .
• Kontrolün SelectedIndex özelliği (TabIndex özelliği
değil) o an seçilen tab’ın indeks sırasını ayarlar ve
döndürür.
• Kullanıcı tab değiştirdiği zaman, TabControl’un
SelectedIndexChanged olayı tetiklenir.
7
ImageList Kontrolü
• ImageList kontrolü, resimleri saklar ve bu
resimlerin diğer kontrollere hizmet etmesini
sağlar.
• Bir ImageList kontrolünün içerisindeki resimler
kontrollerin diğer tipleri arasında paylaşılır.
• Resimler Kontrolün Images koleksiyonu
içerisinde saklanır.
• Resimleri benzer boyutta kullanmaya çalışır.
8
List View içerisinde Image List
kullanma
• Basit listeler, Çok kolonlu ızgaralar, ikon
tepsileri oluşturmak için List View kullanılır.
• Windows Explorer’ın sağ tarafında bulunan
panel bir List View örneğidir.
• Tarayıcıdaki List View için başlıca görüntü
ayarları; Icon, List, Detail, ve Tile.
• Bir List View için bu görüntü ayarları, Bu List
View ‘in View özelliği aracılığı ile belirlenir.
9
Uygulama
• Yeni bir proje oluşturun
• Ana forma bir ImageList ekleyin
• Image list için Bazı resimlerin boyutlarını 16x16
olarak seçin
• Bir ListView kontrolü ekleyin ve bu kontrolün
View özelliğini Details olarak belirleyin.
• ListView kontrolünün SmallImageList özelliğine
tıklayın ve listeyi drop-down etmeden önce
oluşturduğunuz image list’iseçin
10
Uygulama(devam)
• ListView’in Columns özelliğini kullanarak,
isimleri Name ve State olan iki adet kolon
ekleyin.
• ListView nesnesinin Items özelliğine tıklayarak
Text özelliğinin içerisine ismi özel olarak
verilmiş bir öğe ekleyin(örnek: James Foxall)
• Öğenin ImageIndex özelliğini kullanarak öğe
için bir resim seçin.
11
Örnek Görüntüleri
12
Uygulama(devam)
• Eğer View özelliği Details olarak ayarlanmış ve çoklu
kolon tanımlanmışsa, Text özelliğinin değeri ilk kolonda
gözükür.
• Kolonun alt-kolon değerleri SubItems koleksiyonu
tarafından belirlenir.
• SubItems özelliğine tıklanır ve Nebraska adında yeni
bir alt-öğe eklenir
• Diğer bir nesne eklenir ve List view nesnesinin özelliği
olan View ‘in diğer değişkenleri denenir.
• Öğenin herhangi bir noktasına tıklandığında bütün
satırı seçmek için, list view’in FullRowSelect özelliği
True yapılır.
13
Uygulamanın son görünümü
14
Kod kullanarak listeye öğeler eklemek
• Bir isim ekleme:
lvwMyListView.Items.Add("Monty Sothmann");
• Resim indeksli bir isim ekleme:
lvwMyListView.Items.Add("Mike Cook",0);
• Durum bilgisi olan bir isim ekleme:
ListViewItem item;
item = lvwMyListView.Items.Add("Mike Saklar", 0);
item.SubItems.Add("Nebraska");
15
Tree View
• Hiyerarşik veriyi sunmak için Tree View kontrolü
kullanılır.
• En çok kullanılan Tree View kontrolü Windows
Explorer içerisinde bulunur, burada Tree View
kontrolünü kullanarak bilgisayarınızda bulunan
dosyalar ve sürücülerde gezinebilirsiniz .
• Tree View’in öğeleri bir Nodes koleksiyonu içerir,
öğeler List View içerisinde bir Items koleksiyonu
olarak saklanır.
• Öğeleri ağaca eklemek için, bu öğeleri Nodes
koleksiyonuna eklemek gerekir.
16
List View veTree View
17
Uygulama
• Yeni bir proje oluşturun, ve varsayılan forma
bir List View, bir button, ve bir text box
ekleyin. Butona tıklandığında text box içerisine
girilen texti kullanarak List View içerisinde
yeni bir öğe oluşturun.
18
Menu Strip Kontrolü
• Uygulamalardan bir çoğu menülere sahiptir. (File,
Edit, View, Help, v.b.)
• C#’da, menüler, Menu Strip kontrolünü
kullanarak formlara eklenir.
• Menu Strip kontrolü araç çubuğunun Menus &
Toolbars kategorisinde yer alır.
• Menu Strip kontrolü menü oluşturmayı çok
kolaylaştıran bir kontroldür! Menu Strip
kontrolünün kullanımını kolay bir şekilde
yapabilirsiniz.
19
Menu Strip Kontrolünü kullanma
20
Accelerator Keys ve Hotkeys
• Menü öğelerinin en üst seviyesinde bulunan bir
karakterden önce & işareti koyulur(örnek: &File,
&Edit, v.b.)
• top-level menü öğesinin içerisinde & işaretinden sonra
gelen karakter accelerator key olarak adlandırılır.
• sub-menu menü öğesinin içerisinde & işaretinden
sonra gelen karakter hotkey olarak adlandırılır.
• Accelerator keys ve hotkeys, menü öğelerine klavye
yardımıyla ulaşılması için kullanılır.(Alt + hotkey)
• Farklı menü öğesi için benzer harf kullanılmaz.
21
Uygulama
• PictureViewer projesini açın ve ana form
üzerinde bir Menu Strip kontrolü konumlandırın.
• Alt menüleri Open Picture ve Quit olan bir File
menüsü oluşturun.
• Alt menüleri Draw Border ve Options olan bir
Tools menüsü oluşturun.
• Menü öğelerini, mnu ön eki kullanarak, uygun
isimlerle isimlendirin.
• Menü öğelerini silmeyi ve taşımayı deneyin.
22
Checked Menu Items
• Açıldığında herhangi bir alt-menüye sahip
olmayan menü öğelerinin textlerinin yanında
check işareti bulunur.
• Check işaretleri, seçmek veya seçmemek
mantığında menü öğeleri oluşturmak için
kullanılır.
23
Uygulama
• File menüsünü açın , Quit menü öğesinin altına
Confirm On Exit textine sahip yeni bir menü öğesi
ekleyin, ve bunu Quit menu itemin üzerine
taşıyın.
• Confirm On Exit sağ tıklayarak kısayol
menüsünden Checked seçeneğini seçin.
• Benzer bir şekilde, bir menü öğesinin Checked
özelliğini Properties penceresi kullanarak da
değiştirebilirsiniz.
• Programı çalıştırın ve Checked durumunun seçili
ya da seçili olmama halini gözlemleyin.
24
Checked State
25
Programlama Menüleri
• Menü öğesi üzerine çift tıklamak, bu menü
öğesinin Click olayının metotlarının açılmasını
sağlar.
• Open Picture menu öğesine ine çift tıklayın
aşağıdaki kod bloğunu yazın:
if (ofdSelectPicture.ShowDialog() == DialogResult.OK)
{
picShowPicture.Image = Image.FromFile(ofdSelectPicture.FileName);
this.Text = "Picture Viewer (" + ofdSelectPicture.FileName + ")";
}
26
Confirm on Exit
• Confirm On Exit menu öğesine çift tıklayın ve
Click olayına erişin. Aşağıdaki kod bloğunu
yazın:
mnuConfirmOnExit.Checked = !(mnuConfirmOnExit.Checked);
• burada, mnuConfirmOnExit ,Confirm On Exit menu öğesinin
ismini temsil ediyor.
27
Draw Border Menu öğesi Click Olayı
Graphics objGraphics = null;
objGraphics = this.CreateGraphics();
objGraphics.Clear(SystemColors.Control);
objGraphics.DrawRectangle(Pens.Blue,
picShowPicture.Left - 1, picShowPicture.Top - 1,
picShowPicture.Width + 1,
picShowPicture.Height + 1);
objGraphics.Dispose();
28
Options Menu öğesi Click Olayı
OptionsForm frmOptionsDialog =
new OptionsForm();
frmOptionsDialog.ShowDialog();
29
Quit Menu öğesi Click Olayı
if (mnuConfirmOnExit.Checked) {
DialogResult result =
MessageBox.Show("Are you sure you want to
close the form?", "Close the program?",
MessageBoxButtons.YesNo,
MessageBoxIcon.Question);
if (result == DialogResult.Yes) this.Close();
}
else
this.Close();
30
Context Menüleri
• Context menuleri (kısayol menuleri) form
üzerinde bir nesneye sağ tıklandığında açılan
menülerdir.
• Context menüleri isimlerini içerik-duyarlı seçenek
olmalarından alırlar— menü öğeleri sağ tıklanılan
nesne ile doğrudan ilişkilidir.
• Çoğu Visual C# kontrolleri default context
menu’ye sahiptir., ancak siz isterseniz custom
context menu atayabilirsiniz.
• Context menüleri oluşturmak için Context Menu
Strip kontrolü kullanılır.
31
Uygulama
• Ana forma yeni bir Context Menu Strip kontrolü
ekleyin
• Texti Draw Border olan bir menü öğesi ekleyin
• Menü öğesine çift tıklayın Click olayı içerisine ve
border-drawing kodlarını yazın.
• Şimdi picture box nesnesini context menü
şeridine bağlamak zorundayız.
• Picture box seçin ve bunun ContextMenuStrip
özelliğini, context menu strip kontrolünün ismine
ayarlayın.
32
33
Programın Çalışması
34
Menü öğelerine kısayol tuşları atamak
• Eğer Microsoft uygulamalarını sık kullanıyorsanız
ve öğrendiyseniz, klavye kısayolları hakkında bilgi
sahibi olmuşsunuzdur.
• Örneğin bir uygulama içerisinde Ctrl+P tuşlarına
basmanız ,File menüsü altındaki Print(Yazdır)
menüsünün yaptığı işi yapar.
• Ctrl+P gibi tuş kombinasyonları shortcut
keys(kısayol tuşları) olarak adlandırılabilir.
• C# içerisinde menülerinize kısayol ekleyebilirsiniz.
35
Uygulama
• File menüsü altındaki Open
Picture menü öğesini seçin.
• Properties penceresindeki ,
ShortcutKeys özelliğine
tıklayın, ve sonra gözüken
aşağı yönlü oku seçin.
• Bu seçtiğiniz menü öğesi için
size kısayol tuşu seçmeniz
imkanını verir.
• Open Picture
menü öğesi için
Ctrl+O kısayolunu
seçin.
36
Toolbars(Araç Çubukları)
• Genelde bir program bir menüye sahip olduğunda
aynı zamanda bir toolbar’a da sahiptir.
• Toolbars kullanımının en büyük kolaylıklarından
biri kullanıcılarının program fonksiyonlarına kolay
erişebilmesidir.
• Menü öğelerinin aksine , toolbar öğeleri daima
görünür haldedir ve kolayca erişilebilir.
• Ek olarak, toolbar öğeleri, kullanıcının butonlar
üzerinde duraksayarak o butonun amacını basit
bir şekilde görebildiği ToolTips e sahiptir.
37
Toolbars(Araç Çubukları)
• Toolbar öğeleri menü öğelerinin bir kısayolu
gibidir. ; toolbar üzerindeki her öğe menü
öğeleriyle ilişkilidir.
• Toolbar üzerindeki öğeler, uygulamanın
desteklediği özellikler doğrultusunda çalışır.
• Toolbarlar, toolbox’ın Menus & Toolbars
kategorisi altındaki ToolStrip kontrolü ile
oluşturulur.
38
Bir Toolbar ekleme
• Toolbox içerisindeki ToolStrip öğesine çift
tıklayarak formunuza yeni bir ToolStrip
kontrolü eklenir. Yeni bir toolbar formunuzun
tepesine eklenmiş olur.
• Toolbar menünün üzerinde gözükür.
• Genelde toolbar menü barının altında yer alır..
• Toolbar’a sağ tıklanır ve açılan kısayoldan
Bring To Front seçilir. Bu, toolbarın menünün
altına taşınmasını sağlar.
39
40
Toolbar butonları ekleme
• Toolbarlar Items koleksiyonuna sahiptir. Bu
koleksiyonu kullanarak toolbar butonları
ekleyebilirsiniz.
• Bir diğer yöntem toolbar kontrolü üzerindeki Add
ToolStripButton butonunu kullanmaktır.
• Bu yöntemleri kullanarak 3 adet buton eklenir:
Biri Open Picture için, biri Draw Border için, ve
biri de Options için. Bunların ToolTipText ve
Image özelliklerini değiştirmeyi unutmayın!
• Butonları ayırmak için separator kullanmayı
deneyin.
41
42
Final View of the Toolbar
43
Programming Toolbars(Araç Çubukları
Programlama )
• Toolbar butonlarını programlamak menü
öğelerini programlamaya benzerdir
• Toolbar butonlarına çift tıklayın ve gerekli
kodları yazın
• Benzer kodları birçok kez yazdınız ama şuan
için bunu düşünmeyin
• Gelecek hafta, farklı olaylar için benzer kodları
nasıl kullanacağınızı öğreneceksiniz.
44
Status Bar
• Toolbox kategorisinin Menus & Toolbars
altında bulunan Status Strip kontrolü ile
formunuza bir status bar ekleyebilirsiniz.
• Benzer yollarla StatusLabel, ProgressBar,
DropDownButton, ve SplitButton kontrolleri
eklenebilir.
45
StatusBar Butonları
46
Uygulama
• Mouse ile picture box üzerinde gezinirken, x
ve y koordinatlarını status bar üzerinde
gösterin
47
Download

List View