Alıştırma - UWP uygulaması yazma

  • 15 dakika

Screenshot that shows the UWP, WPF, and Windows Forms logo.

Visual Studio'da Evrensel Windows Platformu (UWP), tek bir uygulamanın herhangi bir cihazda çalışmasını sağlayan bir teknolojidir: masaüstü, dizüstü bilgisayar, tablet, Xbox, Surface Hub veya HoloLens cihazı. UWP için geliştirme ile Windows Presentation Foundation (WPF) için geliştirme arasında birçok benzerlik vardır, ancak bazı küçük farklılıklar da vardır. Bu öğretici bu farklılıkları kapsar ve UWP programlama dünyasına ilk adımdır.

Bu ünitede:

  • Yeni bir UWP projesi oluşturmak için Visual Studio'yu kullanın.
  • "Merhaba dünya" programının eğlenceli bir varyasyonunu oluşturmak için projeye kullanıcı arabirimi ve kod öğeleri ekleyin. "Merhaba orada!" metni ve kenarlık, Merhaba de düğmesini her seçtiğinizde rastgele renk değiştirir.
  • Özellikleri ayarlamayı ve olayları oluşturmayı öğrenin.

Dekont

Bilgisayarınızı Windows ve Visual Studio 2022 ile ayarladığınızı varsayıyoruz. Bu, Windows 10 geliştirmesine giriş başlıklı Learn modülünde anlatılmaktadır.

UWP "Merhaba de" öğreticisi

Proje oluşturma

  1. Visual Studio'yu açın ve menüden Dosya Yeni>Proje'yi seçin.> Ardından proje dili olarak C# öğesini seçin. Ardından Boş Uygulama (Evrensel Windows) proje türünü seçin. Ad alanına SayHello gibi kolay bir ad girin. İşiniz bittiğinde Oluştur'u seçin.

    Dekont

    Yeni Evrensel Windows Platformu Projesi iletişim kutusu size UWP'nin Hedef ve En Düşük sürümleri seçeneklerini sunduğunda Tamam'ı seçmeniz gerekir. Varsayılan seçimler bu proje için yeterli olacaktır.

    Screenshot that shows the Configure your new project window for a Blank App (Universal Windows) with the create button selected.

  2. Proje açıldığında, Çözüm Gezgini ve Özellikler bölmelerinin açık olduğundan emin olmak iyi bir fikirdir. Bunlar varsayılan olarak Visual Studio'nun sağ tarafında bulunur. Bunlar görünmüyorsa Görünüm menüsünü açın ve her ikisini de seçin.

  3. Çözüm Gezgini üzerinde çalıştığımız iki dosyanın adlarını görebildiğinize emin olun: MainPage.xaml ve arka planda kod dosyası olan MainPage.xaml.cs. MainPage.xaml dosyasını seçerek açın.

    Screenshot that shows the MainPage.xaml and MainPage.xaml.cs files in a red box in Solution Explorer.

