Aracılığıyla paylaş

Öğretici: XAML ve C ile Visual Studio'da ilk Windows Uygulama SDK uygulamanızı oluşturma#

  • Makale

Visual Studio tümleşik geliştirme ortamına (IDE) bu girişte, herhangi bir Windows 10 veya üzeri cihazda çalışan bir "Merhaba Dünya" uygulaması oluşturacaksınız. Bunu yapmak için bir Windows Uygulama SDK'sı (WinUI 3) proje şablonu, Genişletilebilir Uygulama Biçimlendirme Dili (XAML) ve C# programlama dili kullanacaksınız.

Not

WinUI 3, Windows Uygulama SDK'sı (Windows SDK'larından tamamen ayrılmış) ile birlikte gelen yerel ui platformu bileşenidir. Daha fazla bilgi için bkz . WinUI 3.

Visual Studio'yu henüz yüklemediyseniz Visual Studio indirmeleri sayfasına giderek ücretsiz yükleyin.

Bir proje oluştur

İlk olarak bir WinUI 3 projesi oluşturun. Proje türü, herhangi bir şey eklemeden önce ihtiyacınız olan tüm şablon dosyalarıyla birlikte gelir!

Önemli

Visual Studio 2019 yalnızca Windows Uygulama SDK 1.1 ve önceki sürümleri destekler. Windows Uygulama SDK'sının tüm sürümleriyle uygulama geliştirmek için Visual Studio 2022 önerilir.

Windows Uygulama SDK'sı 1.1.x şablonları visual studio uzantısı (VSIX) yüklenerek kullanılabilir.

Not

Windows Uygulama SDK'sı Visual Studio uzantısı (VSIX) zaten yüklüyse, başka bir sürümü yüklemeden önce bu uzantıyı kaldırın. Yönergeler için bkz . Visual Studio için uzantıları yönetme.

  • Visual Studio'dan en son kararlı 1.1.x sürümü VSIX'i yükleyebilirsiniz. Uzantılar>Uzantıları Yönet'i seçin, Windows Uygulama SDK'sını arayın ve Windows Uygulama SDK'sı uzantısını indirin. Visual Studio'yu kapatıp yeniden açın ve uzantıyı yüklemek için istemleri izleyin. Windows Uygulama SDK'sı 1.1 için şablonları yüklediğinizden emin olun.
  • Alternatif olarak, uzantıyı doğrudan Visual Studio Market'ten indirebilir ve yükleyebilirsiniz:

Windows Uygulama SDK'sı C# SDK VS2019 Şablonlarını indirin

Şablonlar uzantısı yüklendikten sonra ilk projenizi oluşturabilirsiniz. Visual Studio 2019 desteği hakkında daha fazla bilgi için bkz . Windows Uygulama SDK'sı için araçları yükleme. Bu öğreticinin geri kalanında Visual Studio 2022 kullandığınız varsayılır.

  1. Visual Studio'yu açın ve başlangıç penceresinde Yeni proje oluştur'u seçin.

  2. Yeni proje oluştur ekranında, arama kutusuna WinUI yazın, Boş Uygulama, Paketlenmiş (Masaüstünde WinUI 3) için C# şablonunu seçin ve ardından İleri'yi seçin.

    Screenshot of the 'Create a new project' dialog with 'WinUI' entered in the search box, and the 'Blank App, Packaged (WinUI 3 in Desktop)' project template highlighted.

    Not

    Boş Uygulama, Paketlenmiş (Masaüstünde WinUI 3) proje şablonunu görmüyorsanız Daha fazla araç ve özellik yükle bağlantısına tıklayın.

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Visual Studio Yükleyicisi başlatılır. .NET Masaüstü Geliştirme iş yükünü seçin, ardından yükleme iletişim kutusunun Yükleme ayrıntıları bölmesinde Windows Uygulama SDK'sı C# Şablonları'nı (listenin en altında) seçin. Şimdi Değiştir'i seçin.

    Screenshot of the Visual Studio Installer showing the .NET Desktop Development workload.

  3. Projeye HelloWorld adını verin ve Oluştur'u seçin.

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

    Not

    Windows Uygulama SDK'sı uygulaması oluşturmak için Visual Studio'yu ilk kez kullanıyorsanız, bir Ayarlar iletişim kutusu görüntülenebilir. Geliştirici modu'nu ve ardından Evet'i seçin.

    Screenshot showing the Settings dialog box with the option for enabling Developer Mode.

    Visual Studio sizin için ek bir Geliştirici Modu paketi yükler. Paket yüklemesi tamamlandığında Ayarlar iletişim kutusunu kapatın.

Uygulamayı oluşturma

Geliştirmeye başlamanın zamanı geldi. Düğme denetimi ekleyeceksiniz, düğmeye bir eylem ekleyeceksiniz ve ardından nasıl göründüğünü görmek için "Merhaba Dünya" uygulamasını çalıştıracaksınız.

