BTP206– Görsel Programlama II

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

1 BTP206– Görsel Programlama II
Form Tasarlama

2 İçerik Form Tasarlama-Temel Form Tasarlama– Gelişmiş teknikler
Bir formun görünümünü değiştirme Bir formun arkaplan rengi ve resim özelliklerini değiştirme Formları göstermek ve saklamak Form Tasarlama– Gelişmiş teknikler Kontroller ekleme ve onları yerleştirme Kontrolleri sabitlemek ve otomatik boyutlandırmak Geçiş sırasını ayarlamak Üstte kalan, şeffaf, kaydırılabilir ve MDI formları üretmek

3 Windows Formları Formlar, pencere olarak da adlandırılabilir. Her iki kavram da kullanılabilir. Pencere, kullanıcının ne gördüğü ve neyle ilgilendiği şeklinde tanımlanır. Form ise dizayn ettiğiniz sırada sizin ne gördüğünüzdür.

4 Projeye yeni bir form eklemek
Projenizde birçok çeşit form kullabilirsiniz. Projeye yeni bir form eklenmek istenirse, aşağıdaki işlemlerden birisi yapılabilir: Project menüsünü seçip, Add Windows Form komutu seçebilirsiniz. Solution Explorer penceresindeki proje isminin üzerine sağ tıklanıp, Add sekmesinden Windows Form ya da New Item komutları kullanılabilir. Daha sonra,Windows Form seçilerek bir isim verilir ve Add butonuna basılır.

5 Bir formun isim ve başlığını değiştirme
ResimGösterici projesine KontrollerForm adında yeni bir form ekleyelim. Yeni bir nesne yaratıldığında ilk yapılması gereken şey, ona tanımlayıcı bir isim vermektir. Formun başlığı değiştirilir. Bir formun başlığı aşağıdakilerden birisi olabilir: Programın ismi (örnek: Resim Gösterici) Formun amacı (örnek: Resim Gösterici Kontrolleri) Formun ismi (örnek: Kontroller)

6 Arkaplan rengini değiştirme
Formun arkaplan rengini değiştirmek için, onun BackColor özelliğinin değiştirilmesi gerekir. Renkler sistem renkleri, web renkleri veya rastgele bir renk olabilir. Sistem renkleri, işletim sistemi tarafından belirlenir. Örneğin, Renk körü olan bazı insanlar, nesneleri daha iyi tanıyabilmek için, zıt renklerin kullanılmasını tercih ederler.

7

8 Arka plana bir resim eklemek
Forma bir resim eklemek için, formun BackgroundImage özelliği ayarlanır. Aşağıdaki talimatlar takip edilerek forma bir resim eklenir: Formun Size özelliği 400,300 olarak değiştirilir. Properties penceresindeki BackgroundImage özelliğine tıklanır . Build butonuna tıklayarak sıradaki ayarlamaya gidilir. Select Resource dialog kutusu gözükür. Local Resource butonuna tıklanır Import tıklanır; bir resim dosyası seçilierek OK butonuna basılır.

9 Select Resource Dialog Kutusu

10 Form with a Background Image

11 Arkaplan Resmi Özellikleri
Properties penceresinde BacgroungImage özelliğinin kenarındaki artı işareti tıklanarak, arkaplan resmi hakkındaki bazı bilgiler listelenir.

12 Arkaplan resmi hakkında
Arkaplan resmi gerekli olmadıkça kullanılmamalı. Çünkü arkaplan resimleri programın çalışmasını yavaşlatır. Arkaplan resmini silmek için, bu özelliğin ismine sağ tıklayarak Reset komutu veya Properties penceresindeki resmin ismi seçilip Delete tuşuna basmak kullanılır.

13 Form İkonu Bir forma atanan ikon aşağıdaki yerlerde gözükür.
Formun sol tarafında bulunan küçük barda, Form küçültüldüğünde görev çubuğunda, Ve başka bir uygulamaya geçmek için Alt+Tab tuşuna basıldığında çıkan çubuktaki ikon listesinde İkon genelde uygulamayı temsil eder, bu yüzden herhangi bir forma bir ikon atanmalıdır. Eğer bir forma bir ikon atanmaz ise, Visual C# form için varsayılan bir ikon belirler. Varsayılan ikon, genel , çirkin ve gerçekte hiçbir şeyi temsil etmez. Bu yüzden değiştirmeniz önerilir.

