Bagikan melalui

Xamarin.Forms Mulai Cepat Mendalami

  • Artikel

Xamarin.Forms Di Mulai Cepat, aplikasi Catatan dibuat. Artikel ini meninjau apa yang telah dibangun untuk mendapatkan pemahaman tentang dasar-dasar cara Xamarin.Forms kerja aplikasi Shell.

Pengantar Visual Studio

Visual Studio mengatur kode ke dalam Solusi dan Proyek. Solusinya adalah kontainer yang dapat menyimpan satu atau beberapa proyek. Proyek dapat berupa aplikasi, pustaka pendukung, aplikasi pengujian, dan banyak lagi. Aplikasi Notes terdiri dari satu solusi yang berisi tiga proyek, seperti yang ditunjukkan pada cuplikan layar berikut:

Penjelajah Solusi Visual Studio

Proyeknya adalah:

  • Catatan – Proyek ini adalah proyek pustaka .NET Standard yang menyimpan semua kode bersama dan antarmuka pengguna bersama.
  • Notes.Android – Proyek ini menyimpan kode khusus Android dan merupakan titik masuk untuk aplikasi Android.
  • Notes.iOS – Proyek ini menyimpan kode khusus iOS dan merupakan titik masuk untuk aplikasi iOS.

Anatomi aplikasi Xamarin.Forms

Cuplikan layar berikut menunjukkan konten proyek pustaka Notes .NET Standard di Visual Studio:

Telepon Koleksi Proyek Standar .NET

Proyek ini memiliki node Dependensi yang berisi simpul NuGet dan SDK :

  • NuGet – Xamarin.Formspaket NuGet , Xamarin.Essentials, Newtonsoft.Json, dan sqlite-net-pcl NuGet yang telah ditambahkan ke proyek.
  • SDK – NETStandard.Library metapackage yang mereferensikan kumpulan lengkap paket NuGet yang menentukan .NET Standard.

Pengantar Visual Studio untuk Mac

Visual Studio untuk Mac mengikuti praktik Visual Studio mengatur kode ke dalam Solusi dan Proyek. Solusinya adalah kontainer yang dapat menyimpan satu atau beberapa proyek. Proyek dapat berupa aplikasi, pustaka pendukung, aplikasi pengujian, dan banyak lagi. Aplikasi Notes terdiri dari satu solusi yang berisi tiga proyek, seperti yang ditunjukkan pada cuplikan layar berikut:

Panel Solusi Visual Studio untuk Mac

Proyeknya adalah:

  • Catatan – Proyek ini adalah proyek pustaka .NET Standard yang menyimpan semua kode bersama dan antarmuka pengguna bersama.
  • Notes.Android – Proyek ini menyimpan kode khusus Android dan merupakan titik masuk untuk aplikasi Android.
  • Notes.iOS – Proyek ini menyimpan kode khusus iOS dan merupakan titik masuk untuk aplikasi iOS.

Anatomi aplikasi Xamarin.Forms

Cuplikan layar berikut menunjukkan konten proyek pustaka Notes .NET Standard di Visual Studio untuk Mac:

Telepon word .NET Standard Library Project Contents

Proyek ini memiliki node Dependensi yang berisi simpul NuGet dan SDK :

  • NuGet – Xamarin.Formspaket NuGet , Xamarin.Essentials, Newtonsoft.Json, dan sqlite-net-pcl NuGet yang telah ditambahkan ke proyek.
  • SDK – NETStandard.Library metapackage yang mereferensikan kumpulan lengkap paket NuGet yang menentukan .NET Standard.

