Aracılığıyla paylaş


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

Not

Evrensel Windows Platformu(UWP) içindeki 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.

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 Evrensel Windows Platformu (UWP) proje şablonu, Genişletilebilir Uygulama Biçimlendirme Dili (XAML) ve C# programlama dili kullanacaksınız.

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

Bir proje oluştur

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

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

    Screenshot of the 'Create a new project' dialog with 'universal windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Not

    Boş Uygulama (Evrensel Windows) 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. Evrensel Windows Platformu geliştirme iş yükünü ve ardından Değiştir'i seçin.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform 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.

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

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    Not

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

  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 Evrensel Windows yazın, Boş Uygulama (Evrensel Windows) için C# şablonunu seçin ve ardından İleri'yi seçin.

    Screenshot of the 'Create a new project' dialog with 'Universal Windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Not

    Boş Uygulama (Evrensel Windows) 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. Evrensel Windows Platformu geliştirme iş yükünü ve ardından Değiştir'i seçin.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform 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.

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

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    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ştiricilerin Ayarlar açmasıiçin ayarları seçin. Geliştirici modunu açın ve ardından Evet'i seçin.

    Screenshot showing the UWP 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. Bir 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ı başlatacaksınız.

Tasarım tuvaline düğme ekleme

  1. Çözüm Gezgini MainPage.xaml'e çift tıklayarak bölünmüş bir görünüm açın.

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

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

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

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

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    (Şunu görmüyorsanız:Araç kutusu seçeneği, menü çubuğundan açabilirsiniz. Bunu yapmak için Araç Çubuğunu Görüntüle'yi>seçin. Veya Ctrl+Alt+X tuşlarına basın.)

  3. Araç Kutusu penceresini sabitlemek için Sabitle simgesine tıklayın.

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

  4. Düğme denetimine tıklayın ve ardından tasarım tuvaline sürükleyin.

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    XAML Düzenleyicisi'ndeki koda bakarsanız, Düğme'nin de buraya eklendiğini görürsünüz:

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

  1. Çözüm Gezgini MainPage.xaml'e çift tıklayarak bölünmüş bir görünüm açın.

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

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

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

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

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    (Şunu görmüyorsanız:Araç kutusu seçeneği, menü çubuğundan açabilirsiniz. Bunu yapmak için Araç Çubuğunu Görüntüle'yi>seçin. Veya Ctrl+Alt+X tuşlarına basın.)

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

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

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

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    XAML Düzenleyicisi'ndeki koda bakarsanız, Düğme'nin de buraya eklendiğini görürsünüz:

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

Düğmeye etiket ekleme

  1. XAML Düzenleyicisi'nde Düğme İçeriği değerini "Düğme" 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. XAML Tasarım Aracı düğmesinin de değiştiğine dikkat edin.

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

  1. XAML Düzenleyicisi'nde Düğme İçeriği değerini "Düğme" 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. XAML Tasarım Aracı düğmesinin de değiştiğine dikkat edin.

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

Olay işleyicisi ekleme

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

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

  2. MainPage.xaml.cs dosyasındaki olay işleyici kodunu, arka planda kod sayfası olarak 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 Button_Click event handler.

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

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

    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. MainPage.xaml.cs dosyasındaki olay işleyici kodunu, arka planda kod sayfası olarak 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 Button_Click event handler.

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

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

    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. (kullanma SpeechSynthesishakkında daha fazla bilgi için bkz. System.Speech.Synthesis.)

Uygulamayı çalıştırma

Nasıl göründüğünü ve nasıl göründüğünü görmek için "Merhaba Dünya" UWP 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 (Yerel Makine metnine sahiptir) kullanın.

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' 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 şuna benzer görünmelidir:

    Screenshot showing the running UWP 'Hello World' application.

  3. Merhaba Dünya düğmesine tıklayın.

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

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

Nasıl göründüğünü ve nasıl göründüğünü görmek için "Merhaba Dünya" UWP 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 (Yerel Makine metnine sahiptir) kullanın.

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' 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 UWP 'Hello World' application.

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

    Windows 10 veya üzeri cihazınız kelimenin tam anlamıyla "Merhaba Dünya!".

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

Ayrıca bkz.