14 Bir forma bir ikon belirleme
BackgroundImage özelliğinin değiştirilmesine benzer bir şekilde bir forma bir ikon ayarlanabilir. Properties penceresinde bulunan formun Icon özelliğine tıklayıp, daha sonra Build butonuna tıklayarak, bilgisayarınızdaki bir ikon dosyası seçilip, form için yeni bir ikon belirlenebilir.

15 Küçültme, Büyütme, ve kapama butonları

16 Küçültme, Büyütme, ve kapama butonlarını gizli saklamak
Küçültme butonunu saklamak için, MinimizeBox özelliği false olarak ayarlanır. Büyütme butonunu saklamak için, MaximizeBox özelliği false olarak ayarlanır. Kapama butonunu saklamak için, ControlBox özelliği false olarak ayarlanır. Bu ayarlama yapıldığında, küçültme ve büyütme butonları otomatik olarak saklanır.

17 Sınırları değiştirme Bir formun sınırlarının görünümü ve hareketleri onun FormBorderStyle özelliği ile kontrol edilir. Sizable: Varsayılan sınır stilidir. Formun boyutu köşelerinden sürükleyerek değiştirilebilir. None: Görünür bir sınır yoktur. Reklam amaçlı kullanılan açılıp kapanan ekranlar için kullanılır. FixedToolWindow: Daha küçük başlık barı ile daha küçük yazılar olur. Küçültme ve büyütme butonları olmaz.

18 Minimum ve Maximum Boyutlar
Bir formun olabilecek minimum ve maksimum boyutları, MinimumSize ve MaximumSize özellikleri ile ayarlanır. Genelde bu özellikler pek kullanılmaz. Ancak bazen kullanışlı olabilir. Eğer form üzerinde küçültme butonu var ise, özel bir MinimumSize boyutu ayarlamak kullanıcının formu küçültmesini engellemez.

19 Formların görünürlüğü
KontrolForm adında bir form oluşturuldu ama bu formu çalışma zamanında görmüyoruz! Formu görebilmek için bazı kodlar yazmak gerekmektedir. KontrolForm bir sınıf olduğu için, bu sınıftan bir nesne örneği almak gerekir. Genel Yazımı: {formclassname} {objectname} = new {formclassname}();

20 Formların görünürlüğü(devam)
KontrolForm tipinde yeni bir form örneklemek için aşağıdaki kod bloğu yazılır: KontrolForm frm = new KontrolForm (); Formu göstermek için aşağıdaki kod bloğu yazılır: frm.Show(); Note: Visible özelliği true olarak ayarlanarak da formun görünürlüğü aktif hale getirilebilir: frm.Visible = true;

21 Egzersiz ResimGösterici formuna texti Kontroller ve ismi btnKontroller olan yeni bir buton ekleyiniz. btnKontroller kontrolonün Click olayı içerisine aşağıdaki kod bloğunu yazın. KontrollerForm frmKontrollerDialog = new KontrollerForm(); frmKontrollerDialog.Show();

22 Form Modality Yukardaki egzersizde, yeni bir Kontroller dialog kutusu yaratıldı. Ve bu dialog, kutusu ResimGösterici formunun içindeki Kontroller butonuna her basıldığında gözükür. Bunun sebebi Kontroller dialog kutusunun bir non-modal (modal olmayan) pencere olmasıdır. Word içerisindeki ara ve bul pencereleri non-modal pencerelere örnektir.

23 Modal and Non-Modal Pencereler
non-modal bir pencere açıldığında, diğer pencereler kaybolmaz ve bu pencereler kullanılabilir. Diğer yandan, bir form modal olarak gösterildiğinde, aynı uygulama içerisindeki diğer bütün formlar deaktif olur ve modal olarak açılan form kapatılana kadar kullanılamaz. Diğer formlar herhangi bir fare ya da klavye girişini kabul etmez. Kullanıcı sadece modal formda açılan form üzerinde işlem yapmak zorundadır. Modal olarak açılan form kapatıldığında, kullanıcı geriye kalan görünür pencereler üzerinde çalışabilir.

