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

  • Makale

Bu öğreticiyi tamamlayarak Visual Studio ile uygulama geliştirirken kullanabileceğiniz birçok araç, iletişim kutusu ve tasarımcı hakkında bilgi sahibi olursunuz. Tümleşik geliştirme ortamında (IDE) çalışmayı öğrenirken bir "Hello, World" uygulaması oluşturur, kullanıcı arabirimini tasarlar, kod ekler ve hataları ayıklarsınız.

Önkoşullar

  • Visual Studio'yu henüz yüklemediyseniz Visual Studio indirmeleri sayfasına giderek ücretsiz yükleyin.
  • .NET masaüstü geliştirme iş yükünün yüklü olduğundan emin olun. Bu yapılandırmayı Visual Studio Yükleyicisi 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.

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ış.

IDE'yi yapılandırma

Visual Studio'yu başlattığınızda ilk olarak 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 ve araç çubuklarını ve ana pencere alanını görürsünüz. Araç pencereleri, uygulama penceresinin sol ve sağ kenarları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.

Proje 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şturursunuz.

  1. Visual Studio'yu açın.

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

    View the 'Create a new project' window

  3. Yeni proje oluştur ekranında "WPF" araması yapın, WPF Uygulaması'nı ve ardından İleri'yi seçin.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted.

  4. Sonraki ekranda projeye HelloWPFApp adını verin ve İleri'yi seçin.

    Screenshot of the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field.

  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ştur'u seçin.

    Screenshot that shows the Additional information window in Visual Studio with .NET Core 3.1 selected as the target framework for the new project.

Visual Studio HelloWPFApp projesini ve çözümünü oluşturur ve Çözüm Gezgini çeşitli dosyaları gösterir. 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. 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.

WPF project and solution in the IDE

Not

XAML (GENIŞLETILEBILIR Uygulama biçimlendirme dili) hakkında daha fazla bilgi için WPF için XAML'ye 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'niseçin veya F4 tuşuna 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.

Properties window

  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 ekranında "WPF" araması yapın, WPF Uygulaması'nı ve ardından İleri'yi seçin.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted.

  4. Sonraki ekranda projeye HelloWPFApp adını verin ve İleri'yi seçin.

    Screenshot that shows the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field.

  5. Ek bilgi penceresinde hedef çerçeveniz için .NET 8.0'ın seçili olduğunu doğrulayın. Ardından Oluştur'u seçin.

    Screenshot that shows the Additional information window in Visual Studio with .NET 8.0 selected as the target framework for the new project.

Visual Studio HelloWPFApp projesini ve çözümünü oluşturur ve Çözüm Gezgini çeşitli dosyaları gösterir. 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. 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.

Screenshot of the HelloWPFApp project and solution in Solution Explorer, and the XAML and designer views of 'MainWindow.xaml' open in the WPF Designer.

Not

XAML (GENIŞLETILEBILIR Uygulama biçimlendirme dili) hakkında daha fazla bilgi için WPF için XAML'ye 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'niseçin veya F4 tuşuna 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.

Screenshot of the Properties window showing the Misc section of the Solution Properties for the HelloWPFApp project.

Kullanıcı arabirimini (UI) tasarlama

Tasarımcı açık değilse MainWindow.xaml öğesini seçin ve Shift F7 tuşuna+basarak tasarımcıyı açın.

Bu uygulamaya üç tür denetim ekliyoruz: bir TextBlock denetim, iki RadioButton denetim ve bir Button denetim.

TextBlock denetimi ekleme

  1. Arama kutusunu etkinleştirmek için Ctrl+Q tuşuna basın ve Araç Kutusu yazın. Sonuç listesinden Araç Kutusunu Görüntüle'yi > seçin.

  2. Araç Kutusu'nda, TextBlock denetimini görmek için Ortak WPF Denetimleri düğümünü genişletin.

    Toolbox with the TextBlock control highlighted

  3. TextBlock öğesini seçip tasarım yüzeyindeki pencereye sürükleyerek tasarım yüzeyine bir TextBlock denetimi ekleyin. Denetimi pencerenin üst kısmına yakın bir şekilde ortalar. Visual Studio 2019 ve sonraki sürümlerde denetimi ortalamak için kırmızı yönergeleri kullanabilirsiniz.

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

    TextBlock control on the MainWindow form

    XAML işaretlemesi aşağıdaki örneğe benzer olmalıdır:

    <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 tuşuna basın ve Araç Kutusu yazın. Sonuç listesinden Araç Kutusunu Görüntüle'yi > seçin.

  2. Araç Kutusu'nda, TextBlock denetimini görmek için Ortak WPF Denetimleri düğümünü genişletin.

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

  3. TextBlock öğesini seçip tasarım yüzeyindeki pencereye sürükleyerek tasarım yüzeyine bir TextBlock denetimi ekleyin. Denetimi pencerenin üst kısmına yakın bir şekilde ortalar. Denetimi ortalamak için yönergeleri kullanabilirsiniz.

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

    Screenshot of the TextBlock control on the design surface. Guidelines are shown for positioning and resizing the control.

    XAML işaretlemesi aşağıdaki örneğe benzer olmalıdır:

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

