İzlenecek yol: Visual C# veya Visual Basic ile Basit Uygulama Oluşturma

Bu izlenecek yolu tamamlayarak, Visual Studio ile uygulamalar geliştirirken kullanabileceğiniz birçok araç, iletişim kutusu ve tasarımcı hakkında bilgi sahibi 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şturacak, kullanıcı arabirimini tasarlayacak, kod ekleyecek ve hataları ayıklayacaksınız.

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

IDE'yi yapılandırma

Basit bir uygulama oluşturma

Uygulamanın hatalarını ayıklama ve test etme

[!NOT]

Bu izlenecek yol, Visual Studio Prosessional sürümünü temel almaktadır ve bu sürüm, bu izlenecek yol için projeyi oluştururken temel olarak kullanacağınız WPF Uygulaması şablonunu sunar.Windows Masaüstü için Visual Studio Express sürümü de bu şablonu sağlar, ancak Windows için Visual Studio Express ve Web için Visual Studio Express sağlamaz.Visual Studio Express for Windows kullanma hakkında tanıtım bilgi için bkz: Windows mağazası uygulamaları için Geliştirici Merkezi.Web için Visual Studio Express'i kullanma hakkında tanıtım bilgi için bkz: Başlarken ASP.NET ile.Ayrıca, Visual Studio sürümünüz ve kullandığınız ayarlar, kullanıcı arabiriminin bazı öğelerinin adlarını ve bulundukları yerleri belirler.Bkz. Visual Studio'da Geliştirme Ayarlarını özelleştirme.

IDE'yi yapılandırma

Visual Studio ilk kez başlattığınızda, Visual Studio, bir Microsoft hizmeti hesabı (MSA oturum), oturum açmak için ister Visual Studio uygulamasına oturum.Oturum açın ve gerekmez, daha sonra yapın.

Visual Studio başlatma üzerinde daha önceden tanımlanmış özelleştirmeler kümesini IDE uygulanan ayarları birlikte seçmeniz gerekir.Her bir ayarlar bileşimi, uygulamaları geliştirmenizi kolaylaştırmak amacıyla tasarlanmıştır.

Bu kılavuz size uygulanan varsayalım genel geliştirme ayarları, IDE, en az özelleştirme uygular.Zaten C# veya Visual Basic (ikisi de iyi seçimler) seçtiyseniz, ayarlarınızı değiştirmek gerekmez.Ayarlarınızı değiştirmek istiyorsanız, kullanabileceğiniz alma ve Verme Ayarları Sihirbazı.Bkz. Visual Studio'da Geliştirme Ayarlarını özelleştirme.

Visual Studio'yu açtıktan sonra araç pencerelerini, menüleri ve araç çubuklarını ve ana pencere alanını tanıyabilirsiniz.Araç pencereleri, uygulama penceresinin sağ ve sol kenarlarında yerleşiktir; Hızlı Başlat, menü çubuğu ve standart araç çubuğu ise en üsttedir.Uygulama penceresinin ortasında Başlangıç Sayfası yer alır.Çözüm veya proje yüklediğinizde, Düzenleyicileri ve tasarımcıları alana görünür nerede başlangıç sayfası olur.Uygulama geliştirirken zamanınızın çoğunu bu orta alanda geçireceksiniz.

Şekil 2: Visual Studio IDE'si

Seçenekler iletişim kutusunu kullanarak Visual Studio'da ek özelleştirmeler (düzenleyicideki metinlerin yazı biçimini ve boyutunu değiştirme veya IDE'nin renk temasını değiştirme gibi) yapabilirsiniz.Uyguladığınız ayarlar bileşimine bağlı olarak, bu iletişim kutusundaki bazı öğeler otomatik olarak görünmeyebilir.Tüm ayarları göster onay kutusunu seçerek, tüm olası seçeneklerin göründüğünden emin olabilirsiniz.

Şekil 3: Seçenekler iletişim kutusu

Bu örnekte, IDE'nin renk temasını açıktan koyuya değiştireceksiniz.Önceden bir proje isterseniz oluşturmak için atlayabilirsiniz.

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

1. Açık seçenekleri iletişim kutusunu seçerek Araçları üst menüsünde ve ardından Seçenekler... öğesi.

   

2. Renk teması'nı Koyu olarak değiştirin ve ardından Tamam'a tıklayın.

   

Visual Studio'daki renkler aşağıdaki görüntüyle aynı olmalıdır:

