BTP206– Görsel Programlama II

... konulu sunumlar: "BTP206– Görsel Programlama II"— Sunum transkripti:

1 BTP206– Görsel Programlama II
Gelişmiş Kontroller, Menüler, Araç Çubukları, ve Durum Çubuğu

2 İçerik Geleneksel Kontroller Gelişmiş Kontroller Menüler
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

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

4 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();

5 Timer Example at Runtime

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

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

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

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

10 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

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

12 Örnek Görüntüleri

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

14 Uygulamanın son görünümü

15 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");

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

17 List View veTree View

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

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

20 Menu Strip Kontrolünü kullanma

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

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

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

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

25 Checked State

26 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 + ")"; }

27 mnuConfirmOnExit.Checked = !(mnuConfirmOnExit.Checked);
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.

28 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();

29 Options Menu öğesi Click Olayı
OptionsForm frmOptionsDialog = new OptionsForm(); frmOptionsDialog.ShowDialog();

30 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();

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

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

33

34 Programın Çalışması

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

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

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

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

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

40

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

42

43 Final View of the Toolbar

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

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

46 StatusBar Butonları

47 Uygulama Mouse ile picture box üzerinde gezinirken, x ve y koordinatlarını status bar üzerinde gösterin