Kullanıcı arabirimini tasarlama

  1. Araç Kutusu paneli henüz açık değilse Görünümmenüsünü ve ardından Araç Kutusu'nu seçin. Araç Kutusu'nda Ortak XAML Denetimleri'ni seçin.

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

  2. Düğmeyi tasarımcı düzeninin alt kısmına sürükleyin. Ardından bir TextBox'ı düzenin üst kısmına sürükleyin ve köşelerini biraz dışarı doğru sürükleyerek burada gördüğünüz gibi görünmesini sağlar:

    Screenshot that shows a button dragged onto the design layout.

    Dekont

    Düğme ve Araç Kutusu girişlerinin düzenin altında görünen XAML tanımında Kılavuz'a>< nasıl eklendiğine dikkat edin.

  3. Şimdi bu kullanıcı arabirimi öğelerinde bazı özellikler ayarlamak istiyoruz. Özellikleri Özellikler bölmesinde görünecek şekilde düğmeyi seçin. Ad'ıSayHelloButton gibi basit bir adla değiştirin ve İçerik'i (Ortak'ı genişleterek) Merhaba deyin olarak değiştirin.

    Screenshot that shows the Name and Content properties set in the Properties window.

    Dekont

    Name özelliğinin düzenin altında görünen XAML tanımındaki Button girdisine nasıl eklendiğine dikkat edin. Tasarımcıda özellikleri değiştirdiğinizde XAML tanımı otomatik olarak güncelleştirilir.

  4. Düğmeye bir olay eklemeliyiz. Düğmenin kendisini seçebilirsiniz, ancak bu yalnızca tasarımcı düzeni gerekli durumdaysa çalışır. Bir olayı girmenin daha kesin bir yolu, söz konusu kullanıcı arabirimi öğesi için kullanılabilen olayları açmaktır. Bunu, burada Özellikler bölmesinde gösterilen simgeyi seçip Tıklama olayı için girdiyi seçerek yaparsınız. Bunu yaptığınızda adlandırılmış olay SayHelloButton_Click otomatik olarak oluşturulur, MainPage.xaml.cs dosyasına uygun kod girdisi eklenir ve dosya sizin için açılır.

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

  5. Henüz herhangi bir kod girmediğimiz için ana görünümde MainPage.xaml öğesini seçin. Şimdilik kullanıcı arabirimi üzerinde çalışmaya devam edin.

  6. Özelliklerini ortaya çıkarmak için tasarımcıda oluşturduğunuz metin kutusunu seçin. Metin kutusunun özelliklerinde birkaç değişiklik yapacağız. Olaylar Özellikler bölmesinde gösteriliyorsa, adlandırılmış özelliklere dönmek için adın yanındaki anahtar simgesini seçin.

  7. Ad girdisini textBox1 olarak değiştirin ve düzen özelliklerinde Genişlik ve Yükseklik'isırasıyla 360 ve 80 olarak değiştirin.

    Screenshot that shows the Layout properties of Width and Height set in the Properties window.

  8. Düzen bölümünü daraltın.

  9. Metin boyutu listesinde, nokta boyutunu 36 olarak değiştirin: güzel ve görünür bir şey!

    Screenshot that shows the Name set as textBox1 in the properties, and the Tex tab open with 36px selected as the text size.

  10. A ile etiketlenmiş yazı tipi sekmesi, Metin bölümü için varsayılan olarak açıktır. Paragraf simgesini seçin ve hizalamayı Ortala olarak değiştirin.

    Screenshot that shows the paragraph tab under the Text menu selected, and Center selected as the paragraph justification.

  11. Metin bölümünü daraltın ve Görünüm'i genişletin. Tam listeyi kullanıma açmak için, kullanıma sunulan görünüm özellikleri listesinin altındaki aşağı oku seçin. Sol ve üst kenarlıklar için kenarlık kalınlığını 1 , sağ ve alt kenarlıklar için 8 olarak değiştirin. Artık kutu biraz gölge efektine sahip!

    Screenshot that shows the Appearance menu expanded in the Properties window, with the BorderThickness settings in a red box.

  12. Görünümü Daralt ve Ortak'ı genişletin. Metin kutusunun metnini girin: Orada Merhaba! gibi kolay bir şey.

    Screenshot that shows the Common menu expanded in the Properties window, with Hello there entered in the Text property.

Uygulamanızın kullanıcı arabirimi öğelerini neredeyse tamamladınız. <XAML dosyanızdaki Kılavuz> girdisi aşağıdaki gibi görünmelidir:

Screenshot that shows an example of the the XAML file, with a Button and TextBox element inside the Grid element. All of the Button and Textbox properties are displayed.

Dekont

Kayıt için evet, XAML'yi doğrudan düzenleyebilir, sayısal değerleri değiştirebilir ve hatta ui öğelerinin tamamını ekleyebilirsiniz. Bu öğreticide bunu yapmayacağız.

Kodu arkasına yazın

  1. Artık kullanıcı arabiriminden uygulamamızın koduna geçebiliriz. MainPage.xaml.cs dosyasını yeniden açmanın zamanı geldi. Dosyayı ana görünümün üstünde veya Çözüm Gezgini seçin. MainPage sınıfı aşağıdaki gibi görünmelidir:

    public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  2. Deyimleri kullanarak gerekli tüm işlemleri gerçekleştirdiğimizden emin olalım. Aşağıdakilere sahip olup olmadığınızı denetleyin ve yoksa bunları ekleyin. Özellikle, Windows.UI; deyiminin kullanıldığından emin olun. Dosyayı düzenlemeyi bitirdiğinizde, visual studio'nun projeyi oluştururken içerdiği deyimleri kullanarak gereksiz tüm deyimleri isteğe bağlı olarak kaldırabilirsiniz. Kullanılmayan ad alanları gri renkte görünür.

    using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

  3. Uygulama, düğme her seçildiğinde merhaba metnini rastgele bir renkle işler. Bu nedenle, RGB ayarları olarak kullandığımız değerleri rastgele dolduran sınıf düzeyinde bir Random nesnesi ve GetRandomBytes yöntemi eklemeliyiz. Bu kodu kopyalayıp yapıştırın veya sınıf MainPage'inizin aşağıdaki gibi görünmesi için kendiniz yazın:

    public sealed partial class MainPage : Page
{
    private Random rand;

    public MainPage()
    {
        this.InitializeComponent();
        rand = new Random();
    }

    private byte[] GetRandomBytes(int n)
    {
        // Fill an array of bytes of length "n" with random numbers.
        var randomBytes = new byte[n];
        rand.NextBytes(randomBytes);
        return randomBytes;
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  4. Son olarak, düğme tıklama olayından GetRandomBytes çağrısı yapmamız, döndürülen bayt dizisinden rastgele bir renk oluşturmamız ve ardından metin kutusu özelliklerini bu renge değiştirmemiz gerekir. Tamamlanmış SayHelloButton_Click yönteminiz aşağıdaki gibi görünmelidir:

        private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {
        byte[] rgb = GetRandomBytes(3);

        // Create a solid color brush using the three random numbers.
        var randomColorBrush = new SolidColorBrush(Color.FromArgb(255, rgb[0], rgb[1], rgb[2]));

        // Set both the text color and the text box border to the random color.
        textBox1.BorderBrush = randomColorBrush;
        textBox1.Foreground = randomColorBrush;
    }

  5. Kodunuzu denetlemek için bir veya iki saniye bekleyin. Kırmızıyla altı çizili bir şey varsa, bir şeyler doğru değildir. Yanlış yazılmış bir sözcük veya olmaması gereken bir kod parçası olabilir.

Çalıştır

Şimdi programı derleyip çalıştıralım!

  1. Visual Studio'da Hata Ayıkla menüsünde Hata Ayıklama Olmadan Başlat'ı seçin veya yalnızca F5 tuşunu seçin. Her şeyi doğru girdiyseniz aşağıdakine benzer çalışan bir uygulama görmeniz gerekir:

    Screenshot that shows the app running. Hello there displays with green text in a green box with the Say hello button below it.

  2. "Merhaba!" metnini görmek için Merhaba de düğmesini tekrar tekrar seçin ve kenarlık rastgele renklere dönüşür.

Eğer gördüğün buysa, ala! Bu öğreticiyi tamamladınız. Aksi takdirde, hataya neden olan bir şey için kodunuzu ve kullanıcı arabirimi özellik ayarlarınızı dikkatle yeniden inceleyin.