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

  • Makale

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 öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

  • Proje oluşturma
  • Pencereyi yapılandırma ve metin ekleme
  • Düğme ve kod ekleme
  • Uygulamanın hatalarını ayıklama ve test etme
  • Kesme noktalarıyla hata ayıklama
  • Sürüm 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 dahil olmak üzere geniş bir uygulama geliştirme özellikleri kümesini 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 sürüm için Visual Studio indirmeleri sayfasını ziyaret edin.

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

Proje 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. Yeni proje oluştur ekranında "WPF" araması yapın ve WPF Uygulaması (.NET Framework) öğesini seçin. İleri'yi seçin.

    Screenshot of the Create a new project dialog with W P F entered in the search box and the W P F App (.NET Framework) project template selected.

  3. 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.

    Screenshot shows Solution Explorer with Hello W P F App files.

WPF Tasarım Aracı 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.

  1. Visual Studio'yu açın.

  2. Başlangıç penceresinde Yeni proje oluştur'u seçin.

    Screenshot of the start window in Visual Studio 2022 with the 'Create a new project' option highlighted.

  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.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, 'Visual Basic' selected in the languages list, and the 'WPF App (.NET Framework)' project template highlighted.

  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.

    Screenshot showing the files in the HelloWPFApp project and solution in the Solution Explorer.

WPF Tasarım Aracı 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.

Not

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'de MainWindow.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 Araç Kutusunu Görüntüle'yi>veya Ctrl Alt+X'i+ seçin.

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

    Screenshot showing the Toolbox window with the TextBlock control highlighted in the list of Common WPF Controls.

  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.

    Screenshot showing the TextBlock control positioned on the Greetings form with the guidelines visible.

    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'unu yeniden ortalama

  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>Tümünü Kaydet'i seçin veya Ctrl+Shift S tuş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'nda RadioButton öğesini bulun.

    Screenshot showing the Toolbox window with the RadioButton control selected in the list of Common WPF Controls.

  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.

    Screenshot showing the Greetings form with a TextBlock control and two radio buttons.

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

    Screenshot showing the Solution Explorer Properties window for the 'HelloButton' RadioButton.

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

  5. XAML'de ve için HelloButton ve GoodbyeButton "Hello" için content "Goodbye" özniteliğini güncelleş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 Bir 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'nda Düğ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.

    Screenshot showing the Greetings form with the TextBlock, RadioButtons labeled 'Hello' and 'Goodbye', and the Button control labeled 'Display' all positioned on the form.

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

    MainWindow.xaml.vb açılır ve imleç olaydadır Button_Click .

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

End Sub

  10. Şu kodu ekleyin:

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

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

Ardından, hataları aramak için uygulamada hata ayıklayacaksınız ve her iki ileti kutusunu da doğru şekilde görüntüleyeceksiniz. Bu işlemin nasıl çalıştığını görmek için, ilk adım özellikle programa bir hata ekler.

  1. Çözüm Gezgini MainWindow.xaml'e sağ tıklayın ve Yeniden Adlandır'ı seçin. Dosyayı Greetings.xaml olarak 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.

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

  3. Hata Ayıklamayı Durdur Hata Ayıklama'ya tıklayarak hata ayıklayıcıyı durdurun.>

    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'da Application.xaml dosyasını açın.

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

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

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

  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 Hatalarını 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 dosyasını açın ve aşağıdaki satırı seçin:MessageBox.Show("Hello.")

  2. F9 tuşuna basarak veya Hata Ayıkla'yı ve ardından 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ü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, Anında ve Çıkış pencereleri sağ tarafa birlikte yerleştirilmiştir.

    Screenshot showing a debug session in Visual Studio with the Code, Diagnostics. Autos, and Call Stack windows open. Execution is stopped at a breakpoint in Greetings.xaml.vb.

  6. Menü çubuğunda Hata Ayıklama>Adım Çıkışı'nı seç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, Güle güle radyo düğmesini 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 tuşunu 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ırak'ı seçin.

Sürüm 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çin Temiz Çözüm Derle'yi>seçin.

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

  3. Derleme Çözümü Oluştur'a>tıklayın.

Bu öğreticiyi tamamladıktan sonra tebrikler! Oluşturduğunuz .exe dosyasını çö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

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