Membuat mulai Xamarin.Forms cepat aplikasi

  • Artikel

Download Sample Mengunduh sampel

Dalam mulai cepat ini, Anda akan mempelajari cara:

  • Membuat Xamarin.Forms aplikasi Shell.
  • Tentukan antarmuka pengguna untuk halaman menggunakan eXtensible Application Markup Language (XAML), dan berinteraksi dengan elemen XAML dari kode.
  • Jelaskan hierarki visual aplikasi Shell dengan subkelas Shell kelas.

Mulai cepat menjelaskan cara membuat aplikasi Shell lintas platform Xamarin.Forms , yang memungkinkan Anda memasukkan catatan dan mempertahankannya ke penyimpanan perangkat. Aplikasi akhir ditunjukkan di bawah ini:

Notes ApplicationNotes About Page

Prasyarat

  • Visual Studio 2019 (rilis terbaru), dengan pengembangan Seluler dengan beban kerja .NET terinstal.
  • Pengetahuan tentang C#.
  • (opsional) Mac berpasangan untuk membangun aplikasi di iOS.

Untuk informasi selengkapnya tentang prasyarat ini, lihat Menginstal Xamarin. Untuk informasi tentang menyambungkan Visual Studio 2019 ke host build Mac, lihat Memasangkan ke Mac untuk pengembangan Xamarin.iOS.

Mulai menggunakan Visual Studio 2019

  1. Luncurkan Visual Studio 2019, dan di jendela mulai klik Buat proyek baru untuk membuat proyek baru:

    New Solution

  2. Di jendela Buat proyek baru, pilih Seluler di menu drop-down Jenis proyek, pilih templat Aplikasi Seluler (Xamarin.Forms), dan klik tombol Berikutnya :

    Choose a Template

  3. Di jendela Konfigurasikan proyek baru Anda, atur Nama proyek ke Catatan, pilih lokasi yang sesuai untuk proyek, dan klik tombol Buat:

    Configure the Shell Application

    Penting

    Cuplikan C# dan XAML dalam mulai cepat ini mengharuskan solusi dan proyek keduanya diberi nama Notes. Menggunakan nama yang berbeda akan mengakibatkan kesalahan build saat Anda menyalin kode dari mulai cepat ini ke dalam proyek.

  4. Dalam dialog Aplikasi Seluler Baru, pilih templat Bertab, dan klik tombol Buat:

    Create the Shell Application

    Ketika proyek telah dibuat, tutup file GettingStarted.txt .

    Untuk informasi selengkapnya tentang pustaka .NET Standard yang dibuat, lihat Anatomi Xamarin.Forms aplikasi Shell di Xamarin.Forms Shell Quickstart Deep Dive.

  5. Di Penjelajah Solusi, dalam proyek Catatan, hapus folder berikut (dan kontennya):

    • Model
    • Layanan
    • ViewModels
    • Tampilan

  6. Di Penjelajah Solusi, dalam proyek Catatan, hapus GettingStarted.txt.

  7. Di Penjelajah Solusi, dalam proyek Catatan, tambahkan folder baru bernama Tampilan.

  8. Di Penjelajah Solusi, dalam proyek Catatan, pilih folder Tampilan, klik kanan, dan pilih Tambahkan > Item Baru.... Dalam dialog Tambahkan Item Baru, pilih Halaman Konten Item>Xamarin.Forms> Visual C#, beri nama file baru NotesPage, dan klik tombol Tambahkan:

    Add NotesPage

    Ini akan menambahkan halaman baru bernama NotesPage ke folder Tampilan . Halaman ini akan menjadi halaman utama dalam aplikasi.

  9. Di Penjelajah Solusi, dalam proyek Catatan, klik dua kali NotesPage.xaml untuk membukanya:

    Open NotesPage.xaml

  10. Di NotesPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?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.NotesPage"
             Title="Notes">
    <!-- Layout children vertically -->
    <StackLayout Margin="20">
        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" />
        <!-- Layout children in two columns -->
        <Grid ColumnDefinitions="*,*">
            <Button Text="Save"
                    Clicked="OnSaveButtonClicked" />
            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="OnDeleteButtonClicked"/>
        </Grid>
    </StackLayout>
