Öğ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!
Visual Studio'yu açın ve başlangıç penceresinde Yeni proje oluştur'u seçin.
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.
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.
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.Projeye HelloWorld adını verin ve Oluştur'u seçin.
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.
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.
Visual Studio sizin için ek bir Geliştirici Modu paketi yükler. Paket yüklemesi tamamlandığında Ayarlar iletişim kutusunu kapatın.
Visual Studio'yu açın ve başlangıç penceresinde Yeni proje oluştur'u seçin.
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.
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.
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.
Projeye HelloWorld adını verin ve Oluştur'u seçin.
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.
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.
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
Çözüm Gezgini MainPage.xaml'e çift tıklayarak bölünmüş bir görünüm açın.
İ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.
Araç Kutusu açılır penceresini açmak için Araç Kutusu'nu seçin.
(Ş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.)
Araç Kutusu penceresini sabitlemek için Sabitle simgesine tıklayın.
Düğme denetimine tıklayın ve ardından tasarım tuvaline sürükleyin.
XAML Düzenleyicisi'ndeki koda bakarsanız, Düğme'nin de buraya eklendiğini görürsünüz:
Çözüm Gezgini MainPage.xaml'e çift tıklayarak bölünmüş bir görünüm açın.
İ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.
Araç Kutusu açılır penceresini açmak için Araç Kutusu'nu seçin.
(Ş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.)
Araç Kutusu penceresini sabitlemek için Sabitle simgesini seçin.
Düğme denetimini seçin ve tasarım tuvaline sürükleyin.
XAML Düzenleyicisi'ndeki koda bakarsanız, Düğme'nin de buraya eklendiğini görürsünüz:
Düğmeye etiket ekleme
XAML Düzenleyicisi'nde Düğme İçeriği değerini "Düğme" yerine "Merhaba Dünya!" olarak değiştirin.
XAML Tasarım Aracı düğmesinin de değiştiğine dikkat edin.
XAML Düzenleyicisi'nde Düğme İçeriği değerini "Düğme" yerine "Merhaba Dünya!" olarak değiştirin.
XAML Tasarım Aracı düğmesinin de değiştiğine dikkat edin.
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.
Tasarım tuvalinde düğme denetimine çift tıklayın.
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:
Şunun gibi görünmesi için değiştirelim:
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(); }
Tasarım tuvalinde düğme denetimine çift tıklayın.
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:
Şunun gibi görünmesi için değiştirelim:
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 SpeechSynthesis
hakkı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.
Uygulamayı yerel makinede başlatmak için Yürüt düğmesini (Yerel Makine metnine sahiptir) kullanın.
(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.)
Bir giriş ekranı kaybolduktan hemen sonra görünen uygulamanızı görüntüleyin. Uygulama şuna benzer görünmelidir:
Merhaba Dünya düğmesine tıklayın.
Windows 10 veya üzeri cihazınız tam anlamıyla "Merhaba Dünya!"
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.
Uygulamayı yerel makinede başlatmak için Yürüt düğmesini (Yerel Makine metnine sahiptir) kullanın.
(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.)
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:
Merhaba Dünya düğmesini seçin.
Windows 10 veya üzeri cihazınız kelimenin tam anlamıyla "Merhaba Dünya!".
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: