Latihan - Menulis aplikasi WPF

  • 15 menit

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

Windows Presentation Foundation (WPF) di Visual Studio memberi pengembang antarmuka API untuk membangun aplikasi untuk komputer desktop, notepad, dan tablet. WPF dibangun pada sistem grafis DirectX yang kuat dan menyediakan banyak fitur dan efek UI yang hebat dengan sedikit upaya pemrograman.

Dalam unit ini, kami:

  • Gunakan Visual Studio untuk membuat proyek WPF.
  • Tambahkan antarmuka pengguna dan elemen kode ke proyek untuk membuat variasi menyenangkan dari program "hello world". Teks "Halo di sana!" dan warna batas berubah secara acak setiap kali Anda memilih tombol Ucapkan halo .
  • Pelajari cara mengatur properti dan membuat peristiwa.

Catatan

Kami berasumsi Anda telah menyiapkan komputer dengan Windows dan Visual Studio, seperti yang dijelaskan dalam Pengenalan modul Learn untuk pengembangan Windows 10.

Tutorial WPF "Ucapkan halo"

Membuat proyek

  1. Buka Visual Studio dan pilih File>Baru>Proyek dari menu. Pilih C# sebagai bahasa proyek. Selanjutnya, pilih jenis proyek Aplikasi WPF, dan, di bidang Nama , masukkan nama yang mudah diingat seperti Ucapkan halo. Pilih Berikutnya saat Anda selesai.

    Screenshot that shows the Configure your new project window for a WPF App with the Next button selected.

  2. Pilih versi .NET Anda, lalu pilih Buat.

  3. Saat proyek terbuka, ada baiknya untuk memastikan bahwa panel Penjelajah Solusi dan Properti terbuka. Lokasinya, secara default, di sisi kanan jendela Visual Studio. Jika tidak terlihat, buka menu Tampilan dan pilih keduanya.

  4. Dalam Penjelajah Solusi pastikan Anda dapat melihat nama dua file yang sedang kami kerjakan: MainWindow.xaml dan kodenya di belakang file, MainWindows.xaml.cs. Pilih MainWindow.xaml untuk membukanya.

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

Merancang antarmuka pengguna

  1. Jika Kotak Alat tidak terbuka, pilih menu Tampilan, lalu pilih Kotak Alat. Di Kotak Alat, pilih Kontrol WPF Umum.

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

  2. Seret Tombol ke bagian bawah tata letak perancang. Lalu seret Kotak Teks ke bagian atas tata letak, dan seret sudutnya sedikit keluar sehingga terlihat seperti yang Anda lihat di sini:

    Screenshot that shows a button dragged onto the design layout.

    Catatan

    Perhatikan bagaimana tombol dan entri TextBox ditambahkan ke <Grid> dalam definisi XAML yang ditampilkan di bawah tata letak.

  3. Selanjutnya, kita ingin memperbarui teks yang muncul di bilah judul jendela. Pilih Jendela dalam tata letak perancang sehingga propertinya terlihat di panel Properti, lalu ubah Judul untuk Menyapa.

  4. Sekarang kita ingin mengatur beberapa properti pada elemen UI baru. Pilih tombol agar propertinya muncul di panel Properti. Ubah Nama menjadi sesuatu yang sederhana seperti SayHelloButton, dan ubah Konten di properti Umum untuk Menyapa.

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

  5. Kita perlu melampirkan peristiwa ke tombol. Anda dapat memilih tombol itu sendiri, tetapi itu hanya berfungsi jika tata letak perancang dalam status yang diperlukan. Cara yang lebih pasti untuk memasukkan peristiwa adalah dengan membuka peristiwa yang tersedia untuk item antarmuka pengguna tersebut. Anda melakukannya dengan memilih ikon petir yang diperlihatkan di sini di panel Properti lalu cukup pilih entri untuk peristiwa Klik. Melakukannya secara otomatis membuat SayHelloButton_Click peristiwa bernama, menambahkan entri kode yang sesuai di file MainWindow.xaml.cs, dan membuka file untuk Anda.

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

  6. Kami belum memasukkan kode apa pun, jadi pilih MainWindow.xaml di tampilan utama. Kami terus bekerja di UI untuk saat ini.

  7. Pilih kotak teks yang Anda buat di perancang untuk menampilkan propertinya. Kami akan membuat beberapa perubahan pada properti untuk kotak teks. Jika peristiwa ditampilkan di panel Properti , pilih ikon kunci pas di samping nama untuk kembali ke properti bernama.

  8. Ubah entri Nama menjadi textBox1, lalu, di properti Tata Letak, ubah Lebar dan Tinggi masing-masing menjadi 360 dan 80.

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

  9. Ciutkan bagian Tata Letak.

  10. Dalam daftar Ukuran teks, ubah ukuran titik menjadi 36: sesuatu yang bagus dan terlihat!

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

  11. Tab font, berlabel A, terbuka secara default untuk bagian Teks . Pilih ikon paragraf dan ubah perataan menjadi Tengah.

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

  12. Ciutkan bagian Teks dan perluas Tampilan. Pilih panah bawah di bagian bawah daftar properti tampilan yang diekspos untuk mengekspos daftar lengkap. Ubah ketebalan batas menjadi 1 untuk batas kiri dan atas dan menjadi 8 untuk batas kanan dan bawah. Sekarang kotak memiliki sedikit efek bayangan jatuh!

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

  13. Ciutkan Tampilan dan perluas Umum. Masukkan teks untuk kotak teks: sesuatu yang ramah seperti Halo!.

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