24 Modal Formları Modal formları genellikle dialog kutuları yaratmak için kullanılır. Bu dialog kutuları içerisinde, kullanıcı, özel olarak belirlenmiş veri veya kontrol kümeleri üzerinde çalışır. MS Word içerisindeki Yazdır dialog kutusu, modal dialog kutusuna örnektir. Yazdır dialog kutusu açıldığında, kullanıcı Word ana penceresindeki dökümanı üzerinde Yazdır dialog kutusu kapatılana dek hiçbir işlem yapamaz.

25 Modal veya Modeless(Non-modal)?
Eğer bir form Show() methodu ile görüntüleniyorsa, bu form non-modal (veya modeless) form olarak açılmıştır. Eğer bir form modal formda açılmak isteniyorsa, bu form ShowDialog() methodu kullanılarak görüntüleniyor olması gerekir. KontrollerForm frmKontrollerDialog = new KontrollerForm(); frmKontrollerDialog.ShowDialog();

26 Bir formun ilk görüntülenme pozisyonu
Bir formun monitör üzerindeki ilk görüntülenecek yeri rastgele değildir. Bu özellik formun StartPosition özelliği ile ayarlanır. Manual: Location özelliği kullanılır. CenterScreen: Form ekranın ortasında gözükür. WindowsDefaultLocation: Formun görüntülenecek yeri İşletim sistemi tarafından belirlenir. WindowsDefaultBounds: : Formun görüntülenecek yeri ve boyutları İşletim sistemi tarafından belirlenir. CenterParent: Formun yeri, daha önce açılan formun ortası olacak şekilde belirlenir

27 Form’un durumu Bir formu küçültmek veya büyütmek için isteyebilirsiniz. Küçültmek, büyütmek veya normal boyutlarda görmek formun durumunu ifade eder ve bu özellik WindowState özelliği ile belirlenir: Normal Minimized Maximized

28 Bir form’un görev çubuğunda gözükmesini engellemek
Bir formun görev çubuğunda gözükmesi istenmediği taktirde, formun ShowInTaskbar özelliği False yapılır. ShowInTaskbar özelliği False olan bir form küçültüldüğünde, görev çubuğu aracılığı ile programa erişilmese bile, Alt+Tab tuşlarına basarak kullanıcı programa erişebilir. Visual C#, uygulamaların, kullanıcılar tarafından tamamen erişilmeme durumunun oluşmasına izin vermez.

29 Hide() ve Close() Eğer form Hide() methodu kullanarak gizlenirse, bu form kapatılana kadar veya kaynaklarının serbest bırakılmasına kadar hafızada yer alır ve kod olarak çalışır. Eğer bir formun Close() methodu kullanılırsa, bu form tamamen kapanır ve hafızada yer almaz. Kullandığı kaynaklar serbest kalır.

30 Egzersiz KontrollerForm üzerine Tamam adında bir buton ekleyin ve bu butonun Click olayına aşağıdaki kodu yazın: this.Hide(); Programı çalıştırın. Kodu aşağıdaki şekilde değiştirin this.Close(); Farkı gördünüz mü?

31 Kırılma Çizgileri Form üzerindeki bir kontrol, form üzerindeki başka bir kontrole dikey ya da yatay olarak hizalanacak şekilde taşınırsa, bir kırılma çizgisi gözükür. Ve kontroller bu çizgi üzerinde hizalanır. Visual Studio’nun bu özelliğini form üzerinde bulunan kontrolleri hizalamak için kullanabilirsiniz.

32 Kırılma Çizgileri örnek

33 Kontrolleri grup olarak seçmek
Form üzerindeki kontrolleri grup olarak seçmek için dizayn modunda aşağıdakileri yapabilirsiniz: Form üzerinde bir boşluğu seçip, seçmek istenilen kontroller üzerine sürüklenerek bir dikdörtgen oluşturulur. Ctrl tuşuna basılı tutarak bir veya birden fazla kontrol seçilir. Eğer form üzerindeki bütün kontroller seçilmek isteniliyorsa, form seçiliyken Ctrl+A tuşlarına basmak yeterlidir Birden fazla kontrol seçiliyken, Properties penceresi üzerindeki özelliklerin değiştirilmesi, seçilen bütün kontrollerin özelliklerinin değişmesine neden olur.

34 Mouse sürükleyerek seçmek