Tasarım tuvaline düğme ekleme

  1. Çözüm Gezgini MainWindow.xaml'e çift tıklayarak XAML işaretleme düzenleyicisini açın.

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainWindow.xaml is selected.

    XAML Düzenleyicisi, işaretleme ekleyebileceğiniz veya değiştirebileceğiniz yerdir. UWP projelerinin aksine WinUI 3'de Tasarım görünümü yoktur.

    Screenshot showing MainWindow.xaml open in the Visual Studio IDE. The XAML Editor pane shows the XAML markup for the window.

  2. Pencerenin kökündeki StackPanel içinde iç içe yerleştirilmiş Düğme denetimini gözden geçirin.

    Screenshot showing 'Button' highlighted in the XAML editor.

Düğmedeki etiketi değiştirme

  1. XAML Düzenleyicisi'nde Düğme İçeriği değerini "Bana tıklayın" yerine "Merhaba Dünya!" olarak değiştirin.

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. Düğmenin myButton_Click adlı bir Click olay işleyicisi de belirtildiğine dikkat edin. Sonraki adımda bu adıma geçeceğiz.

    Screenshot showing the XAML code for the Button in the XAML editor. The click event of the button has been highlighted.

Olay işleyicisini değiştirme

"Olay işleyicisi" karmaşık görünebilir, ancak bir olay gerçekleştiğinde çağrılan kod için başka bir addır. Bu durumda, "Merhaba Dünya!" düğmesi tarafından tetiklenen bir eylem ekler.

  1. Çözüm Gezgini'da mainWindow.xaml.cs dosyasına çift tıklayın( arka planda kod sayfası).

  2. Açılan C# düzenleyicisi penceresinde olay işleyici kodunu düzenleyin.

    burada işler ilginçleşiyor. Varsayılan olay işleyicisi şöyle görünür:

    Screenshot showing the C# code for the default myButton_Click event handler.

    Şunun gibi görünmesi için değiştirelim:

    Screenshot showing the C# code for the new async myButton_Click event handler.

    Kopyalayıp yapıştırmak için gereken kod şu şekildedir:

    private async void myButton_Click(object sender, RoutedEventArgs e)
{
    var welcomeDialog = new ContentDialog()
    {
        Title = "Hello from HelloWorld",
        Content = "Welcome to your first Windows App SDK app.",
        CloseButtonText = "Ok",
        XamlRoot = myButton.XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

Az önce ne yaptık?

Kod, geçerli pencere içindeki kalıcı bir açılan denetimde karşılama iletisi görüntülemek için ContentDialog denetimini kullanır. (kullanma Microsoft.UI.Xaml.Controls.ContentDialoghakkında daha fazla bilgi için bkz . ContentDialog Sınıfı.)

Uygulamayı çalıştırma

Nasıl göründüğünü görmek için "Merhaba Dünya" Windows Uygulama SDK'sı uygulamasını oluşturmanın, dağıtmanın ve başlatmanın zamanı geldi. Bunu nasıl yapacağınızı buradan öğrenebilirsiniz.

  1. Uygulamayı yerel makinede başlatmak için Yürüt düğmesini (HelloWorld (Paket) metnini içeriyor) kullanın.

    Screenshot showing the drop-down box open next to the Play button with 'HelloWorld (Package)' selected.

    (Alternatif olarak,Menü çubuğundan Hata Ayıklamayı Başlat'ta hata ayıklayın>veya uygulamanızı başlatmak için F5 tuşuna basın.)

  2. Bir giriş ekranı kaybolduktan hemen sonra görünen uygulamanızı görüntüleyin. Uygulama şu görüntüye benzer görünmelidir:

    Screenshot showing the running Windows App SDK 'Hello World' application.

  3. Merhaba Dünya düğmesini seçin.

    Windows 10 veya üzeri cihazınızda "HelloWorld'den Merhaba" başlığıyla "İlk Windows Uygulama SDK uygulamanıza hoş geldiniz" yazan bir ileti görüntülenir. İletiyi kapatmak için Tamam'a tıklayın.

    Screenshot showing the running 'Hello World' application with a popup titled 'Hello from HelloWorld'.

  4. Uygulamayı kapatmak için araç çubuğunda Hata Ayıklamayı Durdur düğmesini seçin. (Alternatif olarak,Hata ayıklama>Menü çubuğundan hata ayıklamayı durdurun veya Shift+F5 tuşlarına basın.)

Sonraki adımlar

Bu öğreticiyi tamamladıktan sonra tebrikler! Windows Uygulama SDK'sı, WinUI 3 ve Visual Studio IDE hakkında bazı temel bilgileri öğrendiğinizi umuyoruz. Daha fazla bilgi edinmek için aşağıdaki öğreticiyle devam edin:

Öğretici: WinUI 3 ile basit bir fotoğraf görüntüleyici oluşturma

Ayrıca bkz.