Metin bloğundaki metni özelleştirme

  1. XAML görünümünde TextBlock için işaretlemeyi bulun ve Text özniteliğini TextBox olarak değiştirinSelect a message option and then choose the Display button.

    XAML işaretlemesi aşağıdaki örneğe benzer olmalıdır:

    <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. İsterseniz TextBlock öğesini yeniden ortalayın ve Ctrl+S tuşlarına basarak veya Dosya menü öğesini kullanarak değişikliklerinizi kaydedin.

Ardından, forma iki RadioButton denetimi eklersiniz.

Radyo düğmesi ekleme

  1. Araç Kutusu'nda RadioButton denetimini bulun.

    Toolbox window with RadioButton control selected

  2. RadioButton öğesini seçip tasarım yüzeyindeki pencereye sürükleyerek tasarım yüzeyine iki RadioButton denetimi ekleyin. Düğmeleri hareket ettirin (bunları seçerek ve ok tuşlarını kullanarak) böylece düğmeler TextBlock denetiminin altında yan yana görünür. Denetimleri hizalamak için kırmızı yönergeleri kullanın.

    Pencerenizin şuna benzemesi gerekir:

    MainWindow form with TextBlock and two radio buttons

  3. Sol RadioButton denetiminin Özellikler penceresinde Name özelliğini (Özellikler penceresinin en üstündeki özellik) olarak HelloButtondeğiştirin.

    RadioButton properties window

  4. Sağ RadioButton denetiminin Özellikler penceresinde Name özelliğini olarak GoodbyeButtondeğiştirin ve değişikliklerinizi kaydedin.

Ardından, her RadioButton denetimi için görüntüleme metni eklersiniz. Aşağıdaki yordam bir RadioButton denetimi için content özelliğini güncelleştirir.

  1. Araç Kutusu'nda RadioButton denetimini bulun.

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

  2. RadioButton öğesini seçip tasarım yüzeyindeki pencereye sürükleyerek tasarım yüzeyine iki RadioButton denetimi ekleyin. Düğmeleri hareket ettirin (bunları seçerek ve ok tuşlarını kullanarak) böylece düğmeler TextBlock denetiminin altında yan yana görünür. Denetimleri hizalamak için yönergeleri kullanabilirsiniz.

    Pencerenizin şuna benzemesi gerekir:

    Screenshot of the Design window for Greetings.xaml, showing a TextBlock control and two RadioButton controls positioned on the design surface.

  3. Sol RadioButton denetiminin Özellikler penceresinde Name özelliğini (Özellikler penceresinin en üstündeki özellik) olarak HelloButtondeğiştirin.

    Screenshot of the Properties window for a RadioButton control. The value of the Name property has been changed to HelloButton.

  4. Sağ RadioButton denetiminin Özellikler penceresinde Name özelliğini olarak GoodbyeButtondeğiştirin ve değişikliklerinizi kaydedin.

Ardından, her RadioButton denetimi için görüntüleme metni eklersiniz. Aşağıdaki yordam bir RadioButton denetimi için content özelliğini güncelleştirir.

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

  1. İki radyo düğmesi HelloButton için content özniteliğini ve GoodbyeButton"Hello" XAML'de ve "Goodbye" olarak güncelleştirin. XAML işaretlemesi artık aşağıdaki ö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 ayarlayacağız.

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

  2. IsChecked özniteliğini ekleyin ve True olarak ayarlayın. Özellikle ekleyin IsChecked="True".

    XAML işaretlemesi artık aşağıdaki ö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>

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

Düğme denetimini ekleme

  1. Araç Kutusu'nda Düğme denetimini bulun ve ardından tasarım görünümünde forma sürükleyerek RadioButton denetimlerinin altındaki tasarım yüzeyine ekleyin. Visual Studio 2019 veya sonraki bir sürümünü kullanıyorsanız, kırmızı çizgi denetimi ortalamanıza yardımcı olur.

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

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

    MainWindow form with control labels

    XAML işaretlemesi artık aşağıdaki ö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ç Kutusu'nda Düğme denetimini bulun ve ardından tasarım görünümünde forma sürükleyerek RadioButton denetimlerinin altındaki tasarım yüzeyine ekleyin. Yönergeler, denetimi ortalamanıza yardımcı olabilir.

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

    Pencereniz aşağıdaki ekran görüntüsüne benzemelidir.

    Screenshot of the Design window for Greetings.xaml showing a TextBlock control, two RadioButton controls labeled 'Hello' and 'Goodbye', and a button labeled 'Display'.

    XAML işaretlemesi artık aşağıdaki ö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 ve ardından Görüntüle düğmesini seçtikten sonra bir ileti kutusu görüntülenir. 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.cs dosyasındaki olaya kod Button_Click eklersiniz.

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

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

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

  2. Aşağıdaki kodu girin:

    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 ve ardından Görüntüle düğmesini seçtikten sonra bir ileti kutusu görüntülenir. 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.cs dosyasındaki olaya kod Button_Click eklersiniz.

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

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

    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 aşağıdaki ö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. Aşağıdaki kodu girin:

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

  3. Uygulamayı kaydedin.

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

