Membuat dan menyesuaikan formulir

Artikel
07/13/2023

Jika Anda membuat aplikasi yang mengharuskan pengguna untuk memasukkan sejumlah besar informasi, kemungkinan Anda ingin membuat formulir untuk diisi. Artikel ini akan menunjukkan kepada Anda apa yang perlu Anda ketahui untuk membuat formulir yang berguna dan kuat.

Kita akan membahas kontrol XAML apa yang masuk ke formulir, cara terbaik menyusunnya di halaman Anda, dan cara mengoptimalkan formulir Anda untuk mengubah ukuran layar. Tetapi karena formulir adalah tentang posisi relatif elemen visual, mari kita diskusikan tata letak halaman terlebih dahulu dengan XAML.

Apa yang perlu Anda ketahui?

UWP tidak memiliki kontrol formulir eksplisit yang dapat Anda tambahkan ke aplikasi dan mengonfigurasi. Sebagai gantinya, Anda harus membuat formulir dengan mengatur kumpulan elemen UI di halaman.

Untuk melakukannya, Anda harus memahami panel tata letak. Ini adalah kontainer yang menyimpan elemen UI aplikasi Anda, memungkinkan Anda mengatur dan mengelompokkannya. Menempatkan panel tata letak dalam panel tata letak lain memberi Anda banyak kontrol atas di mana dan bagaimana item Anda ditampilkan dalam kaitannya satu dengan yang lain. Ini juga membuatnya jauh lebih mudah untuk menyesuaikan aplikasi Anda dengan mengubah ukuran layar.

Baca dokumentasi ini pada panel tata letak. Karena formulir biasanya ditampilkan dalam satu atau beberapa kolom vertikal, Anda harus mengelompokkan item serupa di StackPanel, dan mengaturnya dalam RelativePanel jika perlu. Mulai menyusun beberapa panel sekarang — jika Anda memerlukan referensi, di bawah ini adalah kerangka kerja tata letak dasar untuk formulir dua kolom:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Customer">
        <!--Save and Cancel buttons-->
    </StackPanel>
</RelativePanel>

Apa yang terjadi dalam formulir?

Anda harus mengisi formulir Anda dengan berbagai Kontrol XAML. Anda mungkin terbiasa dengan itu, tetapi jangan ragu untuk membaca jika Anda membutuhkan penyegaran. Secara khusus, Anda akan menginginkan kontrol yang memungkinkan pengguna Anda memasukkan teks atau memilih dari daftar nilai. Ini adalah daftar dasar opsi yang dapat Anda tambahkan - Anda tidak perlu membaca semuanya, cukup sehingga Anda memahami seperti apa tampilannya dan cara kerjanya.

TextBox memungkinkan pengguna memasukkan teks ke dalam aplikasi Anda.
ToggleSwitch memungkinkan pengguna memilih di antara dua opsi.
DatePicker memungkinkan pengguna memilih nilai tanggal.
TimePicker memungkinkan pengguna memilih nilai waktu.
ComboBox diperluas untuk menampilkan daftar item yang dapat dipilih. Anda dapat mempelajari selengkapnya tentang mereka di sini

Anda mungkin juga ingin menambahkan tombol, sehingga pengguna dapat menyimpan atau membatalkan.

Format kontrol dalam tata letak Anda

Anda tahu cara mengatur panel tata letak dan memiliki item yang ingin Anda tambahkan, tetapi bagaimana panel tata letak harus diformat? Halaman formulir memiliki beberapa panduan desain tertentu. Baca bagian tentang Jenis formulir dan tata letak untuk saran yang berguna. Kita akan membahas aksesibilitas dan tata letak relatif lebih cepat.

Dengan mengingat saran tersebut, Anda harus mulai menambahkan kontrol pilihan Anda ke dalam tata letak Anda, memastikan mereka diberi label dan diberi spasi dengan benar. Sebagai contoh, berikut adalah kerangka bare-bones untuk formulir satu halaman menggunakan tata letak, kontrol, dan panduan desain di atas:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" HorizontalAlignment="Left" />
            <RelativePanel>
                <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" HorizontalAlignment="Left" />
                <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0" RelativePanel.RightOf="City">
                    <!--List of valid states-->
                </ComboBox>
            </RelativePanel>
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.Below="Customer">
        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <DatePicker x:Name="TargetInstallDate" Header="Target install Date" HorizontalAlignment="Left" Margin="0,24,0,0"></DatePicker>
        <TimePicker x:Name="InstallTime" Header="Install Time" HorizontalAlignment="Left" Margin="0,24,0,0"></TimePicker>
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Associate">
        <Button Content="Save" Margin="24" />
        <Button Content="Cancel" Margin="24" />
    </StackPanel>
</RelativePanel>

Jangan ragu untuk menyesuaikan kontrol Anda dengan lebih banyak properti untuk pengalaman visual yang lebih baik.

Buat tata letak Anda responsif

Pengguna mungkin melihat UI Anda di berbagai perangkat dengan lebar layar yang berbeda. Untuk memastikan bahwa mereka memiliki pengalaman yang baik terlepas dari layarnya, Anda harus menggunakan desain responsif. Baca halaman itu untuk saran yang baik tentang filosofi desain untuk diingat saat Anda melanjutkan.

Tata letak Responsif dengan halaman XAML memberikan gambaran umum terperinci tentang cara mengimplementasikan ini. Untuk saat ini, kita akan fokus pada tata letak fluida dan status visual di XAML.

Kerangka formulir dasar yang telah kita satukan sudah merupakan tata letak yang cair, karena sebagian besar tergantung pada posisi kontrol relatif dengan hanya penggunaan minimal ukuran dan posisi piksel tertentu. Ingatlah panduan ini untuk lebih banyak UI yang mungkin Anda buat di masa depan.

