Formatieren einer plattformübergreifenden Xamarin.Forms-AnwendungStyle a cross-platform Xamarin.Forms application

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

In diesem Schnellstart lernen Sie, wie Sie:In this quickstart, you will learn how to:

  • Formatieren einer Xamarin.Forms-Shellanwendung mithilfe von XAML-Formatvorlagen.Style a Xamarin.Forms Shell application using XAML styles.
  • Verwenden von XAML Hot Reload, um Änderungen an der Benutzeroberfläche anzuzeigen, ohne die Anwendung neu zu kompilieren.Use XAML Hot Reload to see UI changes without rebuilding your application.

In dieser Schnellstartanleitung erfahren Sie, wie Sie eine plattformübergreifende Xamarin.Forms-Anwendung mit XAML-Formatvorlagen formatieren.The quickstart walks through how to style a cross-platform Xamarin.Forms application with XAML styles. Außerdem verwendet die Schnellstartanleitung XAML Hot Reload, um die Benutzeroberfläche der ausgeführten Anwendung zu aktualisieren, ohne dass die Anwendung neu kompiliert werden muss.In addition, the quickstart uses XAML Hot Reload to update the UI of your running application, without having to rebuild the application. Weitere Informationen zu XAML Hot Reload finden Sie unter XAML Hot Reload für Xamarin.Forms.For more information about XAML Hot Reload, see XAML Hot Reload for Xamarin.Forms.

Die fertige Anwendung wird unten gezeigt:The final application is shown below:

Notizenseite Notizeneintragsseite InfoseiteNotes Page Note Entry Page About Page

VoraussetzungenPrerequisites

Sie sollten den vorherigen Schnellstart erfolgreich abgeschlossen haben, bevor Sie mit diesem Schnellstart beginnen.You should successfully complete the previous quickstart before attempting this quickstart. Alternativ können Sie auch das letzte Schnellstartbeispiel herunterladen und als Startpunkt für diesen Schnellstart verwenden.Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

