Membuat dan menyesuaikan formulir

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

Kami akan membahas kontrol XAML apa yang masuk ke dalam formulir, cara terbaik mengaturnya di halaman Anda, dan cara mengoptimalkan formulir Anda untuk mengubah ukuran layar. Tetapi karena formulir adalah tentang posisi relatif elemen visual, mari kita bahas dulu tata letak halaman dengan XAML.

Apa yang perlu Anda ketahui?

UWP tidak memiliki kontrol formulir eksplisit yang dapat Anda tambahkan ke aplikasi dan konfigurasikan. Sebagai gantinya, Anda harus membuat formulir dengan mengatur kumpulan elemen UI pada 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 kendali atas di mana dan bagaimana item Anda ditampilkan dalam kaitannya satu sama lain. Ini juga membuatnya jauh lebih mudah untuk menyesuaikan aplikasi Anda dengan perubahan ukuran layar.

Baca dokumentasi ini di panel tata letak. Karena formulir biasanya ditampilkan dalam satu atau lebih kolom vertikal, Anda harus mengelompokkan item serupa dalam StackPanel, dan mengaturnya di dalam RelativePanel jika perlu. Mulailah menyusun beberapa panel sekarang - jika Anda memerlukan referensi, di bawah ini adalah kerangka 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 bentuk?

Anda harus mengisi formulir Anda dengan bermacam-macam Kontrol XAML. Anda mungkin akrab dengan itu, tetapi jangan ragu untuk membaca jika Anda membutuhkan penyegaran. Secara khusus, Anda akan menginginkan kontrol yang memungkinkan pengguna untuk memasukkan teks atau memilih dari daftar nilai. Ini adalah daftar dasar opsi yang dapat Anda tambahkan – Anda tidak perlu membaca semuanya tentang mereka, cukup sehingga Anda memahami seperti apa bentuknya dan bagaimana 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 memperluas untuk menampilkan daftar item yang dapat dipilih. Anda dapat mempelajari lebih lanjut tentang mereka di sini

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

Memformat kontrol dalam tata letak Anda

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

Dengan saran itu dalam pikiran, Anda harus mulai menambahkan kontrol pilihan Anda ke dalam tata letak Anda, memastikan mereka diberi label dan spasi dengan benar. Sebagai contoh, berikut adalah garis besar 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.

Membuat 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 layar mereka, Anda harus menggunakan desain responsif. Baca halaman itu untuk saran yang baik tentang filosofi desain yang perlu diingat saat Anda melanjutkan.

Tata letak Responsif dengan halaman XAML memberikan gambaran rinci tentang cara menerapkan ini. Untuk saat ini, kami akan fokus pada tata letak fluida dan status visual di XAML.

Garis besar bentuk dasar yang telah kami kumpulkan sudah merupakan tata letak fluida, 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.

Yang lebih penting untuk tata letak responsif adalah status visual. Status visual mendefinisikan nilai properti yang diterapkan pada elemen tertentu ketika kondisi tertentu benar. Baca tentang cara melakukan ini di xaml, dan kemudian terapkan ke dalam formulir Anda. Inilah yang mungkin terlihat 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 melekat pada anak pertama dari root. Di sini, Grid adalah anak pertama dari elemen Halaman root.

Tidak praktis untuk membuat status visual untuk beragam ukuran layar, juga tidak lebih dari pasangan yang cenderung memiliki dampak signifikan pada pengalaman pengguna aplikasi Anda. Kami sarankan merancang sebagai gantinya untuk beberapa titik kunci - Anda dapat membaca lebih lanjut 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-hal berikut:

  • Dukungan keyboard - pastikan urutan elemen di panel UI Anda cocok dengan cara mereka ditampilkan di layar, sehingga pengguna dapat dengan mudah melewatinya.
  • Dukungan pembaca layar - pastikan semua kontrol Anda memiliki nama deskriptif.

Saat membuat tata letak yang lebih kompleks dengan elemen visual yang lebih banyak, Anda harus berkonsultasi dengan daftar periksa aksesibilitas untuk detail lebih lanjut. Lagi pula, meskipun aksesibilitas tidak diperlukan untuk aplikasi, ini membantunya menjangkau dan melibatkan audiens yang lebih besar.

Melangkah lebih jauh

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

Formulir juga tidak harus ada dalam ruang hampa - Anda bisa melangkah lebih jauh dan menanamkan formulir Anda dalam pola daftar / detail atau NavigationView. Atau jika Anda ingin mengerjakan kode di belakang untuk formulir Anda, Anda mungkin ingin memulai dengan ikhtisar acara kami.

API dan dokumen yang berguna

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

API yang berguna

API Deskripsi
Kontrol yang berguna untuk formulir Daftar kontrol input yang berguna untuk membuat formulir, dan panduan dasar tentang di mana menggunakannya.
Grid Panel untuk mengatur elemen dalam tata letak multi-baris dan multi-kolom.
RelativePanel Panel untuk mengatur item dalam kaitannya dengan elemen lain dan batas-batas panel.
StackPanel Panel untuk mengatur elemen menjadi satu garis horizontal atau vertikal.
VisualState Memungkinkan Anda untuk mengatur tampilan elemen UI saat berada di 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.
Form 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 bentuk.
Desain responsif Ikhtisar prinsip desain responsif skala besar.
Tata letak responsif dengan XAML Informasi spesifik tentang keadaan visual dan implementasi lain dari desain responsif.
Ukuran layar untuk desain responsif Panduan tentang ukuran layar mana yang tata letak responsifnya harus dicakup.

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 bagaimana penerapannya.
Sampel kode tambahan Pilih Kontrol, tata letak, dan teks dalam daftar turun bawah kategori untuk melihat sampel kode terkait.