Estilos explícitos en Xamarin.Forms
Un estilo explícito es uno que se aplica selectivamente a los controles estableciendo sus propiedades Style.
Crear un estilo explícito en XAML
Para declarar un Style en el nivel de página, se debe agregar un ResourceDictionary a la página y, a continuación, Stylese pueden incluir una o varias declaraciones en el ResourceDictionary. Un objeto Style se convierte en explícito al asignar a su declaración un atributo x:Key, que le da una clave descriptiva en ResourceDictionary. Después, deberán aplicarse los estilos explícitos a elementos visuales específicos estableciendo sus propiedades Style.
En el ejemplo de código siguiente se muestra estilos explícitos declarados en XAML en una página ResourceDictionary y aplicados a las instancias de Label la página:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" IconImageSource="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="labelRedStyle" TargetType="Label">
<Setter Property="HorizontalOptions"
Value="Center" />
<Setter Property="VerticalOptions"
Value="CenterAndExpand" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="Red" />
</Style>
<Style x:Key="labelGreenStyle" TargetType="Label">
...
<Setter Property="TextColor" Value="Green" />
</Style>
<Style x:Key="labelBlueStyle" TargetType="Label">
...
<Setter Property="TextColor" Value="Blue" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<Label Text="These labels"
Style="{StaticResource labelRedStyle}" />
<Label Text="are demonstrating"
Style="{StaticResource labelGreenStyle}" />
<Label Text="explicit styles,"
Style="{StaticResource labelBlueStyle}" />
<Label Text="and an explicit style override"
Style="{StaticResource labelBlueStyle}"
TextColor="Teal" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
El ResourceDictionary define tres estilos explícitos que se aplican a las instancias Label de la página. Cada Style se usa para mostrar texto en un color diferente, al tiempo que se establecen las opciones de diseño horizontal y vertical y horizontal. Cada Style se aplica a un objeto Label diferente estableciendo sus propiedades Style con la extensión de marcado StaticResource. El resultado es el aspecto que se muestra en las capturas de pantalla siguientes:
Además, el Label final tiene una Style aplicada, pero también invalida la propiedad TextColor en un valor Color diferente.
Crear un estilo explícito en el nivel de control
Además de crear estilos explícitos en el nivel de página, también se pueden crear en el nivel de control, como se muestra en el ejemplo de código siguiente:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" IconImageSource="xaml.png">
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<StackLayout.Resources>
<ResourceDictionary>
<Style x:Key="labelRedStyle" TargetType="Label">
...
</Style>
...
</ResourceDictionary>
</StackLayout.Resources>
<Label Text="These labels" Style="{StaticResource labelRedStyle}" />
...
</StackLayout>
</ContentPage.Content>
</ContentPage>
En este ejemplo, las instancias explícitas Style se asignan a la Resources colección del StackLayout control . A continuación, los estilos se pueden aplicar al control y a sus elementos secundarios.
Para obtener información sobre cómo crear estilos en la aplicación ResourceDictionary, vea Estilos globales.
Crear un estilo explícito en C#
Style Las instancias se pueden agregar a la colección de Resources una página en C# mediante la creación de un nuevo ResourceDictionary, y a continuación, agregando las Style instancias a ResourceDictionary, como se muestra en el ejemplo de código siguiente:
public class ExplicitStylesPageCS : ContentPage
{
public ExplicitStylesPageCS ()
{
var labelRedStyle = new Style (typeof(Label)) {
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Red }
}
};
var labelGreenStyle = new Style (typeof(Label)) {
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Green }
}
};
var labelBlueStyle = new Style (typeof(Label)) {
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Blue }
}
};
Resources = new ResourceDictionary ();
Resources.Add ("labelRedStyle", labelRedStyle);
Resources.Add ("labelGreenStyle", labelGreenStyle);
Resources.Add ("labelBlueStyle", labelBlueStyle);
...
Content = new StackLayout {
Children = {
new Label { Text = "These labels",
Style = (Style)Resources ["labelRedStyle"] },
new Label { Text = "are demonstrating",
Style = (Style)Resources ["labelGreenStyle"] },
new Label { Text = "explicit styles,",
Style = (Style)Resources ["labelBlueStyle"] },
new Label { Text = "and an explicit style override",
Style = (Style)Resources ["labelBlueStyle"], TextColor = Color.Teal }
}
};
}
}
El constructor define tres estilos explícitos que se aplican a las instancias Label de la página. Cada explícito Style se agrega al ResourceDictionary mediante el Add método , especificando una key cadena para hacer referencia a la Style instancia. Cada Style se aplica a una Label diferente estableciendo sus Style propiedades.
Sin embargo, no hay ninguna ventaja de usar uno ResourceDictionary aquí. En su lugar, Style las instancias se pueden asignar directamente a las propiedades de los Style elementos visuales necesarios y ResourceDictionary se pueden quitar, como se muestra en el ejemplo de código siguiente:
public class ExplicitStylesPageCS : ContentPage
{
public ExplicitStylesPageCS ()
{
var labelRedStyle = new Style (typeof(Label)) {
...
};
var labelGreenStyle = new Style (typeof(Label)) {
...
};
var labelBlueStyle = new Style (typeof(Label)) {
...
};
...
Content = new StackLayout {
Children = {
new Label { Text = "These labels", Style = labelRedStyle },
new Label { Text = "are demonstrating", Style = labelGreenStyle },
new Label { Text = "explicit styles,", Style = labelBlueStyle },
new Label { Text = "and an explicit style override", Style = labelBlueStyle,
TextColor = Color.Teal }
}
};
}
}
El constructor define tres estilos explícitos que se aplican a las instancias Label de la página. Cada Style se usa para mostrar texto en un color diferente, al tiempo que se establecen las opciones de diseño horizontal y vertical y horizontal. Cada Style se aplica a un Label diferente estableciendo sus Style propiedades. Además, el Label final tiene una Style aplicada, pero también invalida la propiedad TextColor en un valorColor d iferente.