Bu kılavuz geri kalanında resimler için kullanılan renk teması light tema öğesidir.IDE'yi özelleştirme hakkında daha fazla bilgi için bkz. Visual Studio'da Geliştirme Ayarlarını özelleştirme.

Basit bir uygulama oluşturma

Projeyi oluşturma

Visual Studio'da bir uygulama oluştururken önce bir proje ve bir çözüm oluşturursunuz.Bu örnek için bir Windows Presentation Foundation (WPF) projesi oluşturun.

WPF projesini oluşturmak için

1. Yeni bir proje oluşturun.Menü çubuğunda seçin dosya, yeni, proje....

   

   Aynı işi yapmak için Hızlı Başlat kutusuna "Yeni Proje" de yazabilirsiniz.

   

2. Sol bölmede seçerek Visual Basic veya Visual C# WPF uygulaması şablonunu seçin yüklü, şablonları, Visual C#, Windows, örneğin ve ardından Orta bölmede WPF uygulaması seçme.Yeni Proje iletişim kutusunun altındaki HelloWPFApp projeye bir ad verin.

   

   VEYA

   

Visual Studio HelloWPFApp proje ve çözüm, oluşturur ve Çözüm Gezgini çeşitli dosyaları gösterir.WPF Tasarımcısı bir tasarım ve MainWindow.xaml bir XAML görünümünde bölme görünümünde gösterilir.Daha az veya göstermek için ayırıcı slayt ya da görünümün.Yalnızca visual veya yalnızca XAML görünümünde görmeyi tercih edebilirsiniz.(Daha fazla bilgi için bkz. WPF Designer for Windows Forms Developers).Aşağıdaki öğeler Çözüm Gezgini içinde görünür:

Şekil 5: Proje öğeleri

Projeyi oluşturduktan sonra özelleştirebilirsiniz.Kullanarak özellikleri pencere (bulunan Görünüm menüsü), görüntüleyebilir ve proje öğeleri, denetimleri ve diğer öğeleri uygulamada seçeneklerini değiştirme.Proje özellikleri ve özellik sayfalarını kullanarak projelere ve çözümlere ilişkin seçenekleri görüntüleyebilir ve değiştirebilirsiniz.

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

1. Aşağıdaki yordamda MainWindow'a daha belirleyici bir ad vereceksiniz.Çözüm Gezgini'nde MainWindow.xaml'yi seçin.Görmeniz gerekir özellikleri , seçerseniz yoksa ancak penceresinde Görünüm menü ve özelliği pencere öğesi.Dosya Adı özelliğini Greetings.xaml olarak değiştirin.

   

   Çözüm Gezgini dosyanın adı Greetings.xaml sunulmuştur ve (odağı düğümde koymak ve sağ ok tuşuna basarak) MainWindow.xaml düğümünü genişletin, MainWindow.xaml.vb veya MainWindow.xaml.cs adıdır şimdi Greetings.xaml.vb veya Greetings.xaml.cs bakın gösterir.Bu kod dosyası birbirine ilişkili çok yakın oldukları göstermek için .xaml dosya düğümünde yer alıyor.

   Uyarı
   Bu değişiklik, ayıklamayı ve düzeltmeyi sonraki adımlarda öğreneceğiniz bir hataya neden olur.

2. İçindeki Çözüm Gezgini, (Greetings.xaml Designer görünümünde düğüm odaklanmış olduğu sürece Enter tuşuna basarak) açın ve fareyi kullanarak penceresinin başlık çubuğu seçin.

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

MainWindow.xaml için başlık çubuğunda artık Greetings ifadesi görünür.

Kullanıcı arabirimini (UI) tasarlama

Bu uygulamaya üç tür denetim ekleyeceğiz: TextBlock denetimi, iki RadioButton denetimi ve bir Button denetimi.

TextBlock denetimi eklemek için

1. Açık araç seçerek pencere Görünüm menü ve araç öğesi.

2. Araç Kutusu'nda TextBlock denetimini arayın.

   

3. Bir metin bloğu denetimi için tasarım yüzeyi metin bloğu öğesini seçerek ve bu tasarım yüzeyi üzerinde penceresine sürükleyerek ekleyin.Merkezi penceresinin üst denetimi.

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

Şekil 7: TextBlock denetimini içeren Greetings penceresi

XAML işaretlemesi 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 işaretleme için metin bloğu bulun ve metin özniteliği değiştirin:Text=”Select a message option and then choose the Display button.”

