設定跨平台的 Xamarin.Forms 應用程式樣式Style a Cross-Platform Xamarin.Forms Application

下載範例 下載範例Download Sample Download the sample

在本快速入門中,您將了解如何:In this quickstart, you will learn how to:

  • 使用 XAML 樣式設定 Xamarin. Forms 應用程式樣式。Style a Xamarin.Forms application using XAML styles.

快速入門會逐步說明如何使用 XAML 樣式設定跨平台的 Xamarin.Forms 應用程式樣式。The quickstart walks through how to style a cross-platform Xamarin.Forms application with XAML styles. 最終的應用程式如下所示:The final application is shown below:

必要條件Prerequisites

您應該先成功完成先前的快速入門,再嘗試本快速入門。You should successfully complete the previous quickstart before attempting this quickstart. 或者,下載先前的快速入門範例,並使用此範例作為本快速入門的起點。Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

使用 Visual Studio 更新應用程式Update the app with Visual Studio

  1. 啟動 Visual Studio 並開啟 Notes 方案。Launch Visual Studio and open the Notes solution.

  2. 在 [方案總管] 的 Notes 專案中,按兩下 App.xaml 以開啟此檔案。In Solution Explorer, in the Notes project, double-click App.xaml to open it. 將現有程式碼取代成下列程式碼:Then replace the existing code with the following code:

    <?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.Resources>
    
            <Thickness x:Key="PageMargin">20</Thickness>
    
            <!-- Colors -->
            <Color x:Key="AppBackgroundColor">AliceBlue</Color>
            <Color x:Key="NavigationBarColor">#1976D2</Color>
            <Color x:Key="NavigationBarTextColor">White</Color>
    
            <!-- Implicit styles -->
            <Style TargetType="{x:Type NavigationPage}">
                <Setter Property="BarBackgroundColor"
                        Value="{StaticResource NavigationBarColor}" />
                 <Setter Property="BarTextColor"
                        Value="{StaticResource NavigationBarTextColor}" />           
            </Style>
    
            <Style TargetType="{x:Type ContentPage}"
                   ApplyToDerivedTypes="True">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
        </Application.Resources>
    </Application>
    

    此程式碼會定義 Thickness 值、一系列的 Color 值,以及 NavigationPageContentPage 的隱含樣式。This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. 請注意,這些樣式是應用層級的 ResourceDictionary,整個應用程式都可以使用。Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. 如需設定 XAML 樣式的詳細資訊,請參閱 Xamarin.Forms 快速入門深入探討中的設定樣式For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    按下 CTRL+S 以將變更儲存到 App.xaml,然後關閉檔案。Save the changes to App.xaml by pressing CTRL+S, and close the file.

  3. 在 [方案總管] 的 Notes 專案中,按兩下 NotesPage.xaml 以開啟此檔案。In Solution Explorer, in the Notes project, double-click NotesPage.xaml to open it. 將現有程式碼取代成下列程式碼:Then replace the existing code with the following code:

    <?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.NotesPage"
                 Title="Notes">
        <ContentPage.Resources>
            <!-- Implicit styles -->
            <Style TargetType="{x:Type ListView}">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
        </ContentPage.Resources>
    
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
    
        <ListView x:Name="listView"
                  Margin="{StaticResource PageMargin}"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              TextColor="Black"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
    </ContentPage>
    

    此程式碼會將 ListView 的隱含樣式新增至頁面層級的 ResourceDictionary,並將 ListView.Margin 屬性設定為在應用程式層級 ResourceDictionary 中所定義的值。This code adds an implicit style for the ListView to the page-level ResourceDictionary, and sets the ListView.Margin property to a value defined in the application-level ResourceDictionary. 請注意,ListView 隱含樣式已新增至頁面層級的 ResourceDictionary,因為它只能由 NotesPage 使用。Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. 如需設定 XAML 樣式的詳細資訊,請參閱 Xamarin.Forms 快速入門深入探討中的設定樣式For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    按下 CTRL+S 將變更儲存到 NotesPage.xaml,然後關閉檔案。Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  4. 在 [方案總管] 的 Notes 專案中,按兩下 NoteEntryPage.xaml 以開啟此檔案。In Solution Explorer, in the Notes project, double-click NoteEntryPage.xaml to open it. 將現有程式碼取代成下列程式碼:Then replace the existing code with the following code:

    <?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.NoteEntryPage"
                 Title="Note Entry">
        <ContentPage.Resources>
            <!-- Implicit styles -->
            <Style TargetType="{x:Type Editor}">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
            <Style TargetType="Button"
                   ApplyToDerivedTypes="True"
                   CanCascade="True">
                <Setter Property="FontSize" Value="Medium" />
                <Setter Property="BackgroundColor" Value="#1976D2" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="CornerRadius" Value="5" />
            </Style>
        </ContentPage.Resources>
    
        <StackLayout Margin="{StaticResource PageMargin}">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked" />
            </Grid>
        </StackLayout>
    
    </ContentPage>
    

    此程式碼會將 EditorButton 檢視的隱含樣式新增至 ResourceDictionary 頁面層級,並將 StackLayout.Margin 屬性設定為在 ResourceDictionary 應用程式層級中所定義的值。This code adds implicit styles for the Editor and Button views to the page-level ResourceDictionary, and sets the StackLayout.Margin property to a value defined in the application-level ResourceDictionary. 請注意,EditorButton 隱含樣式已新增至頁面層級的 ResourceDictionary,因為它們只能由 NoteEntryPage 使用。Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. 如需設定 XAML 樣式的詳細資訊,請參閱 Xamarin.Forms 快速入門深入探討中的設定樣式For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    按下 CTRL+S 將變更儲存到 NoteEntryPage.xaml,然後關閉檔案。Save the changes to NoteEntryPage.xaml by pressing CTRL+S, and close the file.

  5. 在每個平台上建置並執行專案。Build and run the project on each platform. 如需詳細資訊,請參閱建置快速入門For more information, see Building the quickstart.

    NotesPage 上按 + 按鈕,以巡覽至 NoteEntryPage 並輸入備註。On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. 在每張頁面中,觀察樣式如何自上一個快速入門變更。On each page, observe how the styling has changed from the previous quickstart.

