Styles globaux dans Xamarin.Forms
Les styles peuvent être rendus disponibles globalement en les ajoutant au dictionnaire de ressources de l’application. Cela permet d’éviter la duplication de styles entre les pages ou les contrôles.
Créer un style global en XAML
Par défaut, toutes les Xamarin.Forms applications créées à partir d’un modèle utilisent la classe App pour implémenter la Application sous-classe. Pour déclarer une Style application au niveau de l’application, dans le code XAML utilisé ResourceDictionary par l’application, la classe App par défaut doit être remplacée par une classe d’application XAML et le code-behind associé. Pour plus d’informations, consultez Utilisation de la classe d’application.
L’exemple de code suivant montre une Style déclaration au niveau de l’application :
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.App">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="BorderRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
Cela ResourceDictionary définit un style explicite unique, buttonStylequi sera utilisé pour définir l’apparence des Button instances. Toutefois, les styles globaux peuvent être explicites ou implicites.
L’exemple de code suivant montre une page XAML qui applique les buttonStyle instances de Button la page :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<Button Text="These buttons" Style="{StaticResource buttonStyle}" />
<Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
<Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Cela donne l’affichage illustré dans les captures d’écran suivantes :
Pour plus d’informations sur la création de styles dans les ResourceDictionarystyles d’une page, consultez Styles explicites et Styles implicites.
Remplacer les styles
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 RedButton.TextColor défini au niveau de l’application sera remplacée par un style de niveau page défini Button.TextColorGreensur . De même, un style de niveau page sera remplacé par un style de niveau de contrôle. En outre, si Button.TextColor elle est définie directement sur une propriété de contrôle, elle est prioritaire sur tous les styles. Cette priorité est illustrée dans l’exemple de code suivant :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
...
<Setter Property="TextColor" Value="Red" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<StackLayout.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
...
<Setter Property="TextColor" Value="Blue" />
</Style>
</ResourceDictionary>
</StackLayout.Resources>
<Button Text="These buttons" Style="{StaticResource buttonStyle}" />
<Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
<Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
L’instance d’origine buttonStyle, définie au niveau de l’application, est remplacée par l’instance définie au niveau de la buttonStyle page. En outre, le style au niveau de la page est remplacé par le niveau buttonStylede contrôle. Par conséquent, les Button instances sont affichées avec du texte bleu, comme illustré dans les captures d’écran suivantes :
Créer un style global en C#
Style Les instances peuvent être ajoutées à la collection de Resources l’application en C# en créant un nouveau ResourceDictionary, puis en ajoutant les Style instances au ResourceDictionaryfichier , comme illustré dans l’exemple de code suivant :
public class App : Application
{
public App ()
{
var buttonStyle = new Style (typeof(Button)) {
Setters = {
...
new Setter { Property = Button.TextColorProperty, Value = Color.Teal }
}
};
Resources = new ResourceDictionary ();
Resources.Add ("buttonStyle", buttonStyle);
...
}
...
}
Le constructeur définit un style explicite unique pour l’application aux Button instances dans l’ensemble de l’application. Les instances explicitesStyle sont ajoutées à l’utilisation ResourceDictionary de la Add méthode, en spécifiant une key chaîne à faire référence à l’instance Style . L’instance Style peut ensuite être appliquée à n’importe quel contrôle du type correct dans l’application. Toutefois, les styles globaux peuvent être explicites ou implicites.
L’exemple de code suivant montre une page C# qui applique les buttonStyle instances de Button la page :
public class ApplicationStylesPageCS : ContentPage
{
public ApplicationStylesPageCS ()
{
...
Content = new StackLayout {
Children = {
new Button { Text = "These buttons", Style = (Style)Application.Current.Resources ["buttonStyle"] },
new Button { Text = "are demonstrating", Style = (Style)Application.Current.Resources ["buttonStyle"] },
new Button { Text = "application styles", Style = (Style)Application.Current.Resources ["buttonStyle"]
}
}
};
}
}
Il buttonStyle est appliqué aux instances en Button définissant leurs Style propriétés et contrôle l’apparence des Button instances.