Proyek ini juga terdiri dari beberapa file:

  • Data\NoteDatabase.cs – Kelas ini berisi kode untuk membuat database, membaca data darinya, menulis data ke dalamnya, dan menghapus data darinya.
  • Model\Note.cs – Kelas ini mendefinisikan Note model yang instansnya menyimpan data tentang setiap catatan dalam aplikasi.
  • Views\AboutPage.xaml – Markup XAML untuk AboutPage kelas , yang menentukan UI untuk halaman tentang.
  • Views\AboutPage.xaml.cs – Code-behind untuk AboutPage kelas , yang berisi logika bisnis yang dijalankan saat pengguna berinteraksi dengan halaman.
  • Views\NotesPage.xaml – Markup XAML untuk NotesPage kelas , yang menentukan UI untuk halaman yang ditampilkan saat aplikasi diluncurkan.
  • Views\NotesPage.xaml.cs – Code-behind untuk NotesPage kelas , yang berisi logika bisnis yang dijalankan saat pengguna berinteraksi dengan halaman.
  • Views\NoteEntryPage.xaml – Markup XAML untuk NoteEntryPage kelas , yang menentukan UI untuk halaman yang ditampilkan saat pengguna memasukkan catatan.
  • Views\NoteEntryPage.xaml.cs – Code-behind untuk NoteEntryPage kelas , yang berisi logika bisnis yang dijalankan saat pengguna berinteraksi dengan halaman.
  • App.xaml – Markup XAML untuk App kelas , yang menentukan kamus sumber daya untuk aplikasi.
  • App.xaml.cs – Kode belakang untuk App kelas , yang bertanggung jawab untuk membuat instans aplikasi Shell, dan untuk menangani peristiwa siklus hidup aplikasi.
  • AppShell.xaml – Markup XAML untuk AppShell kelas , yang menentukan hierarki visual aplikasi.
  • AppShell.xaml.cs – Kode belakang untuk AppShell kelas , yang membuat rute untuk NoteEntryPage sehingga dapat dinavigasi ke secara terprogram.
  • AssemblyInfo.cs – File ini berisi atribut aplikasi tentang proyek, yang diterapkan pada tingkat perakitan.

Untuk informasi selengkapnya tentang anatomi aplikasi Xamarin.iOS, lihat Anatomi Aplikasi Xamarin.iOS. Untuk informasi selengkapnya tentang anatomi aplikasi Xamarin.Android, lihat Anatomi Aplikasi Xamarin.Android.

Arsitektur dan dasar-dasar aplikasi

Aplikasi Xamarin.Forms dirancang dengan cara yang sama seperti aplikasi lintas platform tradisional. Kode bersama biasanya ditempatkan di pustaka .NET Standard, dan aplikasi khusus platform menggunakan kode bersama. Diagram berikut menunjukkan gambaran umum hubungan ini untuk aplikasi Notes:

Arsitektur Catatan

Untuk memaksimalkan penggunaan kembali kode startup, Xamarin.Forms aplikasi memiliki satu kelas bernama App yang bertanggung jawab untuk membuat instans aplikasi di setiap platform, seperti yang ditunjukkan dalam contoh kode berikut:

using Xamarin.Forms;

namespace Notes
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }
        // ...
    }
}

Kode ini mengatur MainPage properti App kelas ke AppShell objek. Kelas AppShell menentukan hierarki visual aplikasi. Shell mengambil hierarki visual ini dan menghasilkan antarmuka pengguna untuk itu. Untuk informasi selengkapnya tentang menentukan hierarki visual aplikasi, lihat Hierarki visual aplikasi.

Selain itu, file AssemblyInfo.cs berisi atribut aplikasi tunggal, yang diterapkan pada tingkat perakitan:

using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

Atribut XamlCompilation mengaktifkan kompilator XAML, sehingga XAML dikompilasi langsung ke dalam bahasa perantara. Untuk informasi selengkapnya, lihat Kompilasi XAML.

Luncurkan aplikasi di setiap platform

Bagaimana aplikasi diluncurkan pada setiap platform khusus untuk platform.

iOS

Untuk meluncurkan halaman awal Xamarin.Forms di iOS, proyek Notes.iOS menentukan AppDelegate kelas yang mewarisi dari FormsApplicationDelegate kelas :

