Öğretici: Visual Basic ile WPF uygulaması oluşturma

Bu öğreticide, Visual Studio tümleşik geliştirme ortamında (IDE) Visual Basic kullanarak bir uygulama oluşturacaksınız. Programınız Windows Presentation Foundation (WPF) UI çerçevesini kullanacaktır. Visual Studio'da kullanabileceğiniz birçok araç, iletişim kutusu ve tasarımcıyı tanımak için bu öğreticiyi kullanın.

Bu eğitimde şunları öğreniyorsunuz:

• Projeyi oluşturma
• Pencereyi yapılandırma ve metin ekleme
• Düğme ve kod ekleme
• Uygulamada hata ayıklama ve test
• Kesme noktalarıyla hata ayıklama
• Yayın sürümü oluşturma

WPF nedir?

WPF veya Windows Presentation Foundation, masaüstü istemci uygulamaları oluşturan bir kullanıcı arabirimi (kullanıcı arabirimi) çerçevesidir. WPF geliştirme platformu; uygulama modeli, kaynaklar, denetimler, grafikler, düzen, veri bağlama, belgeler ve güvenlik gibi çok çeşitli uygulama geliştirme özelliklerini destekler.

WPF , .NET'in bir parçasıdır, bu nedenle daha önce ASP.NET veya Windows Forms kullanarak .NET ile uygulama derlediyseniz, programlama deneyimi tanıdık olmalıdır. WPF, uygulama programlama için bildirim temelli bir model sağlamak için Genişletilebilir Uygulama biçimlendirme dili XAML'sini kullanır. Daha fazla bilgi için bkz. WPF .NET'e genel bakış.

Önkoşullar

Bu öğreticiyi tamamlamak için Visual Studio'ya ihtiyacınız vardır. Ücretsiz bir sürüm için Visual Studio indirme sayfasını ziyaret edin.

Projeyi oluşturma

Visual Studio'da bir uygulama oluşturduğunuzda, önce bir proje oluşturursunuz. Bu öğreticide bir Windows Presentation Foundation projesi oluşturun.

1. Visual Studio'yu açın.

2. Başlangıç penceresinde yeni proje oluşturseçin.

   

3. Yeni proje oluştur penceresinde "WPF" araması yapın ve Tüm diller açılan listesinde Visual Basic'i seçin. WPF Uygulaması (.NET Framework) öğesini ve ardından İleri'yi seçin.

   

4. Projeye HelloWPFApp adını verin ve Oluştur'u seçin.

   Visual Studio HelloWPFApp projesini ve çözümünü oluşturur. Çözüm Gezgini çeşitli dosyaları gösterir.

   

WPF Tasarımcısı, bölünmüş bir görünümde MainWindow.xaml'in tasarım görünümünü ve XAML görünümünü gösterir.

Uyarı

Genişletilebilir Uygulama biçimlendirme dili (XAML) hakkında daha fazla bilgi için bkz. WPF için XAML'e genel bakış.

Pencereyi yapılandırma ve metin ekleme

Özellikler penceresini kullanarak proje öğeleri, denetimleri ve diğer öğeler için seçenekleri görüntüleyebilir ve değiştirebilirsiniz.

1. Çözüm Gezgini'ndeMainWindow.xaml dosyasını açın.

2. XAML görünümünde, Window.Title özelliğinin değerini Title="MainWindow" yerine Title="Greetings" olarak değiştirin.

3. Visual Studio IDE'nin sol tarafında Araç Kutusu sekmesini seçin. Bunu görmüyorsanız, menü çubuğundan Görünüm >seçin veya Ctrl ++.

4. TextBlock'u bulmak için Ortak WPF Denetimleri'ni genişletin veya arama çubuğuna Metin girin.

   

5. TextBlock öğesini seçin ve tasarım yüzeyindeki pencereye sürükleyin. TextBlock denetimini sürükleyerek taşıyabilirsiniz. Denetimi yerleştirmek için yönergeleri kullanın.

   

   XAML işaretlemesi aşağıdaki örnekteki gibi görünmelidir:

   <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   

6. XAML görünümünde TextBlock için işaretlemeyi bulun ve Text özniteliğini değiştirin:

   Text="Select a message option and then choose the Display button."
   

   Gerekirse TextBlock'u tekrar ortalayın

7. Tümünü Kaydet araç çubuğu düğmesini seçerek uygulamanızı kaydedin. Alternatif olarak, uygulamanızı kaydetmek için menü çubuğundan Dosya >seçin veya Ctrl+Shift+Stuşlarına basın. Erken ve sık tasarruf etmek en iyi yöntemdir.

Düğme ve kod ekleme

Uygulamanız iki radyo düğmesi ve bir düğme kullanır. Bunları eklemek için bu adımları kullanın. Düğmeye Visual Basic kodu ekleyeceksiniz. Bu kod, radyo düğmesi seçimine başvurur.

1. Araç Kutusu'ndaRadioButton öğesini bulun.

   

2. RadioButton öğesini seçip tasarım yüzeyine sürükleyerek tasarım yüzeyine iki RadioButton denetimi ekleyin. Düğmeleri seçip ok tuşlarını kullanarak taşıyın. Düğmeleri TextBlock denetiminin altına yan yana yerleştirin.

   

3. Sol RadioButton denetiminin Özellikler penceresinde, Özellikler penceresinin üst kısmındaki Name özelliğini HelloButton olarak değiştirin.

   

4. Sağ RadioButton denetiminin Özellikler penceresinde Name özelliğini GoodbyeButton olarak değiştirin.

5. XAML'de `` ve `HelloButton` özniteliklerini `GoodbyeButton` ve `"Hello"` olarak güncellemek için `"Goodbye"` özelliğini değiştirin.

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