Anda hampir selesai dengan elemen UI untuk aplikasi Anda. Entri <Kisi> dalam file XAML Anda akan terlihat seperti berikut ini:

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.

Catatan

Anda dapat mengedit XAML secara langsung, mengubah nilai numerik atau bahkan menambahkan seluruh elemen UI. Kami tidak akan melakukannya dalam tutorial ini.

Tulis kode di belakang

  1. Kita sekarang dapat berpindah dari antarmuka pengguna ke kode untuk aplikasi kita. Saatnya membuka kembali file MainWindow.xaml.cs. Pilih file dari atas tampilan utama atau di Penjelajah Solusi. Kelas MainWindow akan terlihat seperti berikut:

    public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

  2. Mari kita pastikan kita memiliki semua yang diperlukan menggunakan pernyataan. Pastikan Anda memiliki yang diperlihatkan di sini, dan tambahkan jika tidak. Setelah selesai mengedit file, Anda dapat secara opsional menghapus pernyataan yang tidak perlu yang disertakan Visual Studio saat membuat proyek. (Namespace layanan yang tidak digunakan muncul berwarna abu-abu.)

    using System;
using System.Windows;
using System.Windows.Media;

  3. Aplikasi merender teks hello dalam warna acak setiap kali tombol dipilih. Jadi kita perlu menambahkan objek Acak tingkat kelas dan metode GetRandomBytes yang secara acak mengisi nilai yang kita gunakan sebagai pengaturan RGB. Salin dan tempel kode ini, atau ketik sendiri, sehingga kelas MainWindow Anda terlihat seperti ini:

    public partial class MainWindow : Window
{
    private Random rand;

    public MainWindow()
    {
        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. Terakhir, kita perlu memanggil GetRandomBytes dari peristiwa klik tombol, membuat warna acak dari array byte yang dikembalikan, lalu mengubah properti kotak teks ke warna tersebut. Metode SayHelloButton_Click Anda yang telah selesai akan terlihat seperti berikut:

        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. Luangkan waktu satu atau dua detik untuk memeriksa kode Anda. Jika ada yang digaris bawahi dengan warna merah, ada yang tidak beres. Ini bisa menjadi kata yang salah eja atau sepotong kode di mana seharusnya tidak.

jalankan

Mari kita kompilasi dan jalankan program!

  1. Di Visual Studio, pada menu Debug, pilih Mulai Tanpa Penelusuran Kesalahan (atau Mulai Penelusuran Kesalahan, meskipun kami tidak melakukan penelusuran kesalahan apa pun dalam tutorial ini), atau cukup pilih tombol F5. Jika Anda telah memasukkan semuanya dengan benar, Anda akan melihat aplikasi yang sedang berjalan yang mirip dengan yang satu ini:

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

  2. Pilih tombol Ucapkan halo berulang kali untuk melihat teks Halo di sana! dan batas berubah menjadi warna acak.

Jika itu yang anda lihat, dilakukan dengan baik! Anda telah menyelesaikan tutorial ini. Jika tidak, periksa kembali kode dan pengaturan properti antarmuka pengguna Anda dengan hati-hati untuk menemukan sesuatu yang salah.