共用方式為

設定跨平臺 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進行應用程式開發的基本概念，請繼續進行快速入門深入探討。

下一步