namespace Notes.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App());
            return base.FinishedLaunching(app, options);
        }
    }
}

Penimpaan FinishedLaunchingXamarin.Forms menginisialisasi kerangka kerja dengan memanggil Init metode . Hal ini menyebabkan implementasi Xamarin.Forms khusus iOS dimuat dalam aplikasi sebelum pengontrol tampilan akar diatur oleh panggilan ke LoadApplication metode .

Android

Untuk meluncurkan halaman awal Xamarin.Forms di Android, proyek Notes.Android menyertakan kode yang membuat Activity dengan MainLauncher atribut , dengan aktivitas yang diwarisi dari FormsAppCompatActivity kelas :

namespace Notes.Droid
{
    [Activity(Label = "Notes",
              Icon = "@mipmap/icon",
              Theme = "@style/MainTheme",
              MainLauncher = true,
              ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            LoadApplication(new App());
        }
    }
}

Penimpaan OnCreateXamarin.Forms menginisialisasi kerangka kerja dengan memanggil Init metode . Hal ini menyebabkan implementasi Xamarin.Forms khusus Android dimuat dalam aplikasi sebelum Xamarin.Forms aplikasi dimuat.

Hierarki visual aplikasi

Xamarin.Forms Aplikasi shell menentukan hierarki visual aplikasi di kelas yang mensubkelas Shell kelas. Dalam aplikasi Notes, ini adalah Appshell kelas :

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Notes.Views"
       x:Class="Notes.AppShell">
    <TabBar>
        <ShellContent Title="Notes"
                      Icon="icon_feed.png"
                      ContentTemplate="{DataTemplate views:NotesPage}" />
        <ShellContent Title="About"
                      Icon="icon_about.png"
                      ContentTemplate="{DataTemplate views:AboutPage}" />
    </TabBar>
</Shell>

XAML ini terdiri dari dua objek utama:

  • TabBar. mewakili TabBar bilah tab bawah, dan harus digunakan saat pola navigasi untuk aplikasi menggunakan tab bawah. Objek TabBar adalah anak dari Shell objek.
  • ShellContent, yang mewakili ContentPage objek untuk setiap tab di TabBar. Setiap ShellContent objek adalah anak dari TabBar objek.

Objek ini tidak mewakili antarmuka pengguna apa pun, melainkan organisasi hierarki visual aplikasi. Shell akan mengambil objek ini dan menghasilkan antarmuka pengguna navigasi untuk konten. Oleh karena itu, AppShell kelas menentukan dua halaman yang dapat dinavigasi dari tab bawah. Halaman dibuat sesuai permintaan, sebagai respons terhadap navigasi.

Untuk informasi selengkapnya tentang aplikasi Shell, lihat Xamarin.Forms Shell.

Antarmuka pengguna

Ada beberapa grup kontrol yang digunakan untuk membuat antarmuka pengguna aplikasi Xamarin.Forms :

  1. Halaman – Xamarin.Forms halaman mewakili layar aplikasi seluler lintas platform. Aplikasi Notes ContentPage menggunakan kelas untuk menampilkan satu layar. Untuk informasi selengkapnya tentang halaman, lihat Xamarin.Forms Halaman.
  2. Tampilan – Xamarin.Forms tampilan adalah kontrol yang ditampilkan pada antarmuka pengguna, seperti label, tombol, dan kotak entri teks. Aplikasi Notes yang sudah selesai menggunakan CollectionViewtampilan , , Editordan Button . Untuk informasi selengkapnya tentang tampilan, lihat Xamarin.Forms Tampilan.
  3. Tata letak – Xamarin.Forms tata letak adalah kontainer yang digunakan untuk menyusun tampilan ke dalam struktur logis. Aplikasi Notes StackLayout menggunakan kelas untuk mengatur tampilan dalam tumpukan vertikal, dan Grid kelas untuk mengatur tombol secara horizontal. Untuk informasi selengkapnya tentang tata letak, lihat Xamarin.Forms Tata Letak.

