İzlenecek yol: C# veya Visual Basic ile Visual Studio IDE'yi Tanıma

Bu yolunu izleyerek, Visual Studio ile uygulama geliştirirken kullanabileceğiniz araçlar, iletişim kutuları ve tasarımcıların çoğuna tanıdık olacaksınız.Tümleşik geliştirme ortamında (IDE) çalışma hakkında daha fazla bilgi edinirken basit bir "Merhaba Dünya"-stili uygulama oluşturacaksınız, UI tasarlayacaksınız, kod ekleyeceksiniz ve hataları ayıklayacaksınız.

Bu konu aşağıdaki bölümleri içerir:

IDE yapılandırmak

Basit bir uygulama oluşturma

Uygulamadan hata ayıklayın ve test edin

[!NOT]

Bu gidiş yolu, Visual Studio 2012 Professional Edition üstüne temellenmiştir.Visual Studio'nuzun kopyası, kullanıcı arabirimi öğelerinden bazıları için farklı adlar veya konumlar gösterebilir.Bu öğeleri bilgisayarınızdaki Visual Studio sürümü ve kullandığınız ayarlar belirler.Ayarlar hakkında daha fazla bilgi için bkz. Visual Studio ayarları.

IDE yapılandırmak

Visual Studio ilk kez başlattığınızda, bir dizi önceden tanımlanmış özelleştirmeleri IDE için geçerli ayarları birlikte seçmeniz gerekir.Her ayar birleşimi, uygulama geliştirmenizi kolaylaştırmak için tasarlanmıştır.

Şekil 1: Varsayılan Ortam Ayarları iletişim kutusunu seçin.

Bu gidiş yolu Genel Geliştirme Ayarları uygulanan, IDE'ye en az miktarda özelleştirmenin geçerli olduğu başvuru için yazılmıştır.Ayar bileşimlerinizi Ayarları İçe ve Dışa Aktarma Sihirbazı'nı kullanarak değiştirebilirsiniz.Daha fazla bilgi için bkz. Nasıl yapılır: Değiştir ayarları seçin.

Visual Studio açtıktan sonra araç pencereleri, menüleri, araç çubuklarını ve ana pencere alanını tanımlayabilirsiniz.Araç pencereleri uygulama penceresinin sağ ve sol kenarına Hızlı Başlat, menü çubuğu ve en üstte standart araç çubuğu ile tutturulmuştur.Uygulama penceresinin ortasındaki Başlangıç Sayfası'dır.Bir çözüm ya da proje yüklendiğinde, editörler ve tasarımcılar bu alanda görüntülenir.Bir uygulama geliştirdiğinizde, zamanınızın çoğunu, bu merkezi alanda geçireceksiniz.

Şekil 2: Visual Studio IDE

Visual Studio'ya yazı tipini ve düzenleyicideki metnin boyutunu veya IDE renk temasını değiştirme gibi, ek özelleştirmeler yapabilirsiniz, bunu Seçenekler iletişim kutusunu kullanarak yaparsınız.Uyguladığınız ayarlar birleşimine bağlı olarak, bu iletişim kutusundaki bazı öğeler otomatik olarak görünmeyebilir.Tüm olası seçeneklerin göründüğünden emin olmak için Tüm ayarları göster onay kutusunu seçmelisiniz.

Şekil 3: Seçenekler iletişim kutusu

Bu örnekte, IDE renk temasını açıktan koyuya değiştireceksiniz.

IDE'nin renk temasını değiştirmek için

1. Seçenekler iletişim kutusunu açın.

   

2. Burada Renk temasıKoyu'ya değiştirilir ve Tamam' basılır.

   

Visual Studio'daki renkler aşağıdaki resimle eşleşmesi gerekir:

Bu gidiş yolunun geri kalanında kullanılan renk temasını açık temadır.IDE özelleştirmesi hakkında daha fazla bilgi için bkz:Geliştirme Ortamını Özelleştirme.

Basit bir uygulama oluşturma

Projeyi oluşturun

Visual Studio'da bir uygulama oluşturduğunuzda, önce bir proje ve çözüm oluşturursunuz.Bu örnekte, Windows Presentation Foundation çözümü oluşturacaksınız.

WPF projesi oluşturmak için

1. Yeni bir proje oluşturma.Menü çubuğunda Dosya, Yeni, Proje'yi seçin.

   

   Ayrıca aynı şeyi yapmak için Hızlı Başlat kutusuna Yeni Proje de yazabilirsiniz.

   

