Menata aplikasi lintas platform Xamarin.Forms

Mengunduh sampel

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. Atau, unduh sampel mulai cepat sebelumnya dan gunakan sebagai titik awal untuk mulai cepat ini.

Memperbarui aplikasi dengan Visual Studio

1. Luncurkan Visual Studio dan buka solusi Catatan.

2. Bangun dan jalankan proyek di platform yang Anda pilih. Untuk informasi selengkapnya, lihat Membangun mulai cepat.

   Biarkan aplikasi berjalan dan kembali ke Visual Studio.

3. 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, serangkaian Color nilai, dan gaya implisit untuk ContentPage jenis dan Button . Perhatikan bahwa gaya ini, yang berada di tingkat ResourceDictionaryaplikasi , 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.

4. 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 serangkaian Color 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.

5. 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 di CollectionView, ke tingkat ResourceDictionaryhalaman , dan mengatur CollectionView.Margin properti dan Label.TextColor ke nilai yang ditentukan dalam tingkat ResourceDictionaryaplikasi . Perhatikan bahwa StackLayout gaya implisit ditambahkan ke tingkat ResourceDictionaryhalaman , karena hanya digunakan oleh NotesPage.

   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.

6. 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 tingkat ResourceDictionaryhalaman , dan mengatur StackLayout.Margin properti ke nilai yang ditentukan dalam tingkat ResourceDictionaryaplikasi . Perhatikan bahwa Editor gaya implisit ditambahkan ke tingkat ResourceDictionary halaman karena hanya digunakan oleh NoteEntryPage.

7. 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 tampilan Button objek.

8. 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 yang Image.BackgroundColor ditentukan dalam tingkat ResourceDictionaryaplikasi .

9. 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

1. Luncurkan Visual Studio untuk Mac dan buka proyek Catatan.

2. 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.

3. 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, serangkaian Color nilai, dan gaya implisit untuk ContentPage jenis dan Button . Perhatikan bahwa gaya ini, yang berada di tingkat ResourceDictionaryaplikasi , 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.

4. 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 serangkaian Color 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.

5. 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 di CollectionView, ke tingkat ResourceDictionaryhalaman , dan mengatur CollectionView.Margin properti dan Label.TextColor ke nilai yang ditentukan dalam tingkat ResourceDictionaryaplikasi . Perhatikan bahwa StackLayout gaya implisit ditambahkan ke tingkat ResourceDictionaryhalaman , karena hanya digunakan oleh NotesPage.

   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.

6. 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 tingkat ResourceDictionaryhalaman , dan mengatur StackLayout.Margin properti ke nilai yang ditentukan dalam tingkat ResourceDictionaryaplikasi . Perhatikan bahwa Editor gaya implisit ditambahkan ke tingkat ResourceDictionary halaman karena hanya digunakan oleh NoteEntryPage.

7. 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 tampilan Button objek.

8. 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 yang Image.BackgroundColor ditentukan dalam tingkat ResourceDictionaryaplikasi .

9. 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.

Berikutnya

Tautan terkait

• Catatan (sampel)
• XAML Hot Reload untuk Xamarin.Forms
• Xamarin.Forms Mulai Cepat Mendalami