Aracılığıyla paylaş

Öğretici: C ile WPF uygulaması oluşturma#

  • Makale

Bu öğreticide, Visual Studio ile uygulama geliştirirken kullanabileceğiniz birçok araç, iletişim kutusu ve tasarımcı hakkında bilgi edineceksiniz. Bir "Hello, World" uygulaması oluşturur, kullanıcı arabirimini tasarlar, kod ekler ve hataları ayıklarsınız. Aynı zamanda, Visual Studio tümleşik geliştirme ortamında (IDE) çalışma hakkında bilgi edinin.

  • IDE'yi yapılandırma
  • Proje oluşturma
  • Kullanıcı arabirimini tasarlama
  • Uygulamada hata ayıklama ve test

Önkoşullar

  • Eğer Visual Studio'nuz yoksa, ücretsiz olarak yüklemek için Visual Studio indirmeleri sayfasına gidin.
  • .NET masaüstü geliştirme iş yükünün yüklü olduğundan emin olun. Bu yapılandırmayı Visual Studio Yükleyicisi'nde doğrulayabilirsiniz.
  • Bu öğretici için .NET Framework veya .NET Core kullanabilirsiniz. .NET Core, daha yeni ve daha modern bir çerçevedir. .NET Core için Visual Studio 2019 sürüm 16.3 veya üzeri gerekir.

Windows Presentation Foundation nedir?

Windows Presentation Foundation (WPF), masaüstü istemci uygulamaları oluşturan bir kullanıcı arabirimi (UI) ç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. 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 üzere Genişletilebilir Uygulama biçimlendirme dili (XAML) kullanır. Daha fazla bilgi için bkz. Masaüstü Kılavuzu (WPF .NET).

IDE'yi yapılandırma

Visual Studio'yu başlattığınızda başlangıç penceresi açılır. Geliştirme ortamını açmak için Kod olmadan devam et'i seçin. Araç pencerelerini, menüleri, araç çubuklarını ve ana pencere alanını görürsünüz. Araç pencereleri, uygulama penceresinin yanlarına yerleştirilmiş durumdadır. Arama kutusu, menü çubuğu ve standart araç çubuğu en üstte bulunur. Bir çözümü veya projeyi yüklediğinizde, düzenleyiciler ve tasarımcılar uygulama penceresinin merkezi alanında görünür. Bir uygulama geliştirirken, zamanınızın çoğunu bu merkezi alanda geçirirsiniz.

Projeyi oluşturma

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

  1. Visual Studio'yu açın.

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

    Visual Studio 2019'da 'Yeni proje oluştur' seçeneğinin vurgulandığı başlangıç penceresinin ekran görüntüsü.

  3. Yeni proje oluştur ekranında WPFarayın. WPF Uygulaması seçin ve ardından Sonraki seçin.

    Arama kutusuna 'WPF' girilmiş ve 'WPF Uygulaması' proje şablonunun vurgulandığı 'Yeni proje oluştur' iletişim kutusunun ekran görüntüsü.

  4. Sonraki ekranda projeye bir ad verin, HelloWPFApp, ve İleriseçin.

    Visual Studio'da Proje adı alanına 'HelloWPFApp' girilmiş 'Yeni projenizi yapılandırın' iletişim kutusunun ekran görüntüsü.

  5. Ek bilgi penceresinde, hedef çerçeveniz için .NET Core 3.1 zaten seçilmiş olmalıdır. Aksi takdirde .NET Core 3.1'i seçin. Ardından Oluşturseçin.

    Visual Studio'da yeni proje için .NET Core 3.1'in seçili olduğu Ek bilgi penceresini gösteren ekran görüntüsü.

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 tasarım ve MainWindow.xaml XAML görünümlerini gösterir. Bölmeyi kaydırarak iki görünümden daha fazlasını veya daha azını gösterebilirsiniz. Yalnızca görsel görünümü veya yalnızca XAML görünümünü görmeyi seçebilirsiniz.

