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 les mêmes 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 d’é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, un style peut être créé pour définir l'apparence, puis appliqué 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 les marques répétitives et permet à une application d’être plus facilement modifiée.

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

  • StyleLes instances créées en XAML sont généralement définies dans une collection affectée à la Resources collection d’un contrôle, d’une ResourceDictionary 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 explicite Style est définie en spécifiant une TargetType valeur et en x:Key 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.
  • Une instance implicite Style est définie en spécifiant uniquement un TargetType. L’instance Style sera ensuite automatiquement appliquée à tous les éléments de ce type. Notez que les sous-classes du fichier TargetType ne disposent pas automatiquement de l’application Style . 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 Styleobjet cible, il doit s’agir d’un VisualElement objet qui correspond à la TargetType valeur de propriété du Stylecode, comme 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 paramètre Red Label.TextColor défini au niveau de l’application sera remplacée par un style de niveau page défini Label.TextColor Greensur . De même, un style de niveau page sera 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.

Remarque

Qu’est-ce que StyleId ?

Xamarin.Forms Avant la version 2.2, la StyleId propriété a été utilisée pour identifier des éléments individuels dans une application pour l’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é.