Stil einer plattformübergreifenden xamarin. Forms-AnwendungStyle a Cross-Platform Xamarin.Forms Application

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

In dieser Schnellstartanleitung erfahren Sie Folgendes:In this quickstart, you will learn how to:

  • Formatieren Sie eine xamarin. Forms-Anwendung mithilfe von XAML-Stilen.Style a Xamarin.Forms application using XAML styles.

In der Schnellstartanleitung erfahren Sie, wie Sie eine plattformübergreifende xamarin. Forms-Anwendung mit XAML-Stilen formatieren.The quickstart walks through how to style a cross-platform Xamarin.Forms application with XAML styles. Die fertige Anwendung wird unten gezeigt:The final application is shown below:

Erforderliche VoraussetzungenPrerequisites

Sie sollten den vorherigen Schnellstart erfolgreich abgeschlossen haben, bevor Sie diesen Schnellstart durchführen.You should successfully complete the previous quickstart before attempting this quickstart. Alternativ können Sie das vorherige Schnellstart Beispiel herunterladen und als Ausgangspunkt 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 Lösung Notes.Launch Visual Studio and open the Notes solution.

  2. Doppelklicken Sie in Projektmappen-Explorerim Notes -Projekt auf app. XAML , um es zu öffnen.In Solution Explorer, in the Notes project, double-click App.xaml to open it. 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"?>
    <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">WhiteSmoke</Color>
            <Color x:Key="iOSNavigationBarColor">WhiteSmoke</Color>
            <Color x:Key="AndroidNavigationBarColor">#2196F3</Color>
            <Color x:Key="iOSNavigationBarTextColor">Black</Color>
            <Color x:Key="AndroidNavigationBarTextColor">White</Color>
    
            <!-- Implicit styles -->
            <Style TargetType="{x:Type NavigationPage}">
                <Setter Property="BarBackgroundColor"
                        Value="{OnPlatform iOS={StaticResource iOSNavigationBarColor},
                                           Android={StaticResource AndroidNavigationBarColor}}" />
                 <Setter Property="BarTextColor"
                        Value="{OnPlatform iOS={StaticResource iOSNavigationBarTextColor},
                                           Android={StaticResource AndroidNavigationBarTextColor}}" />           
            </Style>
    
            <Style TargetType="{x:Type ContentPage}"
                   ApplyToDerivedTypes="True">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
        </Application.Resources>
    </Application>
    

    Dieser Code definiert einen Thickness Wert, eine Reihe von Color Werten und implizite Stile für die NavigationPage und ContentPage.This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. Beachten Sie, dass diese Stile, die sich auf der ResourceDictionaryauf Anwendungsebene befinden, in der gesamten Anwendung verwendet werden können.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 formatieren im xamarin. Forms-Schnellstart Deep Dive.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an app. XAML , indem Sie STRG + Sdrücken, und schließen Sie die Datei.Save the changes to App.xaml by pressing CTRL+S, and close the file.

  3. Doppelklicken Sie in Projektmappen-Explorerim Notes -Projekt auf NotesPage. XAML , um es zu öffnen.In Solution Explorer, in the Notes project, double-click NotesPage.xaml to open it. 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.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}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
    </ContentPage>
    

    Dieser Code fügt der ResourceDictionaryauf Seitenebene einen impliziten Stil für das ListView hinzu und legt die ListView.Margin-Eigenschaft auf einen Wert fest, der in der ResourceDictionary auf Anwendungsebene definiert ist.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. Beachten Sie, dass der ListView impliziter Stil der ResourceDictionary auf Seitenebene hinzugefügt wurde, da er nur von der NotesPage genutzt wird.Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. Weitere Informationen zur XAML- Formatierung finden Sie unter formatieren im xamarin. Forms-Schnellstart Deep Dive.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an der Datei " NotesPage. XAML ", indem Sie STRG + Sdrücken, und schließen Sie die Datei.Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  4. Doppelklicken Sie in Projektmappen-Explorerim Notes -Projekt auf noteentrypage. XAML , um es zu öffnen.In Solution Explorer, in the Notes project, double-click NoteEntryPage.xaml to open it. 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.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="LightGray" />
                <Setter Property="TextColor" Value="Black" />
                <Setter Property="BorderRadius" 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>
    

    Mit diesem Code werden dem ResourceDictionaryauf Seitenebene implizite Stile für die Editor -und Button Ansichten hinzugefügt, und die StackLayout.Margin-Eigenschaft wird auf einen Wert festgelegt, der in der ResourceDictionary auf Anwendungsebene definiert ist.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. Beachten Sie, dass die Editor-und Button impliziten Stile zum ResourceDictionary auf Seitenebene hinzugefügt wurden, da Sie nur vom NoteEntryPage verwendet werden.Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. Weitere Informationen zur XAML- Formatierung finden Sie unter formatieren im xamarin. Forms-Schnellstart Deep Dive.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an noteentrypage. XAML , indem Sie STRG + Sdrücken, und schließen Sie die Datei.Save the changes to NoteEntryPage.xaml by pressing CTRL+S, and close the file.

  5. Erstellen Sie das Projekt auf jeder Plattform, und führen Sie es aus.Build and run the project on each platform. Weitere Informationen finden Sie unter Erste Schritte mit der Schnellstartanleitung.For more information, see Building the quickstart.

    Klicken Sie auf der Seite NotesPage auf die Schaltfläche + , um zur noteentrypage zu navigieren, und geben Sie einen Hinweis ein.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Beobachten Sie auf jeder Seite, wie sich das Formatieren seit dem vorherigen Schnellstart geändert hat.On each page, observe how the styling has changed from the previous quickstart.

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 Notes-Projekt.Launch Visual Studio for Mac and open the Notes project.

  2. Doppelklicken Sie im Lösungspadim Notes -Projekt auf app. XAML , um es zu öffnen.In the Solution Pad, in the Notes project, double-click App.xaml to open it. 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"?>
    <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">WhiteSmoke</Color>
            <Color x:Key="iOSNavigationBarColor">WhiteSmoke</Color>
            <Color x:Key="AndroidNavigationBarColor">#2196F3</Color>
            <Color x:Key="iOSNavigationBarTextColor">Black</Color>
            <Color x:Key="AndroidNavigationBarTextColor">White</Color>
    
            <!-- Implicit styles -->
            <Style TargetType="{x:Type NavigationPage}">
                <Setter Property="BarBackgroundColor"
                        Value="{OnPlatform iOS={StaticResource iOSNavigationBarColor},
                                           Android={StaticResource AndroidNavigationBarColor}}" />
                 <Setter Property="BarTextColor"
                        Value="{OnPlatform iOS={StaticResource iOSNavigationBarTextColor},
                                           Android={StaticResource AndroidNavigationBarTextColor}}" />           
            </Style>
    
            <Style TargetType="{x:Type ContentPage}"
                   ApplyToDerivedTypes="True">
                <Setter Property="BackgroundColor"
                        Value="{StaticResource AppBackgroundColor}" />
            </Style>
    
        </Application.Resources>
    </Application>
    

    Dieser Code definiert einen Thickness Wert, eine Reihe von Color Werten und implizite Stile für die NavigationPage und ContentPage.This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. Beachten Sie, dass diese Stile, die sich auf der ResourceDictionaryauf Anwendungsebene befinden, in der gesamten Anwendung verwendet werden können.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 formatieren im xamarin. Forms-Schnellstart Deep Dive.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen in der Datei app. XAML , indem Sie Datei > Speichern (oder durch Drücken ⌘ von + S) auswählen, und schließen Sie die Datei.Save the changes to App.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  3. Doppelklicken Sie im Lösungspadim Projekt Notes auf NotesPage. XAML , um es zu öffnen.In the Solution Pad, in the Notes project, double-click NotesPage.xaml to open it. 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.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}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
    </ContentPage>
    

    Dieser Code fügt der ResourceDictionaryauf Seitenebene einen impliziten Stil für das ListView hinzu und legt die ListView.Margin-Eigenschaft auf einen Wert fest, der in der ResourceDictionary auf Anwendungsebene definiert ist.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. Beachten Sie, dass der ListView impliziter Stil der ResourceDictionary auf Seitenebene hinzugefügt wurde, da er nur von der NotesPage genutzt wird.Note that the ListView implicit style was added to the page-level ResourceDictionary, because it is only consumed by the NotesPage. Weitere Informationen zur XAML- Formatierung finden Sie unter formatieren im xamarin. Forms-Schnellstart Deep Dive.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an der Datei " NotesPage. XAML ", indem Sie Datei > Speichern (oder durch Drücken ⌘ von + S) auswählen, und schließen Sie die Datei.Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  4. Doppelklicken Sie im Lösungspadim Notes -Projekt auf noteentrypage. XAML , um es zu öffnen.In the Solution Pad, in the Notes project, double-click NoteEntryPage.xaml to open it. 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.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="LightGray" />
                <Setter Property="TextColor" Value="Black" />
                <Setter Property="BorderRadius" 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>
    

    Mit diesem Code werden dem ResourceDictionaryauf Seitenebene implizite Stile für die Editor -und Button Ansichten hinzugefügt, und die StackLayout.Margin-Eigenschaft wird auf einen Wert festgelegt, der in der ResourceDictionary auf Anwendungsebene definiert ist.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. Beachten Sie, dass die Editor-und Button impliziten Stile zum ResourceDictionary auf Seitenebene hinzugefügt wurden, da Sie nur vom NoteEntryPage verwendet werden.Note that the Editor and Button implicit styles were added to the page-level ResourceDictionary, because they are only consumed by the NoteEntryPage. Weitere Informationen zur XAML- Formatierung finden Sie unter formatieren im xamarin. Forms-Schnellstart Deep Dive.For more information about XAML styling, see Styling in the Xamarin.Forms Quickstart Deep Dive.

    Speichern Sie die Änderungen an noteentrypage. XAML , indem Sie Datei > Speichern (oder durch Drücken ⌘ von + S) auswählen, und schließen Sie die Datei.Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  5. Erstellen Sie das Projekt auf jeder Plattform, und führen Sie es aus.Build and run the project on each platform. Weitere Informationen finden Sie unter Erste Schritte mit der Schnellstartanleitung.For more information, see Building the quickstart.

    Klicken Sie auf der Seite NotesPage auf die Schaltfläche + , um zur noteentrypage zu navigieren, und geben Sie einen Hinweis ein.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Beobachten Sie auf jeder Seite, wie sich das Formatieren seit dem vorherigen Schnellstart geändert hat.On each page, observe how the styling has changed from the previous quickstart.

Nächste SchritteNext steps

In dieser Schnellstartanleitung haben Sie Folgendes gelernt:In this quickstart, you learned how to:

  • Formatieren Sie eine xamarin. Forms-Anwendung mithilfe von XAML-Stilen.Style a Xamarin.Forms application using XAML styles.

Weitere Informationen zu den Grundlagen der Anwendungsentwicklung mit xamarin. Forms finden Sie unter Deep Dive (Schnellstart).To learn more about the fundamentals of application development using Xamarin.Forms, continue to the quickstart deep dive.