Çözüm Gezgini ile MainWindow.xaml dosyasının XAML ve tasarımcı görünümlerini gösteren proje ve çözümün ekran görüntüsü.

Not

XAML hakkında daha fazla bilgi için WPF için XAML'e genel bakış sayfasına bakın.

Projeyi oluşturduktan sonra özelleştirebilirsiniz. Bunu yapmak için, Görünüm menüsünden özellikler penceresi seçin veya F4tuşlarına basın. Bir uygulamadaki proje öğeleri, denetimler ve diğer öğeler için seçenekleri görüntüleyebilir ve değiştirebilirsiniz.

HelloWPF uygulamasındaki Özellikler, Başvurular ve dosyaları gösteren Çözüm Gezgini penceresinin ekran görüntüsü.

  1. Visual Studio'yu açın.

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

    Visual Studio 2022'de 'Yeni proje oluştur' seçeneğinin vurgulandığı başlangıç penceresinin ekran görüntüsü.

  3. Yeni bir proje oluştur ekranında WPFarayın. WPF Uygulamasıseçin ve ardından Sonrakiseçin.

    Arama kutusunda 'WPF' bulunan 'Yeni proje oluştur' iletişim kutusunun ekran görüntüsü ve 'WPF Uygulaması' şablonu vurgulanmış.

  4. Sonraki ekranda projeye bir ad verin, HelloWPFApp, ve İleriseçin.

    Proje adı alanına girilen 'HelloWPFApp' ile 'Yeni projenizi yapılandırın' iletişim kutusunu gösteren ekran görüntüsü.

  5. Ek bilgiler penceresinde hedef çerçeveniz için .NET 8.0 seçildiğini doğrulayın. Ardından Oluştur'i seçin.

    Yeni proje için hedef çerçeve olarak .NET 8.0'ın seçili olduğu Ek bilgi penceresini gösteren ekran görüntüsü.

Visual Studio HelloWPFApp projesini ve çözümünü oluşturur. Çözüm Gezgini çeşitli dosyaları gösterir. WPF Tasarımcısı, MainWindow.xaml'nin tasarım görünümünü ve XAML görünümünü bölünmüş bir görünümde gösterir. Bölmeyi kaydırarak iki görünümden daha fazlasını veya daha azını gösterebilirsiniz. Yalnızca görsel görünümü veya yalnızca XAML görünümünü görmeyi seçebilirsiniz.

Çözüm Gezgini'nde projenin ve çözümün ekran görüntüsü ve 'MainWindow.xaml' XAML ve tasarımcı görünümleri açık.

Not

Genişletilebilir Uygulama Biçimlendirme Dili (XAML) hakkında daha fazla bilgi için bkz. WPF içinXAML'ye genel bakış.

Projeyi oluşturduktan sonra özelleştirebilirsiniz. Bunu yapmak için, Görünüm menüsünden özellikler penceresi seçin veya F4tuşlarına basın. Ardından, bir uygulamadaki proje öğeleri, denetimler ve diğer öğeler için seçenekleri görüntüleyebilir ve değiştirebilirsiniz.

HelloWPFApp projesinin Çözüm Özellikleri'nin Misc bölümünü gösteren Özellikler penceresinin ekran görüntüsü.

Kullanıcı arabirimini tasarlama

Tasarımcı açık değilse MainWindow.xaml seçin ve tasarımcıyı açmak için Shift +F7seçin.

Bu öğreticide, bu uygulamaya üç denetim türü eklersiniz: TextBlock denetimi, iki RadioButton denetimi ve bir Button denetimi.

TextBlock denetimi ekleme