</ContentPage>

    Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Editor untuk input teks, dan dua Button objek yang mengarahkan aplikasi untuk menyimpan atau menghapus file. Kedua Button objek ditata secara horizontal dalam Grid, dengan Editor dan Grid ditata secara vertikal dalam StackLayout. Untuk informasi selengkapnya tentang membuat antarmuka pengguna, lihat Antarmuka pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke NotesPage.xaml dengan menekan CTRL+S.

  11. Di Penjelajah Solusi, dalam proyek Catatan, klik dua kali NotesPage.xaml.cs untuk membukanya:

    Open NotesPage.xaml.cs

  12. Di NotesPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
using System.IO;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class NotesPage : ContentPage
    {
        string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");

        public NotesPage()
        {
            InitializeComponent();

            // Read the file.
            if (File.Exists(_fileName))
            {
                editor.Text = File.ReadAllText(_fileName);
            }
        }

        void OnSaveButtonClicked(object sender, EventArgs e)
        {
            // Save the file.
            File.WriteAllText(_fileName, editor.Text);
        }

        void OnDeleteButtonClicked(object sender, EventArgs e)
        {
            // Delete the file.
            if (File.Exists(_fileName))
            {
                File.Delete(_fileName);
            }
            editor.Text = string.Empty;
        }
    }
}

    Kode ini mendefinisikan _fileName bidang, yang mereferensikan file bernama notes.txt yang akan menyimpan data catatan di folder data aplikasi lokal untuk aplikasi. Ketika konstruktor halaman dijalankan, file dibaca, jika ada, dan ditampilkan di Editor. Saat SimpanButton ditekan, OnSaveButtonClicked penanganan aktivitas dijalankan, yang menyimpan konten ke Editor file. Ketika HapusButton ditekanOnDeleteButtonClicked, penanganan aktivitas dijalankan, yang menghapus file, asalkan ada, dan menghapus teks apa pun dari Editor. Untuk informasi selengkapnya tentang interaksi pengguna, lihat Merespons interaksi pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke NotesPage.xaml.cs dengan menekan CTRL+S.

  13. Di Penjelajah Solusi, dalam proyek Catatan, pilih folder Tampilan, klik kanan, dan pilih Tambahkan > Item Baru.... Dalam dialog Tambahkan Item Baru, pilih Halaman Konten ItemXamarin.Forms>> Visual C#, beri nama file baru Tentang Halaman, dan klik tombol Tambahkan:

    Add AboutPage

    Ini akan menambahkan halaman baru bernama AboutPage ke folder Tampilan .

  14. Di Penjelajah Solusi, dalam proyek Catatan, klik dua kali AboutPage.xaml untuk membukanya:

    Open AboutPage.xaml

  15. Di AboutPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?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.AboutPage"
             Title="About">
    <!-- Layout children in two rows -->
    <Grid RowDefinitions="Auto,*">
        <Image Source="xamarin_logo.png"
               BackgroundColor="{OnPlatform iOS=LightSlateGray, Android=#2196F3}"
               VerticalOptions="Center"
               HeightRequest="64" />
        <!-- Layout children vertically -->
        <StackLayout Grid.Row="1"
                     Margin="20"
                     Spacing="20">
            <Label FontSize="22">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="Notes"
                                  FontAttributes="Bold"
                                  FontSize="22" />
                            <Span Text=" v1.0" />
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <Label Text="This app is written in XAML and C# with the Xamarin Platform." />
            <Button Text="Learn more"
                    Clicked="OnButtonClicked" />
        </StackLayout>
    </Grid>
</ContentPage>

    Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Image, dua Label objek yang menampilkan teks, dan Button. Dua Label objek dan Button secara vertikal ditata dalam StackLayout, dengan Image dan StackLayout ditata secara vertikal dalam Grid. Untuk informasi selengkapnya tentang membuat antarmuka pengguna, lihat Antarmuka pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke AboutPage.xaml dengan menekan CTRL+S.

  16. Di Penjelajah Solusi, dalam proyek Catatan, klik dua kali AboutPage.xaml.cs untuk membukanya:

    Open AboutPage.xaml.cs

  17. Di AboutPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
