Appliquer un style à une application multiplateforme Xamarin.Forms

  • Article

Télécharger l’exemple Télécharger l’exemple

Dans ce guide de démarrage rapide, vous allez apprendre à :

  • Appliquer un style à une Xamarin.Forms application Shell à l’aide de styles XAML.
  • Utilisez Rechargement à chaud XAML pour afficher les modifications apportées à l’interface utilisateur sans regénérer votre application.

Le guide de démarrage rapide explique comment appliquer un style à une application multiplateforme Xamarin.Forms avec des styles XAML. En outre, le guide de démarrage rapide utilise xaml Rechargement à chaud pour mettre à jour l’interface utilisateur de votre application en cours d’exécution, sans avoir à reconstruire l’application. Pour plus d’informations sur les Rechargement à chaud XAML, consultez Rechargement à chaud XAML pour Xamarin.Forms.

L’application finale est indiquée ci-dessous :

Page NotesPage d’entrée de note PageÀ propos de la page

Prérequis

Vous devez suivre correctement le précédent guide de démarrage rapide avant de tenter de suivre ce guide de démarrage rapide. Vous pouvez également télécharger l’exemple du précédent guide de démarrage rapide, et l’utiliser comme point de départ pour ce guide de démarrage rapide.

Mettre à jour l’application avec Visual Studio

  1. Lancez Visual Studio, puis ouvrez la solution Notes.

  2. Générez et exécutez le projet sur la plateforme choisie. Pour plus d’informations, consultez Génération du guide de démarrage rapide.

    Laissez l’application en cours d’exécution et revenez à Visual Studio.

  3. Dans Explorateur de solutions, dans le projet Notes, ouvrez App.xaml. Remplacez ensuite le code existant par le code suivant :

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

    Ce code définit une Thickness valeur, une série de valeurs et des Color styles implicites pour les ContentPage types et Button . Notez que ces styles, qui se trouvent dans ResourceDictionary au niveau de l’application, peuvent être consommés dans l’ensemble de l’application. Pour plus d’informations sur le style XAML, consultez Style dans le Xamarin.Forms guide de démarrage rapide Approfondi.

    Après avoir apporté les modifications à App.xaml, xaml Rechargement à chaud met à jour l’interface utilisateur de l’application en cours d’exécution, sans avoir besoin de reconstruire l’application. Plus précisément, la couleur d’arrière-plan de chaque page va changer. Par défaut, Rechargement à chaud applique les modifications immédiatement après l’arrêt de la saisie. Toutefois, il existe un paramètre de préférence qui peut être modifié, si vous préférez, pour attendre l’enregistrement du fichier pour appliquer les modifications.

  4. Dans Explorateur de solutions, dans le projet Notes, ouvrez AppShell.xaml. Remplacez ensuite le code existant par le code suivant :

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

    Ce code ajoute deux styles au Shell dictionnaire de ressources, qui définissent une série de Color valeurs utilisées par l’application.

    Après avoir apporté des modifications à AppShell.xaml, xaml Rechargement à chaud met à jour l’interface utilisateur de l’application en cours d’exécution, sans regénérer l’application. Plus précisément, la couleur d’arrière-plan du chrome Shell change.

  5. Dans Explorateur de solutions, dans le projet Notes, ouvrez NotesPage.xaml dans le dossier Views. Remplacez ensuite le code existant par le code suivant :

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

    Ce code ajoute un style implicite pour le StackLayout qui définit l’apparence de chaque élément sélectionné dans le CollectionView, au niveau ResourceDictionaryde la page , et définit la propriété et Label.TextColor sur les CollectionView.Margin valeurs définies au niveau ResourceDictionaryde l’application . Notez que le style implicite de StackLayout a été ajouté à ResourceDictionary au niveau de la page, car il est uniquement consommé par NotesPage.

    Après avoir apporté des modifications à NotesPage.xaml, les Rechargement à chaud XAML mettent à jour l’interface utilisateur de l’application en cours d’exécution, sans regénérer l’application. Plus précisément, la couleur des éléments sélectionnés dans le CollectionView change.

  6. Dans Explorateur de solutions, dans le projet Notes, ouvrez NoteEntryPage.xaml dans le dossier Views. Remplacez ensuite le code existant par le code suivant :

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

    Ce code ajoute un style implicite pour Editor à ResourceDictionary au niveau de la page, puis affecte à la propriété StackLayout.Margin une valeur définie dans ResourceDictionary au niveau de l’application. Notez que les Editor styles implicites ont été ajoutés au niveau ResourceDictionary de la page, car ils sont uniquement consommés par .NoteEntryPage

  7. Dans l’application en cours d’exécution, accédez à .NoteEntryPage

    XAML Rechargement à chaud mis à jour l’interface utilisateur de l’application, sans la regénérer. Plus précisément, la couleur d’arrière-plan du Editor a changé dans l’application en cours d’exécution, ainsi que l’apparence des Button objets.

  8. Dans Explorateur de solutions, dans le projet Notes, ouvrez AboutPage.xaml dans le dossier Views. Remplacez ensuite le code existant par le code suivant :

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

    Ce code définit les propriétés et StackLayout.Margin sur les Image.BackgroundColor valeurs définies dans le niveau ResourceDictionaryde l’application.

  9. Dans l’application en cours d’exécution, accédez à .AboutPage

    XAML Rechargement à chaud mis à jour l’interface utilisateur de l’application, sans la regénérer. Plus précisément, la couleur d’arrière-plan du Image a changé dans l’application en cours d’exécution.