TextBlock eklemek için bu adımları izleyin.

  1. Arama kutusunu etkinleştirmek için Ctrl+Q seçin ve Araç Kutusuyazın. Sonuçlar listesinden Görünüm > Araç Kutusu seçin.

  2. Araç Kutusuiçinde, TextBlock kontrolünü görmek için Ortak WPF Denetimleri düğümünü genişletin.

    Ortak WPF Denetimleri listesinde TextBlock denetiminin seçili olduğu Araç Kutusu penceresinin ekran görüntüsü.

  3. Tasarım yüzeyine TextBlock denetimi ekleyin. TextBlock öğesini seçin ve tasarım yüzeyindeki pencereye sürükleyin. Kontrolü pencerenin üst kısmına yakın bir konumda merkezleyin. Visual Studio 2019 ve sonraki sürümlerde, denetimi ortalamak için yönergeleri kullanabilirsiniz.

    Pencereniz şu çizime benzemelidir:

    MainWindow formunun tasarım yüzeyindeki TextBlock denetiminin ekran görüntüsü.

    XAML işaretlemesi şu örnekteki gibi görünmelidir:

    <Grid>
    <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>

  1. Arama kutusunu etkinleştirmek için Ctrl+Q seçin ve Araç Kutusuyazın. Sonuçlar listesinden Görünüm > Araç Kutusu seçin.

  2. Araç Kutusu, TextBlock denetimini görmek amacıyla Ortak WPF Denetimleri düğümünü genişletin.

    Ortak WPF Denetimleri listesinde TextBlock denetiminin seçili olduğu Araç Kutusu penceresinin ekran görüntüsü.

  3. Tasarım yüzeyine TextBlock denetimi ekleyin. TextBlock öğesini seçin ve tasarım yüzeyindeki pencereye sürükleyin. Kontrolü pencerenin üst kısmına yakın bir yere ortalayın. Denetimi merkezlemek için yönergeleri kullanabilirsiniz.

    Pencereniz şu görüntüye benzemelidir:

    Tasarım yüzeyindeki TextBlock denetiminin ekran görüntüsü. Denetimi konumlandırmak ve yeniden boyutlandırmak için yönergeler gösterilir.

    XAML işaretlemesi şu örnekteki gibi görünmelidir:

    <Grid>
    <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>

Metin bloğundaki metni özelleştirme

TextBlock'un görüntülediği metni değiştirebilirsiniz.

  1. XAML görünümünde, TextBlock için işaretlemeyi bulun ve Metin özniteliğini TextBlock'den Select a message option and then choose the Display button. olarak değiştirin

    XAML işaretlemesi şu örnekteki gibi görünmelidir:

    <Grid>
    <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
</Grid>

  2. TextBlock'ı yeniden ortalayın ve sonra Ctrl+S'i seçerek veya Dosya menü öğesini kullanarak değişikliklerinizi kaydedin.

Radyo düğmeleri ekleme

Ardından, forma iki RadioButton denetimi ekleyin.

  1. Araç Kutusuiçindeki RadioButton denetimini bulun.

    Ortak WPF Denetimleri listesinde RadioButton denetiminin seçili olduğu Araç Kutusu penceresinin ekran görüntüsü.

  2. Tasarım yüzeyine iki RadioButton denetimi ekleyin. RadioButton öğesini seçin ve tasarım yüzeyindeki pencereye sürükleyin. Düğmeleri seçip ok tuşlarını kullanarak taşıyın. Düğmelerin TextBlock denetiminin altında yan yana görünmesi için bunları düzenleyin. Denetimleri hizalamak için yönergeleri kullanın.

    Pencereniz şu şekilde görünmelidir:

    MainWindow.xaml için Tasarım penceresinin, tasarım yüzeyinde bir TextBlock ve iki RadioButton denetimini gösteren ekran görüntüsü.

  3. Sol RadioButton denetiminin Özellikler penceresinde, üstteki Adı özelliğini HelloButtonolarak değiştirin.

    Name özelliğinin değeri HelloButton olarak değiştirilmiş bir RadioButton denetiminin Özellikler penceresinin ekran görüntüsü.

  4. Sağ RadioButton denetiminin Özellikler penceresinde, Adı özelliğini GoodbyeButtonolarak değiştirin ve değişikliklerinizi kaydedin.

  1. Araç Kutusuiçinde RadioButton denetimini bulun.

    Ortak WPF Denetimleri listesinde RadioButton denetiminin seçili olduğu Araç Kutusu penceresinin ekran görüntüsü.

  2. Tasarım yüzeyine iki RadioButton denetimi ekleyin. RadioButton öğesini seçin ve tasarım yüzeyindeki pencereye sürükleyin. Düğmeleri seçip ok tuşlarını kullanarak taşıyın. Düğmelerin TextBlock denetiminin altında yan yana görünmesi için bunları düzenleyin. Denetimleri hizalamak için yönergeleri kullanabilirsiniz.

    Pencereniz şu şekilde görünmelidir:

    Greetings.xaml için Tasarım penceresinin ekran görüntüsü ve tasarım yüzeyinde TextBlock ve iki RadioButton denetimi bulunur.

  3. Sol RadioButton denetiminin Özellikler penceresinde, üstteki Adı özelliğini HelloButtonolarak değiştirin.

    Name özelliğinin değeri HelloButton olarak değiştirilmiş bir RadioButton denetiminin Özellikler penceresinin ekran görüntüsü.

  4. Sağdaki RadioButton denetimi için Özellikler penceresinde, Adı özelliğini GoodbyeButtonolarak değiştirin ve ardından değişikliklerinizi kaydedin.

