Aracılığıyla paylaş

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

  • Makale

Bu öğreticide, Visual Studio tümleşik geliştirme ortamına (IDE) giriş olarak, herhangi bir Windows 10 veya üzeri cihazda çalışan bir "Merhaba Dünya" uygulaması oluşturacaksınız. Bunu yapmak için bir Evrensel Windows Platformu (UWP) proje şablonu, Genişletilebilir Uygulama Biçimlendirme Dili (XAML) ve C# programlama dili kullanırsınız.

Not

Evrensel Windows Platformu'ndaki (UWP) geçerli işlevinizden memnunsanız proje türünüzü Windows Uygulama SDK'sına geçirmeniz gerekmez. WinUI 2.x ve Windows SDK,UWP proje türlerini destekler. WinUI 3 ve Windows Uygulama SDK'sını kullanmaya başlamak istiyorsanız, Windows Uygulama SDK'sı öğreticisindeki adımları izleyebilirsiniz.

Bu öğreticide siz:

  • Proje oluşturma
  • Uygulama oluşturma
  • Uygulamayı çalıştırma

Önkoşullar

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

Not

Bu öğretici, Boş Uygulama (Evrensel Windows) proje şablonunu gerektirir. Yükleme sırasında Evrensel Windows Platformu geliştirme iş yükünü seçin:

Evrensel Windows Platformu geliştirme iş yükünü gösteren Visual Studio Yükleyicisi'nin ekran görüntüsü.

Zaten Visual Studio'yu yüklediyseniz ve eklemeniz gerekiyorsa, menüden Araçlar>Araçları ve Özellikleri Alseçin veya Yeni proje oluşturma penceresinde, Daha fazla araç ve özellik yükle bağlantısını seçin.

'Daha fazla araç ve özellik yükle' bağlantısını gösteren Yeni proje oluştur penceresinin ekran görüntüsü.

Proje oluşturma

İlk olarak bir Evrensel Windows Platformu 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 Evrensel Windows girin, Boş Uygulama (Evrensel Windows)için C# şablonunu seçin ve ardından Sonrakiseçin.

    Arama kutusuna 'evrensel pencereler' girilmiş ve 'Boş Uygulama (Evrensel Windows)' proje şablonunun vurgulandığı 'Yeni proje oluştur' iletişim kutusunun ekran görüntüsü.

  3. Projeye bir ad verin, HelloWorld, ve Oluşturseçin.

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

  4. Varsayılan Hedef sürüm ve En düşük sürüm ayarlarını, Yeni Evrensel Windows Platformu Projesi iletişim kutusunda kabul edin.

    Varsayılan Hedef sürüm ve En düşük sürüm ayarlarını gösteren Yeni Evrensel Windows Platformu Projesi iletişim kutusunun ekran görüntüsü.

    Not

    UWP 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ğiyle birlikte UWP Ayarları iletişim kutusunu gösteren ekran görüntüsü.

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

  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 Evrensel Windows girin, Boş Uygulama (Evrensel Windows) için C# şablonunuseçin ve ardından Sonraki'yiseçin.

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

  3. Projeye bir ad verin, HelloWorld, ve Oluştur'u seçin.

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

  4. Varsayılan Hedef sürüm ve En düşük sürüm ayarlarını Yeni Evrensel Windows Platformu Projesi iletişim kutusunda kabul edin.

    Varsayılan Hedef sürüm ve En düşük sürüm ayarlarını gösteren Yeni Evrensel Windows Platformu Projesi iletişim kutusunun ekran görüntüsü.

    Not

    UWP uygulaması oluşturmak için Visual Studio'yu ilk kez kullanıyorsanız Windows için Geliştirici Modunu Etkinleştir iletişim kutusu görüntülenir. Geliştiriciler için ayarları seçin, Ayarlarıaçmak için. Geliştirici modunu açınve ardından Evetseçin.

    Geliştirici Modu'nu etkinleştirme seçeneğiyle birlikte UWP Ayarları iletişim kutusunu gösteren ekran görüntüsü.

    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 ekleyin, düğmeye bir eylem ekleyin ve ardından nasıl göründüğünü görmek için "Merhaba Dünya" uygulamasını başlatın.

