Partager via

Présentation des Xamarin.Forms styles

  • Article

Les styles permettent de personnaliser l’apparence des éléments visuels. Les styles sont définis pour un type spécifique et contiennent des valeurs pour les propriétés disponibles sur ce type.

Xamarin.Forms Les applications contiennent souvent plusieurs contrôles qui ont une apparence identique. Par exemple, une application peut avoir plusieurs Label instances qui ont les mêmes options de police et options de disposition, comme illustré dans l’exemple de code XAML suivant :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Styles.NoStylesPage"
    Title="No Styles"
    IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="are not"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="using styles"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

L’exemple de code suivant montre la page équivalente créée en C# :

public class NoStylesPageCS : ContentPage
{
    public NoStylesPageCS ()
    {
        Title = "No Styles";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label {
                    Text = "These labels",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "are not",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "using styles",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                }
            }
        };
    }
}

Chaque Label instance a des valeurs de propriété identiques pour contrôler l’apparence du texte affiché par le Label. Cela donne l’affichage illustré dans les captures d’écran suivantes :

Apparence de l’étiquette sans styles

La définition de l’apparence de chaque contrôle individuel peut être répétitive et sujette aux erreurs. Au lieu de cela, vous pouvez créer un style qui définit l’apparence, puis l’appliquer aux contrôles requis.

Créer un style

La classe Style regroupe une collection de valeurs de propriété en un seul objet qui peut ensuite être appliqué à plusieurs instances d’éléments visuels. Cela permet de réduire le balisage répétitif et de modifier plus facilement l’apparence d’une application.

Bien que les styles aient été conçus principalement pour les applications XAML, ils peuvent également être créés en C# :

  • Style Les instances créées en XAML sont généralement définies dans un ResourceDictionary qui est affecté à la Resources collection d’un contrôle, d’une page ou à la Resources collection de l’application.
  • Style Les instances créées en C# sont généralement définies dans la classe de la page ou dans une classe accessible globalement.

Le fait de choisir où définir Style impacte l’emplacement où il peut être utilisé :

  • Style Les instances définies au niveau du contrôle ne peuvent être appliquées qu’au contrôle et à ses enfants.
  • Style les instances définies au niveau de la page ne peuvent être appliquées qu’à la page et à ses enfants.
  • Les instances de Style définies au niveau de l’application peuvent être appliquées dans toute l’application.

Chaque instance de Style contient une collection d’un ou de plusieurs objets Setter, chaque Setter ayant un Property et un Value. Property est le nom de la propriété pouvant être liée de l’élément auquel le style est appliqué, et Value est la valeur qui est appliquée à la propriété.

Chaque Style instance peut être explicite ou implicite :

  • Une instance expliciteStyle est définie en spécifiant une TargetType valeur et une x:Key valeur, et en définissant la propriété de Style l’élément cible sur la x:Key référence. Pour plus d’informations sur les styles explicites , consultez Styles explicites.
  • Un instance impliciteStyle est défini en spécifiant uniquement un TargetType. Le Style instance est ensuite automatiquement appliqué à tous les éléments de ce type. Notez que les sous-classes du n’ont TargetType pas automatiquement le Style appliqué. Pour plus d’informations sur les styles implicites , consultez Styles implicites.

Durant la création de Style, la propriété TargetType est toujours obligatoire. L’exemple de code suivant montre un style explicite (notez le x:Key) créé en XAML :

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

Pour appliquer un Style, l’objet cible doit être un VisualElement qui correspond à la TargetType valeur de propriété de , Stylecomme illustré dans l’exemple de code XAML suivant :

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

Les styles inférieurs dans la hiérarchie d’affichage sont prioritaires sur ceux définis plus haut. Par exemple, la définition d’un Style qui définit Label.TextColorRed sur au niveau de l’application est remplacée par un style au niveau de la page qui définit Label.TextColor sur Green. De même, un style de niveau page est remplacé par un style de niveau de contrôle. En outre, si Label.TextColor est défini directement sur une propriété de contrôle, cela est prioritaire sur tous les styles.

Les articles de cette section montrent et expliquent comment créer et appliquer des styles explicites et implicites , comment créer des styles globaux, l’héritage de style, comment répondre aux modifications de style au moment de l’exécution et comment utiliser les styles intégrés inclus dans Xamarin.Forms.

Notes

Qu’est-ce que StyleId ?

Xamarin.Forms Avant la version 2.2, la StyleId propriété était utilisée pour identifier des éléments individuels dans une application à des fins d’identification dans les tests d’interface utilisateur et dans les moteurs de thème tels que Pixate. Toutefois, Xamarin.Forms la version 2.2 a introduit la AutomationId propriété, qui a remplacé la StyleId propriété.