使用 Visual Studio for Mac 更新應用程式Update the app with Visual Studio for Mac

  1. 啟動 Visual Studio for Mac 並開啟 Notes 專案。Launch Visual Studio for Mac and open the Notes project.

  2. Solution PadNotes 專案中,按兩下 App.xaml 以開啟此檔案。In the Solution Pad, in the Notes project, double-click App.xaml to open it. 將現有程式碼取代成下列程式碼:Then replace the existing code with the following code:

    <?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.Resources>
    
            <Thickness x:Key="PageMargin">20</Thickness>
    
            <!-- Colors -->
            <Color x:Key="AppBackgroundColor">AliceBlue</Color>
            <Color x:Key="NavigationBarColor">#1976D2</Color>
            <Color x:Key="NavigationBarTextColor">White</Color>
    
            <!-- Implicit styles -->
            <Style TargetType="{x:Type NavigationPage}">
                <Setter Property="BarBackgroundColor"
                        Value="{StaticResource NavigationBarColor}" />
                 <Setter Property="BarTextColor"
                        Value="{StaticResource NavigationBarTextColor}" />           
            </Style>
    
            <Style TargetType="{x:Type ContentPage}"
                   ApplyToDerivedTypes="True">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
        </Application.Resources>
    </Application>
    

    此程式碼會定義 Thickness 值、一系列的 Color 值,以及 NavigationPageContentPage 的隱含樣式。This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. 請注意,這些樣式是應用層級的 ResourceDictionary,整個應用程式都可以使用。Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. 如需設定 XAML 樣式的詳細資訊,請參閱 Xamarin.Forms 快速入門深入探討中的設定樣式For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    選擇 [檔案] > [儲存] (或按下 ⌘ + S) 將變更儲存到 App.xaml,然後關閉檔案。Save the changes to App.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  3. Solution PadNotes 專案中,按兩下 NotesPage.xaml 以開啟此檔案。In the Solution Pad, in the Notes project, double-click NotesPage.xaml to open it. 將現有程式碼取代成下列程式碼:Then replace the existing code with the following code:

    <?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.NotesPage"
                 Title="Notes">
        <ContentPage.Resources>
            <!-- Implicit styles -->
            <Style TargetType="{x:Type ListView}">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
        </ContentPage.Resources>
    
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
    
        <ListView x:Name="listView"
                  Margin="{StaticResource PageMargin}"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              TextColor="Black"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
    </ContentPage>
    

    此程式碼會將 ListView 的隱含樣式新增至頁面層級的 ResourceDictionary,並將 ListView.Margin 屬性設定為在應用程式層級 ResourceDictionary 中所定義的值。This code adds an implicit style for the ListView to the page-level ResourceDictionary, and sets the ListView.Margin property to a value defined in the application-level ResourceDictionary. 請注意,ListView 隱含樣式已新增至頁面層級的 ResourceDictionary,因為它只能由 NotesPage 使用。Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. 如需設定 XAML 樣式的詳細資訊,請參閱 Xamarin.Forms 快速入門深入探討中的設定樣式For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    選擇 [檔案] > [儲存] (或按下 ⌘ + S) 將變更儲存到 NotesPage.xaml,然後關閉檔案。Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  4. Solution PadNotes 專案中,按兩下 NoteEntryPage.xaml 以開啟此檔案。In the Solution Pad, in the Notes project, double-click NoteEntryPage.xaml to open it. 將現有程式碼取代成下列程式碼:Then replace the existing code with the following code:

    <?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.NoteEntryPage"
                 Title="Note Entry">
        <ContentPage.Resources>
            <!-- Implicit styles -->
            <Style TargetType="{x:Type Editor}">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
            <Style TargetType="Button"
                   ApplyToDerivedTypes="True"
                   CanCascade="True">
                <Setter Property="FontSize" Value="Medium" />
                <Setter Property="BackgroundColor" Value="#1976D2" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="CornerRadius" Value="5" />
            </Style>
        </ContentPage.Resources>
    
        <StackLayout Margin="{StaticResource PageMargin}">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked" />
            </Grid>
        </StackLayout>
    
    </ContentPage>
    

    此程式碼會將 EditorButton 檢視的隱含樣式新增至 ResourceDictionary 頁面層級,並將 StackLayout.Margin 屬性設定為在 ResourceDictionary 應用程式層級中所定義的值。This code adds implicit styles for the Editor and Button views to the page-level ResourceDictionary, and sets the StackLayout.Margin property to a value defined in the application-level ResourceDictionary. 請注意,EditorButton 隱含樣式已新增至頁面層級的 ResourceDictionary,因為它們只能由 NoteEntryPage 使用。Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. 如需設定 XAML 樣式的詳細資訊,請參閱 Xamarin.Forms 快速入門深入探討中的設定樣式For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    選擇 [檔案] > [儲存] (或按下 ⌘ + S) 將變更儲存到 NoteEntryPage.xaml,然後關閉檔案。Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  5. 在每個平台上建置並執行專案。Build and run the project on each platform. 如需詳細資訊,請參閱建置快速入門For more information, see Building the quickstart.

    NotesPage 上按 + 按鈕,以巡覽至 NoteEntryPage 並輸入備註。On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. 在每張頁面中,觀察樣式設定如何自上一個快速入門變更。On each page, observe how the styling has changed from the previous quickstart.

後續步驟Next steps

在本快速入門中,您已了解如何:In this quickstart, you learned how to:

  • 使用 XAML 樣式設定 Xamarin. Forms 應用程式樣式。Style a Xamarin.Forms application using XAML styles.

若要深入了解使用 Xamarin.Forms 開發應用程式的基礎,請繼續下一篇快速入門深入探討。To learn more about the fundamentals of application development using Xamarin.Forms, continue to the quickstart deep dive.