35 Hizalama Kontrolleri Bir form üzerindeki kontroller hizalanmak istenirse, Layout araç çubuğu kullanılır.(örnek:Bütün kontrollerin aynı dikey hizada olması) Eğer Layout araç çubuğu görünmüyorsa, Bunu görünür hale getirmek için View menüsünün altındaki Toolbars sekmesinden Layout sekmesi aktif hale getirilmelidir.

36 Layout Araç Çubuğu Layout araç çubuğu kullanılarak aşağıdaki işlemler yapılabilir: Seçilen kontroller sağa, sola veya ortaya hizalanabilir. Seçilen kontroller aşağıya , yukarıya veya ortaya hizalanabilir. Seçilen kontrollere aynı en ve boy değerleri atanabilir. Seçilen kontroller arasındaki boşluklar dikey veya yatay olarak ayarlanabilir Seçilen kontroller ileriye veya geriye götürülebilir. Kontroller için Tab sırası ayarlanabilir.

37 Anchoring and Autosizing Controls
Bütün yeni kontrollerin varsayılan özelliği, kendi yapıcılarının sol ve en üst köşesinde konumlanmasıdır. Bir kontrolün daima formun sağ üst köşesinde veya sol alt köşesinde olması istenirse? Bunu kontrollerin Anchor özelliğini kullanarak sağlayabilirsiniz.

38 Formu yeniden boyutlandırdığınızda, kontroller aynı pozisyonda kalır.

39 Anchor Eğer bir kontrolün Anchor özelliği Top veya Left ise, yeniden boyutlandırma sırasında, kontrollerin sol ve üst köşeleri arasındaki mesafe değişmeyecektir.

40 Anchor Egzersizi Butonların ve labellerin Anchor özelliği Top, Right olarak yapın. Yeniden boyutlandırma sırasında bu kontroller, formun sağ ve üst hizasında kalacaktır.

41 Anchor Egzersizi(devamı)
Resim kutusunu seçip, bu resim kutusunun bütün anchor noktalarını seçin. Formu büyüttüğünüz zaman, aynı oranda resim kutusunun büyüdüğünü de göreceksiniz.

42 Tab sırası yaratmak(Tab Order)
Bir form üzerinde Tab tuşuna basıldığında, yeni seçilecek olan kontrol Tab sırası(Tab Order) özelliğine göre seçilir Formları klavye üzerinden kontrol etmeye yardımcı olur. Bir formun üzerindeki Kontrollerin Tab sırası, kontrollerin TabIndex özelliği aracılığı ile ayarlanır.

43 TabIndex TabIndex değeri 0 olan kontrol, form görüldüğünde imlecin odaklanacağı ilk kontroldür. Bundan sonra Tab tuşuna basıldığında, imlec TabIndex değeri 1 olan kontrol üzerinde odaklanır. Her kontrol tek bir TabIndex değerine sahiptir ve TabIndex değerleri her zaman artan bir şekilde devam eder.

44 Tab sırasını değiştirmek
Layout araç çubuğu üzerindeki son buton Tab Order butonudur. Buna tıkladığınız zaman, kontrollerin üzerinde bir takım numaralar gözükür. Bu sayılar, bu kontrollerin TabIndex özelliğidir. İstenilen sıraya göre bu kontrollere tıklanır. Sıranın ve sayıların renklerinin değiştiğini görürsünüz. Tab sırası ayarlandıktan sonra Tab Order butonuna tekrar basarak tab sırası modu kapatılır.

45 Tab Order Mode

46 TabStop özelliği Bir kontrolü tab sırasından silmek, bu kontrolün TabStop özelliğini False yapmaktır. Bir kontrolün TabStop özelliği False olarak ayarlandığında, kullanıcılar bu kontrolleri fare kullanarak seçebilir. Ancak Tab tuşunu kullanarak erişemez.

47 Kontrolleri Katmanlama
Nadiren, bazı kontroller üst üste gelebilir. İki kontrol üst üste gelirse, sonradan eklenen kontrol daha önceden eklenen kontrolün üst kısmında gözükür. Bu kontrollerin gözükme sırasını, Layout araç çubuğunun sağ tarafında bulunan Bring to Front or Send to Back butonlar aracılığı ile kontrol edilebilir. (Aynı zamanda kontroller üzerine sağ tıklayarak da bu komutlara erişim sağlanabilir.)

