Héritage de style dans Xamarin.Forms
Les styles peuvent hériter d’autres styles pour réduire la duplication et activer la réutilisation.
Héritage de style en XAML
L’héritage de style est effectué en définissant la Style.BasedOn propriété sur un élément existant Style. En XAML, cette opération est obtenue en définissant la BasedOn propriété sur une StaticResource extension de balisage qui fait référence à une extension créée Styleprécédemment. En C#, cela est obtenu en définissant la BasedOn propriété sur une Style instance.
Les styles qui héritent d’un style de base peuvent inclure des Setter instances pour de nouvelles propriétés ou les utiliser pour remplacer les styles du style de base. En outre, les styles qui héritent d’un style de base doivent cibler le même type, ou un type qui dérive du type ciblé par le style de base. Par exemple, si un style de base cible View des instances, les styles basés sur le style de base peuvent cibler View des instances ou des types dérivés de la View classe, tels que Label des instances.Button
Le code suivant illustre l’héritage de style explicite dans une page XAML :
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.StyleInheritancePage" Title="Inheritance" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseStyle" TargetType="View">
<Setter Property="HorizontalOptions"
Value="Center" />
<Setter Property="VerticalOptions"
Value="CenterAndExpand" />
</Style>
<Style x:Key="labelStyle" TargetType="Label"
BasedOn="{StaticResource baseStyle}">
...
<Setter Property="TextColor" Value="Teal" />
</Style>
<Style x:Key="buttonStyle" TargetType="Button"
BasedOn="{StaticResource baseStyle}">
<Setter Property="BorderColor" Value="Lime" />
...
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<Label Text="These labels"
Style="{StaticResource labelStyle}" />
...
<Button Text="So is the button"
Style="{StaticResource buttonStyle}" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
Les baseStyle instances cibles View et définissent les propriétés et VerticalOptions les HorizontalOptions propriétés. Le baseStyle n’est pas défini directement sur les contrôles. Au lieu de cela, labelStyle et buttonStyle héritent de celui-ci, en définissant d’autres valeurs de propriété pouvant être liées. buttonStyle Elles labelStyle sont ensuite appliquées aux instances et Button à l’instanceLabel, en définissant leurs Style propriétés. Cela donne l’affichage illustré dans les captures d’écran suivantes :
Remarque
Un style implicite peut être dérivé d’un style explicite, mais un style explicite ne peut pas être dérivé d’un style implicite.
Respect de la chaîne d’héritage
Un style peut hériter uniquement des styles au même niveau, ou au niveau supérieur, dans la hiérarchie d’affichage. Cela signifie que :
- Une ressource au niveau de l’application ne peut hériter que d’autres ressources au niveau de l’application.
- Une ressource au niveau de la page peut hériter des ressources au niveau de l’application et d’autres ressources au niveau de la page.
- Une ressource au niveau du contrôle peut hériter des ressources au niveau de l’application, des ressources au niveau de la page et d’autres ressources au niveau du contrôle.
Cette chaîne d’héritage 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.StyleInheritancePage" Title="Inheritance" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="baseStyle" TargetType="View">
...
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<StackLayout.Resources>
<ResourceDictionary>
<Style x:Key="labelStyle" TargetType="Label" BasedOn="{StaticResource baseStyle}">
...
</Style>
<Style x:Key="buttonStyle" TargetType="Button" BasedOn="{StaticResource baseStyle}">
...
</Style>
</ResourceDictionary>
</StackLayout.Resources>
...
</StackLayout>
</ContentPage.Content>
</ContentPage>
Dans cet exemple, labelStyle et buttonStyle sont des ressources au niveau du contrôle, tandis qu’il baseStyle s’agit d’une ressource au niveau de la page. Toutefois, bien que labelStyle et buttonStyle héritent de baseStyle, il n’est pas possible d’hériter baseStyle de ou buttonStyle, en raison de labelStyle leurs emplacements respectifs dans la hiérarchie d’affichage.
Héritage de style en C#
La page C# équivalente, où Style les instances sont affectées directement aux Style propriétés des contrôles requis, est illustrée dans l’exemple de code suivant :
public class StyleInheritancePageCS : ContentPage
{
public StyleInheritancePageCS ()
{
var baseStyle = new Style (typeof(View)) {
Setters = {
new Setter {
Property = View.HorizontalOptionsProperty, Value = LayoutOptions.Center },
...
}
};
var labelStyle = new Style (typeof(Label)) {
BasedOn = baseStyle,
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Teal }
}
};
var buttonStyle = new Style (typeof(Button)) {
BasedOn = baseStyle,
Setters = {
new Setter { Property = Button.BorderColorProperty, Value = Color.Lime },
...
}
};
...
Content = new StackLayout {
Children = {
new Label { Text = "These labels", Style = labelStyle },
...
new Button { Text = "So is the button", Style = buttonStyle }
}
};
}
}
Les baseStyle instances cibles View et définissent les propriétés et VerticalOptions les HorizontalOptions propriétés. Le baseStyle n’est pas défini directement sur les contrôles. Au lieu de cela, labelStyle et buttonStyle héritent de celui-ci, en définissant d’autres valeurs de propriété pouvant être liées. buttonStyle Elles labelStyle sont ensuite appliquées aux instances et Button à l’instanceLabel, en définissant leurs Style propriétés.