Tasarım tuvaline düğme ekleme

  1. Çözüm Gezgini'de, bölünmüş görünümü açmak için MainPage.xaml'ye çift tıklayın.

    MainPage.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ü.

    İki bölme vardır: bir tasarım tuvali içeren XAML Tasarımcısıve kod ekleyebileceğiniz veya değiştirebileceğiniz XAML Düzenleyicisi.

    Visual Studio IDE'de açılmış olan MainPage.xaml dosyasının ekran görüntüsünde, XAML Düzenleyicisi bölmesinde XAML kodunun bir kısmı ve XAML Tasarımcısı bölmesinde ise boş bir tasarım yüzeyi gösterilmektedir.

  2. Araç Kutusu açılır penceresini açmak için Araç Kutusu seçin.

    XAML Tasarımcısı Bölmesi'nin sol tarafında vurgulanan 'Araç Kutusu' açılır penceresinin sekmesini gösteren ekran görüntüsü.

    Araç Kutusu seçeneğini görmüyorsanız menü çubuğundan açabilirsiniz. Bunu yapmak için Görünüm>Araç Çubuğu'nuseçin. Alternatif olarak, Ctrl+Alt+Xtuşlarına basın.

  3. Araç Kutusu penceresini sabitlemek için Pin simgesini seçin.

    Araç Kutusu penceresinin üst çubuğunda Sabitle simgesinin vurgulandığı ekran görüntüsü.

  4. Düğmesi denetimini seçin ve tasarım tuvaline sürükleyin.

    Araç Kutusu penceresinde vurgulanmış 'Düğme'yi ve tasarım tuvalinde Düğme denetimini gösteren ekran görüntüsü.

    XAML Düzenleyicisi'ndeki kodabakarsanız, Düğmesi de burada görünür:

    XAML düzenleyicisinde vurgulanan yeni eklenen Düğmenin kodunu gösteren ekran görüntüsü.

  1. Çözüm Gezgini'nde, bölünmüş görünümü açmak için MainPage.xaml 'ye çift tıklayın.

    HelloWorld projesindeki özellikleri, başvuruları, varlıkları ve dosyaları gösteren Çözüm Gezgini penceresinin ekran görüntüsü. MainPage.xaml dosyası seçilidir.

    İki bölme vardır: bir tasarım tuvali içeren XAML Tasarımcısıve kod ekleyebileceğiniz veya değiştirebileceğiniz XAML Düzenleyicisi.

    Visual Studio IDE'de açılan MainPage.xaml dosyasını gösteren ekran görüntüsü. XAML Tasarımcısı bölmesi boş bir tasarım yüzeyi, XAML Düzenleyicisi bölmesi ise XAML kodundan bazılarını gösterir.

  2. Araç Kutusu seçin, böylece Araç Kutusu açılır penceresini açabilirsiniz.

    XAML Tasarımcısı Bölmesi'nin sol tarafında vurgulanan 'Araç Kutusu' açılır penceresinin sekmesini gösteren ekran görüntüsü.

    Araç Kutusu seçeneğini görmüyorsanız menü çubuğundan açabilirsiniz. Bunu yapmak için Görünüm>Araç Çubuğu'nuseçin. Alternatif olarak, Ctrl+Alt+Xtuşlarına basın.

  3. Araç Kutusu penceresini takmak için Sabitle simgesini seçin.

    Araç Kutusu penceresinin üst çubuğunda Sabitle simgesinin vurgulandığı ekran görüntüsü.

  4. Düğmesi denetimini seçin ve tasarım tuvaline sürükleyin.

    Araç Kutusu penceresinde vurgulanmış 'Düğme'yi ve tasarım tuvalinde Düğme denetimini gösteren ekran görüntüsü.

    XAML Düzenleyicisikoduna bakarsanız Düğme'nin de burada göründüğünü görürsünüz:

    XAML düzenleyicisinde vurgulanan yeni eklenen Düğmenin kodunu gösteren ekran görüntüsü.

