Xamarin.Forms Style Classes
Xamarin.Forms Les classes de style permettent à plusieurs styles d’être appliqués à un contrôle, sans recourir à l’héritage de style.
Créer des classes de style
Une classe de style peut être créée en définissant la Class
propriété sur une Style
string
classe qui représente le nom de la classe. L’avantage que cela offre, par rapport à la définition d’un style explicite à l’aide de l’attribut x:Key
, est que plusieurs classes de style peuvent être appliquées à un VisualElement
.
Important
Plusieurs styles peuvent partager le même nom de classe, à condition qu’ils ciblent différents types. Cela permet à plusieurs classes de style, qui sont identiquement nommées, de cibler différents types.
L’exemple suivant montre trois BoxView
classes de style et une VisualElement
classe de style :
<ContentPage ...>
<ContentPage.Resources>
<Style TargetType="BoxView"
Class="Separator">
<Setter Property="BackgroundColor"
Value="#CCCCCC" />
<Setter Property="HeightRequest"
Value="1" />
</Style>
<Style TargetType="BoxView"
Class="Rounded">
<Setter Property="BackgroundColor"
Value="#1FAECE" />
<Setter Property="HorizontalOptions"
Value="Start" />
<Setter Property="CornerRadius"
Value="10" />
</Style>
<Style TargetType="BoxView"
Class="Circle">
<Setter Property="BackgroundColor"
Value="#1FAECE" />
<Setter Property="WidthRequest"
Value="100" />
<Setter Property="HeightRequest"
Value="100" />
<Setter Property="HorizontalOptions"
Value="Start" />
<Setter Property="CornerRadius"
Value="50" />
</Style>
<Style TargetType="VisualElement"
Class="Rotated"
ApplyToDerivedTypes="true">
<Setter Property="Rotation"
Value="45" />
</Style>
</ContentPage.Resources>
</ContentPage>
Les Separator
classes de style et Circle
les classes de Rounded
style définissent BoxView
chaque propriété sur des valeurs spécifiques.
La Rotated
classe de style a un TargetType
de VisualElement
, ce qui signifie qu’elle ne peut être appliquée qu’aux VisualElement
instances. Toutefois, sa ApplyToDerivedTypes
propriété est définie true
sur , ce qui garantit qu’elle peut être appliquée à tous les contrôles dérivés VisualElement
, tels que BoxView
. Pour plus d’informations sur l’application d’un style à un type dérivé, consultez Appliquer un style aux types dérivés.
Le code C# équivalent est :
var separatorBoxViewStyle = new Style(typeof(BoxView))
{
Class = "Separator",
Setters =
{
new Setter
{
Property = VisualElement.BackgroundColorProperty,
Value = Color.FromHex("#CCCCCC")
},
new Setter
{
Property = VisualElement.HeightRequestProperty,
Value = 1
}
}
};
var roundedBoxViewStyle = new Style(typeof(BoxView))
{
Class = "Rounded",
Setters =
{
new Setter
{
Property = VisualElement.BackgroundColorProperty,
Value = Color.FromHex("#1FAECE")
},
new Setter
{
Property = View.HorizontalOptionsProperty,
Value = LayoutOptions.Start
},
new Setter
{
Property = BoxView.CornerRadiusProperty,
Value = 10
}
}
};
var circleBoxViewStyle = new Style(typeof(BoxView))
{
Class = "Circle",
Setters =
{
new Setter
{
Property = VisualElement.BackgroundColorProperty,
Value = Color.FromHex("#1FAECE")
},
new Setter
{
Property = VisualElement.WidthRequestProperty,
Value = 100
},
new Setter
{
Property = VisualElement.HeightRequestProperty,
Value = 100
},
new Setter
{
Property = View.HorizontalOptionsProperty,
Value = LayoutOptions.Start
},
new Setter
{
Property = BoxView.CornerRadiusProperty,
Value = 50
}
}
};
var rotatedVisualElementStyle = new Style(typeof(VisualElement))
{
Class = "Rotated",
ApplyToDerivedTypes = true,
Setters =
{
new Setter
{
Property = VisualElement.RotationProperty,
Value = 45
}
}
};
Resources = new ResourceDictionary
{
separatorBoxViewStyle,
roundedBoxViewStyle,
circleBoxViewStyle,
rotatedVisualElementStyle
};
Consommer des classes de style
Les classes de style peuvent être consommées en définissant la StyleClass
propriété du contrôle, qui est de type IList<string>
, sur une liste de noms de classes de style. Les classes de style sont appliquées, à condition que le type du contrôle corresponde aux TargetType
classes de style.
L’exemple suivant montre trois BoxView
instances, chacune définie sur différentes classes de style :
<ContentPage ...>
<ContentPage.Resources>
...
</ContentPage.Resources>
<StackLayout Margin="20">
<BoxView StyleClass="Separator" />
<BoxView WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
StyleClass="Rounded, Rotated" />
<BoxView HorizontalOptions="Center"
StyleClass="Circle" />
</StackLayout>
</ContentPage>
Dans cet exemple, le premier BoxView
est styleté comme séparateur de traits, tandis que le troisième BoxView
est circulaire. La deuxième BoxView
a deux classes de style appliquées à elle, qui lui donnent des angles arrondis et la faire pivoter de 45 degrés :
Important
Plusieurs classes de style peuvent être appliquées à un contrôle, car la StyleClass
propriété est de type IList<string>
. Lorsque cela se produit, les classes de style sont appliquées dans l’ordre de liste croissant. Par conséquent, lorsque plusieurs classes de style définissent des propriétés identiques, la propriété de la classe de style située à la position de liste la plus élevée est prioritaire.
Le code C# équivalent est :
...
Content = new StackLayout
{
Children =
{
new BoxView { StyleClass = new [] { "Separator" } },
new BoxView { WidthRequest = 100, HeightRequest = 100, HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Rounded", "Rotated" } },
new BoxView { HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Circle" } }
}
};