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

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 kullanırsınız.

Not

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

Önkoşullar

  • Bu öğreticiyi tamamlamak için Visual Studio 2026 veya Visual Studio 2022'nin en son sürümü gerekir. Ücretsiz sürüm için bkz. Visual Studio indirmeleri.
  • WinUI ve Windows Uygulama SDK'sı ile geliştirme için gereken iş yükleri ve bileşenler. Visual Studio'da bir iş yükünü doğrulamak veya yüklemek için Araçlar'ı, ardından>Araçlar ve Özellikleri Edin'i seçin. Daha fazla bilgi için bkz. iş yüklerini veya tek tek bileşenleri değiştirme.

Visual Studio Yükleyicisi'nin İş Yükleri sekmesinde aşağıdakileri seçin:

Windows Uygulama SDK'sını kullanarak C# uygulama geliştirme için WinUI uygulama geliştirme'yi seçin.

Windows Uygulama SDK'sını kullanarak C# uygulama geliştirme için WinUI uygulama geliştirme'yi seçin.

Not

Visual Studio 17.10 - 17.12'de bu iş yükü Windows uygulama geliştirme olarak adlandırılır.

Ayrıntılar için bkz . Windows Uygulama SDK'sı için araçları yükleme.

Proje oluşturma

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

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

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

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

  3. Projeye HelloWorldbir ad verin ve Oluşturseçeneğini seçin.

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

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

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

    Visual Studio 2022'de arama kutusuna 'WinUI' girilmiş ve WinUI Boş Uygulaması (Paketlenmiş) proje şablonunun vurgulandığı 'Yeni proje oluştur' iletişim kutusunun ekran görüntüsü.

  3. Projeye HelloWorldbir ad verin ve Oluşturseçeneğini seçin.

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

Not

Bu makale, Windows Uygulama SDK uygulaması oluşturmak için Visual Studio'yu ilk kez kullanıyorsanız, Ayarlar iletişim kutusu görüntülenebilir. Geliştirici modunuseçin ve ardından Evetseçin.

Geliştirici Modu'nu etkinleştirme seçeneğinin gösterildiği Ayarlar iletişim kutusunu gösteren ekran görüntüsü.

Visual Studio sizin için başka 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. Burada bir düğme denetimi ekler, düğmeye bir eylem ekler ve ardından nasıl göründüğünü görmek için Hello World uygulamasını çalıştırırsınız.

Tasarım tuvaline düğme ekleme

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

    MainWindow.xaml dosyasının seçili olduğu HelloWorld projesindeki özellikleri, başvuruları, varlıkları ve dosyaları gösteren Çözüm Gezgini penceresinin ekran görüntüsü.

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

    Visual Studio IDE'de mainWindow.xaml dosyasının açık olduğunu gösteren ekran görüntüsü. XAML Düzenleyicisi bölmesinde pencere için XAML işaretlemesi gösterilir.

  2. Öğenin içinde <Grid> yazmaya <Button başlayın. IntelliSense size bir düğme seçeneği sunar. Kabul etmek için Sekme tuşuna basın.

    XAML düzenleyicisinde vurgulanmış 'Düğme'yi gösteren ekran görüntüsü.

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

    Visual Studio 2022'de MainWindow.xaml dosyasının seçili olduğu HelloWorld projesindeki özellikleri, başvuruları, varlıkları ve dosyaları gösteren Çözüm Gezgini penceresinin ekran görüntüsü.

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

    Visual Studio 2022 IDE'de açılan MainWindow.xaml dosyasını gösteren ekran görüntüsü. XAML Düzenleyicisi bölmesinde pencere için XAML işaretlemesi gösterilir.

  2. Window'nin kökündeki StackPanel içinde yer alan Düğme kontrolünü gözden geçirin.

    XAML düzenleyicisinde vurgulanmış 'Düğme'yi gösteren ekran görüntüsü.

