Tambahkan kontrol visual ke aplikasi .NET MAUI
Sekarang setelah Anda menggunakan templat .NET MAUI untuk membuat aplikasi, langkah selanjutnya adalah menambahkan antarmuka pengguna dan menerapkan logika UI awal.
Dalam unit ini, Anda mempelajari lebih lanjut tentang blok penyusun aplikasi .NET MAUI (Antarmuka Pengguna Aplikasi Multi-platform) dan struktur navigasi.
Apa yang ada dalam proyek .NET MAUI?
Untuk direkap, sebuah proyek .NET MAUI awalnya berisi:
File MauiProgram.cs yang berisi kode untuk membuat dan mengonfigurasi objek Aplikasi.
File App.xaml dan App.xaml.cs yang menyediakan sumber daya antarmuka pengguna dan membuat jendela awal untuk aplikasi.
File AppShell.xaml dan AppShell.xaml.cs yang menentukan halaman awal untuk aplikasi dan menangani pendaftaran halaman untuk perutean navigasi.
File MainPage.xaml dan MainPage.xaml.cs yang menentukan tata letak dan logika UI untuk halaman yang ditampilkan secara default di jendela awal.
Anda dapat menambahkan halaman lebih lanjut ke aplikasi seperlunya, dan Anda dapat membuat lebih banyak kelas untuk mengimplementasikan logika bisnis yang diperlukan aplikasi.
Proyek .NET MAUI juga berisi kumpulan sumber daya aplikasi default seperti gambar, ikon, dan font, dan kode bootstrap default untuk setiap platform.
Kelas Aplikasi
Kelas mewakili App aplikasi .NET MAUI secara keseluruhan. Ini mewarisi sekumpulan perilaku default dari Microsoft.Maui.Controls.Application. Ingat dari unit sebelumnya bahwa itu adalah App kelas yang instans dan dimuat kode bootstrap untuk setiap platform. Konstruktor App kelas akan, pada gilirannya, biasanya membuat instans AppShell kelas dan menetapkannya ke MainPage properti . Kode inilah yang mengontrol layar pertama yang dilihat pengguna berdasarkan definisi di AppShell.
Kelas Aplikasi juga berisi:
Metode untuk menangani peristiwa siklus hidup, termasuk ketika aplikasi dikirim ke latar belakang (yaitu, ketika berhenti menjadi aplikasi latar depan).
Metode untuk membuat
Windowsbaru untuk aplikasi. Aplikasi .NET MAUI memiliki satu jendela secara default, tetapi Anda dapat membuat dan meluncurkan lebih banyak jendela, yang berguna dalam aplikasi desktop dan tablet.
Shell
.NET Multi-platform App UI (.NET MAUI) Shell mengurangi kompleksitas pengembangan aplikasi dengan menyediakan fitur-fitur mendasar yang dibutuhkan sebagian besar aplikasi, termasuk:
- Satu tempat untuk menjelaskan hierarki visual aplikasi.
- Pengalaman pengguna navigasi umum.
- Skema navigasi berbasis URI yang mengizinkan navigasi ke halaman mana pun dalam aplikasi.
- Pengatur pencarian terintegrasi.
Dalam aplikasi .NET MAUI Shell, hierarki visual aplikasi dijelaskan dalam kelas yang mensubkelas kelas Shell. Kelas ini dapat terdiri dari tiga objek hierarki utama:
FlyoutItematauTabBar. mewakiliFlyoutItemsatu atau beberapa item dalam flyout, dan harus digunakan saat pola navigasi untuk aplikasi memerlukan flyout. mewakiliTabBarbilah tab bawah, dan harus digunakan saat pola navigasi untuk aplikasi dimulai dengan tab bawah dan tidak memerlukan flyout.Tab, yang mewakili konten yang dikelompokkan, dapat dinavigasi oleh tab bawah.ShellContent, yang mewakili objek ContentPage untuk setiap tab.
Objek ini tidak mewakili antarmuka pengguna apa pun, melainkan organisasi hierarki visual aplikasi. Shell mengambil objek ini dan menghasilkan antarmuka pengguna navigasi untuk konten.
Halaman
Halaman adalah akar hierarki antarmuka pengguna dalam .NET MAUI di dalam Shell. Sejauh ini, solusi yang Anda lihat mencakup kelas yang disebut MainPage. Kelas ini berasal dari ContentPage, yang merupakan jenis halaman yang paling sederhana dan paling umum. Halaman konten hanya menampilkan kontennya. .NET MAUI juga memiliki beberapa jenis halaman bawaan lainnya, termasuk:
TabbedPage: Halaman akar yang digunakan untuk navigasi tab. Halaman tab berisi objek halaman turunan; satu untuk setiap tab.FlyoutPage: Memungkinkan Anda menerapkan presentasi gaya master/detail. Halaman flyout berisi daftar item. Saat Anda memilih item, tampilan yang menampilkan detail untuk item tersebut akan muncul.
Jenis halaman lainnya tersedia, dan sebagian besar digunakan untuk mengaktifkan pola navigasi yang berbeda dalam aplikasi multi-layar.
Tampilan
Halaman konten biasanya menampilkan tampilan. Tampilan memungkinkan Anda mengambil dan menyajikan data dengan cara tertentu. Tampilan default untuk halaman konten adalah ContentView, yang menampilkan item sebagaimana adanya. Jika Anda menyusutkan tampilan, item mungkin menghilang dari tampilan hingga Anda mengubah ukuran tampilan. Memungkinkan ScrollView Anda menampilkan item di jendela gulir; jika Anda menyusutkan jendela, Anda dapat menggulir ke atas dan ke bawah untuk menampilkan item. A CarouselView adalah tampilan yang dapat digulir yang memungkinkan pengguna untuk mengusap kumpulan item. A CollectionView bisa mengambil data dari sumber data bernama dan menyajikan setiap item menggunakan templat sebagai format. Ada banyak jenis tampilan lain yang tersedia juga.
Kontrol dan tata letak
Tampilan bisa berisi kontrol tunggal seperti tombol, label, atau kotak teks. (Secara ketat, tampilan itu sendiri adalah kontrol, sehingga tampilan dapat berisi tampilan lain.) Namun, antarmuka pengguna yang dibatasi untuk satu kontrol tidak akan berguna, sehingga kontrol diposisikan dalam tata letak. Tata letak menentukan aturan di mana kontrol ditampilkan relatif satu sama lain. Tata letak juga merupakan kontrol, sehingga Anda bisa menambahkannya ke tampilan. Jika Anda melihat file MainPage.xaml default, Anda akan melihat hierarki halaman/tampilan/tata letak/kontrol ini dalam tindakan. Dalam kode XAML ini, VerticalStackLayout elemen hanyalah kontrol lain yang memungkinkan Anda menyempurnakan tata letak kontrol lain.
<ContentPage ...>
<ScrollView ...>
<VerticalStackLayout>
<Image ... />
<Label ... />
<Label ... />
<Button ... />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Beberapa kontrol umum yang digunakan untuk menentukan tata letak adalah:
VerticalStackLayoutdanHorizontalStackLayout, yang merupakan tata letak tumpukan yang dioptimalkan yang meletakkan kontrol dalam tumpukan atas-ke-bawah atau kiri-ke-kanan. TersediaStackLayoutjuga, yang memiliki properti bernamaStackOrientationyang dapat Anda atur keHorizontalatauVertical. Di tablet atau ponsel, mengubah properti ini dalam kode aplikasi memungkinkan Anda menyesuaikan tampilan jika pengguna memutar perangkat:
AbsoluteLayout, yang memungkinkan Anda mengatur koordinat yang tepat untuk kontrol.FlexLayout, yang sama kecualiStackLayoutmemungkinkan Anda untuk membungkus kontrol turunan di dalamnya jika mereka tidak pas dalam satu baris atau kolom. Tata letak ini juga menyediakan opsi untuk menyelaraskan dan beradaptasi dengan ukuran layar yang berbeda. Misalnya,FlexLayoutkontrol dapat menyelaraskan kontrol turunannya ke kiri, kanan, atau tengah saat diatur secara vertikal. Saat diratakan secara horizontal, Anda dapat membenarkan kontrol untuk memastikan penspasian merata. Anda bisa menggunakanFlexLayouthorizontal di dalamScrollViewuntuk menampilkan rangkaian bingkai yang dapat digulir secara horizontal (setiap bingkai itu sendiri bisa disusun secara vertikalFlexLayout):
Grid, yang menjabarkan kontrolnya sesuai dengan lokasi kolom dan baris yang Anda tetapkan. Anda dapat menentukan ukuran kolom dan baris dan rentangnya, sehingga tata letak kisi tidak selalu memiliki "tampilan papan centang" untuknya.
Gambar berikut merangkum atribut utama dari jenis tata letak umum ini:
Tata letak tumpukan memperlihatkan empat kotak yang disusun secara vertikal. Tata letak absolut menunjukkan empat kotak yang disusun pada layar persis di mana pengembang ditentukan. Tata Letak Flex memperlihatkan beberapa kotak yang ditata di layar untuk memanfaatkan area layar dengan sepantasnya. Tata letak Kisi memperlihatkan beberapa kotak pada layar yang ditata dalam pola kisi.
Semua kontrol memiliki properti. Anda dapat mengatur nilai awal untuk properti ini menggunakan XAML (Extensible Application Markup Language). Dalam banyak kasus, Anda dapat mengubah properti ini dalam kode C# aplikasi. Misalnya, kode yang menangani peristiwa Clicked untuk tombol Klik saya di aplikasi .NET MAUI default terlihat seperti ini:
int count = 0;
private void OnCounterClicked(object sender, EventArgs e)
{
count+=5;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}
Kode ini mengubah properti Text dari kontrol CounterBtn di halaman. Anda bahkan dapat membuat seluruh halaman, tampilan, dan tata letak dalam kode; Anda tidak perlu menggunakan XAML. Misalnya, pertimbangkan definisi XAML halaman berikut:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Phoneword.MainPage">
<ScrollView>
<VerticalStackLayout>
<Label Text="Current count: 0"
Grid.Row="0"
FontSize="18"
FontAttributes="Bold"
x:Name="CounterLabel"
HorizontalOptions="Center" />
<Button Text="Click me"
Grid.Row="1"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Kode yang setara di C# terlihat seperti ini:
public partial class TestPage : ContentPage
{
int count = 0;
// Named Label - declared as a member of the class
Label counterLabel;
public TestPage()
{
var myScrollView = new ScrollView();
var myStackLayout = new VerticalStackLayout();
myScrollView.Content = myStackLayout;
counterLabel = new Label
{
Text = "Current count: 0",
FontSize = 18,
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center
};
myStackLayout.Children.Add(counterLabel);
var myButton = new Button
{
Text = "Click me",
HorizontalOptions = LayoutOptions.Center
};
myStackLayout.Children.Add(myButton);
myButton.Clicked += OnCounterClicked;
this.Content = myScrollView;
}
private void OnCounterClicked(object sender, EventArgs e)
{
count++;
counterLabel.Text = $"Current count: {count}";
SemanticScreenReader.Announce(counterLabel.Text);
}
}
Kode C# lebih verbose, tetapi memberikan lebih banyak fleksibilitas yang memungkinkan Anda menyesuaikan UI secara dinamis.
Untuk menampilkan halaman ini ketika aplikasi mulai berjalan, atur kelas TestPage di AppShell sebagai ShellContent utama:
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:TestPage}"
Route="TestPage" />
Menyetel tata letak
Sangat berguna untuk menambahkan sedikit ruang bernapas di sekitar kontrol. Setiap kontrol memiliki Margin properti yang dihormati tata letak. Anda dapat menganggap margin sebagai kontrol yang mendorong orang lain menjauh.
Semua tata letak juga memiliki properti Padding yang mencegah turunan mereka mendekati batas tata letak. Salah satu cara untuk memikirkan konsep ini adalah bahwa semua kontrol berada dalam kotak, dan kotak itu memiliki dinding berlapis.
Setelan ruang putih lain yang berguna adalah properti Spacing dari VerticalStackLayout atau HorizontalStackLayout. Ini mengatur spasi di antara semua turunan tata letak. Nilainya bersifat aditif dengan margin kontrol sendiri, sehingga spasi kosong aktual adalah margin ditambah penspasian.