Latihan - Menulis aplikasi Formulir Windows

Selesai

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

Formulir Windows, berdasarkan API Win32 yang terkemuka, masih merupakan teknologi antarmuka pengguna populer untuk mengembangkan alat dan utilitas yang tidak memerlukan sesuatu yang mewah. Aplikasi yang dibuat dengan Formulir Windows berjalan di komputer desktop, notebook, dan tablet Windows dan memiliki penampilan yang familier bagi semua orang yang telah menggunakan komputer.

Di unit ini, kita akan:

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

Catatan

Komputer Anda harus disiapkan dengan Windows dan Visual Studio, seperti yang dijelaskan dalam modul Pelajari Pengenalan pengembangan Windows 10.

Tutorial "ucapkan halo" Formulir Windows

Membuat proyek

  1. Buka Visual Studio dan pilih File>Baru>Proyek dari menu. Dengan C# dipilih sebagai bahasa proyek, temukan dan pilih Aplikasi Formulir Windows dari opsi proyek. Ubah Nama menjadi sesuatu yang ramah seperti Ucapkan halo, dan pilih Berikutnya saat Anda selesai.

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

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

  3. Secara default, panel Kotak Alat, Penjelajah Solusi, dan Properti terbuka. Jika tidak, buka dari menu Tampilan . Perluas daftar Kontrol Umum di Kotak Alat.

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

Membangun UI

  1. Dengan panel Properti untuk Form1 terbuka, ubah entri Teks dari Form1 menjadi Ucapkan halo. Dari sisi lain layar, seret Tombol dari Kotak Alat ke bagian bawah formulir, dan tambahkan Kotak Teks ke bagian atas. Kemudian perluas kotak teks sedikit, sehingga desain Anda terlihat seperti ini:

    Screenshot that shows a button and text box dragged onto the design layout.

  2. Pilih tombol untuk memunculkan propertinya. Ubah Nama menjadi SayHelloButton, lalu gulir ke bawah properti dan ubah properti Teks menjadi Ucapkan halo.

    Screenshot that shows the Name property set in the Properties window.

    Screenshot that shows the Text property set in the Properties window.

  3. Kita perlu melampirkan peristiwa ke tombol. Anda dapat melampirkan peristiwa dengan memilih tombol dalam tampilan Desain atau dengan memilih ikon peristiwa di Properti, lalu pilih tombol Enter atau pilih entri Klik peristiwa. Metode mana pun yang Anda pilih, Visual Studio secara otomatis menambahkan kode kerangka untuk peristiwa SayHelloButton_Click ke file Form1.cs Anda dan membuka file. Lihat sekilas, lalu kembali ke tampilan Desain.

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

    Catatan

    Jika Anda secara tidak sengaja menutup tampilan Desain, Anda dapat membukanya lagi hanya dengan mengklik dua kali Form1.cs di Penjelajah Solusi. Membuka formulir Formulir Windows dalam tampilan Desain adalah tindakan default di Visual Studio.

  4. Pilih kotak teks dalam tampilan Merancang untuk membuka propertinya. Jika Anda menggunakan metode daftar peristiwa untuk menambahkan peristiwa tombol, pilih ikon kunci pas dan dokumen di Properti. Biarkan entri Nama sebagai textBox1. Pilih tanda plus di samping Font, lalu ubah Ukuran font menjadi 24. Selanjutnya, gulir ke bawah properti sedikit dan ubah properti Teks menjadi Halo di sana! dan TextAlign ke Tengah.

    Screenshot that shows the Textbox properties with the Name, BorderStyle, and font size set in the Properties window.Screenshot that shows the additional Textbox properties of Text and TextAlign set in the Properties window.

Menambahkan kode

  1. Sekarang alihkan tampilan utama sehingga Anda melihat Form1.cs.

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
    
        private void SayHelloButton_Click(object sender, EventArgs e)
        {
    
        }
    }
    
  2. Agar warna teks acak muncul, Anda perlu menambahkan variabel tingkat kelas Rand acak. Anda perlu menginisialisasinya dalam metode konstruktor Form1 dan memasukkan metode untuk mengisi array byte pendek dengan angka acak. Salin dan tempel, atau ketik, baris kode berikut:

    public partial class Form1 : Form
    {
        private Random rand;
    
        public Form1()
        {
            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, EventArgs e)
        {
    
        }
    }
    
  3. Untuk mengubah warna teks setiap kali tombol Ucapkan halo dipilih, tambahkan isi metode SayHelloButton_Click ke program Anda.

        private void SayHelloButton_Click(object sender, EventArgs e)
        {
            // Declare an array of bytes and fill it with random numbers
            byte[] rgb = GetRandomBytes(3);
            textBox1.ForeColor = Color.FromArgb(255, rgb[0], rgb[1], rgb[2]);
        }
    
  4. Luangkan waktu sejenak untuk meninjau kode Anda. Jika ada yang digaris bawahi dengan warna merah, ada yang tidak beres. Ini bisa menjadi kata yang salah eja atau sedikit kode yang salah taruh.

jalankan

Mari kita kompilasi dan jalankan program!

  1. Di Visual Studio, pada menu Debug , pilih Mulai Tanpa Penelusuran Kesalahan, atau cukup pilih kunci 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 in bright green text with the Say hello button below it.

  2. Setelah beberapa detik waktu build, berulang kali pilih Ucapkan halo dan tonton Halo di sana! warna perubahan teks.

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.