Düğmedeki etiketi değiştirme

  1. XAML Düzenleyicisi'nde Düğme İçeriği değerini geçerli değerinden "Hello World!" olarak değiştirin.

    XAML düzenleyicisinde Button için XAML kodunu gösteren ve content özelliğinin değeri Hello World olarak değiştirilmiş ekran görüntüsü!

  2. İmlecinizi öğenin başlangıç etiketine <Button> getirin (var olan özniteliklerden sonra, örneğin Content) ve Click yazmaya başlayın. Intellisense , Button_Click adlı yeni bir olay işleyicisi sunar. Sonraki bölümde bu kodla çalışacaksınız.

    Düğmenin tıklama olayının vurgulandığı XAML düzenleyicisinde Düğme için XAML kodunu gösteren ekran görüntüsü.

  1. XAML Düzenleyicisi'nde Düğme İçeriği değerini geçerli değerinden "Hello World!" olarak değiştirin.

    Visual Studio 2022'deki XAML düzenleyicisinde Düğme için XAML kodunu gösteren ve content özelliğinin değeri Hello World olarak değiştirilmiş ekran görüntüsü!

  2. Düğmenin, olay işleyicisi olarak belirtilen myButton_Click'e sahip olduğuna da dikkat edin. Sonraki adımda bununla çalışacaksınız.

    Visual Studio 2022'deki XAML düzenleyicisinde Düğmenin XAML kodunu gösteren ve düğmenin tıklama olayının vurgulandığı ekran görüntüsü.

Olay işleyicisini değiştirme

olay işleyicisi karmaşık görünebilir, ancak bir olay meydana geldiğinde çağrılan kod için başka bir isimden ibarettir. Bu durumda, Hello World tarafından tetiklenen bir eylem ekler! Düğme.

  1. Çözüm Gezgini'nde, kodun arka plan sayfası olan MainWindow.xaml.csdosyasına çift tıklayın.

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

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

    Varsayılan Button_Click olay işleyicisinin C# kodunu gösteren ekran görüntüsü.

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

    Yeni async myButton_Click olay işleyicisinin C# kodunu gösteren ekran görüntüsü.

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

    private async void Button_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 = ((FrameworkElement)sender).XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

  1. Çözüm Gezgini'nde, kodun arka plan sayfası olan MainWindow.xaml.csdosyasına çift tıklayın.

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

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

    Visual Studio 2022'de varsayılan Button_Click olay işleyicisinin C# kodunu gösteren ekran görüntüsü.

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

    Visual Studio 2022'deki yeni zaman uyumsuz myButton_Click olay işleyicisinin C# kodunu gösteren ekran görüntüsü.

    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, mevcut pencere içinde karşılama iletisini mod bir açılır pencerede görüntülemek için ContentDialog denetimini kullanır. kullanma Microsoft.UI.Xaml.Controls.ContentDialog hakkı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 Hello World Windows Uygulama SDK'sı uygulamasını oluşturmanın, dağıtmanın ve başlatmanın zamanı geldi. Nasıl yapıldığını burada bulabilirsiniz.

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

    'HelloWorld (Paket)' öğesinin seçili olduğu Yürüt düğmesinin yanındaki açılan kutuyu gösteren ekran görüntüsü.

    Alternatif olarak, menü çubuğundan "Hata Ayıklama Başlat>" seçeneğini seçebilir veya uygulamanızı başlatmak için "F5" tuşuna basabilirsiniz.

  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:

    Çalışan Windows Uygulama SDK'sı 'Hello World' uygulamasını gösteren ekran görüntüsü.

  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" iletisi görüntülenir. İletiyi kapatmak için Tamam'ı seçin.

    Çalışan 'Hello World' uygulamasını gösteren ekran görüntüsü ve 'HelloWorld'den Merhaba' başlıklı bir açılır pencere.

  4. Uygulamayı kapatmak için araç çubuğunda hata ayıklamayı durdur düğmesini seçin. Alternatif olarak, menü çubuğunda hata ayıklamayı>durdur'u seçin veya Shift+F5 tuşlarına basın.

İlgili içerik

Bu öğreticiyi tamamladığınız için 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:

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

Bu kaynaklar da yararlı olabilir:

  • Last updated on