Pada runtime, setiap kontrol akan dipetakan ke setara aslinya, yaitu apa yang akan dirender.

Tata letak

Aplikasi Notes StackLayout menggunakan untuk menyederhanakan pengembangan aplikasi lintas platform dengan secara otomatis mengatur tampilan di layar terlepas dari ukuran layar. Setiap elemen anak diposisikan satu demi satu, baik secara horizontal atau vertikal dalam urutan ditambahkan. Berapa banyak ruang yang StackLayout akan digunakan tergantung pada bagaimana HorizontalOptions properti dan VerticalOptions diatur, tetapi secara default StackLayout akan mencoba menggunakan seluruh layar.

Kode XAML berikut menunjukkan contoh penggunaan StackLayout tata letak NoteEntryPageuntuk :

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.NoteEntryPage"
             Title="Note Entry">
    ...    
    <StackLayout Margin="{StaticResource PageMargin}">
        <Editor Placeholder="Enter your note"
                Text="{Binding Text}"
                HeightRequest="100" />
        <Grid>
            ...
        </Grid>
    </StackLayout>    
</ContentPage>

Secara default StackLayout mengasumsikan orientasi vertikal. Namun, dapat diubah ke orientasi horizontal dengan mengatur StackLayout.Orientation properti ke StackOrientation.Horizontal anggota enumerasi.

Catatan

Ukuran tampilan dapat diatur melalui HeightRequest properti dan WidthRequest .

Untuk informasi selengkapnya tentang StackLayout kelas, lihat Xamarin.Forms StackLayout.

Menanggapi interaksi pengguna

Objek yang ditentukan dalam XAML dapat mengaktifkan peristiwa yang ditangani dalam file code-behind. Contoh kode berikut menunjukkan OnSaveButtonClicked metode di code-behind untuk NoteEntryPage kelas , yang dijalankan sebagai respons terhadap Clicked peristiwa yang diaktifkan pada tombol Simpan .

async void OnSaveButtonClicked(object sender, EventArgs e)
{
    var note = (Note)BindingContext;
    note.Date = DateTime.UtcNow;
    if (!string.IsNullOrWhiteSpace(note.Text))
    {
        await App.Database.SaveNoteAsync(note);
    }
    await Shell.Current.GoToAsync("..");
}

Metode OnSaveButtonClicked menyimpan catatan dalam database, dan menavigasi kembali ke halaman sebelumnya. Untuk informasi selengkapnya tentang navigasi, lihat Navigasi.

Catatan

File code-behind untuk kelas XAML dapat mengakses objek yang ditentukan dalam XAML menggunakan nama yang ditetapkan untuknya dengan x:Name atribut . Nilai yang ditetapkan ke atribut ini memiliki aturan yang sama dengan variabel C#, karena harus dimulai dengan huruf atau garis bawah dan tidak berisi spasi yang disematkan.

Kabel tombol simpan ke OnSaveButtonClicked metode terjadi di markup XAML untuk NoteEntryPage kelas :

<Button Text="Save"
        Clicked="OnSaveButtonClicked" />

Daftar

CollectionView bertanggung jawab untuk menampilkan kumpulan item dalam daftar. Secara default, item daftar ditampilkan secara vertikal dan setiap item ditampilkan dalam satu baris.

Contoh kode berikut menunjukkan CollectionView dari NotesPage:

<CollectionView x:Name="collectionView"
                Margin="{StaticResource PageMargin}"
                SelectionMode="Single"
                SelectionChanged="OnSelectionChanged">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           ItemSpacing="10" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Label Text="{Binding Text}"
                       FontSize="Medium" />
                <Label Text="{Binding Date}"
                       TextColor="{StaticResource TertiaryColor}"
                       FontSize="Small" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Tata letak setiap baris dalam ditentukan dalam CollectionViewCollectionView.ItemTemplate elemen , dan menggunakan pengikatan data untuk menampilkan catatan apa pun yang diambil oleh aplikasi. Properti CollectionView.ItemsSource diatur ke sumber data, dalam NotesPage.xaml.cs:

