Menata aplikasi lintas platform Xamarin.Forms
Dalam mulai cepat ini, Anda akan mempelajari cara:
- Menata Xamarin.Forms aplikasi Shell menggunakan gaya XAML.
- Gunakan XAML Hot Reload untuk melihat perubahan UI tanpa membangun kembali aplikasi Anda.
Mulai cepat membahas cara menata aplikasi lintas platform Xamarin.Forms dengan gaya XAML. Selain itu, mulai cepat menggunakan XAML Hot Reload untuk memperbarui UI aplikasi Anda yang sedang berjalan, tanpa harus membangun kembali aplikasi. Untuk informasi selengkapnya tentang XAML Hot Reload, lihat XAML Hot Reload untuk Xamarin.Forms.
Aplikasi akhir ditunjukkan di bawah ini:
Prasyarat
Anda harus berhasil menyelesaikan mulai cepat sebelumnya sebelum mencoba mulai cepat ini.
Memperbarui aplikasi dengan Visual Studio
Luncurkan Visual Studio dan buka solusi Catatan.
Bangun dan jalankan proyek di platform yang Anda pilih. Untuk informasi selengkapnya, lihat Membangun mulai cepat.
Biarkan aplikasi berjalan dan kembali ke Visual Studio.
Di Penjelajah Solusi, dalam proyek Notes, buka App.xaml. Kemudian ganti kode yang ada 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"> <!-- Resources used by multiple pages in the application --> <Application.Resources> <Thickness x:Key="PageMargin">20</Thickness> <!-- Colors --> <Color x:Key="AppPrimaryColor">#1976D2</Color> <Color x:Key="AppBackgroundColor">AliceBlue</Color> <Color x:Key="PrimaryColor">Black</Color> <Color x:Key="SecondaryColor">White</Color> <Color x:Key="TertiaryColor">Silver</Color> <!-- Implicit styles --> <Style TargetType="ContentPage" ApplyToDerivedTypes="True"> <Setter Property="BackgroundColor" Value="{StaticResource AppBackgroundColor}" /> </Style> <Style TargetType="Button"> <Setter Property="FontSize" Value="Medium" /> <Setter Property="BackgroundColor" Value="{StaticResource AppPrimaryColor}" /> <Setter Property="TextColor" Value="{StaticResource SecondaryColor}" /> <Setter Property="CornerRadius" Value="5" /> </Style> </Application.Resources> </Application>
Kode ini mendefinisikan
Thickness
nilai, serangkaianColor
nilai, dan gaya implisit untukContentPage
jenis danButton
. Perhatikan bahwa gaya ini, yang berada di tingkatResourceDictionary
aplikasi , dapat dikonsumsi di seluruh aplikasi. Untuk informasi selengkapnya tentang gaya XAML, lihat Menata gaya di Xamarin.Forms Mulai Cepat Deep Dive.Setelah membuat perubahan pada App.xaml, XAML Hot Reload akan memperbarui UI aplikasi yang sedang berjalan, tanpa perlu membangun kembali aplikasi. Secara khusus, warna latar belakang setiap halaman akan berubah. Secara default Hot Reload menerapkan perubahan segera setelah berhenti mengetik. Namun, ada pengaturan preferensi yang dapat diubah, jika Anda mau, untuk menunggu hingga penyimpanan file untuk menerapkan perubahan.
Di Penjelajah Solusi, dalam proyek Catatan, buka AppShell.xaml. Kemudian ganti kode yang ada 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"> <Shell.Resources> <!-- Style Shell elements --> <Style x:Key="BaseStyle" TargetType="Element"> <Setter Property="Shell.BackgroundColor" Value="{StaticResource AppPrimaryColor}" /> <Setter Property="Shell.ForegroundColor" Value="{StaticResource SecondaryColor}" /> <Setter Property="Shell.TitleColor" Value="{StaticResource SecondaryColor}" /> <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/> </Style> <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" /> </Shell.Resources> <!-- 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 menambahkan dua gaya ke
Shell
kamus sumber daya, yang menentukan serangkaianColor
nilai yang digunakan oleh aplikasi.Setelah membuat perubahan AppShell.xaml , XAML Hot Reload akan memperbarui UI aplikasi yang sedang berjalan, tanpa membangun kembali aplikasi. Secara khusus, warna latar belakang krom Shell akan berubah.
Di Penjelajah Solusi, dalam proyek Catatan, buka NotesPage.xaml di folder Tampilan. Kemudian ganti kode yang ada 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"> <ContentPage.Resources> <!-- Define a visual state for the Selected state of the CollectionView --> <Style TargetType="StackLayout"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="Selected"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="{StaticResource AppPrimaryColor}" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style> </ContentPage.Resources> <!-- Add an item to the toolbar --> <ContentPage.ToolbarItems> <ToolbarItem Text="Add" Clicked="OnAddClicked" /> </ContentPage.ToolbarItems> <!-- Display notes in a list --> <CollectionView x:Name="collectionView" Margin="{StaticResource PageMargin}" SelectionMode="Single" SelectionChanged="OnSelectionChanged"> <CollectionView.ItemsLayout> <LinearItemsLayout Orientation="Vertical" ItemSpacing="10" /> </CollectionView.ItemsLayout> <!-- Define the appearance of each item in the list --> <CollectionView.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding Text}" FontSize="Medium" /> <Label Text="{Binding Date}" TextColor="{StaticResource TertiaryColor}" FontSize="Small" /> </StackLayout> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </ContentPage>
Kode ini menambahkan gaya implisit untuk
StackLayout
yang menentukan tampilan setiap item yang dipilih diCollectionView
, ke tingkatResourceDictionary
halaman , dan mengaturCollectionView.Margin
properti danLabel.TextColor
ke nilai yang ditentukan dalam tingkatResourceDictionary
aplikasi . Perhatikan bahwaStackLayout
gaya implisit ditambahkan ke tingkatResourceDictionary
halaman , karena hanya digunakan olehNotesPage
.Setelah membuat perubahan NotesPage.xaml , XAML Hot Reload akan memperbarui UI aplikasi yang sedang berjalan, tanpa membangun kembali aplikasi. Secara khusus, warna item yang dipilih dalam
CollectionView
akan berubah.Di Penjelajah Solusi, dalam proyek Catatan, buka NoteEntryPage.xaml di folder Tampilan. Kemudian ganti kode yang ada 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.NoteEntryPage" Title="Note Entry"> <ContentPage.Resources> <!-- Implicit styles --> <Style TargetType="{x:Type Editor}"> <Setter Property="BackgroundColor" Value="{StaticResource AppBackgroundColor}" /> </Style> </ContentPage.Resources> <!-- Layout children vertically --> <StackLayout Margin="{StaticResource PageMargin}"> <Editor Placeholder="Enter your note" Text="{Binding Text}" HeightRequest="100" /> <Grid ColumnDefinitions="*,*"> <!-- Layout children in two columns --> <Button Text="Save" Clicked="OnSaveButtonClicked" /> <Button Grid.Column="1" Text="Delete" Clicked="OnDeleteButtonClicked"/> </Grid> </StackLayout> </ContentPage>
Kode ini menambahkan gaya implisit untuk
Editor
tingkatResourceDictionary
halaman , dan mengaturStackLayout.Margin
properti ke nilai yang ditentukan dalam tingkatResourceDictionary
aplikasi . Perhatikan bahwaEditor
gaya implisit ditambahkan ke tingkatResourceDictionary
halaman karena hanya digunakan olehNoteEntryPage
.Dalam aplikasi yang sedang berjalan, navigasikan ke
NoteEntryPage
.XAML Hot Reload memperbarui UI aplikasi, tanpa membangunnya kembali. Secara khusus, warna latar belakang dari perubahan
Editor
dalam aplikasi yang sedang berjalan, serta tampilanButton
objek.Di Penjelajah Solusi, dalam proyek Catatan, buka AboutPage.xaml di folder Tampilan. Kemudian ganti kode yang ada 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="{StaticResource AppPrimaryColor}" Opacity="0.85" VerticalOptions="Center" HeightRequest="64" /> <!-- Layout children vertically --> <StackLayout Grid.Row="1" Margin="{StaticResource PageMargin}" 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 mengatur properti dan
StackLayout.Margin
ke nilai yangImage.BackgroundColor
ditentukan dalam tingkatResourceDictionary
aplikasi .Dalam aplikasi yang sedang berjalan, navigasikan ke
AboutPage
.XAML Hot Reload memperbarui UI aplikasi, tanpa membangunnya kembali. Secara khusus, warna latar belakang perubahan
Image
dalam aplikasi yang sedang berjalan.
Memperbarui aplikasi dengan Visual Studio untuk Mac
Luncurkan Visual Studio untuk Mac dan buka proyek Catatan.
Bangun dan jalankan proyek di platform yang Anda pilih. Untuk informasi selengkapnya, lihat Membangun mulai cepat.
Biarkan aplikasi berjalan dan kembali ke Visual Studio untuk Mac.
Di Solution Pad, dalam proyek Notes, buka App.xaml. Kemudian ganti kode yang ada 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"> <!-- Resources used by multiple pages in the application --> <Application.Resources> <Thickness x:Key="PageMargin">20</Thickness> <!-- Colors --> <Color x:Key="AppPrimaryColor">#1976D2</Color> <Color x:Key="AppBackgroundColor">AliceBlue</Color> <Color x:Key="PrimaryColor">Black</Color> <Color x:Key="SecondaryColor">White</Color> <Color x:Key="TertiaryColor">Silver</Color> <!-- Implicit styles --> <Style TargetType="ContentPage" ApplyToDerivedTypes="True"> <Setter Property="BackgroundColor" Value="{StaticResource AppBackgroundColor}" /> </Style> <Style TargetType="Button"> <Setter Property="FontSize" Value="Medium" /> <Setter Property="BackgroundColor" Value="{StaticResource AppPrimaryColor}" /> <Setter Property="TextColor" Value="{StaticResource SecondaryColor}" /> <Setter Property="CornerRadius" Value="5" /> </Style> </Application.Resources> </Application>
Kode ini mendefinisikan
Thickness
nilai, serangkaianColor
nilai, dan gaya implisit untukContentPage
jenis danButton
. Perhatikan bahwa gaya ini, yang berada di tingkatResourceDictionary
aplikasi , dapat dikonsumsi di seluruh aplikasi. Untuk informasi selengkapnya tentang gaya XAML, lihat Menata gaya di Xamarin.Forms Mulai Cepat Deep Dive.Setelah membuat perubahan pada App.xaml, XAML Hot Reload akan memperbarui UI aplikasi yang sedang berjalan, tanpa perlu membangun kembali aplikasi. Secara khusus, warna latar belakang setiap halaman akan berubah. Secara default Hot Reload menerapkan perubahan segera setelah berhenti mengetik. Namun, ada pengaturan preferensi yang dapat diubah, jika Anda mau, untuk menunggu hingga penyimpanan file untuk menerapkan perubahan.
Di Solution Pad, dalam proyek Notes, buka AppShell.xaml. Kemudian ganti kode yang ada 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"> <Shell.Resources> <!-- Style Shell elements --> <Style x:Key="BaseStyle" TargetType="Element"> <Setter Property="Shell.BackgroundColor" Value="{StaticResource AppPrimaryColor}" /> <Setter Property="Shell.ForegroundColor" Value="{StaticResource SecondaryColor}" /> <Setter Property="Shell.TitleColor" Value="{StaticResource SecondaryColor}" /> <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/> </Style> <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" /> </Shell.Resources> <!-- 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 menambahkan dua gaya ke
Shell
kamus sumber daya, yang menentukan serangkaianColor
nilai yang digunakan oleh aplikasi.Setelah membuat perubahan AppShell.xaml , XAML Hot Reload akan memperbarui UI aplikasi yang sedang berjalan, tanpa membangun kembali aplikasi. Secara khusus, warna latar belakang krom Shell akan berubah.
Di Pad Solusi, dalam proyek Catatan, buka NotesPage.xaml di folder Tampilan. Kemudian ganti kode yang ada 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"> <ContentPage.Resources> <!-- Define a visual state for the Selected state of the CollectionView --> <Style TargetType="StackLayout"> <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="Selected"> <VisualState.Setters> <Setter Property="BackgroundColor" Value="{StaticResource AppPrimaryColor}" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateGroupList> </Setter> </Style> </ContentPage.Resources> <!-- Add an item to the toolbar --> <ContentPage.ToolbarItems> <ToolbarItem Text="Add" Clicked="OnAddClicked" /> </ContentPage.ToolbarItems> <!-- Display notes in a list --> <CollectionView x:Name="collectionView" Margin="{StaticResource PageMargin}" SelectionMode="Single" SelectionChanged="OnSelectionChanged"> <CollectionView.ItemsLayout> <LinearItemsLayout Orientation="Vertical" ItemSpacing="10" /> </CollectionView.ItemsLayout> <!-- Define the appearance of each item in the list --> <CollectionView.ItemTemplate> <DataTemplate> <StackLayout> <Label Text="{Binding Text}" FontSize="Medium" /> <Label Text="{Binding Date}" TextColor="{StaticResource TertiaryColor}" FontSize="Small" /> </StackLayout> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </ContentPage>
Kode ini menambahkan gaya implisit untuk
StackLayout
yang menentukan tampilan setiap item yang dipilih diCollectionView
, ke tingkatResourceDictionary
halaman , dan mengaturCollectionView.Margin
properti danLabel.TextColor
ke nilai yang ditentukan dalam tingkatResourceDictionary
aplikasi . Perhatikan bahwaStackLayout
gaya implisit ditambahkan ke tingkatResourceDictionary
halaman , karena hanya digunakan olehNotesPage
.Setelah membuat perubahan NotesPage.xaml , XAML Hot Reload akan memperbarui UI aplikasi yang sedang berjalan, tanpa membangun kembali aplikasi. Secara khusus, warna item yang dipilih dalam
CollectionView
akan berubah.Di Pad Solusi, dalam proyek Catatan, buka NoteEntryPage.xaml di folder Tampilan. Kemudian ganti kode yang ada 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.NoteEntryPage" Title="Note Entry"> <ContentPage.Resources> <!-- Implicit styles --> <Style TargetType="{x:Type Editor}"> <Setter Property="BackgroundColor" Value="{StaticResource AppBackgroundColor}" /> </Style> </ContentPage.Resources> <!-- Layout children vertically --> <StackLayout Margin="{StaticResource PageMargin}"> <Editor Placeholder="Enter your note" Text="{Binding Text}" 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 menambahkan gaya implisit untuk
Editor
tingkatResourceDictionary
halaman , dan mengaturStackLayout.Margin
properti ke nilai yang ditentukan dalam tingkatResourceDictionary
aplikasi . Perhatikan bahwaEditor
gaya implisit ditambahkan ke tingkatResourceDictionary
halaman karena hanya digunakan olehNoteEntryPage
.Dalam aplikasi yang sedang berjalan, navigasikan ke
NoteEntryPage
.XAML Hot Reload memperbarui UI aplikasi, tanpa membangunnya kembali. Secara khusus, warna latar belakang dari perubahan
Editor
dalam aplikasi yang sedang berjalan, serta tampilanButton
objek.Di Pad Solusi, dalam proyek Catatan, buka AboutPage.xaml di folder Tampilan. Kemudian ganti kode yang ada 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="{StaticResource AppPrimaryColor}" Opacity="0.85" VerticalOptions="Center" HeightRequest="64" /> <!-- Layout children vertically --> <StackLayout Grid.Row="1" Margin="{StaticResource PageMargin}" 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 mengatur properti dan
StackLayout.Margin
ke nilai yangImage.BackgroundColor
ditentukan dalam tingkatResourceDictionary
aplikasi .Dalam aplikasi yang sedang berjalan, navigasikan ke
AboutPage
.XAML Hot Reload memperbarui UI aplikasi, tanpa membangunnya kembali. Secara khusus, warna latar belakang perubahan
Image
dalam aplikasi yang sedang berjalan.
Langkah berikutnya
Dalam mulai cepat ini, Anda belajar cara:
- Menata Xamarin.Forms aplikasi Shell menggunakan gaya XAML.
- Gunakan XAML Hot Reload untuk melihat perubahan UI tanpa membangun kembali aplikasi Anda.
Untuk mempelajari selengkapnya tentang dasar-dasar pengembangan aplikasi menggunakan Xamarin.Forms Shell, lanjutkan ke mulai cepat mendalam.