Aktualisieren der App mit Visual StudioUpdate the app with Visual Studio

  1. Starten Sie Visual Studio, und öffnen Sie die Projektmappe „Notizen“.Launch Visual Studio and open the Notes solution.

  2. Erstellen Sie das Projekt, und führen Sie es auf der Plattform Ihrer Wahl aus.Build and run the project on your chosen platform. Weitere Informationen finden Sie unter Erstellen des Schnellstarts.For more information, see Building the quickstart.

    Lassen Sie die Anwendung offen, und kehren Sie zu Visual Studio zurück.Leave the application running and return to Visual Studio.

  3. Öffnen Sie im Projektmappen-Explorer im Projekt Notes die Datei App.xaml.In Solution Explorer, in the Notes project, open App.xaml. Ersetzen Sie dann den vorhandenen Code durch folgenden Code: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">
    
        <!-- 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>
    

    Dieser Code definiert einen Thickness-Wert, eine Reihe von Color-Werten sowie implizite Formate für die Typen ContentPage und Button.This code defines a Thickness value, a series of Color values, and implicit styles for the ContentPage and Button types. Diese Formate, die sich in der Klasse ResourceDictionary auf der Anwendungsebene befinden, können in der gesamten App verarbeitet werden.Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. Weitere Informationen zur XAML-Formatierung finden Sie unter Format in den ausführlichen Erläuterungen zum Xamarin.Forms-Schnellstart.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Nach Durchführung der Änderungen an App.xaml aktualisiert XAML Hot Reload die Benutzeroberfläche der ausgeführten App, ohne dass die Anwendung neu erstellt werden muss.After making the changes to App.xaml, XAML Hot Reload will update the UI of the running app, with no need to rebuild the application. Insbesondere ändert sich die Hintergrundfarbe der einzelnen Seiten.Specifically, the background color each page will change. Standardmäßig wendet Hot Reload Änderungen sofort nach dem Beenden der Eingabe an.By default Hot Reload applies changes immediately after stopping typing. Jedoch kann die Einstellung geändert werden, wenn Sie lieber warten möchten, bis die Datei gespeichert wird, um danach Änderungen vorzunehmen.However, there's a preference setting that can be changed, if you prefer, to wait until file save to apply changes.

  4. Öffnen Sie im Projektmappen-Explorer im Projekt Notes die Datei AppShell.xaml.In Solution Explorer, in the Notes project, open AppShell.xaml. Ersetzen Sie dann den vorhandenen Code durch folgenden Code:Then replace the existing code with the following code:

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

    Dieser Code fügt dem Shell-Ressourcenwörterbuch zwei Formatvorlagen hinzu. Dadurch wird eine Reihe von Color-Werten definiert, die von der Anwendung verwendet werden.This code adds two styles to the Shell resource dictionary, which define a series of Color values used by the application.

    Nach Durchführung der Änderungen an AppShell.xaml aktualisiert XAML Hot Reload die Benutzeroberfläche der ausgeführten App, ohne die Anwendung neu zu erstellen.After making the AppShell.xaml changes, XAML Hot Reload will update the UI of the running app, without rebuilding the application. Insbesondere ändert sich die Hintergrundfarbe des Shellchroms.Specifically, the background color of the Shell chrome will change.

  5. Öffnen Sie im Projektmappen-Explorer im Projekt Notes die Datei NotesPage.xaml im Ordner Ansichten.In Solution Explorer, in the Notes project, open NotesPage.xaml in the Views folder. Ersetzen Sie dann den vorhandenen Code durch folgenden Code: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.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>
    

    Dieser Code fügt dem ResourceDictionary auf Seitenebene eine implizite Formatvorlage für das StackLayout hinzu, die die Darstellung der einzelnen ausgewählten Elemente in der CollectionView definiert. Außerdem werden die Eigenschaften CollectionView.Margin und Label.TextColor auf Werte festgelegt, die im ResourceDictionary auf Anwendungsebene definiert sind.This code adds an implicit style for the StackLayout that defines the appearance of each selected item in the CollectionView, to the page-level ResourceDictionary, and sets the CollectionView.Margin and Label.TextColor property to values defined in the application-level ResourceDictionary. Beachten Sie, dass das implizite Format der Klasse StackLayout zur Klasse ResourceDictionary auf Seitenebene hinzugefügt wurde, weil es nur von der Klasse NotesPage verarbeitet wird.Note that the StackLayout implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage.

    Nach Durchführung der Änderungen an NotesPage.xaml aktualisiert XAML Hot Reload die Benutzeroberfläche der ausgeführten App, ohne die Anwendung neu zu erstellen.After making the NotesPage.xaml changes, XAML Hot Reload will update the UI of the running app, without rebuilding the application. Insbesondere ändert sich die Farbe der ausgewählten Elemente in der CollectionView.Specifically, the color of selected items in the CollectionView will change.

  6. Öffnen Sie im Projektmappen-Explorer im Projekt Notes die Datei NoteEntryPage.xaml im Ordner Ansichten.In Solution Explorer, in the Notes project, open NoteEntryPage.xaml in the Views folder. Ersetzen Sie dann den vorhandenen Code durch den folgenden Code: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.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>
    

    Mit diesem Code wird ein implizites Format für die Klasse Editor zur Klasse ResourceDictionary auf Seitenebene hinzugefügt und die Eigenschaft StackLayout.Margin auf einen Wert festgelegt, der in der Klasse ResourceDictionary auf Anwendungsebene definiert ist.This code adds an implicit style for the Editor to the page-level ResourceDictionary, and sets the StackLayout.Margin property to a value defined in the application-level ResourceDictionary. Beachten Sie, dass die impliziten Editor-Formatvorlagen dem ResourceDictionary auf Seitenebene hinzugefügt wurden, weil sie nur von der NoteEntryPage verwendet werden.Note that the Editor implicit styles was added to the page-level ResourceDictionary because it's only consumed by the NoteEntryPage.

  7. Navigieren Sie in der ausgeführten Anwendung zur NoteEntryPage.In the running application, navigate to the NoteEntryPage.

    XAML Hot Reload hat die Benutzeroberfläche der Anwendung aktualisiert, ohne dass die Anwendung neu erstellt werden musste.XAML Hot Reload updated the UI of the application, without rebuilding it. Insbesondere hat sich die Hintergrundfarbe für den Editor in der ausgeführten Anwendung sowie die Darstellung der Button-Objekte geändert.Specifically, the background color of the Editor changed in the running application, as well as the appearance of the Button objects.

  8. Öffnen Sie im Projektmappen-Explorer im Projekt Notes die Datei AboutPage.xaml im Ordner Ansichten.In Solution Explorer, in the Notes project, open AboutPage.xaml in the Views folder. Ersetzen Sie dann den vorhandenen Code durch folgenden Code: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.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>
    

    Dieser Code legt die Eigenschaften Image.BackgroundColor und StackLayout.Margin auf Werte fest, die im ResourceDictionary auf Anwendungsebene definiert sind.This code sets the Image.BackgroundColor and StackLayout.Margin properties to values defined in the application-level ResourceDictionary.

  9. Navigieren Sie in der ausgeführten Anwendung zur AboutPage.In the running application, navigate to the AboutPage.

    XAML Hot Reload hat die Benutzeroberfläche der Anwendung aktualisiert, ohne dass die Anwendung neu erstellt werden musste.XAML Hot Reload updated the UI of the application, without rebuilding it. Insbesondere hat sich die Hintergrundfarbe für das Image in der ausgeführten Anwendung geändert.Specifically, the background color of the Image changed in the running application.