Düğmeye etiket ekleme

  1. XAML Düzenleyicisiiçinde, Button Content değerini Düğmesi'dan Hello World! olarak değiştirin.

    İçerik özelliği Hello World olarak değiştirilmiş şekilde XAML düzenleyicisinde Düğme için XAML kodunu gösteren ekran görüntüsü!

  2. XAML Tasarımcısı'ndaki düğmenin de değiştiğine dikkat edin.

    XAML Tasarımcısı tuvalinde Düğme denetimini gösteren ekran görüntüsü ve düğmenin etiketi Hello World olarak değiştirildi!

  1. XAML Düzenleyicisi'de Düğmesi'ndeki Button Content değerini Merhaba Dünya! olarak değiştirin.

    XAML düzenleyicisinde, İçerik özelliğinin değeri 'Hello World!' olarak değiştirilmiş Buton için XAML kodunu gösteren ekran görüntüsü.

  2. XAML Tasarımcısı'ndaki düğmenin de değiştiğine dikkat edin.

    XAML Tasarımcısı tuvalinde Düğme denetimini gösteren ekran görüntüsü ve düğmenin etiketi Hello World olarak değiştirildi!

Olay işleyicisi ekleme

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! düğmesine bir eylem ekler.

  1. Tasarım tuvalinde düğme denetimine çift tıklayın.

  2. Sayfanın kod arka planı olan MainPage.xaml.cs'deki 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ştirin:

    Yeni eşzamansız Button_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)
{
   MediaElement mediaElement = new MediaElement();
   var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
   Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
   mediaElement.SetSource(stream, stream.ContentType);
   mediaElement.Play();
}

  1. Tasarım tuvalinde düğme denetimine çift tıklayın.

  2. Arka planda kod sayfası olan MainPage.xaml.csolay 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ştirin:

    Yeni asenkron Button_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)
{
   MediaElement mediaElement = new MediaElement();
   var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
   Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
   mediaElement.SetSource(stream, stream.ContentType);
   mediaElement.Play();
}

Az önce ne yaptık?

Kod, konuşma sentezi nesnesi oluşturmak için bazı Windows API'lerini kullanır ve ardından bunu söylemek için bir metin verir. SpeechSynthesiskullanma hakkında daha fazla bilgi için bkz. System.Speech.Synthesis.

Uygulamayı çalıştırma

"Nasıl göründüğünü ve nasıl ses çıkardığını görmek için 'Hello World' UWP uygulamasını inşa etmenin, 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. Yerel Makine metnine sahiptir.

    'Yerel Makine' seçiliyken Oynat düğmesinin yanında açılır 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 bu görsele benzer şekilde görünmelidir:

    Çalışan UWP '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ız gerçekten "Merhaba, Dünya!" diyor.

  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 belirleyin veya Shift+F5tuşlarına basın.

"Hello World" UWP uygulamasını nasıl göründüğünü ve sesini görmek için oluşturmanın, dağıtmanın ve başlatmanın artık zamanı geldi. Nasıl yapıldığını burada bulabilirsiniz.

  1. Uygulamayı yerel makinede başlatmak için Yürüt düğmesini (Yerel Makine ) kullanın.

    'Yerel Makine' seçiliyken Oynat düğmesinin yanında açılır kutuyu gösteren ekran görüntüsü.

    Alternatif olarak, menü çubuğundan hata ayıklama>başlatma seçebilir ya da 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 UWP 'Hello World' uygulamasını gösteren ekran görüntüsü.

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

    Windows 10 veya daha yeni cihazınız, tam anlamıyla "Merhaba, Dünya!"

  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şlarına basın.

İlgili içerik

Sonraki adım

Bu öğreticiyi tamamladığınız için tebrikler! UWP ve Visual Studio IDE hakkında bazı temel bilgileri öğrendiğinizi umuyoruz. Daha fazla bilgi edinmek için aşağıdaki öğreticiyle devam edin:

Kullanıcı arabirimi oluşturma