Her radyo düğmesi için görüntüleme metni ekleme

Ardından, her RadioButton denetimi için görüntüleme metni ekleyin. Aşağıdaki prosedür, RadioButton denetimi için Content özelliğini günceller.

  • XAML'de, iki radyo düğmesi HelloButton ve GoodbyeButton için içerik özniteliğini "Hello" ve "Goodbye" olarak güncelleştirin. XAML işaretlemesi artık şu örneğe benzer görünmelidir:

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

Radyo düğmesini varsayılan olarak denetlenecek şekilde ayarlama

Bu adımda, iki radyo düğmesinden birinin her zaman seçili olması için HelloButton'ı varsayılan olarak denetlenecek şekilde ayarlayın.

  1. XAML görünümünde HelloButton için işaretlemeyi bulun.

  2. IsChecked özniteliği ekleyin ve bunu Trueolarak ayarlayın. Özellikle IsChecked="True"ekleyin.

    XAML işaretlemesi artık şu örneğe benzer görünmelidir:

    <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" IsChecked="True" 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>

Düğme denetimini ekleme

Eklediğiniz son kullanıcı arabirimi öğesi Düğmesi denetimidir.

  1. Araç Kutusuiçinde Düğmesi denetimini bulun. Tasarım görünümünde forma sürükleyerek RadioButton denetimlerinin altındaki tasarım yüzeyine ekleyin. Kılavuz, kontrolü ortalamanıza yardımcı olur.

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

    Pencereniz bu çizime benzemelidir.

    TextBlock, Hello ve Goodbye RadioButton denetimleri ve Görüntü düğmesi içeren Tasarım penceresinin ekran görüntüsü.

    XAML işaretlemesi artık şu örneğe benzer görünmelidir:

    <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" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
     <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>

  1. Araç Kutusuiçinde Düğmesi kontrolünü bulun. Tasarım görünümünde forma sürükleyerek RadioButton denetimlerinin altındaki tasarım yüzeyine ekleyin. Yönergeler, kontrolü merkeze yerleştirmenize yardımcı olabilir.

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

    Pencereniz şu ekran görüntüsüne benzemelidir:

    Tasarım penceresinin, içinde TextBlock, Hello ve Goodbye RadioButton denetimleri ve Display olarak etiketlenmiş bir düğme bulunan ekran görüntüsü.

    XAML işaretlemesi artık şu örneğe benzer görünmelidir:

    <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" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
     <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>

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

Bu uygulama çalıştırıldığında, kullanıcı bir radyo düğmesi seçtikten sonra bir ileti kutusu görüntülenir ve ardından Görüntüle düğmesi seçilir. Merhaba için bir ileti kutusu, Veda için başka bir ileti kutusu görüntülenir. Bu davranışı oluşturmak için, MainWindow.xaml.csiçindeki Button_Click olayına kod eklersiniz.

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

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

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

  2. Küme parantezlerin içine aşağıdaki kodu ekleyin:

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

  3. Uygulamayı kaydedin.