6. XAML görünümünde HelloButton için işaretlemeyi bulun ve IsChecked özniteliği ekleyin.

   IsChecked="True"
   

   True değerine sahip IsChecked özniteliği HelloButton'ın varsayılan olarak denetlendiği anlamına gelir. Bu ayar, program başlatıldığında bile radyo düğmesinin her zaman seçili olduğu anlamına gelir.

7. Araç Kutusu'ndaDüğme denetimini bulun ve ardından RadioButton denetimlerinin altındaki tasarım yüzeyine bir düğme sürükleyin.

8. XAML görünümünde, Düğme denetimi için İçerik değerini olarak Content="Button"Content="Display"değiştirin.

   <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
   

   Pencereniz aşağıdaki görüntüye benzemelidir.

   

9. Tasarım yüzeyinde Ekran düğmesine çift tıklayın.

   MainWindow.xaml.vb açılır ve imleç Button_Click etkinliğinin içindedir.

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

10. Aşağıdaki kodu ekleyin:

    If HelloButton.IsChecked = True Then
        MessageBox.Show("Hello.")
    ElseIf GoodbyeButton.IsChecked = True Then
        MessageBox.Show("Goodbye.")
    End If
    

Uygulamada hata ayıklama ve test

Ardından, uygulamada hata ayıklayarak hataları bulacak ve her iki ileti kutusunun da doğru şekilde görüntülendiğini test edeceksiniz. Bu işlemin nasıl çalıştığını görmek için, ilk adım özellikle programa bir hata ekler.

1. Çözüm Gezgini'ndeMainWindow.xaml'e sağ tıklayın ve Yeniden Adlandır'ı seçin. dosyayı Greetings.xamlolarak yeniden adlandırın.

2. F5 tuşuna basarak veya Hata Ayıkla'yı ve ardından Hata Ayıklamayı Başlat'ı seçerek hata ayıklayıcıyı başlatın.

   Kesme Modu penceresi görüntülenir ve Çıkış penceresi bir özel durumun oluştuğuna işaret eder.

   

3. hata ayıklayıcısını durdurmak için Hata Ayıkla'>Hata Ayıklamayı Durdurseçeneğini belirleyin.

   Bu bölümün başında MainWindow.xaml adını Greetings.xaml olarak değiştirdiniz. Kod hala uygulamanın başlangıç URI'si olarak MainWindow.xaml'e başvurur, bu nedenle proje başlatılamaz.

4. Çözüm Gezgini'ndeApplication.xaml dosyasını açın.

5. StartupUri="MainWindow.xaml"'i StartupUri="Greetings.xaml" ile değiştir

6. Hata ayıklayıcıyı yeniden başlatın (F5 basın). Şimdi uygulamanızın Selamlamalar penceresini görmeniz gerekir.

   

7. Merhaba'yı ve Görüntüle düğmesini ve ardından Güle güle ve Görüntüle düğmesini seçin. Hata ayıklamayı durdurmak için sağ üst köşedeki kapat simgesini kullanın.

Daha fazla bilgi için bkz. WPF uygulaması oluşturma (WPF) ve WPF hata ayıklama.

Kesme noktalarıyla hata ayıklama

Hata ayıklama sırasında bazı kesme noktaları ekleyerek kodu test edebilirsiniz.

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

2. F9 tuşuna basarak veya Hata Ayıklama menüsünden Kesme Noktası Aç/Kapa'yı 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üntülenir.

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

4. Kesme noktası eklemek için F9 tuşuna basın ve ardından hata ayıklamayı başlatmak için F5 tuşuna basın.

5. Selamlamalar penceresinde Merhaba düğmesini ve ardından Görüntüle'yi seçin.

   çizgi MessageBox.Show("Hello.") sarı renkle vurgulanır. IDE'nin alt kısmında , Autos, Locals ve Watch pencereleri sol tarafa birlikte yerleştirilmiştir. Çağrı Yığını, Kesme Noktaları, Özel Durum Ayarları, Komut, Hemenve Çıkış pencereleri sağ tarafta bir araya yerleştirilir.

   

6. Menü çubuğunda, hata ayıklama>Dışarı Çıkseçin.

   Uygulama yeniden başlatılır. "Merhaba" sözcüğünü içeren bir iletişim kutusu görüntülenir.

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

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

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

9. Hata ayıklamaya devam etmek için F5 anahtarını seçin. İletişim kutusu görüntülendiğinde, iletişim kutusunu kapatmak için Tamam'ı seçin.

10. Hata ayıklamayı durdurmak için uygulama penceresini kapatın.

11. Menü çubuğunda Hata Ayıklama>Tüm Kesme Noktalarını Devre Dışı Bırakseçin.

Yayın sürümü oluşturma

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

1. Önceki derlemeler sırasında oluşturulan ara dosyaları ve çıkış dosyalarını silmek içinTemiz Çözüm> seçin.

2. Araç çubuğundaki açılır menü denetimini kullanarak HelloWPFApp için derleme yapılandırmasını Hata Ayıklama'den Sürüm olarak değiştirin.

3. Derleme Çözümü>.

Bu öğreticiyi tamamladığınız için tebrikler! Oluşturduğunuz .exe çözümünüzün ve proje dizininizin (...\HelloWPFApp\bin\Release) altında bulabilirsiniz.

Sonraki Adımlar

Visual Basic ile Visual Studio'da Windows Forms uygulaması oluşturmayı öğrenmek için sonraki makaleye ilerleyin.

Windows Forms uygulaması oluşturma

İlgili bağlantılar

Visual Studio hakkında daha fazla bilgi için şu kaynaklara bakın:

• Üretkenlik ipuçları