設定跨平臺 Xamarin.Forms 應用程式的樣式

下載範例

在本快速入門中，您將了解如何：

• 使用 XAML 樣式設定 Xamarin.Forms Shell 應用程式的樣式。
• 使用 XAML 熱重新載入 查看 UI 變更，而不需重建您的應用程式。

快速入門會逐步解說如何使用 XAML 樣式設定跨平臺 Xamarin.Forms 應用程式的樣式。 此外，快速入門會使用 XAML 熱重新載入 來更新執行中應用程式的 UI，而不需要重建應用程式。 如需 XAML 熱重新載入 的詳細資訊，請參閱 的 Xamarin.FormsXAML 熱重新載入。

最終的應用程式如下所示：

必要條件

您應該先成功完成先前的快速入門，再嘗試本快速入門。 或者，下載先前的快速入門範例，並使用此範例作為本快速入門的起點。

使用 Visual Studio 更新應用程式

1. 啟動 Visual Studio 並開啟 Notes 方案。

2. 在您選擇的平臺上建置並執行專案。 如需詳細資訊，請參閱建置快速入門。

   讓應用程式保持執行狀態，並返回 Visual Studio。

3. 在 方案總管 的 Notes 專案中，開啟 App.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式代碼會Thickness定義和類型的值、一系列Color值和隱含樣式ContentPageButton。 請注意，這些樣式是應用層級的 ResourceDictionary，整個應用程式都可以使用。 如需 XAML 樣式的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms樣式。

   對 App.xaml 進行變更之後，XAML 熱重新載入 將會更新執行中應用程式的 UI，而不需要重建應用程式。 具體來說，每個頁面的背景色彩都會變更。 根據預設，熱重新載入 停止輸入之後立即套用變更。 不過， 您可以變更喜好設定 ，如果您想要等到檔案儲存套用變更為止。

4. 在 方案總管 的 Notes 專案中，開啟 AppShell.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式代碼會將兩個樣式新增至 Shell 資源字典，以定義應用程式所使用的一系列 Color 值。

   進行AppShell.xaml 變更之後，XAML 熱重新載入 會更新執行中應用程式的UI，而不需重建應用程式。 具體來說，Shell Chrome 的背景色彩將會變更。

5. 在 方案總管 的 Notes 專案中，開啟 Views 資料夾中的 NotesPage.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式代碼會將的隱含樣式StackLayout新增至 ，以定義 中CollectionView每個選取項目的外觀至頁面層級 ResourceDictionary，並將和 Label.TextColor 屬性設定CollectionView.Margin為應用層級ResourceDictionary中定義的值。 請注意，StackLayout 隱含樣式已新增至頁面層級的 ResourceDictionary，因為它只能由 NotesPage 使用。

   進行 NotesPage.xaml 變更之後，XAML 熱重新載入 會更新執行中應用程式的 UI，而不需重建應用程式。 具體而言，中 CollectionView 選取專案的色彩將會變更。

6. 在 方案總管 的 Notes 專案中，開啟 Views 資料夾中的 NoteEntryPage.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式碼會將 Editor 的隱含樣式新增至頁面層級的 ResourceDictionary，並將 StackLayout.Margin 屬性設定為在應用程式層級 ResourceDictionary 中所定義的值。 請注意， Editor 隱含樣式已新增至頁面層級 ResourceDictionary ，因為它只會由 取用 NoteEntryPage。

7. 在執行中的應用程式中，瀏覽至 NoteEntryPage。

   XAML 熱重新載入 更新應用程式的 UI，而不需重建它。 具體而言，在執行中應用程式中變更的背景色彩 Editor ，以及對象的外觀 Button 。

8. 在 方案總管 的 Notes 專案中，開啟 Views 資料夾中的 AboutPage.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式代碼會將 Image.BackgroundColor 和 StackLayout.Margin 屬性設定為應用層級 ResourceDictionary中定義的值。

9. 在執行中的應用程式中，瀏覽至 AboutPage。

   XAML 熱重新載入 更新應用程式的 UI，而不需重建它。 具體而言，在執行中的應用程式中變更的背景色彩 Image 。