Bu uygulama çalıştırıldığında, kullanıcı bir radyo düğmesi seçtikten sonra bir ileti kutusu görüntülenir ve ardından Görüntüle düğmesi seçilir. Merhaba için bir ileti kutusu, Veda için başka bir ileti kutusu görüntülenir. Bu davranışı oluşturmak için, MainWindow.xaml.csiçindeki Button_Click olayına kod eklersiniz.

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

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

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    Görüntüle düğmesine çift tıkladığınızda, Click="Button_Click" XAML'ye eklenir.

    XAML işaretlemesi artık şu örneğe benzer görünmelidir:

    <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" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
     <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
     <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
</Grid>

  2. Button_Click küme ayraçlarının içine aşağıdaki kodu ekleyin.

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

  3. Uygulamayı kaydedin.

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. Aşağıdaki yönergeler hata ayıklayıcıyı nasıl oluşturup başlatabileceğinizi açıklar. Daha fazla bilgi için bkz. WPF uygulaması oluşturma (WPF) ve WPF hata ayıklama.

MainWindow.xaml adını değiştirme

MainWindow'a daha belirgin bir ad verin. Çözüm Gezgini'nde MainWindow.xaml sağ tıklayın ve Yeniden Adlandır'ı seçin. dosyayı Greetings.xamlolarak yeniden adlandırın. Bu örnekte, bu değişiklik daha sonra hata ayıklamayı göstermek için kullanılacak bir hata yaratır.

Hataları bulma ve düzeltme

Bu adımda, daha önce MainWindow.xaml dosyasının adını değiştirerek oluşan hatayı bulursunuz.

Hata ayıklamayı başlatın ve hatayı bulun

  1. F5 veya Hata Ayıklamaseçeneklerinden birini seçerek hata ayıklayıcıyı başlatın, ardından Hata Ayıklamayı Başlatseçeneğini seçin.

    Kesme Modu penceresi görüntülenir. Çıktı penceresi bir IOException oluştuğunun göstergesidir: mainwindow.xamlkaynağı bulunamıyor.

    Sistem.IO.IOException hatası veren ve

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

MainWindow.xaml'ı Greetings.xamlolarak yeniden adlandırdınız, ancak kod hala MainWindow.xaml'ü uygulamanın başlangıç URI'si olarak gösteriyor, bu yüzden proje başlatılamıyor.

  1. F5 veya Hata Ayıklamaardından Hata Ayıklamayı Başlatseçeneklerini seçerek hata ayıklamayı başlatın.

    Kesme Modu penceresi görüntülenir ve Çıktı penceresi bir IOException hatası oluştuğuna işaret eder: mainwindow.xamlkaynağı bulunamıyor.

    Çıkış penceresinin ekran görüntüsü. Mesaj: System.IO.IOException: Mainwindow.xaml kaynağı bulunamıyor.

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

MainWindow.xaml'ı Greetings.xamlolarak yeniden adlandırdınız, ancak kod yine de uygulamanın başlangıç URI'si olarak MainWindow.xaml'ye başvuruyor, bu yüzden proje başlatılamıyor.

Greetings.xaml öğesini başlangıç URI'si olarak belirtin

  1. Çözüm GezginiApp.xaml dosyasını açın.

  2. StartupUri="MainWindow.xaml" StartupUri="Greetings.xaml"olarak değiştirin ve değişiklikleri kaydedin.

İsteğe bağlı bir adım olarak, uygulama pencerenizin başlığını bu yeni adla eşleşecek şekilde değiştirmek karışıklığı önler.

  1. Çözüm Gezginibölümünde, yeni yeniden adlandırdığınız Greetings.xaml dosyasını açın.

  2. Window.Title özelliğinin değerini Title="MainWindow" yerine Title="Greetings"olarak değiştirin ve değişiklikleri kaydedin.

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

TextBlock, RadioButtons ve Button denetimlerinin görünür ve 'Hello' seçili olduğu Selamlamalar penceresinin ekran görüntüsü.

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