2. Metin bloğu içinde Tasarım görünümü uyacak şekilde genişletin değil, böylece tüm metni görüntüler (grab işleyiciler kenarlar kullanarak) metin bloğu denetim büyütün.

3. S Ctrl tuşuna basarak veya kullanarak yaptığınız değişiklikleri kaydedin dosya menü öğesi.

Ardından, forma iki RadioButton denetimi ekleyeceksiniz.

Radyo düğmeleri eklemek için

1. Araç Kutusu'nda RadioButton denetimini arayın.

   

2. İki RadioButtondenetimi tasarım yüzey RadioButton öğesini seçerek ve bunu penceresine tasarım yüzeyi üzerinde iki kez sürükleyerek ekleyin ve Taşı düğmeleri (bunları seçerek ve ok tuşlarını kullanarak) düğmeleri metin bloğu denetimi yan yana görüntülenir.

   Pencerenizin şuna benzemesi gerekir:

   Şekil 8: Greetings penceresinde RadioButton denetimleri.

   

3. Soldaki RadioButton denetimi için Özellikler penceresinde, Ad özelliğini (Özellikler penceresinin en üstündeki özellik) RadioButton1 olarak değiştirin.RadioButton ve arka plan kılavuz formunda seçtiğinizden emin olun; Ad alanı altında özellik penceresinin tür alanı RadioButton yazması gerekir.

4. İçindeki özellikleri doğru radyo düğmesi denetimi, değişikliği için pencere adı özelliğini RadioButton2ve s Ctrl tuşuna basarak veya kullanarak yaptığınız değişiklikleri kaydedin dosya menü öğesi.Değiştirme ve kaydetmeden önce RadioButton seçili emin olun.

Artık her bir RadioButton denetimi için görüntü metni ekleyebilirsiniz.Aşağıdaki yordam bir RadioButton denetimi için İçerik özelliğini güncelleştirir.

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

1. Tasarım yüzeyi üzerinde kısayol menüsünü RadioButton1 için sağ fare RadioButton1 seçerken düğmesini tıklatarak açın, seçin metnini düzenleve enter Hello.

2. Kısayol menüsünü sağ fare RadioButton2 seçerken düğmesini tıklatarak RadioButton2 için açmak, Seç metnini düzenleve enter Goodbye.

En son ekleyeceğiniz kullanıcı arabirimi öğesi bir Düğme denetimidir.

Düğme denetimini eklemek için

1. İçindeki araç, arama düğmesini denetlemek ve ardından RadioButtondenetimi altında tasarım yüzeyi düğmeyi seçerek ve Tasarım görünümünde forma sürükleyerek ekleyin.

2. XAML görünümünde değerini değiştirmek içerik düğmesi denetiminden için Content=”Button” için Content=”Display”ve değişiklikleri kaydedin (Ctrl-s veya kullanım dosya menüsü).

   İşaretleme şu ö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 Kullanıcı Arabirimi

Görüntüle Düğmesine kod ekleme

Bu uygulama çalışırken, kullanıcı önce bir radyo düğmesini seçip sonra Görüntüle düğmesini seçtiğinde bir ileti kutusu görünür.Merhaba için bir ileti kutusu ve Güle Güle için bir diğer ileti kutusu görünecektir.Bu davranışı oluşturmak için Greetings.xaml.vb veya Greetings.xaml.cs içinde Button_Click olayına kod ekleyeceksiniz.

İleti kutularını görüntülemek için kod ekleme

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

   Greetings.xaml.vb veya Greetings.xaml.cs açılır ve imleç Button_Click olayının içinde olur.(Büyük olasılıkla değil tasarım yüzeyi RadioButton denetimlere seçer ve bunları yeniden adlandır yapıştırılan kod herhangi bir adı altında bir kırmızı dalgalı varsa,) gibi bir tıklatma olay işleyicisi 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.

Uygulamanın hatalarını ayıklama ve test etme

Şimdi, hatalara bakmak için uygulamadan hata ayıklayacak ve her iki ileti kutusunun da doğru görünüp görünmediğini test edeceksiniz.Aşağıdaki yönergeler size nasıl oluşturun ve hata ayıklayıcısı başlatma, ancak daha sonra okuyabilir WPF Uygulaması Oluşturma (WPF) ve WPF'de Hata Ayıklama daha fazla bilgi için.

Hataları bulma ve 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şlatmak ve hatayı bulmak için

1. Hata Ayıkla'yı ve ardından Hata Ayıklamayı Başlat'ı seçerek hata ayıklayıcıyı başlatın.

   

   Bir ileti kutusu görüntülenerek IOException hatası oluştuğu belirtilir: 'mainwindow.xaml' kaynağının yeri belirlenemiyor.

