Öğ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) kullanıcı arabirimi çerçevesini kullanır. Visual Studio'de kullanabileceğiniz birçok araç, iletişim kutusu ve tasarımcı hakkında bilgi sahibi olmak 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 (UI) çerçevesidir. WPF geliştirme platformu, aşağıdakiler dahil olmak üzere çok çeşitli uygulama geliştirme özelliklerini destekler:

• Uygulama modeli
• Kaynaklar
• Denetimler
• Graphics
• Düzen
• Veri bağlama
• Documents
• Security

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

Önkoşullar

Bu eğitici çalışmayı tamamlamak için Visual Studio gerekir. Ücretsiz sürüm için bkz. Visual Studio downloads.

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 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 listesinden Visual Basic seçin. WPF App (.NET Framework)'ı seçin ve ardından İleri'i 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 Designer bölünmüş görünümde bir tasarım görünümü ve MainWindow.xaml 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'da MainWindow.xaml 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 Toolbox sekmesini seçin. Eğer görünmüyorsa, menü çubuğundan View>Toolbox seçeneğini veya Ctrl+Alt+X'i seçin.

4. Common WPF Denetimleri'ni genişletin veya TextBlock'u bulmak için arama çubuğuna Text 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.

   Selamlamalar formundaki TextBlock denetimini gösteren ve yönergeler görünür durumda olan ekran görüntüsü.

   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 CtrlShiftStuş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. Ayrıca düğmeye Visual Basic kodu da eklersiniz. 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.

   TextBlock denetimi ve iki radyo düğmesi içeren Selamlamalar formunu gösteren ekran görüntüsü.

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

   'HelloButton' Radyo Düğmesi için Çözüm Gezgini'daki Özellikler penceresini gösteren ekran görüntüsü.

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

5. XAML'de `` ve `` özniteliklerini `` ve `` olarak güncellemek için `` ö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ç Kutusuiçinde Düğmesi denetimini bulun. 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 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.

   'Hello' ve 'Goodbye' seçenekli RadioButtons, 'Display' etiketli buton kontrolü ve TextBlock'un form üzerinde konumlandırıldığı Selamlar formunu gösteren ekran görüntüsü.

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

   MainWindow.xaml.vb açılır ve imleç 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, hataları aramak için uygulamada hata ayıklayın ve her iki ileti kutusunu da doğru şekilde görüntüleyip göstermediğini test edin. Bu işlemin nasıl çalıştığını görmek için, ilk adım özellikle programa bir hata ekler.

1. Çözüm Gezgini'da MainWindow.xaml sağ tıklayın ve Rename öğesini 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.

   'Mainwindow.xaml kaynağı bulunamıyor' yazan bir System.IO.Exception iletisiyle 'Özel Durum İşlenmemiş' penceresini gösteren ekran görüntüsü.

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

5. değerini olarak değiştirin.

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

   TextBlock, RadioButtons ve Düğme denetimlerinin görünür olduğu Selamlamalar penceresinin ekran görüntüsü. 'Merhaba' radyo düğmesi seçilidir.

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. Bir WPF Uygulaması derleme ve Debug WPF.

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:

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

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 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ıklamaDış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 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ıklamaTüm Kesme Noktalarını Devre Dışı Bırakseçin.

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

Her şeyin çalıştığını doğruladıktan sonra 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. Çözümü Derle

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ım

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 bkz:

• Üretkenlik ipuçları