2. Visual Basic veya Visual C# WPF uygulaması şablonu seçin ve sonra projeyi HelloWPFApp olarak adlandırın.

   

   VEYA

   

HelloWPFApp projesi ve çözümü oluşturulur ve Çözüm Gezgini'nin içinde farklı dosyaları görünür.WPF Tasarımcısı bölünmüş görünümde tasarım görünümü ve MainWindow.xaml'in XAML görünümünü gösterir.(Daha fazla bilgi için bkz. wpf Tasarımcısı Windows Forms geliştiriciler için).Aşağıdaki öğeler Çözüm Gezgini'nde görünür:

Şekil 5: Proje öğeleri

Projeyi oluşturduktan sonra özelleştirebilirsiniz.Özellikler penceresini kullanarak, proje öğeleri, denetimler ve bir uygulama içindeki diğer öğeler için ayarları görüntüleyebilir ve değiştirebilirsiniz.Proje özellikleri ve özellik sayfalarını kullanarak, projeler ve çözümler için ayarları görüntüleyebilir ve seçenekleri değiştirebilirsiniz.

MainWindow.xaml adını değiştirmek için

1. Aşağıdaki prosedürde, MainWindow'a daha özel bir isim vereceksiniz.Çözüm Gezgini'nde MainWindow.xaml'i seçin.Burada Özellikler penceresini, penceresi altındaki dosya için görmelisiniz.Eğer Özellikler penceresini görmüyorsanız, Çözüm Gezgini'nin içinde MainWindow.xaml'i seçin, kısayol menüsünü açın(sağ tıklama ile) ve Özellikler'i seçin.Burda Dosya adı özelliğini şöyle değiştirin: Greetings.xaml.

   

   Çözüm Gezgini şimdi dosyanın adını Greetings.xaml ve MainWindow.xaml.vb veya MainWindow.xaml.cs olanlar da artık Greetings.xaml.vb veya Greetings.xaml.cs olarak gösterir.

2. Çözüm Gezgini'nin içinde, Tasarımcısı görünümünde Greetings.xaml'i açın ve pencerenin başlık çubuğunu seçin.

3. Özellikler penceresinde, Başlık özelliğinin değerini şuna değiştirin: Greetings.

   Uyarı
   Bu değişiklik, hata ayıklamasını ve gidermesini daha sonra öğreneceğiniz bir hataya neden olur.

MainWindow.xaml'in başlık çubuğunu şimdi Greetings okunur.

Kullanıcı arabirimi (UI) tasarımı

Bu uygulama için üç tür denetim ekleyeceğiz: TextBlock denetimi, iki tane RadioButton denetimi ve bir Button denetimi.

TextBlock denetimi eklemek için

1. Araç Kutusu penceresini açın.Onu Tasarımcı penceresinin sol tarafında bulmalısınız.Ayrıca onu Görünüm menüsünden veya CTRL+ALT+X yazarak da açabilirsiniz.

2. Araç Kutusu'nun içinde TextBlock denetimini arayın.

   

3. Tasarım yüzeyine bir TextBlock denetimi ekleyin ve pencerenin en üstüne denetimi ortalayın.

Pencereniz aşağıdaki gösterime benzemelidir:

Şekil 7: TextBlock denetimi ile Greetings penceresi

XAML biçimlendirmesi aşağıdaki gibi görünmelidir:

<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" RenderTransformOrigin="4.08,2.312" Margin="237,57,221,238"><Run Text="TextBlock"/><InlineUIContainer><TextBlock TextWrapping="Wrap" Text="TextBlock"/>

Metin bloğu içindeki metni özelleştirmek için

1. XAML görünümünde biçimlendirmeyi için TextBlock'a yerleştirin ve Metin özniteliği değiştirin: Text=”Select a message option and then choose the Display button.”

2. Eğer TextBlock, Tasarım görünümünde uygun şekilde genişlemezse, TextBlock denetimini genişletin böylece tüm metin görüntülenecektir.

3. Değişikliklerinizi kaydedin.

Ardından, forma iki RadioButton denetim ekleyeceksiniz.

Radyo düğmeleri eklemek için

1. Araç Kutusu'nun içinde RadioButton denetimini arayın.

   