2. Tamam düğmesini seçin ve ardından hata ayıklayıcıyı durdurun.

   

Biz Mainwindow.xaml Greetings.xaml bu kılavuz başlangıcında yeniden, ancak proje başlatamazsınız kod hala Mainwindow.xaml için uygulama başlatma URI olarak anlamına gelmektedir.

Başlangıç URI'si olarak Greetings.xaml öğesini belirtmek için

1. İçindeki Çözüm Gezgini, App.xaml (C# projesindeki) veya Application.xaml dosyasını (Visual Basic projesinde) (Bu açılamaz Tasarım görünümünde) XAML görünümünde dosya seçip Enter tuşuna basarak veya çift tıklatarak açın.

2. Değişikliği StartupUri="MainWindow.xaml" için StartupUri="Greetings.xaml"ve Ctrl-s ile değişiklikleri kaydedin.

Hata ayıklayıcısı yeniden (F5'e basın) başlatın.Uygulamanın Greetings penceresini görmeniz gerekir.

Kesme noktaları ile hata ayıklamak için

Birkaç kesme noktası ekleyerek, hata ayıklama sırasında kodu test edebilirsiniz.Kesme noktaları belirleyerek ekleyebilirsiniz hata ayıklama menüsünde ana sonra kesme veya olabilmesini sonu istediğiniz yeri sol kar Düzenleyicisi kod satırının yanında içinde tıklatarak.

Kesme noktaları eklemek için

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

2. Menüden Hata Ayıkla'yı ve ardından İki Durumlu Kesme Noktası'nı seçerek bir kesme noktası ekleyin.

   

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

3. Şu satırı seçin: MessageBox.Show("Goodbye.").

4. Bir kesme noktası eklemek için F9 tuşuna basın ve ardından hata ayıklamaya başlamak için F5 tuşuna basın.

5. Greetings penceresinde, Merhaba radyo düğmesini seçin ve ardından Görüntüle düğmesini seçin.

   MessageBox.Show("Hello.") satırı sarı renkle vurgulanır.IDE, otomatik değişkenler, Yereller ve izleme altındaki windows birlikte sol tarafta yerleştirilen ve çağrı yığını, kesme noktalarını, komut, hemen ve çıktı windows birlikte sağ tarafında yerleştirilen.

6. Menü çubuğunda Hata Ayıkla, Dışarı Adım'ı seçin.

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

7. İleti kutusunu kapatmak için Tamam düğmesini seçin.

8. Greetings penceresinde Güle Güle radyo düğmesini seçin ve ardından Görüntüle düğmesini seçin.

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

9. Hata ayıklamaya devam etmek için F5 tuşuna basın.İleti kutusu göründüğünde kapatmak için ileti kutusundaki Tamam düğmesini seçin.

10. SHIFT + F5'e basın (basın shift ilk ve F5'e basın, basılı tutarak sırasında) anahtarları hata ayıklama durdurmak için.

11. Menü çubuğunda Hata Ayıkla, Tüm Kesme Noktalarını Devre Dışı Bırak seçeneğini belirleyin.

Uygulamanın yayın sürümünü oluşturma

Her şeyin çalıştığını doğruladığınıza göre artık, uygulamanın bir yayın derlemesini hazırlayabilirsiniz.

Çözüm dosyalarını temizlemek ve yayın sürümünü oluşturmak için

1. Ana menüde seçin yapı, ardından temiz çözüm Ara dosya ve önceki yapılar sırasında oluşturulan Çıkış dosyalarını silmek için.Bu gerekli değildir, ancak hata ayıklama yapı çıktısı temizler.

   

2. HelloWPFApp için yapı yapılandırmasını değiştirmek hata ayıklama için sürüm (üzerinde Yazan "Hata ayıklama" şu anda) araç çubuğundaki açılır denetimin kullanarak.

   

3. Çözüm seçerek yapı yapı, ardından Build Solution veya F6 tuşuna basın.

   

Tebrikler, bu izlenecek yolu tamamladınız!Çözüm ve proje dizininin altında yerleşik .exe bulabilirsiniz (... \HelloWPFApp\HelloWPFApp\bin\Release\).Daha fazla örnek keşfetmek isterseniz bkz. Visual Studio Örnekleri.

Ayrıca bkz.

Kavramlar

Visual Studio 2013'daki Yenilikler

Visual Studio'ya Başlarken

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