Aktualisieren der App mit Visual Studio für MacUpdate the app with Visual Studio for Mac

  1. Starten Sie Visual Studio für Mac, und öffnen Sie das Projekt „Notizen“.Launch Visual Studio for Mac and open the Notes project.

  2. Erstellen Sie das Projekt, und führen Sie es auf der Plattform Ihrer Wahl aus.Build and run the project on your chosen platform. Weitere Informationen finden Sie unter Erstellen des Schnellstarts.For more information, see Building the quickstart.

    Lassen Sie die Anwendung offen, und kehren Sie zu Visual Studio für Mac zurück.Leave the application running and return to Visual Studio for Mac.

  3. Öffnen Sie im Lösungspad im Projekt Notes die Datei App.xaml.In the Solution Pad, in the Notes project, open App.xaml. Ersetzen Sie dann den vorhandenen Code durch folgenden Code: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">
    
        <!-- 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>
    

    Dieser Code definiert einen Thickness-Wert, eine Reihe von Color-Werten sowie implizite Formate für die Typen ContentPage und Button.This code defines a Thickness value, a series of Color values, and implicit styles for the ContentPage and Button types. Diese Formate, die sich in der Klasse ResourceDictionary auf der Anwendungsebene befinden, können in der gesamten App verarbeitet werden.Note that these styles, which are in the application-level ResourceDictionary, can be consumed throughout the application. Weitere Informationen zur XAML-Formatierung finden Sie unter Format in den ausführlichen Erläuterungen zum Xamarin.Forms-Schnellstart.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Nach Durchführung der Änderungen an App.xaml aktualisiert XAML Hot Reload die Benutzeroberfläche der ausgeführten App, ohne dass die Anwendung neu erstellt werden muss.After making the changes to App.xaml, XAML Hot Reload will update the UI of the running app, with no need to rebuild the application. Insbesondere ändert sich die Hintergrundfarbe der einzelnen Seiten.Specifically, the background color each page will change. Standardmäßig wendet Hot Reload Änderungen sofort nach dem Beenden der Eingabe an.By default Hot Reload applies changes immediately after stopping typing. Jedoch kann die Einstellung geändert werden, wenn Sie lieber warten möchten, bis die Datei gespeichert wird, um danach Änderungen vorzunehmen.However, there's a preference setting that can be changed, if you prefer, to wait until file save to apply changes.

  4. Öffnen Sie im Lösungspad im Projekt Notes die Datei AppShell.xaml.In the Solution Pad, in the Notes project, open AppShell.xaml. Ersetzen Sie dann den vorhandenen Code durch folgenden Code:Then replace the existing code with the following code:

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

    Dieser Code fügt dem Shell-Ressourcenwörterbuch zwei Formatvorlagen hinzu. Dadurch wird eine Reihe von Color-Werten definiert, die von der Anwendung verwendet werden.This code adds two styles to the Shell resource dictionary, which define a series of Color values used by the application.

    Nach Durchführung der Änderungen an AppShell.xaml aktualisiert XAML Hot Reload die Benutzeroberfläche der ausgeführten App, ohne die Anwendung neu zu erstellen.After making the AppShell.xaml changes, XAML Hot Reload will update the UI of the running app, without rebuilding the application. Insbesondere ändert sich die Hintergrundfarbe des Shellchroms.Specifically, the background color of the Shell chrome will change.

  5. Öffnen Sie im Lösungspad im Projekt Notes die Datei NotesPage.xaml im Ordner Ansichten.In the Solution Pad, in the Notes project, open NotesPage.xaml in the Views folder. Ersetzen Sie dann den vorhandenen Code durch folgenden Code: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.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>
    

    Dieser Code fügt dem ResourceDictionary auf Seitenebene eine implizite Formatvorlage für das StackLayout hinzu, die die Darstellung der einzelnen ausgewählten Elemente in der CollectionView definiert. Außerdem werden die Eigenschaften CollectionView.Margin und Label.TextColor auf Werte festgelegt, die im ResourceDictionary auf Anwendungsebene definiert sind.This code adds an implicit style for the StackLayout that defines the appearance of each selected item in the CollectionView, to the page-level ResourceDictionary, and sets the CollectionView.Margin and Label.TextColor property to values defined in the application-level ResourceDictionary. Beachten Sie, dass das implizite Format der Klasse StackLayout zur Klasse ResourceDictionary auf Seitenebene hinzugefügt wurde, weil es nur von der Klasse NotesPage verarbeitet wird.Note that the StackLayout implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage.

    Nach Durchführung der Änderungen an NotesPage.xaml aktualisiert XAML Hot Reload die Benutzeroberfläche der ausgeführten App, ohne die Anwendung neu zu erstellen.After making the NotesPage.xaml changes, XAML Hot Reload will update the UI of the running app, without rebuilding the application. Insbesondere ändert sich die Farbe der ausgewählten Elemente in der CollectionView.Specifically, the color of selected items in the CollectionView will change.

  6. Öffnen Sie im Lösungspad im Projekt Notes die Datei NoteEntryPage.xaml im Ordner Ansichten.In the Solution Pad, in the Notes project, open NoteEntryPage.xaml in the Views folder. Ersetzen Sie dann den vorhandenen Code durch folgenden Code: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.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>
    

    Dieser Code fügt dem ResourceDictionary auf Seitenebene implizite Formatvorlagen für den Editor hinzu und legt die Eigenschaft StackLayout.Margin auf einen Wert fest, der im ResourceDictionary auf Anwendungsebene definiert ist.This code adds implicit styles for the Editor to the page-level ResourceDictionary, and sets the StackLayout.Margin property to a value defined in the application-level ResourceDictionary. Beachten Sie, dass die implizite Editor-Formatvorlage dem ResourceDictionary auf Seitenebene hinzugefügt wurden, weil sie nur von der NoteEntryPage verwendet werden.Note that the Editor implicit style was added to the page-level ResourceDictionary because it's only consumed by the NoteEntryPage.

  7. Navigieren Sie in der ausgeführten Anwendung zur NoteEntryPage.In the running application, navigate to the NoteEntryPage.

    XAML Hot Reload hat die Benutzeroberfläche der Anwendung aktualisiert, ohne dass die Anwendung neu erstellt werden musste.XAML Hot Reload updated the UI of the application, without rebuilding it. Insbesondere hat sich die Hintergrundfarbe für den Editor in der ausgeführten Anwendung sowie die Darstellung der Button-Objekte geändert.Specifically, the background color of the Editor changed in the running application, as well as the appearance of the Button objects.

  8. Öffnen Sie im Lösungspad im Projekt Notes die Datei AboutPage.xaml im Ordner Ansichten.In the Solution Pad, in the Notes project, open AboutPage.xaml in the Views folder. Ersetzen Sie dann den vorhandenen Code durch folgenden Code: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.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>
    

    Dieser Code legt die Eigenschaften Image.BackgroundColor und StackLayout.Margin auf Werte fest, die im ResourceDictionary auf Anwendungsebene definiert sind.This code sets the Image.BackgroundColor and StackLayout.Margin properties to values defined in the application-level ResourceDictionary.

  9. Navigieren Sie in der ausgeführten Anwendung zur AboutPage.In the running application, navigate to the AboutPage.

    XAML Hot Reload hat die Benutzeroberfläche der Anwendung aktualisiert, ohne dass die Anwendung neu erstellt werden musste.XAML Hot Reload updated the UI of the application, without rebuilding it. Insbesondere hat sich die Hintergrundfarbe für das Image in der ausgeführten Anwendung geändert.Specifically, the background color of the Image changed in the running application.

Nächste SchritteNext steps

In diesem Schnellstart haben Sie gelernt, wie Sie:In this quickstart, you learned how to:

  • Formatieren einer Xamarin.Forms-Shellanwendung mithilfe von XAML-Formatvorlagen.Style a Xamarin.Forms Shell application using XAML styles.
  • Verwenden von XAML Hot Reload, um Änderungen an der Benutzeroberfläche anzuzeigen, ohne die Anwendung neu zu kompilieren.Use XAML Hot Reload to see UI changes without rebuilding your application.

Weitere Informationen zu den Grundlagen der Anwendungsentwicklung mit der Xamarin.Forms-Shell finden Sie in den ausführlichen Erläuterungen zum Schnellstart.To learn more about the fundamentals of application development using Xamarin.Forms Shell, continue to the quickstart deep dive.