Alıştırma - UWP uygulaması yazma
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
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.
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.
Çö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.
Kullanıcı arabirimini tasarlama
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.
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:
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.
Ş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.
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.
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.
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.
Ö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.
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.
Düzen bölümünü daraltın.
Metin boyutu listesinde, nokta boyutunu 36 olarak değiştirin: güzel ve görünür bir şey!
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.
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!
Görünümü Daralt ve Ortak'ı genişletin. Metin kutusunun metnini girin: Orada Merhaba! gibi kolay bir şey.
Uygulamanızın kullanıcı arabirimi öğelerini neredeyse tamamladınız. <XAML dosyanızdaki Kılavuz> girdisi aşağıdaki gibi görünmelidir:
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
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) { } }
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;
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) { } }
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; }
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!
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:
"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.