使用 Visual Studio for Mac 更新應用程式

1. 啟動 Visual Studio for Mac 並開啟 Notes 專案。

2. 在您選擇的平臺上建置並執行專案。 如需詳細資訊，請參閱建置快速入門。

   讓應用程式保持執行狀態，並返回 Visual Studio for Mac。

3. 在 Solution Pad 的 Notes 專案中，開啟 App.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式代碼會Thickness定義和類型的值、一系列Color值和隱含樣式ContentPageButton。 請注意，這些樣式是應用層級的 ResourceDictionary，整個應用程式都可以使用。 如需 XAML 樣式的詳細資訊，請參閱快速入門深入探討中的Xamarin.Forms樣式。

   對 App.xaml 進行變更之後，XAML 熱重新載入 會更新執行中應用程式的 UI，而不需要重建應用程式。 具體來說，每個頁面的背景色彩都會變更。 根據預設，熱重新載入 停止輸入之後立即套用變更。 不過， 您可以變更喜好設定 ，如果您想要等到檔案儲存套用變更為止。

4. 在 Solution Pad 的 Notes 專案中，開啟 AppShell.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式代碼會將兩個樣式新增至 Shell 資源字典，以定義應用程式所使用的一系列 Color 值。

   進行AppShell.xaml 變更之後，XAML 熱重新載入 會更新執行中應用程式的UI，而不需重建應用程式。 具體來說，Shell Chrome 的背景色彩將會變更。

5. 在 Solution Pad 的 Notes 專案中，開啟 Views 資料夾中的 NotesPage.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式代碼會將的隱含樣式StackLayout新增至 ，以定義 中CollectionView每個選取項目的外觀至頁面層級 ResourceDictionary，並將和 Label.TextColor 屬性設定CollectionView.Margin為應用層級ResourceDictionary中定義的值。 請注意，StackLayout 隱含樣式已新增至頁面層級的 ResourceDictionary，因為它只能由 NotesPage 使用。

   進行 NotesPage.xaml 變更之後，XAML 熱重新載入 會更新執行中應用程式的 UI，而不需重建應用程式。 具體而言，中 CollectionView 選取專案的色彩將會變更。

6. 在 Solution Pad 的 Notes 專案中，開啟 Views 資料夾中的 NoteEntryPage.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式代碼會將的 Editor 隱含樣式新增至頁面層級 ResourceDictionary，並將屬性設定 StackLayout.Margin 為應用層級 ResourceDictionary中定義的值。 請注意， Editor 隱含樣式已新增至頁面層級 ResourceDictionary ，因為它只會由 取用 NoteEntryPage。

7. 在執行中的應用程式中，瀏覽至 NoteEntryPage。

   XAML 熱重新載入 更新應用程式的 UI，而不需重建它。 具體而言，在執行中應用程式中變更的背景色彩 Editor ，以及對象的外觀 Button 。

8. 在 Solution Pad 的 Notes 專案中，開啟 Views 資料夾中的 AboutPage.xaml。 將現有程式碼取代成下列程式碼：

   <?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>
   

   此程式代碼會將 Image.BackgroundColor 和 StackLayout.Margin 屬性設定為應用層級 ResourceDictionary中定義的值。

9. 在執行中的應用程式中，瀏覽至 AboutPage。

   XAML 熱重新載入 更新應用程式的 UI，而不需重建它。 具體而言，在執行中的應用程式中變更的背景色彩 Image 。

下一步

在本快速入門中，您已了解如何：

• 使用 XAML 樣式設定 Xamarin.Forms Shell 應用程式的樣式。
• 使用 XAML 熱重新載入 查看 UI 變更，而不需重建應用程式。

若要深入瞭解使用 Xamarin.Forms Shell進行應用程式開發的基本概念，請繼續進行快速入門深入探討。

下一步

相關連結

• Notes (範例)
• 的 XAML 熱重新載入Xamarin.Forms
• Xamarin.Forms 快速入門深入探討