BTP206– Görsel Programlama II

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

1 BTP206– Görsel Programlama II
Giriş

2 İçerik Ders Hakkında Bilgi Visual Studio 2012
Basit Bir Görsel C# Programı Hazırlamak

3 Ders Bilgisi

4 Ders Hakkında Öğretim Elemanı: Sevcan Yılmaz Ofis Telefonu: 6574
Adresi: Web Sayfası: Dersin Asistanı: Emre Yalçın Dersin Web Sayfası: Ders Saatleri: 09:00-13:00, Cuma Ön Koşullar: - C / C++ / Java / C# Programming - Object Oriented Programming Kitaplar: Teach Yourself Visual C# 2008 in 24 Hours, James Foxall, Sams Publishing, 2008. Beginning Microsoft Visual C# 2012, Karli Watson, Christian Nagel et al., Wiley Publishing, 2012. Illustrated C# 2012, Daniel Solis, Apress, 2012.

5 Ders İçerikleri Hafta 1 Visual Studio Ultimate 2013 IDE, Windows Form Projesi oluşturma Hafta 2 Nesne ve koleksiyonlar, olaylar Hafta 3 Form oluşturma: Basit ve ileri teknikler Hafta 4 Geleneksel kontroller: Labels, Text Boxes, Buttons Check Boxes, List Boxes, Combo Boxes; Using Advanced Controls: Timers, Tabbed Dialog Boxes, Image Lists, List View, Tree View Hafta 5 Menus, Toolbars, Status Bar, metot oluşturma ve çağırma Hafta 6 Veri Tipleri, Sabitler, Değişkenler, Diziler, Aritmetik Operasyonlar, Tarih/Zaman Ayarları Hafta 7 Karar verme (if-else), Döngüler Hafta 8-9 Arasınav

6 Ders İçerikleri Hafta 10 Hata Ayıklama, Sınıfları kullanarak nesne tasarlama Hafta 11 Kullanıcı ile etkileşim (arayüzler) Hafta 12 Dosya İşlemleri Hafta 13 Database Uygulamaları Hafta 14 Hafta 15 Final Sınavı

7 Notlandırma Arasınav: %30, Ödev: %20, Final: %50.
Çan eğrisi uygulanacaktır.

8 Yazılım İhtiyaçları Bu ders kapsamında, Visual Studio 2013 IDE yazılımına ihtiyacınız olacaktır. Visual Studio Express 2013 IDE internet üzerinden ücretsiz edinilebilir.

9 Yeni Bir Proje Oluşturma

10

11

12

13

14 İLK DEĞİŞİKLİKLER Name(İsim) Özelliği, Projenize yeni bir nesne eklediğiniz zaman değiştirmeniz gereken ilk özelliktir. Aynı zamanda Solution Explorer üzerinden form’un filename(dosya ismi) özelliği de değiştirilir. Not: filename’yi değiştirdiğiniz zaman, Visual Studio size formun ismini değiştirip değiştirmek istemediğinizi sorar.

15

16 Form’un (Başlık)Title’ni değiştirmek
Form’un filename ve name özelliklerini değiştirmek, Form’un sol üst köşesinde görünen başlığını değiştirmez. Text özelliğini kullanarak, formun başlığını değiştirmeniz gerekmektedir.

17

18 Form’a icon(ikon) eklemek
Properties penceresinden, form’un Icon özelliği değiştirilmeli Form’un boyutlarını değiştirmek Size özelliği altındaki Width ve Height özellikleri değiştirilmeli. Her iki değişken de piksellerle ifade edilir Aynı zamanda form’un köşelerinden tutup sürükleyerek boyut belirlenebilir.

19 Form’a Controls (Kontroller) eklemek
Toolbox penceresi kullanılır . Toolbox içerisindeki bazı kontroller görünür arayüze sahipken bazıları değildir. Resimde görülen pim’e tıklayarak toolbox penceresi her zaman görünür hale getirilebilir.