Mettre à jour l’application avec Visual Studio pour Mac

  1. Lancez Visual Studio pour Mac, puis ouvrez le projet Notes.

  2. Générez et exécutez le projet sur la plateforme choisie. Pour plus d’informations, consultez Génération du guide de démarrage rapide.

    Laissez l’application en cours d’exécution et revenez à Visual Studio pour Mac.

  3. Dans le panneau Solutions, dans le projet Notes , ouvrez App.xaml. Remplacez ensuite le code existant par le code suivant :

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

    Ce code définit une Thickness valeur, une série de valeurs et des Color styles implicites pour les ContentPage types et Button . Notez que ces styles, qui se trouvent dans ResourceDictionary au niveau de l’application, peuvent être consommés dans l’ensemble de l’application. Pour plus d’informations sur le style XAML, consultez Style dans le Xamarin.Forms guide de démarrage rapide Approfondi.

    Après avoir apporté les modifications à App.xaml, xaml Rechargement à chaud met à jour l’interface utilisateur de l’application en cours d’exécution, sans avoir besoin de reconstruire l’application. Plus précisément, la couleur d’arrière-plan de chaque page va changer. Par défaut, Rechargement à chaud applique les modifications immédiatement après l’arrêt de la saisie. Toutefois, il existe un paramètre de préférence qui peut être modifié, si vous préférez, pour attendre l’enregistrement du fichier pour appliquer les modifications.

  4. Dans le panneau Solutions, dans le projet Notes , ouvrez AppShell.xaml. Remplacez ensuite le code existant par le code suivant :

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

    Ce code ajoute deux styles au Shell dictionnaire de ressources, qui définissent une série de Color valeurs utilisées par l’application.

    Après avoir apporté des modifications à AppShell.xaml, xaml Rechargement à chaud met à jour l’interface utilisateur de l’application en cours d’exécution, sans regénérer l’application. Plus précisément, la couleur d’arrière-plan du chrome Shell change.

  5. Dans le panneau Solutions, dans le projet Notes , ouvrez NotesPage.xaml dans le dossier Vues . Remplacez ensuite le code existant par le code suivant :

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

    Ce code ajoute un style implicite pour le StackLayout qui définit l’apparence de chaque élément sélectionné dans le CollectionView, au niveau ResourceDictionaryde la page , et définit la propriété et Label.TextColor sur les CollectionView.Margin valeurs définies au niveau ResourceDictionaryde l’application . Notez que le style implicite de StackLayout a été ajouté à ResourceDictionary au niveau de la page, car il est uniquement consommé par NotesPage.

    Après avoir apporté des modifications à NotesPage.xaml, les Rechargement à chaud XAML mettent à jour l’interface utilisateur de l’application en cours d’exécution, sans regénérer l’application. Plus précisément, la couleur des éléments sélectionnés dans le CollectionView change.

  6. Dans le panneau Solutions, dans le projet Notes , ouvrez NoteEntryPage.xaml dans le dossier Views . Remplacez ensuite le code existant par le code suivant :

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

    Ce code ajoute des styles implicites pour le Editor au niveau ResourceDictionaryde la page et affecte à la StackLayout.Margin propriété une valeur définie dans le niveau ResourceDictionaryde l’application. Notez que le Editor style implicite a été ajouté au niveau ResourceDictionary de la page, car il est uniquement consommé par le NoteEntryPage.

  7. Dans l’application en cours d’exécution, accédez à .NoteEntryPage

    XAML Rechargement à chaud mis à jour l’interface utilisateur de l’application, sans la regénérer. Plus précisément, la couleur d’arrière-plan du Editor a changé dans l’application en cours d’exécution, ainsi que l’apparence des Button objets.

  8. Dans le panneau Solutions, dans le projet Notes , ouvrez AboutPage.xaml dans le dossier Views . Remplacez ensuite le code existant par le code suivant :

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

    Ce code définit les propriétés et StackLayout.Margin sur les Image.BackgroundColor valeurs définies dans le niveau ResourceDictionaryde l’application.

  9. Dans l’application en cours d’exécution, accédez à .AboutPage

    XAML Rechargement à chaud mis à jour l’interface utilisateur de l’application, sans la regénérer. Plus précisément, la couleur d’arrière-plan du Image a changé dans l’application en cours d’exécution.

Étapes suivantes

Dans ce démarrage rapide, vous avez appris comment :

  • Appliquer un style à une Xamarin.Forms application Shell à l’aide de styles XAML.
  • Utilisez Rechargement à chaud XAML pour afficher les modifications apportées à l’interface utilisateur sans regénérer votre application.

Pour en savoir plus sur les principes de base du développement d’applications à l’aide Xamarin.Forms de Shell, passez à la présentation approfondie du démarrage rapide.

Next