2. Tasarım yüzeyine iki tane RadioButton denetimi ekleyin ve TextBlock denetiminin altında yan yana görünecek şekilde taşıyın.

   Pencerenizi bunun gibi görünmelidir:

   Şekil 8: Greetings penceresinde RadioButtonları.

   

3. Özellikler penceresi içinde, sol taraftaki RadioButton denetimi için Ad özelliğini (özellik Özellikler penceresinin en üstündedir) RadioButton1'ne değiştirin.

4. Özellikler penceresi içinde, sağ taraftaki RadioButton denetimi için Ad özelliğini RadioButton2'ne değiştirin ve sonra değişikliklerinizi kaydedin.

Şimdi her RadioButton denetimi için görüntü metni ekleyebilirsiniz.Aşağıdaki prosedür bir RadioButton denetimi için İçerik özelliğini günceller.

Her radyo düğmesine görüntü metni eklemek için

1. Tasarım yüzeyinde, RadioButton1 için kısayol menüsünü açın, Metin düzenleme'yi seçin ve sonra Hello'yu yazın.

2. RadioButton2 için kısayol menüsünü açın Metin düzenleme'yi seçin ve Goodbye'ı yazın.

En son ekleyeceğiniz UI öğesi bir Düğme denetimidir.

Düğme denetimi eklemek için

1. Araç Kutusu'nun içinde, Düğme/Buton denetimini arayın ve ardından tasarım yüzeyine RadioButton denetimlerinin altına ekleyin.

2. XAML görünümünde İçerik değerini değiştirin, düğme denetiminden Content=”Button” olan özelliği Content=”Display”'e değiştirin ve sonra değişiklikleri kaydedin.

   Biçimlendirme aşağıdaki örneğe benzemelidir:<Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>

Pencereniz aşağıdaki gösterime benzemelidir.

Şekil 9: Son Greetings UI

Görüntü düğmesine kod ekleme

Bu uygulama çalıştırdığında, bir kullanıcı önce radyo düğmesini seçerse ve sonra Display/Görüntüle düğmesini seçerse bir ileti kutusu görünür.Bir ileti kutusu Hello/Merhaba için görünür ve başka biri de Güle Güle/Goodbye için görünür.Bu davranışı oluşturmak için Button_Click olayına Greetings.xaml.vb veya Greetings.xaml.cs için kod ekleyeceksiniz.

İleti kutusu görüntülemek için kod ekleme