20 Interface(Arayüz) dizayn etmek
Form’un kullanıcı arayüzü dizayn edilir. Bu arayüzün arkasında kod yazılır. Bu prosedür genelde, bir form dizayn etmenin en iyi yoludur.

21 Form’a görünür Control(kontrol) eklemek
Görünür kontroller iki şekilde eklenebilir. Kontrole çift tıklayarak Kontrolü sürükleyip form üzerine bırakmak Kontroller, tutup sürüklenerek form üzerinde istenilen yere taşınabilir. Form’a iki button(buton) ve bir PictureBox(Resim Kutusu) kontrolü ekleyelim:

22 Property Value Name btnResimSec Location 295, 10 Size 85, 23 Text Resim Seç Property Value Name btnCikis Location 295, 40 Text Çıkış Property Value Name picResimKutusu BorderStyle FixedSingle Location 8, 8 Size 282, 275

23 Form’a Görünür olmayan kontrol eklemek
Bütün kontroller fiziksel bir görünüme sahip değildir. Bu kontroller kullanıcı etkileşimi için dizayn edilmemiştir. Örnekler: OpenFileDialog and SaveFileDialog kontrolleri Görünür kontrollerin eklenmesine benzer bir şekilde bu kontroller eklenebilir. Bunlar formun alt kısmında gözükür. Ancak çalışma zamanında gözükmez.

24 OpenFileDialog Kontrolü eklemek
Form’a bir OpenFileDialog eklenip aşağıdaki özelliklerin değiştirilmesi: Property Value Name ofdResimSec Filename <Boş bırak> Filter Windows Bitmaps|*.BMP|JPEG Files|*.JPG Title Bir resim seçiniz...

25

26 Programın çalıştırılması
Basit olarak Ctrl+F5 tuşlarına basmak Program normal olarak çalışır F5 tuşuna basarak veya toolbar kısmında bulunan debug butonuna basarak Ancak bu, programı debug modunda çalıştırır ve bu biraz daha yavaştır. Şu an butonlara basmak herhangi bir şey yapmıyor. Çünkü biz bu form için herhangi bir kod yazmadık !

27 Arayüzün arkasında Kod yazmak
Visual C# event-driven (olay güdümlü) bir programlama dilidir. Bu olaylar kullanıcılardan gelebilir. Örneğin: Kullanıcının bir butona tıklaması ve tetiklemesi Bu tetikleme işlemi, kullanıcının bir butone tıklaması şeklinde veya Windows’un kendisinden gelebilir.

28 Kullanıcının bir dosyayı keşfetmesi
Design(Dizayn) görünümünde form üzerindeki bir kontrole çift tıkladığınız zaman, bu kontrol için tanımlanmış varsayılan olay, kod penceresinde gözükür. Bir buton kontrolü için varsayılan olay, onun Click olayıdır. Select Picture butonuna çift tıklanarak kod penceresi içinde onun Click olayına erişilir.

29

30 Metod’un içeriği private void btnResimSec_Click(object sender, EventArgs e){ // open file dialog kutusunu gösterir . if (ofdResimSec.ShowDialog() == System.Windows.Forms.DialogResult.OK) { // picture box içerisine resim yüklemek. picResimKutusu.Image = Image.FromFile(ofdResimSec.FileName); // Formun başlığının içindeki dosyanın ismini gösterir. this.Text = "Resim Gösterici (" + ofdResimSec.FileName + ")"; }

31 Bir programı kod yazarak bitirmek
Aşağıdaki kod bloğu Çıkış butonunun Click olayı içerisine yazılır: // Pencereyi kapat ve uygulamadan çık this.Close();

32

33 Programın Uygulanışı

34 Alıştırmalar Picture Viewer Programınızı, kullanıcının GIF dosyalarını seçip ve yerini belirleyecek şekilde değiştirin.(İpucu: OpenFileDialog kontrolünün Filter özelliğini değiştirin) Formun arka plan rengini değiştirin. Butonların arka planlarını değiştirin. Butonlar üzerindeki textlerin rengini değiştirin. Daha büyük bir resim görmek istediğinizde ne olur? Bu problem nasıl çözülür?