using Xamarin.Essentials;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class AboutPage : ContentPage
    {
        public AboutPage()
        {
            InitializeComponent();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            // Launch the specified URL in the system browser.
            await Launcher.OpenAsync("https://aka.ms/xamarin-quickstart");
        }
    }
}

    Kode ini mendefinisikan OnButtonClicked penanganan aktivitas, yang dijalankan saat Pelajari lebihButton lanjut ditekan. Ketika tombol ditekan, browser web diluncurkan dan halaman yang diwakili oleh argumen URI ke OpenAsync metode ditampilkan. Untuk informasi selengkapnya tentang interaksi pengguna, lihat Merespons interaksi pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke AboutPage.xaml.cs dengan menekan CTRL+S.

  18. Di Penjelajah Solusi, dalam proyek Catatan, klik dua kali AppShell.xaml untuk membukanya:

    Open AppShell.xaml

  19. Di AppShell.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?xml version="1.0" encoding="UTF-8"?>
<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">
    <!-- Display a bottom tab bar containing two tabs -->   
    <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>

    Kode ini secara deklaratif mendefinisikan hierarki visual aplikasi, yang terdiri dari TabBar dua ShellContent objek yang berisi. Objek ini tidak mewakili elemen antarmuka pengguna apa pun, melainkan organisasi hierarki visual aplikasi. Shell akan mengambil objek ini dan menghasilkan antarmuka pengguna untuk konten. Untuk informasi selengkapnya tentang membuat antarmuka pengguna, lihat Antarmuka pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke AppShell.xaml dengan menekan CTRL+S.

  20. Di Penjelajah Solusi, dalam proyek Notes, perluas AppShell.xaml, dan klik dua kali AppShell.xaml.cs untuk membukanya:

    Open AppShell.xaml.cs

  21. Di AppShell.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using Xamarin.Forms;

namespace Notes
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

    Simpan perubahan ke AppShell.xaml.cs dengan menekan CTRL+S.

  22. Di Penjelajah Solusi, dalam proyek Catatan, klik dua kali App.xaml untuk membukanya:

    Open App.xaml

  23. Di App.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.App">

</Application>

    Kode ini secara deklaratif mendefinisikan App kelas, yang bertanggung jawab untuk membuat instans aplikasi.

    Simpan perubahan ke App.xaml dengan menekan CTRL+S.

  24. Di Penjelajah Solusi, dalam proyek Notes, perluas App.xaml, dan klik dua kali App.xaml.cs untuk membukanya:

    Open App.xaml.cs

  25. Di App.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using Xamarin.Forms;

namespace Notes
{
    public partial class App : Application
    {

        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}

    Kode ini mendefinisikan code-behind untuk App kelas , yang bertanggung jawab untuk membuat instans aplikasi. Ini menginisialisasi MainPage properti ke objek subkelas Shell .

    Simpan perubahan ke App.xaml.cs dengan menekan CTRL+S.

Membangun mulai cepat

  1. Di Visual Studio, pilih > item menu Build Build Solution (atau tekan F6). Solusi akan dibuat dan pesan sukses akan muncul di bilah status Visual Studio:

    Build Successful

    Jika ada kesalahan, ulangi langkah sebelumnya dan perbaiki kesalahan apa pun hingga proyek berhasil dibangun.

  2. Di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang mirip tombol Putar) untuk meluncurkan aplikasi di emulator Android pilihan Anda:

    Visual Studio Android Toolbar

    Notes in the Android Emulator

    Masukkan catatan dan tekan tombol Simpan . Kemudian, tutup aplikasi dan luncurkan kembali untuk memastikan catatan yang Anda masukkan dimuat ulang.

    Tekan ikon tab Tentang untuk menavigasi ke AboutPage:

    Notes about page in the Android Emulator

    Tekan tombol Pelajari selengkapnya untuk meluncurkan halaman web mulai cepat.

    Untuk informasi selengkapnya tentang bagaimana aplikasi diluncurkan di setiap platform, lihat Meluncurkan aplikasi di setiap platform di Xamarin.Forms Mulai Cepat Deep Dive.

    Catatan

    Langkah-langkah berikut hanya boleh dilakukan jika Anda memiliki Mac berpasangan yang memenuhi persyaratan sistem untuk Xamarin.Forms pengembangan.

  3. Di toolbar Visual Studio, klik kanan pada proyek Notes.iOS , dan pilih Atur sebagai Proyek StartUp.

    Set Notes.iOS as Startup Project

  4. Di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang menyerupan tombol Putar) untuk meluncurkan aplikasi di simulator jarak jauh iOS yang Anda pilih:

    Visual Studio iOS Toolbar

    Notes in the iOS Simulator

    Masukkan catatan dan tekan tombol Simpan . Kemudian, tutup aplikasi dan luncurkan kembali untuk memastikan catatan yang Anda masukkan dimuat ulang.

    Tekan ikon tab Tentang untuk menavigasi ke AboutPage:

    Notes about page in the iOS Simulator

    Tekan tombol Pelajari selengkapnya untuk meluncurkan halaman web mulai cepat.

    Untuk informasi selengkapnya tentang bagaimana aplikasi diluncurkan di setiap platform, lihat Meluncurkan aplikasi di setiap platform di Xamarin.Forms Mulai Cepat Deep Dive.

