Partager via

Xamarin.Forms Styles de texte

  • Article

Style du texte dans Xamarin.Forms

Les styles peuvent être utilisés pour ajuster l’apparence des étiquettes, des entrées et des éditeurs. Les styles peuvent être définis une seule fois et utilisés par de nombreux affichages, mais un style ne peut être utilisé qu’avec des vues d’un seul type. Les styles peuvent être appliqués Key de manière sélective à l’aide de la propriété d’un Style contrôle spécifique.

Styles intégrés

Xamarin.Forms inclut plusieurs styles intégrés pour les scénarios courants :

  • BodyStyle
  • CaptionStyle
  • ListItemDetailTextStyle
  • ListItemTextStyle
  • SubtitleStyle
  • TitleStyle

Pour appliquer l’un des styles intégrés, utilisez l’extension DynamicResource de balisage pour spécifier le style :

<Label Text="I'm a Title" Style="{DynamicResource TitleStyle}"/>

Dans C#, les styles intégrés sont sélectionnés dans Device.Styles:

label.Style = Device.Styles.TitleStyle;

Exemple de styles d’appareil

Styles personnalisés

Les styles sont constitués de setters et de setters se composent de propriétés et les valeurs sur laquelle les propriétés seront définies.

En C#, un style personnalisé pour une étiquette avec du texte rouge de taille 30 est défini comme suit :

var LabelStyle = new Style (typeof(Label)) {
    Setters = {
        new Setter {Property = Label.TextColorProperty, Value = Color.Red},
        new Setter {Property = Label.FontSizeProperty, Value = 30}
    }
};

var label = new Label { Text = "Check out my style.", Style = LabelStyle };

En XAML :

<ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="LabelStyle" TargetType="Label">
            <Setter Property="TextColor" Value="Red"/>
            <Setter Property="FontSize" Value="30"/>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

<ContentPage.Content>
    <StackLayout>
        <Label Text="Check out my style." Style="{StaticResource LabelStyle}" />
    </StackLayout>
</ContentPage.Content>

Notez que les ressources (y compris tous les styles) sont définies dans ContentPage.Resources, qui est un frère de l’élément plus familier ContentPage.Content .

Exemple de styles personnalisés

Application de styles

Une fois qu’un style a été créé, il peut être appliqué à n’importe quelle vue correspondant à son TargetType.

En XAML, les styles personnalisés sont appliqués aux vues en fournissant leur Style propriété avec une StaticResource extension de balisage référençant le style souhaité :

<Label Text="Check out my style." Style="{StaticResource LabelStyle}" />

En C#, les styles peuvent être appliqués directement à un affichage ou ajoutés à et récupérés à partir de la ResourceDictionarypage. Pour ajouter directement :

var label = new Label { Text = "Check out my style.", Style = LabelStyle };

Pour ajouter et récupérer à partir de ResourceDictionaryla page :

this.Resources.Add ("LabelStyle", LabelStyle);
label.Style = (Style)Resources["LabelStyle"];

Les styles intégrés sont appliqués différemment, car ils doivent répondre aux paramètres d’accessibilité. Pour appliquer des styles intégrés en XAML, l’extension de DynamicResource balisage est utilisée :

<Label Text="I'm a Title" Style="{DynamicResource TitleStyle}"/>

Dans C#, les styles intégrés sont sélectionnés dans Device.Styles:

label.Style = Device.Styles.TitleStyle;

Accessibilité

Les styles intégrés existent pour faciliter le respect des préférences d’accessibilité. Lorsque vous utilisez l’un des styles intégrés, les tailles de police augmentent automatiquement si un utilisateur définit ses préférences d’accessibilité en conséquence.

Prenons l’exemple suivant de la même page de vues avec les styles intégrés avec les paramètres d’accessibilité activés et désactivés :

Désactivé :

Styles d’appareil avec accessibilité désactivée

Activé:

Styles d’appareil avec accessibilité activée

Pour garantir l’accessibilité, assurez-vous que les styles intégrés sont utilisés comme base pour tous les styles liés au texte au sein de votre application et que vous utilisez des styles de manière cohérente. Pour plus d’informations sur l’extension et l’utilisation des styles en général, consultez Styles .