protected override async void OnAppearing()
{
    base.OnAppearing();

    collectionView.ItemsSource = await App.Database.GetNotesAsync();
}

Kode ini mengisi dengan catatan apa pun yang CollectionView disimpan dalam database, dan dijalankan saat halaman muncul.

Saat item dipilih di CollectionView, SelectionChanged peristiwa akan diaktifkan. Penanganan aktivitas, bernama OnSelectionChanged, dijalankan saat peristiwa diaktifkan:

async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.CurrentSelection != null)
    {
        // ...
    }
}

Peristiwa SelectionChanged dapat mengakses objek yang terkait dengan item melalui e.CurrentSelection properti .

Untuk informasi selengkapnya tentang CollectionView kelas, lihat Xamarin.Forms CollectionView.

Navigasi dilakukan dalam aplikasi Shell dengan menentukan URI yang akan dinavigasi. URI navigasi memiliki tiga komponen:

  • Rute, yang menentukan jalur ke konten yang ada sebagai bagian dari hierarki visual Shell.
  • Halaman. Halaman yang tidak ada dalam hierarki visual Shell dapat didorong ke tumpukan navigasi dari mana saja dalam aplikasi Shell. Misalnya, NoteEntryPage tidak ditentukan dalam hierarki visual Shell, tetapi dapat didorong ke tumpukan navigasi sesuai kebutuhan.
  • Satu atau beberapa parameter kueri. Parameter kueri adalah parameter yang bisa diteruskan ke halaman tujuan saat menavigasi.

URI navigasi tidak harus menyertakan ketiga komponen, tetapi ketika strukturnya adalah: //route/page?queryParameters

Catatan

Rute dapat ditentukan pada elemen dalam hierarki visual Shell melalui Route properti . Namun, jika Route properti tidak diatur, seperti di aplikasi Notes, rute dihasilkan pada runtime.

Untuk informasi selengkapnya tentang navigasi Shell, lihat Xamarin.Forms Navigasi shell.

Mendaftarkan rute

Untuk menavigasi ke halaman yang tidak ada dalam hierarki visual Shell mengharuskannya untuk terlebih dahulu didaftarkan dengan sistem perutean Shell. menggunakan metode .Routing.RegisterRoute Dalam aplikasi Notes, ini terjadi di AppShell konstruktor:

public partial class AppShell : Shell
{
    public AppShell()
    {
        // ...
        Routing.RegisterRoute(nameof(NoteEntryPage), typeof(NoteEntryPage));
    }
}

Dalam contoh ini, rute bernama NoteEntryPage terdaftar terhadap NoteEntryPage jenis . Halaman ini kemudian dapat dinavigasi untuk menggunakan navigasi berbasis URI, dari mana saja dalam aplikasi.

Melakukan navigasi

Navigasi dilakukan dengan GoToAsync metode , yang menerima argumen yang mewakili rute untuk menavigasi ke:

await Shell.Current.GoToAsync("NoteEntryPage");

Dalam contoh ini, dinavigasi NoteEntryPage .

Penting

Tumpukan navigasi dibuat saat halaman yang tidak ada dalam hierarki visual Shell dinavigasi.

Saat menavigasi ke halaman, data dapat diteruskan ke halaman sebagai parameter kueri:

async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.CurrentSelection != null)
    {
        // Navigate to the NoteEntryPage, passing the ID as a query parameter.
        Note note = (Note)e.CurrentSelection.FirstOrDefault();
        await Shell.Current.GoToAsync($"{nameof(NoteEntryPage)}?{nameof(NoteEntryPage.ItemId)}={note.ID.ToString()}");
    }
}