Prasyarat

  • Visual Studio untuk Mac (rilis terbaru), dengan dukungan platform iOS dan Android terinstal.
  • Xcode (rilis terbaru).
  • Pengetahuan tentang C#.

Untuk informasi selengkapnya tentang prasyarat ini, lihat Menginstal Xamarin.

Mulai menggunakan Visual Studio untuk Mac

  1. Luncurkan Visual Studio untuk Mac, dan di jendela mulai klik Baru untuk membuat proyek baru:

    New Solution

  2. Dalam dialog Pilih templat untuk proyek baru Anda, klik Aplikasi Multiplatform>, pilih templat Aplikasi Formulir Shell, dan klik tombol Berikutnya:

    Choose a Template

  3. Dalam dialog Konfigurasikan aplikasi Formulir Shell Anda, beri nama aplikasi baru Catatan, dan klik tombol Berikutnya:

    Configure the Shell Application

  4. Dalam dialog Konfigurasikan aplikasi Formulir Shell baru Anda, biarkan nama Solusi dan Proyek diatur ke Catatan, pilih lokasi yang sesuai untuk proyek, dan klik tombol Buat untuk membuat proyek:

    Configure the Shell Project

    Penting

    Cuplikan C# dan XAML dalam mulai cepat ini mengharuskan solusi dan proyek keduanya diberi nama Notes. Menggunakan nama yang berbeda akan mengakibatkan kesalahan build saat Anda menyalin kode dari mulai cepat ini ke dalam proyek.

    Untuk informasi selengkapnya tentang pustaka .NET Standard yang dibuat, lihat Anatomi Xamarin.Forms aplikasi Shell di Xamarin.Forms Shell Quickstart Deep Dive.

  5. Di Pad Solusi, dalam proyek Catatan, hapus folder berikut (dan kontennya):

    • Model
    • Layanan
    • ViewModels
    • Tampilan

  6. Di Pad Solusi, dalam proyek Catatan, hapus GettingStarted.txt.

  7. Di Pad Solusi, dalam proyek Catatan, tambahkan folder baru bernama Tampilan.

  8. Di Pad Solusi, dalam proyek Catatan, pilih folder Tampilan, klik kanan, dan pilih Tambahkan > File Baru.... Dalam dialog File Baru, pilih Formulir > KontenPage XAML, beri nama file baru NotesPage, dan klik tombol Baru:

    Add NotesPage

    Ini akan menambahkan halaman baru bernama NotesPage ke folder Tampilan . Halaman ini akan menjadi halaman utama dalam aplikasi.

  9. Di Pad Solusi, dalam proyek Catatan, klik dua kali NotesPage.xaml untuk membukanya:

    Open NotesPage.xaml

  10. Di NotesPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?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.NotesPage"
             Title="Notes">
    <!-- Layout children vertically -->
    <StackLayout Margin="20">
        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" />
        <!-- Layout children in two columns -->
        <Grid ColumnDefinitions="*,*">
            <Button Text="Save"
                    Clicked="OnSaveButtonClicked" />
            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="OnDeleteButtonClicked"/>
        </Grid>
    </StackLayout>
</ContentPage>

    Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Editor untuk input teks, dan dua Button objek yang mengarahkan aplikasi untuk menyimpan atau menghapus file. Kedua Button objek ditata secara horizontal dalam Grid, dengan Editor dan Grid ditata secara vertikal dalam StackLayout. Untuk informasi selengkapnya tentang membuat antarmuka pengguna, lihat Antarmuka pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke NotesPage.xaml dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  11. Di Pad Solusi, dalam proyek Catatan, klik dua kali NotesPage.xaml.cs untuk membukanya:

    Open NotesPage.xaml.cs

  12. Di NotesPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
