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 Folgendes:In this quickstart, you will learn how to:

  • Formatieren einer Xamarin.Forms-Anwendung mithilfe von XAML-FormatvorlagenStyle a Xamarin.Forms application using XAML styles.

In diesem Schnellstart erfahren Sie, wie Sie eine plattformübergreifende Xamarin.Forms-Anwendung mit XAML-Formatvorlagen formatieren können.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:

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 „Notes“.Launch Visual Studio and open the Notes solution.

  2. Doppelklicken Sie im Projektmappen-Explorer im Projekt Notes auf die Datei App.xaml, um sie 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">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>
    

    Dieser Code definiert einen Thickness-Wert, eine Reihe von Color-Werten sowie implizite Formate für die Klassen NavigationPage und ContentPage.This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. 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.

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

  3. Doppelklicken Sie im Projektmappen-Explorer im Projekt Notes auf die Datei NotesPage.xaml, um sie 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}"
                              TextColor="Black"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
    </ContentPage>
    

    Mit diesem Code wird ein implizites Format für die Klasse ListView zur Klasse ResourceDictionary auf Seitenebene hinzugefügt und die Eigenschaft ListView.Margin auf einen Wert festgelegt, der in der Klasse 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 das implizite Format der Klasse ListView zur Klasse ResourceDictionary auf Seitenebene hinzugefügt wurde, weil es nur von der Klasse NotesPage verarbeitet 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 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.

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

  4. Doppelklicken Sie im Projektmappen-Explorer im Projekt Notes auf die Datei NoteEntryPage.xaml, um sie 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="#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>
    

    Mit diesem Code werden implizite Formate für die Ansichten Editor und Button 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 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. Die impliziten Formate für Editor und Button wurden zu der Klasse ResourceDictionary auf Seitenebene hinzugefügt, weil sie nur von der Klasse NoteEntryPage verarbeitet 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 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.

    Speichern Sie die Änderungen an der Datei NoteEntryPage.xaml.cs, indem Sie STRG+S drücken, und schließen Sie sie.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 Erstellen des Schnellstarts.For more information, see Building the quickstart.

    Klicken Sie unter NotesPage auf + , um zur NoteEntryPage-Seite zu navigieren und eine Notiz einzugeben.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Beobachten Sie auf jeder Seite, wie sich die Formatierung im Vergleich zum letzten 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 Projekt „Notes“.Launch Visual Studio for Mac and open the Notes project.

  2. Doppelklicken Sie im Lösungspad im Projekt Notes auf die Datei App.xaml, um sie 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">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>
    

    Dieser Code definiert einen Thickness-Wert, eine Reihe von Color-Werten sowie implizite Formate für die Klassen NavigationPage und ContentPage.This code defines a Thickness value, a series of Color values, and implicit styles for the NavigationPage and ContentPage. 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.

    Speichern Sie die Änderungen an der Datei App.xaml, indem Sie auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken), 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ösungspad im Projekt Notes auf die Datei NotesPage.xaml, um sie 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}"
                              TextColor="Black"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    
    </ContentPage>
    

    Mit diesem Code wird ein implizites Format für die Klasse ListView zur Klasse ResourceDictionary auf Seitenebene hinzugefügt und die Eigenschaft ListView.Margin auf einen Wert festgelegt, der in der Klasse 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 das implizite Format der Klasse ListView zur Klasse ResourceDictionary auf Seitenebene hinzugefügt wurde, weil es nur von der Klasse NotesPage verarbeitet 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 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.

    Speichern Sie die Änderungen an der Datei NotesPage.xaml, indem Sie auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken), 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ösungspad im Projekt Notes auf die Datei NoteEntryPage.xaml, um sie 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="#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>
    

    Mit diesem Code werden implizite Formate für die Ansichten Editor und Button 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 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. Die impliziten Formate für Editor und Button wurden zu der Klasse ResourceDictionary auf Seitenebene hinzugefügt, weil sie nur von der Klasse NoteEntryPage verarbeitet 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 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.

    Speichern Sie die Änderungen an NoteEntryPage.xaml, indem Sie auf Datei > Speichern klicken (oder indem Sie ⌘+S drücken), 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 Erstellen des Schnellstarts.For more information, see Building the quickstart.

    Klicken Sie unter NotesPage auf + , um zur NoteEntryPage-Seite zu navigieren und eine Notiz einzugeben.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Beobachten Sie auf jeder Seite, wie sich die Formatierung im Vergleich zum letzten Schnellstart geändert hat.On each page, observe how the styling has changed from the previous quickstart.

Nächste SchritteNext steps

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

  • Formatieren einer Xamarin.Forms-Anwendung mithilfe von XAML-FormatvorlagenStyle a Xamarin.Forms application using XAML styles.

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