Contoh ini mengambil item yang saat ini dipilih di CollectionView dan menavigasi ke NoteEntryPage, dengan nilai ID properti Note objek yang diteruskan sebagai parameter kueri ke NoteEntryPage.ItemId properti .

Untuk menerima data yang diteruskan, NoteEntryPage kelas dihiasi dengan QueryPropertyAttribute

[QueryProperty(nameof(ItemId), nameof(ItemId))]
public partial class NoteEntryPage : ContentPage
{
    public string ItemId
    {
        set
        {
            LoadNote(value);
        }
    }
    // ...
}

Argumen pertama untuk QueryPropertyAttribute menentukan bahwa ItemId properti akan menerima data yang diteruskan, dengan argumen kedua yang menentukan id parameter kueri. Oleh karena itu, QueryPropertyAttribute dalam contoh di atas menentukan bahwa properti akan menerima data yang ItemId diteruskan dalam ItemId parameter kueri dari URI dalam GoToAsync panggilan metode. Properti ItemId kemudian memanggil LoadNote metode untuk mengambil catatan dari perangkat.

Navigasi mundur dilakukan dengan menentukan ".." sebagai argumen untuk GoToAsync metode :

await Shell.Current.GoToAsync("..");

Untuk informasi selengkapnya tentang navigasi mundur, lihat Navigasi mundur.

Pengikatan data

Pengikatan data digunakan untuk menyederhanakan cara Xamarin.Forms aplikasi menampilkan dan berinteraksi dengan datanya. Ini membangun koneksi antara antarmuka pengguna dan aplikasi yang mendasar. Kelas BindableObject berisi banyak infrastruktur untuk mendukung pengikatan data.

Pengikatan data menghubungkan dua objek, yang disebut sumber dan target. Objek sumber menyediakan data. Objek target akan mengonsumsi (dan sering menampilkan) data dari objek sumber. Misalnya, Editor (objek target) biasanya akan mengikat propertinya Text ke properti publik string dalam objek sumber. Diagram berikut mengilustrasikan hubungan pengikatan:

Pengikatan Data

Manfaat utama pengikatan data adalah Anda tidak perlu lagi khawatir tentang menyinkronkan data antara tampilan dan sumber data Anda. Perubahan pada objek sumber secara otomatis didorong ke objek target di belakang layar oleh kerangka kerja pengikatan, dan perubahan pada objek target dapat secara opsional didorong kembali ke objek sumber .

Membuat pengikatan data adalah proses dua langkah:

  • Properti BindingContextobjek target harus diatur ke sumber.
  • Pengikatan harus dibuat antara target dan sumber. Di XAML, ini dicapai dengan menggunakan Binding ekstensi markup.

Dalam aplikasi Notes, target pengikatan adalah Editor yang menampilkan catatan, sementara Note instans yang ditetapkan sebagai BindingContext dari NoteEntryPage adalah sumber pengikatan. Awalnya, BindingContext dari NoteEntryPage diatur ketika konstruktor halaman dijalankan:

public NoteEntryPage()
{
    // ...
    BindingContext = new Note();
}

Dalam contoh ini, halaman BindingContext diatur ke baru Note saat NoteEntryPage dibuat. Ini menangani skenario penambahan catatan baru ke aplikasi.

Selain itu, halaman BindingContext juga dapat diatur saat navigasi ke NoteEntryPage terjadi, asalkan catatan yang ada dipilih pada NotesPage:

[QueryProperty(nameof(ItemId), nameof(ItemId))]
public partial class NoteEntryPage : ContentPage
{
    public string ItemId
    {
        set
        {
            LoadNote(value);
        }

        async void LoadNote(string itemId)
        {
            try
            {
                int id = Convert.ToInt32(itemId);
                // Retrieve the note and set it as the BindingContext of the page.
                Note note = await App.Database.GetNoteAsync(id);
                BindingContext = note;
            }
            catch (Exception)
            {
                Console.WriteLine("Failed to load note.");
            }
        }    
        // ...    
    }
}