using System.IO;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class NotesPage : ContentPage
    {
        string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");

        public NotesPage()
        {
            InitializeComponent();

            // Read the file.
            if (File.Exists(_fileName))
            {
                editor.Text = File.ReadAllText(_fileName);
            }
        }

        void OnSaveButtonClicked(object sender, EventArgs e)
        {
            // Save the file.
            File.WriteAllText(_fileName, editor.Text);
        }

        void OnDeleteButtonClicked(object sender, EventArgs e)
        {
            // Delete the file.
            if (File.Exists(_fileName))
            {
                File.Delete(_fileName);
            }
            editor.Text = string.Empty;
        }
    }
}

    Kode ini mendefinisikan _fileName bidang, yang mereferensikan file bernama notes.txt yang akan menyimpan data catatan di folder data aplikasi lokal untuk aplikasi. Ketika konstruktor halaman dijalankan, file dibaca, jika ada, dan ditampilkan di Editor. Saat SimpanButton ditekan, OnSaveButtonClicked penanganan aktivitas dijalankan, yang menyimpan konten ke Editor file. Ketika HapusButton ditekanOnDeleteButtonClicked, penanganan aktivitas dijalankan, yang menghapus file, asalkan ada, dan menghapus teks apa pun dari Editor. Untuk informasi selengkapnya tentang interaksi pengguna, lihat Merespons interaksi pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke NotesPage.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  13. Di Pad Solusi, dalam proyek Catatan, pilih folder Tampilan, klik kanan, dan pilih Tambahkan > File Baru.... Dalam dialog File Baru, pilih Formulir > Formulir ContentPage XAML, beri nama file baru Tentang Halaman, dan klik tombol Baru:

    Add AboutPage

  14. Di Pad Solusi, dalam proyek Catatan, klik dua kali AboutPage.xaml untuk membukanya:

    Open AboutPage.xaml

    Ini akan menambahkan halaman baru bernama AboutPage ke folder Tampilan .

  15. Di AboutPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?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.AboutPage"
             Title="About">
    <!-- Layout children in two rows -->
    <Grid RowDefinitions="Auto,*">
        <Image Source="xamarin_logo.png"
               BackgroundColor="{OnPlatform iOS=LightSlateGray, Android=#2196F3}"
               VerticalOptions="Center"
               HeightRequest="64" />
        <!-- Layout children vertically -->
        <StackLayout Grid.Row="1"
                     Margin="20"
                     Spacing="20">
            <Label FontSize="22">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="Notes"
                                  FontAttributes="Bold"
                                  FontSize="22" />
                            <Span Text=" v1.0" />
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <Label Text="This app is written in XAML and C# with the Xamarin Platform." />
            <Button Text="Learn more"
                    Clicked="OnButtonClicked" />
        </StackLayout>
    </Grid>
</ContentPage>

    Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Image, dua Label objek yang menampilkan teks, dan Button. Dua Label objek dan Button secara vertikal ditata dalam StackLayout, dengan Image dan StackLayout ditata secara vertikal dalam Grid. Untuk informasi selengkapnya tentang membuat antarmuka pengguna, lihat Antarmuka pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke AboutPage.xaml dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  16. Di Pad Solusi, dalam proyek Catatan, klik dua kali AboutPage.xaml.cs untuk membukanya:

    Open AboutPage.xaml.cs

  17. Di AboutPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
using Xamarin.Essentials;
using Xamarin.Forms;

namespace Notes.Views
{
    public partial class AboutPage : ContentPage
    {
        public AboutPage()
        {
            InitializeComponent();
        }

        async void OnButtonClicked(object sender, EventArgs e)
        {
            // Launch the specified URL in the system browser.
            await Launcher.OpenAsync("https://aka.ms/xamarin-quickstart");
        }
    }
}

    Kode ini mendefinisikan OnButtonClicked penanganan aktivitas, yang dijalankan saat Pelajari lebihButton lanjut ditekan. Ketika tombol ditekan, browser web diluncurkan dan halaman yang diwakili oleh argumen URI ke OpenAsync metode ditampilkan. Untuk informasi selengkapnya tentang interaksi pengguna, lihat Merespons interaksi pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke AboutPage.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  18. Di Pad Solusi, dalam proyek Catatan, klik dua kali AppShell.xaml untuk membukanya:

    Open AppShell.xaml

  19. Di AppShell.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?xml version="1.0" encoding="UTF-8"?>