1. Tasarım yüzeyinde, Display/Görüntüle düğmesine çift tıklatın.

   Greetings.xaml.vb veya Greetings.xaml.cs Button_Click olayı içinde imleç ile açılır.Click olay işleyicisini aşağıdaki gibi de ekleyebilirsiniz:

   Visual Basic için olay işleyicisi aşağıdaki gibi görünmelidir:

   Private Sub Button_Click_1(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

   Visual C# için olay işleyicisi aşağıdaki gibi görünmelidir:

   private void Button_Click_1(object sender, RoutedEventArgs e)
   {
   
   }
   

2. Visual Basic için şu kodu girin:

   If RadioButton1.IsChecked = True Then
       MessageBox.Show("Hello.")
   Else RadioButton2.IsChecked = True
       MessageBox.Show("Goodbye.")
   End If
   

   Visual C# için şu kodu girin:

   if (RadioButton1.IsChecked == true)
   {
       MessageBox.Show("Hello.");
   }
   else
   {
       RadioButton2.IsChecked = true;
       MessageBox.Show("Goodbye.");
   }
   

3. Uygulamayı kaydedin.

Uygulamadan hata ayıklayın ve test edin

Ardından, hatalara bakmak için uygulamadan hata ayıklayacaksınız ve her iki ileti kutusunun da doğru görünmesi için test edeceksiniz.Daha fazla bilgi için, bkz. WPF Uygulaması Oluşturma (WPF) ve wpf hata ayıklama.

Hata bulma ve hataları düzeltme

Bu adımda, daha önce XAML dosyası ana penceresinin adını değiştirerek sebep olduğumuz hatayı bulacaksınız.

Hata ayıklamayı başlatma ve hata bulma

1. Hata Ayıklayıcı'yı Debug/Hata Ayıklayıcı'yı ve sonra Hata Ayıklamaya Başla'yı seçerek başlatın.

   

   Bir IOException oluştuğunu gösteren bir iletişim kutusu görünür: 'mainwindow.xaml' kaynağı bulunamıyor.

2. Tamam düğmesini tıklatın ve sonra hata ayıklayıcıyı durdurun.

   

Bu gidiş yolunun başında Mainwindow.xaml adını Greetings.xaml olarak yeniden adlandırdık ancak proje uygulama için başlangıç URI'sini hala Mainwindow.xaml olarak işaret etmektedir, yani proje başlayamaz.

Greetings.xaml URI'yi başlangıç olarak belirtmek için

1. Çözüm Gezgini'nde, App.xaml dosyasını (C# projesi içinde) veya Application.xaml dosyasını (Visual Basic projesi içinde) açın, (Tasarım görünümünde bu açılamaz) XAML görünümünde açın.

2. Burada StartupUri="MainWindow.xaml" olan yeri StartupUri="Greetings.xaml"'e değiştirin ve sonra değişiklikleri kaydedin.

Hata ayıklayıcıyı yeniden başlatın.Uygulamanın Greetings penceresini görmelisiniz.

Kesme noktaları ile hata ayıklamak için

Bazı kesme noktaları ekleyerek, hata ayıklama sırasında kod sınayabilirsiniz.Kesme noktalarını Hata Ayıklama'yı seçerek, menü çubuğunda Kesme Noktalarını Değiştir veya kesmenin istediğiniz yere, düzenleyici/editör içinde kod satırının sol kenar boşluğu yanındaki çizgiye tıklatarak ekleyebilirsiniz.

Kesme noktaları eklemek için

1. Greetings.xaml.vb veya Greetings.xaml.cs açın ve aşağıdaki satırı seçin:MessageBox.Show("Hello.")

2. Menüden Hata Ayıklama'yı sonra Kesme Noktasını Değiştir'i seçerek bir kesme noktası ekleyin.

   

   Düzenleyici penceresinin sol kenar boşluğunda kod satırının yanında kırmızı bir daire görünür.

3. Aşağıdaki satırı seçin: MessageBox.Show("Goodbye.").

4. Bir kesme noktası eklemek için F9 tuşuna basın ve sonra hata ayıklama başlatmak için F5 tuşuna basın.

5. Greetings penceresinde, Merhaba radyo düğmesini seçin ve ardından Display düğmesini seçin.

   MessageBox.Show("Hello.") satırı sarı renkle vurgulandı.IDE'nin ortasında, Autos, Locals ve Watch pencereleri birlikte sol tarafa yerleşir ve Call Stack, Breakpoints, Command, Immediate ve Output pencereleri birlikte sağ tarafta yerleşir.

6. Menü çubuğunda Debug/Hata Ayıkla'yı Step Out/Dışarı Adım'u seçin.

   Uygulama yürütmeyi devam ettirir ve "Merhaba" sözcüğünü içeren bir ileti kutusu görünür.

7. Bu ileti kutusunu kapatmak için Tamam düğmesini seçin.

8. Greetings penceresinde, Goodbye/Güle Güle radyo düğmesini seçin ve ardından Display düğmesini seçin.

   MessageBox.Show("Goodbye.") satırı sarı renkle vurgulandı.

9. Hata ayıklamaya devam etmek için F5 tuşunu seçin.İleti kutusu görüntülendiğinde, kapatmak için ileti kutusundaki Tamam düğmesini tıklayın.

10. Hata ayıklamayı durdurmak için ÜstKrkt + F5 tuşlarına basın.

11. Menü çubuğunda Hata Ayıklama, Tüm Kesme Noktaları Devre Dışı'nı seçin.

Bir uygulamanın yayın sürümünü oluşturma

Şu an her şeyin çalışır olduğu doğrulandı, uygulamanın bir yayın sürümü yapısını hazırlayabilirsiniz.

Çözüm dosyalarını temizlemek ve bir yayım sürümü yapılandırmak için

1. Derleme'yi, sonra ara dosya ve önceki derlemeler sırasında oluşturulan çıktı dosyaları silmek için Çözümü Temizle seçin.

   

2. HelloWPFApp derleme yapılandırmasını Hata Ayıklama dan Yayımlama'ya değiştirin.

   

3. Çözümü oluşturun.

   

Bu çözüm yolunu tamamladınız, tebrikler!Daha fazla örnek araştırmak istiyorsanız, bkz: Visual Studio Örnekleri.

Ayrıca bkz.

Kavramlar

Visual Studio 2012'daki Yenilikler

Visual Studio'ya Başlarken

Visual Studio için Üretkenlik İpuçları