Estilos globales en Xamarin.Forms
Los estilos se pueden poner a disposición globalmente agregándolos al diccionario de recursos de la aplicación. Esto ayuda a evitar la duplicación de estilos entre páginas o controles.
Creación de un estilo global en XAML
De forma predeterminada, todas las aplicaciones Xamarin.Forms creadas a partir de una plantilla usan la clase app para implementar la subclase Application. Para declarar un Style en el nivel de aplicación, en el ResourceDictionary de la aplicación mediante XAML, la clase App predeterminada debe reemplazarse por una clase XAML App y el código subyacente asociado. Para obtener más información, consulte Trabajar con la clase App.
En el ejemplo de código siguiente se muestra un Style declarado en el nivel de aplicación:
<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>
Este ResourceDictionary define un estilo único explícito, buttonStyle, que se usará para establecer la apariencia de las instancias de Button. Sin embargo, los estilos globales pueden ser explícitos o implícitos.
En el ejemplo de código siguiente se muestra una página XAML que aplica el buttonStyle a las instancias de Button de la página:
<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>
El resultado es el aspecto que se muestra en las capturas de pantalla siguientes:
Para obtener información sobre cómo crear estilos en el ResourceDictionaryde una página, vea Estilos explícitos y Estilos implícitos.
Invalidar estilos
Los estilos situados más abajo en la jerarquía de la vista tienen prioridad sobre los definidos más arriba. Por ejemplo, si se establece un Style que establece Button.TextColor en Red en el nivel de aplicación, se invalidará por un estilo de nivel de página que establezca Button.TextColor en Green. Del mismo modo, un estilo de nivel de página se invalidará por un estilo de nivel de control. Además, si Button.TextColor se establece directamente en una propiedad de control, tendrá prioridad sobre los estilos. Esta prioridad 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.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>
El buttonStyleoriginal, definido en el nivel de aplicación, se invalida mediante la instancia de buttonStyle definida en el nivel de página. Además, el nivel de control reemplaza el estilo de nivel de página buttonStyle. Por lo tanto, las instancias de Button se muestran con texto azul, como se muestra en las capturas de pantalla siguientes:
Crear un estilo global en C#
Instancias de Style se pueden agregar a la colección Resources de la aplicación en C# mediante la creación de una nueva ResourceDictionary y, a continuación, agregando las instancias de Style a la ResourceDictionary, como se muestra en el ejemplo de código siguiente:
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);
...
}
...
}
El constructor define un único estilo explícito para aplicar a instancias de Button en toda la aplicación. Las instancias explícitasStyle se agregan al ResourceDictionary mediante el método Add, especificando una cadena de key para hacer referencia a la instancia de Style. A continuación, la instancia de Style se puede aplicar a cualquier control del tipo correcto en la aplicación. Sin embargo, los estilos globales pueden ser explícitos o implícitos.
En el ejemplo de código siguiente se muestra una página de C# que aplica el buttonStyle a las instancias de Button de la página:
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"]
}
}
};
}
}
El buttonStyle se aplica a las instancias de Button estableciendo sus propiedades Style y controla la apariencia de las instancias de Button.