<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">
    <!-- Display a bottom tab bar containing two tabs -->
    <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>

    Kode ini secara deklaratif mendefinisikan hierarki visual aplikasi, yang terdiri dari TabBar dua ShellContent objek yang berisi. Objek ini tidak mewakili elemen antarmuka pengguna apa pun, melainkan organisasi hierarki visual aplikasi. Shell akan mengambil objek ini dan menghasilkan antarmuka pengguna untuk konten. Untuk informasi selengkapnya tentang membuat antarmuka pengguna, lihat Antarmuka pengguna di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke AppShell.xaml dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  20. Di Solution Pad, dalam proyek Notes, perluas AppShell.xaml, dan klik dua kali AppShell.xaml.cs untuk membukanya:

    Open AppShell.xaml.cs

  21. Di AppShell.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using Xamarin.Forms;

namespace Notes
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

    Simpan perubahan ke AppShell.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  22. Di Pad Solusi, dalam proyek Catatan, klik dua kali App.xaml untuk membukanya:

    Open App.xaml

  23. Di App.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.App">

</Application>

    Kode ini secara deklaratif mendefinisikan App kelas, yang bertanggung jawab untuk membuat instans aplikasi.

    Simpan perubahan ke App.xaml dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  24. Di Solution Pad, dalam proyek Notes, perluas App.xaml, dan klik dua kali App.xaml.cs untuk membukanya:

    Open App.xaml.cs

  25. Di App.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using Xamarin.Forms;

namespace Notes
{
    public partial class App : Application
    {

        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}

    Kode ini mendefinisikan code-behind untuk App kelas , yang bertanggung jawab untuk membuat instans aplikasi. Ini menginisialisasi MainPage properti ke objek subkelas Shell .

    Simpan perubahan ke App.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

Membangun mulai cepat

  1. Di Visual Studio untuk Mac, pilih item menu Build > Build All (atau tekan ⌘ + B). Proyek akan dibuat dan pesan sukses akan muncul di toolbar Visual Studio untuk Mac:

    Build Successful

    Jika ada kesalahan, ulangi langkah sebelumnya dan perbaiki kesalahan apa pun hingga proyek berhasil dibangun.

  2. Di Pad Solusi, pilih proyek Notes.iOS, klik kanan, dan pilih Atur Sebagai Proyek Startup:

    Set iOS as Startup Project

  3. Di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerup tombol Putar) untuk meluncurkan aplikasi di dalam Simulator iOS pilihan Anda:

    Visual Studio for Mac Toolbar

    Notes in the iOS Simulator

    Masukkan catatan dan tekan tombol Simpan . Kemudian, tutup aplikasi dan luncurkan kembali untuk memastikan catatan yang Anda masukkan dimuat ulang.

    Tekan ikon tab Tentang untuk menavigasi ke AboutPage:

    Notes about page in the iOS Simulator

    Tekan tombol Pelajari selengkapnya untuk meluncurkan halaman web mulai cepat.

    Untuk informasi selengkapnya tentang bagaimana aplikasi diluncurkan di setiap platform, lihat Meluncurkan aplikasi di setiap platform di Xamarin.Forms Mulai Cepat Deep Dive.

  4. Di Pad Solusi, pilih proyek Notes.Droid, klik kanan, dan pilih Atur Sebagai Proyek Startup:

    Set Android as Startup Project

  5. Di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam emulator Android yang Anda pilih:

    Notes in the Android Emulator

    Masukkan catatan dan tekan tombol Simpan . Kemudian, tutup aplikasi dan luncurkan kembali untuk memastikan catatan yang Anda masukkan dimuat ulang.

    Tekan ikon tab Tentang untuk menavigasi ke AboutPage:

    Notes about page in the Android Emulator

    Tekan tombol Pelajari selengkapnya untuk meluncurkan halaman web mulai cepat.

    Untuk informasi selengkapnya tentang bagaimana aplikasi diluncurkan di setiap platform, lihat Meluncurkan aplikasi di setiap platform di Xamarin.Forms Mulai Cepat Deep Dive.

Langkah berikutnya

Dalam mulai cepat ini, Anda belajar cara:

  • Membuat Xamarin.Forms aplikasi Shell.
  • Tentukan antarmuka pengguna untuk halaman menggunakan eXtensible Application Markup Language (XAML), dan berinteraksi dengan elemen XAML dari kode.
  • Jelaskan hierarki visual aplikasi Shell dengan subkelas Shell kelas.

Lanjutkan ke mulai cepat berikutnya untuk menambahkan halaman tambahan ke aplikasi Shell ini Xamarin.Forms .

Berikutnya