Kesme noktalarıyla hata ayıklama

Hata ayıklama sırasında bazı kesme noktaları ekleyerek kodu test edebilirsiniz. Hata ayıklama>Kesme Noktasıgeçişini seçerek, kesmenin oluşmasını istediğiniz kod satırının yanındaki düzenleyicinin sol kenar boşluğuna tıklayarak veya F9tuşuna basarak kesme noktaları ekleyebilirsiniz.

Kesme noktaları ekle

  1. Greetings.xaml.csaçın ve şu satırı seçin: MessageBox.Show("Hello.")

  2. Hata Ayıkla'yı ve ardından Kesme Noktası Değiştir'iseçerek menüden 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üntülenir.

  3. Şu 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 seçin.

  5. Selamlar penceresinde Hello radyo düğmesini seçin ve ardından Görüntüle düğmesini 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.

    Yürütmenin kesme noktasında durdurulduğunu gösteren kod penceresinin sarı renkle vurgulandığı hata ayıklama oturumunun ekran görüntüsü.

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

    Uygulama yürütmeye devam eder ve "Merhaba" sözcüğünü içeren bir ileti kutusu görüntülenir.

  7. İleti kutusunu kapatmak için Tamam 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 kutusu görüntülendiğinde, kapatmak için ileti kutusunda Tamam seçeneğini 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.

  1. Greetings.xaml.csaçın ve şu satırı seçin: MessageBox.Show("Hello.")

  2. Hata Ayıkla'yı ve ardından Kesme Noktası Değiştir'iseçerek menüden 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üntülenir.

  3. Şu 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 seçin.

  5. Selamlar penceresinde Hello radyo düğmesini seçin ve ardından Görüntüle düğmesini 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ındave Çıkış pencereleri sağ tarafta birlikte yerleştirilmiştir.

    Yürütmenin kesme noktasında durdurulduğunu gösteren kod penceresinin sarı renkle vurgulandığı hata ayıklama oturumunun ekran görüntüsü.

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

    Uygulama yürütmeye devam eder ve "Merhaba" sözcüğünü içeren bir ileti kutusu görüntülenir.

  7. İleti kutusunu kapatmak için Tamam'ı 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 kutusu göründüğünde, kapatmak için ileti kutusunda 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.

Kullanıcı arabirimi öğelerinin gösterimini görüntüleme

Çalışan uygulamada, pencerenizin en üstünde görünen bir pencere öğesi görmeniz gerekir. Pencere öğesi, bazı yararlı hata ayıklama özelliklerine hızlı erişim sağlayan çalışma zamanında yardımcı olan bir araçtır. İlk düğmeyi seçin, ardından Canlı Görsel Ağaç'e gidin. Sayfanızın tüm görsel öğelerini içeren bir ağaç içeren bir pencere görmeniz gerekir. Eklediğiniz düğmeleri bulmak için düğümleri genişletin.

Çalışırken sayfadaki görsel öğelerin ağacını gösteren Canlı Görsel Ağaç penceresinin ekran görüntüsü.

Çalışırken HelloWPFApp.exe görsel öğe ağacını gösteren Canlı Görsel Ağaç penceresinin ekran görüntüsü.

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

Her şeyin çalıştığını doğruladıktan sonra uygulamanın yayın derlemesini hazırlayabilirsiniz.

  1. Önceki derlemeler sırasında oluşturulan ara dosyaları ve çıkış dosyalarını silmek için ana menüden Derleme >Temizleme çözümüseçin. Bu adım gerekli değildir, ancak hata ayıklama derleme çıkışlarını temizler.

  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. Şu anda Debug yazıyor.

  3. Çözümü derlemek için Derleme>Derleme Çözümü'ü seçin.

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

İlgili içerik

Sonraki adım

Bu öğreticiyi tamamladığınız için tebrikler! Daha fazla bilgi edinmek için aşağıdaki öğreticilerle devam edin.

Daha fazla WPF öğreticisi ile devam edin