48 Topmost Modal Pencereler yaratmak
Ara ve Bul penceresi Word içerisindeki diğer bütün pencerelerin üzerinde bulunur. Bu şekilde bir pencere TopMost özelliğini true yaparak yaratılabilir.

49 Şeffaf Formlar Üretmek
Kontrollerin Opacity özelliği formun ve üzerindeki kontrollerin solukluğunu ayarlamak için kullanılır. Varsayılan Opacity değeri 100%’dür. Bunun anlamı form ve bu formun kontrolleri tamamen mattır(opak). Eğer bu değer 0% olursa bu form ve üzerindeki kontroller tamamen görünmez(şeffaf) olur. 50% lik bir Opacity değeri, şeffaf ve opak arasında bir form üretilmesine neden olur.

50 50% Opaklık

51 Transparent Form Example
Microsoft Outlook 2003 ve üst versiyonları, yeni bir mail geldiğinde kullanıcıyı şeffaflığı güzel ayarlanmış bir bildirimle uyarır. Bu uyarıların Opacity değeri 0 ile 100 arasında değişir, ilk başda 100% lük bir değere sahipken zaman geçtikçe bu opaklık değeri 0% a yaklaşır ve görünmez olur.

52 Kaydırılabilir formlar yaratmak
Bir formun kaydırılabilme özelliği aşağıdaki belirlenen 3 özellik ile belirlenir: AutoScroll: Eklediğimiz kontrolün form penceresine sığmaması durumunda scrollbar eklenme durumunu belirtir. true seçeilirse eklenir. AutoScrollMinSize: kaydırma alanının boyutunun minimum değeri belirlenir. Eğer formun boyutu belirlenen AutoScrollMinSize değerinden küçükse, scrollbar gözükür. AutoScrollMargin: Auto scroll true yapılmışsa yandakinin yüksekliğini alttakinin genişliğini integer değer alarak belirtir. değer girilmezse kontrollerin bittiği yere kadar kayma sağlar.

53 MDI Formları Şu ana kadar geliştirilen bütün projeler single document interface (SDI) projeleriydi. SDI programlarında, uygulamadaki bütün formlar, diğer formların emsali niteliğindedir; Bu formlar arasında gerçek bir hiyerarşi yoktur. Bir multiple document interface (MDI) programı tek bir ata pencere (container olarak bilinir) ve onun bir veya birden fazla çocuk penceresini içerir.

54 MDI Form Örneği Klasik bir MDI programı olarak Adobe Photoshop örnek verilebilir. Photoshop çalıştırıldığında, tek bir ana pencere gözükür. Bu ana pencereyi kullanarak, istenilen sayıda doküman veya pencere açılabilir. Bir MDI programında, sonradan açılan bütün pencereler, ana pencere üzerinde bulunan aynı araç çubuğu ve menü çubuğunu kullanır.

55 Adobe Photoshop

56 MDI formları yaratmak Yeni bir proje açılarak formun IsMdiContainer özelliği değiştirilerek true yapılır. Bu projeye başka bir form daha eklenir.(Child1Form) MDIParentForm’un load olayına aşağıdaki kod bloğu yazılır. Child1Form objChild = new Child1Form(); objChild.MdiParent = this; objChild.Show();

57 MDI formları yaratmak(devamı)
(Child2Form) adında yeni bir form daha eklenir. Child1Form üzerine yeni bir buton eklenir ve aşağıdaki kod bloğu bu butonun Click olayına yazılır: Child2Form objChild = new Child2Form(); objChild.MdiParent = this.MdiParent; objChild.Show(); Program çalıştırılır.

58 MDI Form Uygulaması

59 MDI Formları hakkında Eğer MDI formları sizin kafanızı karıştırdıysa, endişe etmeyin. Visual C# kullanılarak yazacağınız çoğu program SDI programları olacak. Visual C# projelerini geliştirdikçe ve alışmaya başlayınca, MDI projelerini deneyim etmeye başlayabilirsiniz. Eğer yaratacağınız projenin gereklilikleri sizi MDI programı yazmaya mecbur etmiyorsa, programınızı MDI olarak yazmanıza gerek yoktur.