Öğ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 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 ücretsiz yüklemek için Visual Studio indirmeleri sayfasına gidin.

Önkoşullar

• Bu öğreticiyi tamamlamak için Visual Studio'ya ihtiyacınız vardır. Ücretsiz sürüm için Visual Studio indirmeleri sayfasını ziyaret edin.

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

  Visual Studio 2022 sürüm 17.10 ve üzeri

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

  Visual Studio 2022 sürüm 17.1 - 17.9

  • Windows Uygulama SDK'sını kullanarak C# uygulama geliştirme için .NET Masaüstü Geliştirme 'i seçin.
  • Ardından, yükleme iletişim kutusunun Yükleme ayrıntıları bölmesinde Windows Uygulama SDK'sı C# Şablonları (listenin en altında) öğesini seçin.
  • Tek tek bileşenler sekmesindeki SDK'lar, kitaplıklar ve çerçeveler bölümünde Windows 10 SDK'sının (10.0.19041.0) seçili olduğundan emin olun.

  Diğer Visual Studio sürümleri

  • Windows Uygulama SDK'sını kullanarak C# uygulama geliştirmesi için .NET Masaüstü Geliştirme'yi seçin.
  • Tek tek bileşenler sekmesindeki SDK'lar, kitaplıklar ve çerçeveler bölümünde Windows 10 SDK'sının (10.0.19041.0) seçili olduğundan emin olun.

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 girin, Boş Uygulama, Paketlenmiş (Masaüstünde WinUI 3) için C# şablonunuseçin ve ardından Sonraki'yiseçin.

   

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

   

   Not

   Windows Uygulama SDK'sı 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.
   
   
   
   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 ekleyecek, düğmeye bir eylem ekleyecek 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'nde, MainWindow.xaml dosyasına çift tıklayarak XAML işaretleme düzenleyicisini açın.

   

   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.

   

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

   

Düğmedeki etiketi değiştirme

1. XAML DüzenleyicisiDüğme İçeriği değerini "Bana tıkla" yerine "Merhaba Dünya!" olarak değiştirin.

   

2. Düğmenin, olay işleyicisi olarak belirtilen myButton_Click'e sahip olduğuna da dikkat edin. Sonraki adımda bu adıma geçeceğiz.

   

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

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

   

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

   

   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. (Microsoft.UI.Xaml.Controls.ContentDialogkullanma 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 "Merhaba Dünya" Windows Uygulama SDK'sı uygulamasını oluşturma, dağıtma ve başlatma zamanı geldi. Nasıl yapıldığını burada bulabilirsiniz.

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

   

   (Alternatif olarak, menü çubuğundan hata ayıklamayı başlat >seçebilir veya uygulamanızı başlatmak için F5 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:

   

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'e tıklayın.

   

4. Uygulamayı kapatmak için araç çubuğunda hata ayıklamayı durdur düğmesini seçin. (Alternatif olarak, menü çubuğundan Hata Ayıklama> Hata Ayıklamayı Durdur seçeneğini seçin veya Shift+F5tuşuna basın.)

Sonraki adımlar

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

Ayrıca bkz.

• Windows için uygulama yazma: Geliştirme teknolojisi seçme
• Windows Uygulama SDK'sı genel bakış
• Windows Uygulama SDK'sı / WinUI 3 örnekleri