Ardından, hataları aramak için uygulamada hata ayıklar ve her iki ileti kutusunu da doğru şekilde görüntüleyip göstermediğini test edebilirsiniz. Aşağıdaki yönergeler hata ayıklayıcının nasıl derlenip başlatıldığını açıklar, ancak daha sonra daha fazla bilgi için WPF uygulaması derleme (WPF) ve WPF Hatalarını Ayıklama konularını okuyabilirsiniz.

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

MainWindow'a daha belirgin bir ad verelim. Çözüm Gezgini MainWindow.xaml'e sağ tıklayın ve Yeniden Adlandır'ı seçin. Dosyayı Greetings.xaml olarak yeniden adlandırın.

Hataları bulma ve düzeltme

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

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

  1. 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 IOException oluştuğuna işaret eder: mainwindow.xaml kaynağı bulunamıyor.

    IOException message

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

MainWindow.xaml dosyasını Greetings.xaml olarak yeniden adlandırdık, ancak kod yine de uygulamanın başlangıç URI'si olarak MainWindow.xaml'e başvuruyor, bu nedenle proje başlatılamıyor.

  1. 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 IOException oluştuğuna işaret eder: mainwindow.xaml kaynağı bulunamıyor.

    Screenshot of the Output window showing a System.IO.IOException with the message, Cannot locate resource mainwindow.xaml.

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

Bu öğreticinin başında MainWindow.xamldosyasını Greetings.xaml olarak yeniden adlandırdık, ancak kod yine de uygulamanın başlangıç URI'si olarak MainWindow.xaml'e başvuruyor, bu nedenle proje başlatılamıyor.

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

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

  2. olarak StartupUri="Greetings.xaml"değiştirin StartupUri="MainWindow.xaml" 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 Gezgini'da, yeni yeniden adlandırdığınız Greetings.xaml dosyasını açın.

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

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

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

Şimdi 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ı'nı seçerek, kesmenin gerçekleşmesini istediğiniz kod satırının yanındaki düzenleyicinin sol kenar boşluğuna tıklayarak veya F9 tuşuna basarak kesme noktaları ekleyebilirsiniz.

Kesme noktaları ekleme

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

  2. Hata Ayıkla'yı ve ardından Kesme Noktasını Değiştir'i seç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ünür.

  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 Merhabaradyo düğmesini 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 tarafta birlikte bulunur ve Çağrı Yığını, Kesme Noktaları, Özel Durum Ayarlar, Komut, Anlık ve Çıkış pencereleri sağ tarafta birlikte yerleşik olarak bulunur.

    Breakpoint in the debugger

  6. Menü çubuğunda Hata Ayıklama>Adım Çıkışı'nı seçin.

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

  7. kapatmak için ileti kutusundaki 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 kutusu görüntülendiğinde, kapatmak için ileti kutusundaki Tamam düğmesini 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.

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

  2. Hata Ayıkla'yı ve ardından Kesme Noktasını Değiştir'i seç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ünür.

  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 Merhabaradyo düğmesini 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 tarafta birlikte bulunur ve Çağrı Yığını, Kesme Noktaları, Özel Durum Ayarlar, Komut, Anlık ve Çıkış pencereleri sağ tarafta birlikte yerleşik olarak bulunur.

    Screenshot of a debug session in Visual Studio. The code window for Greetings.xaml.cs shows execution stopped at a breakpoint with a line highlighted in yellow.

  6. Menü çubuğunda Hata Ayıklama>Adım Çıkışı'nı seçin.

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

  7. kapatmak için ileti kutusundaki 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 kutusu görüntülendiğinde, kapatmak için ileti kutusundaki Tamam düğmesini 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.

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 bir çalışma zamanı yardımcısıdır. İlk düğme olan Canlı Görsel Ağaç'a git'i seçin. 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.

Screenshot of Live Visual Tree window

Screenshot of the Live Visual Tree window, showing the tree of visual elements in HelloWPFApp.exe while it's running.

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

Artık her şeyin çalıştığını doğruladığınıza göre, uygulamanın bir 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 Temiz Çözüm Oluştur'a>tıklayın. Bu adım gerekli değildir, ancak hata ayıklama derleme çıkışlarını temizler.

  2. Araç çubuğundaki açılan menü denetimini kullanarak HelloWPFApp'in derleme yapılandırmasını Hata Ayıklaolan Sürüm olarak değiştirin (şu anda "Hata Ayıkla" yazıyor).

  3. Derleme Çözümü Oluştur'a>tıklayarak çözümü derleyin.

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

Sonraki adımlar

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

Diğer WPF öğreticileriyle devam edin

Ayrıca bkz.