Dalam contoh ini, ketika navigasi halaman terjadi, halaman BindingContext diatur ke objek yang dipilih Note setelah diambil dari database.

Penting

BindingContext Meskipun properti dari setiap objek target dapat diatur secara individual, ini tidak diperlukan. BindingContext adalah properti khusus yang diwariskan oleh semua anak-anaknya. Oleh karena itu, ketika BindingContext pada ContentPage diatur ke Note instans, semua turunan memiliki ContentPage yang sama BindingContext, dan dapat mengikat properti Note publik objek.

in EditorNoteEntryPage kemudian mengikat ke Text properti Note objek:

<Editor Placeholder="Enter your note"
        Text="{Binding Text}" />

Pengikatan antara Editor.Text properti dan Text properti objek sumber dibuat. Perubahan yang Editor dilakukan dalam akan secara otomatis disebarkan ke Note objek. Demikian pula, jika perubahan dilakukan pada Note.Text properti, Xamarin.Forms mesin pengikatan juga akan memperbarui konten Editor. Ini dikenal sebagai pengikatan dua arah.

Untuk informasi selengkapnya tentang pengikatan data, lihat Xamarin.Forms Pengikatan Data.

Tata Gaya

Xamarin.Forms aplikasi sering berisi beberapa elemen visual yang memiliki tampilan yang identik. Mengatur tampilan setiap elemen visual dapat berulang dan rawan kesalahan. Sebagai gantinya, gaya dapat dibuat yang menentukan tampilan, lalu diterapkan ke elemen visual yang diperlukan.

Kelas mengelompokkan Style kumpulan nilai properti ke dalam satu objek yang kemudian dapat diterapkan ke beberapa instans elemen visual. Gaya disimpan dalam ResourceDictionary, baik di tingkat aplikasi, tingkat halaman, atau tingkat tampilan. Memilih tempat untuk menentukan Style dampak di mana dampaknya dapat digunakan:

  • Style instans yang ditentukan di tingkat aplikasi dapat diterapkan di seluruh aplikasi.
  • Style instans yang ditentukan di tingkat halaman dapat diterapkan ke halaman dan ke turunannya.
  • Style instans yang ditentukan pada tingkat tampilan dapat diterapkan ke tampilan dan ke turunannya.

Penting

Gaya apa pun yang digunakan di seluruh aplikasi disimpan dalam kamus sumber daya aplikasi untuk menghindari duplikasi. Namun, XAML yang khusus untuk halaman tidak boleh disertakan dalam kamus sumber daya aplikasi, karena sumber daya kemudian akan diuraikan pada startup aplikasi alih-alih ketika diperlukan oleh halaman. Untuk informasi selengkapnya, lihat Mengurangi ukuran kamus sumber daya aplikasi.

Setiap Style instans berisi koleksi satu atau beberapa Setter objek, dengan masing-masing Setter memiliki Property dan Value. Property adalah nama properti yang dapat diikat dari elemen tempat gaya diterapkan, dan Value adalah nilai yang diterapkan ke properti . Contoh kode berikut menunjukkan gaya dari NoteEntryPage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.Views.NoteEntryPage"
             Title="Note Entry">
    <ContentPage.Resources>
        <!-- Implicit styles -->
        <Style TargetType="{x:Type Editor}">
            <Setter Property="BackgroundColor"
                    Value="{StaticResource AppBackgroundColor}" />
        </Style>
        ...
    </ContentPage.Resources>
    ...
</ContentPage>

Gaya ini diterapkan ke instans apa pun Editor di halaman.

Saat membuat Style, TargetType properti selalu diperlukan.

Catatan

Menata Xamarin.Forms aplikasi secara tradisional dicapai dengan menggunakan gaya XAML. Namun, Xamarin.Forms juga mendukung elemen visual gaya menggunakan Cascading Style Sheets (CSS). Untuk informasi selengkapnya, lihat Menata Xamarin.Forms aplikasi menggunakan Cascading Style Sheets (CSS).