Lebih penting untuk tata letak responsif adalah status visual. Status visual menentukan nilai properti yang diterapkan ke elemen tertentu saat kondisi tertentu benar. Baca tentang cara melakukan ini di xaml, lalu terapkan ke dalam formulir Anda. Berikut adalah tampilan yang sangat mendasar dalam sampel kami sebelumnya:

<Page ...>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="Associate.(RelativePanel.RightOf)" Value="Customer"/>
                        <Setter Target="Associate.(RelativePanel.Below)" Value=""/>
                        <Setter Target="Save.(RelativePanel.Below)" Value="Customer"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <RelativePanel>
            <!-- Customer StackPanel -->
            <!-- Associate StackPanel -->
            <!-- Save StackPanel -->
        </RelativePanel>
    </Grid>
</Page>

Penting

Saat Anda menggunakan StateTriggers, selalu pastikan bahwa VisualStateGroups dilampirkan ke anak pertama akar. Di sini, Grid adalah anak pertama dari elemen Halaman akar.

Tidak praktis untuk membuat status visual untuk berbagai ukuran layar, juga tidak lebih dari beberapa kemungkinan akan berdampak signifikan pada pengalaman pengguna aplikasi Anda. Sebaiknya desain sebagai gantinya untuk beberapa titik henti utama - Anda dapat membaca selengkapnya di sini.

Menambahkan dukungan aksesibilitas

Sekarang setelah Anda memiliki tata letak yang dibangun dengan baik yang merespons perubahan ukuran layar, hal terakhir yang dapat Anda lakukan untuk meningkatkan pengalaman pengguna adalah membuat aplikasi Anda dapat diakses. Ada banyak yang bisa masuk ke dalam ini, tetapi dalam bentuk seperti ini lebih mudah daripada yang terlihat. Fokus pada hal berikut:

Dukungan keyboard - pastikan urutan elemen di panel UI Anda cocok dengan tampilannya di layar, sehingga pengguna dapat dengan mudah menelusurinya.
Dukungan pembaca layar - pastikan semua kontrol Anda memiliki nama deskriptif.

Saat Membuat tata letak yang lebih kompleks dengan elemen visual lainnya, Anda mungkin ingin melihat daftar periksa aksesibilitas untuk detail selengkapnya. Bagaimanapun, meskipun aksesibilitas tidak diperlukan untuk aplikasi, ini membantunya menjangkau dan melibatkan audiens yang lebih besar.

Melaju lebih jauh

Meskipun Anda telah membuat formulir di sini, konsep tata letak dan kontrol berlaku di semua UI XAML yang mungkin Anda buat. Jangan ragu untuk kembali melalui dokumen yang telah kami tautkan dan bereksperimenlah dengan formulir yang Anda miliki, menambahkan fitur UI baru dan lebih menyempurnakan pengalaman pengguna. Jika Anda menginginkan panduan langkah demi langkah melalui fitur tata letak yang lebih rinci, lihat tutorial tata letak adaptif kami

Formulir juga tidak harus ada dalam vakum - Anda bisa melangkah lebih jauh dan menyematkan formulir Anda dalam pola daftar/detail atau NavigationView. Atau jika Anda ingin mengerjakan kode di belakang untuk formulir Anda, Anda mungkin ingin memulai dengan gambaran umum peristiwa kami.

API dan dokumen yang berguna

Berikut adalah ringkasan singkat API dan dokumentasi berguna lainnya untuk membantu Anda mulai bekerja dengan Pengikatan Data.

API yang Berguna

API	Deskripsi
Kontrol yang berguna untuk formulir	Daftar kontrol input yang berguna untuk membuat formulir, dan panduan dasar tempat menggunakannya.
Kisi	Panel untuk mengatur elemen dalam tata letak multi-baris dan multi-kolom.
RelativePanel	Panel untuk mengatur item dalam kaitannya dengan elemen lain dan batas panel.
StackPanel	Panel untuk mengatur elemen ke dalam satu garis horizontal atau vertikal.
VisualState	Memungkinkan Anda mengatur tampilan elemen UI saat berada dalam status tertentu.

Dokumen yang berguna

Topik	Deskripsi
Gambaran umum aksesibilitas	Gambaran umum skala luas tentang opsi aksesibilitas di aplikasi.
Daftar periksa aksesibilitas	Daftar periksa praktis untuk memastikan aplikasi Anda memenuhi standar aksesibilitas.
Gambaran umum peristiwa	Detail tentang menambahkan dan menyusun peristiwa untuk menangani tindakan UI.
Bentuk	Panduan keseluruhan untuk membuat formulir.
Panel tata letak	Memberikan gambaran umum tentang jenis panel tata letak dan tempat menggunakannya.
Pola daftar/detail	Pola desain yang dapat diimplementasikan di sekitar satu atau beberapa bentuk.
Tampilan Navigasi	Kontrol yang dapat berisi satu atau beberapa formulir.
Desain responsif	Gambaran umum prinsip desain responsif skala besar.
Tata letak responsif dengan XAML	Informasi spesifik tentang status visual dan implementasi desain responsif lainnya.
Ukuran layar untuk desain responsif	Panduan tentang ukuran layar tempat tata letak responsif harus dilingkup.

Sampel kode yang berguna

Sampel kode	Deskripsi
Database Pesanan Pelanggan	Lihat tata letak dan formulir yang sedang beraksi pada sampel perusahaan multi-halaman.
Galeri Kontrol XAML	Lihat pilihan kontrol XAML, dan cara penerapannya.
Sampel kode tambahan	Pilih Kontrol, tata letak, dan teks dalam daftar drop-down kategori untuk melihat sampel kode terkait.

Bagikan melalui