Untuk informasi selengkapnya tentang gaya XAML, lihat Styling Xamarin.Forms Apps menggunakan Gaya XAML.

Pengujian dan penyebaran

Visual Studio untuk Mac dan Visual Studio menyediakan banyak opsi untuk menguji dan menyebarkan aplikasi. Aplikasi debugging adalah bagian umum dari siklus hidup pengembangan aplikasi dan membantu mendiagnosis masalah kode. Untuk informasi selengkapnya, lihat Mengatur Titik Henti, Melangkah Melalui Kode, dan Informasi Output ke Jendela Log.

Simulator adalah tempat yang baik untuk mulai menyebarkan dan menguji aplikasi, dan menampilkan fungsionalitas yang berguna untuk aplikasi pengujian. Namun, pengguna tidak akan menggunakan aplikasi akhir dalam simulator, sehingga aplikasi harus diuji pada perangkat nyata lebih awal dan sering. Untuk informasi selengkapnya tentang provisi perangkat iOS, lihat Provisi Perangkat. Untuk informasi selengkapnya tentang provisi perangkat Android, lihat Menyiapkan Perangkat untuk Pengembangan.

Langkah berikutnya

Penyelaman mendalam ini telah memeriksa dasar-dasar pengembangan aplikasi menggunakan Xamarin.Forms Shell. Langkah berikutnya yang disarankan termasuk membaca tentang fungsionalitas berikut:

  • Xamarin.Forms Shell mengurangi kompleksitas pengembangan aplikasi seluler dengan menyediakan fitur mendasar yang dibutuhkan sebagian besar aplikasi seluler. Untuk informasi selengkapnya, lihat Xamarin.Forms Shell.
  • Ada beberapa grup kontrol yang digunakan untuk membuat antarmuka pengguna aplikasi Xamarin.Forms . Untuk informasi selengkapnya, lihat Referensi Kontrol.
  • Pengikatan data adalah teknik untuk menautkan properti dari dua objek sehingga perubahan dalam satu properti secara otomatis tercermin di properti lain. Untuk informasi selengkapnya, lihat Pengikatan Data.
  • Xamarin.Forms memberikan beberapa pengalaman navigasi halaman, tergantung pada jenis halaman yang digunakan. Untuk informasi selengkapnya, lihat Navigasi.
  • Gaya membantu mengurangi markup berulang, dan memungkinkan tampilan aplikasi lebih mudah diubah. Untuk informasi selengkapnya, lihat Styling Xamarin.Forms Apps.
  • Templat data menyediakan kemampuan untuk menentukan presentasi data pada tampilan yang didukung. Untuk informasi selengkapnya, lihat Templat Data.
  • Efek juga memungkinkan kontrol asli pada setiap platform untuk disesuaikan. Efek dibuat dalam proyek khusus platform dengan subkelas kelas, dan dikonsumsi PlatformEffect dengan melampirkannya ke kontrol yang sesuai Xamarin.Forms . Untuk informasi selengkapnya, lihat Efek.
  • Setiap halaman, tata letak, dan tampilan dirender secara berbeda di setiap platform menggunakan Renderer kelas yang pada gilirannya membuat kontrol asli, mengaturnya di layar, dan menambahkan perilaku yang ditentukan dalam kode bersama. Pengembang dapat menerapkan kelas kustom Renderer mereka sendiri untuk menyesuaikan tampilan dan/atau perilaku kontrol. Untuk informasi selengkapnya, lihat Perender Kustom.
  • Kode bersama dapat mengakses fungsionalitas asli melalui DependencyService kelas . Untuk informasi selengkapnya, lihat Mengakses Fitur Asli dengan DependencyService.

Temukan video Xamarin lainnya di Channel 9 dan YouTube.