Estilos globales enXamarin.FormsGlobal Styles in Xamarin.Forms

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

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 en páginas o controles.Styles can be made available globally by adding them to the application's resource dictionary. This helps to avoid duplication of styles across pages or controls.

Crear un estilo global en XAMLCreate a global style in XAML

De forma predeterminada, todas Xamarin.Forms las aplicaciones creadas a partir de una plantilla usan la clase App para implementar la Application subclase.By default, all Xamarin.Forms applications created from a template use the App class to implement the Application subclass. Para declarar un Style en el nivel de aplicación, en el uso de XAML de la aplicación ResourceDictionary , la clase de aplicación predeterminada debe reemplazarse por una clase de aplicación XAML y el código subyacente asociado.To declare a Style at the application level, in the application's ResourceDictionary using XAML, the default App class must be replaced with a XAML App class and associated code-behind. Para obtener más información, vea trabajar con la clase App.For more information, see Working with the App Class.

En el ejemplo de código siguiente se muestra un Style declarado en el nivel de aplicación:The following code example shows a Style declared at the application level:

<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>

Esto ResourceDictionary define un solo estilo explícito , buttonStyle , que se usará para establecer la apariencia de Button las instancias.This ResourceDictionary defines a single explicit style, buttonStyle, which will be used to set the appearance of Button instances. Sin embargo, los estilos globales pueden ser explícitos o implícitos.However, global styles can be explicit or implicit.

En el ejemplo de código siguiente se muestra una página XAML buttonStyle que aplica a las instancias de la página Button :The following code example shows a XAML page applying the buttonStyle to the page's Button instances:

<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:This results in the appearance shown in the following screenshots:

Ejemplo de estilos globalesGlobal Styles Example

Para obtener información sobre cómo crear estilos en la de una página ResourceDictionary , vea estilos explícitos y estilos implícitos.For information about creating styles in a page's ResourceDictionary, see Explicit Styles and Implicit Styles.

Reemplazar estilosOverride styles

Los estilos inferiores de la jerarquía de vistas tienen prioridad sobre las definidas más arriba.Styles lower in the view hierarchy take precedence over those defined higher up. Por ejemplo, el establecimiento de un Style que establezca en Button.TextColor Red en el nivel de aplicación será reemplazado por un estilo de nivel de página que establezca Button.TextColor en Green .For example, setting a Style that sets Button.TextColor to Red at the application level will be overridden by a page level style that sets Button.TextColor to Green. De igual forma, un estilo de nivel de página se reemplazará por un estilo de nivel de control.Similarly, a page level style will be overridden by a control level style. Además, si Button.TextColor se establece directamente en una propiedad de control, tendrá prioridad sobre los estilos.In addition, if Button.TextColor is set directly on a control property, this will take precedence over any styles. Esta prioridad se muestra en el ejemplo de código siguiente:This precedence is demonstrated in the following code example:

<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 original buttonStyle , definido en el nivel de la aplicación, se reemplaza por la buttonStyle instancia definida en el nivel de página.The original buttonStyle, defined at application level, is overridden by the buttonStyle instance defined at page level. Además, el estilo de nivel de página se reemplaza por el nivel de control buttonStyle .In addition, the page level style is overridden by the control level buttonStyle. Por lo tanto, las Button instancias se muestran con texto azul, tal como se muestra en las siguientes capturas de pantalla:Therefore, the Button instances are displayed with blue text, as shown in the following screenshots:

Ejemplo de reemplazo de estilosOverriding Styles Example

Crear un estilo global en C#Create a global style in C#

Stylelas instancias se pueden agregar a la colección de la aplicación Resources en C# mediante la creación de una nueva ResourceDictionary y, a continuación, agregando las Style instancias a ResourceDictionary , tal y como se muestra en el ejemplo de código siguiente:Style instances can be added to the application's Resources collection in C# by creating a new ResourceDictionary, and then by adding the Style instances to the ResourceDictionary, as shown in the following code example:

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 solo estilo explícito para aplicar a Button las instancias en toda la aplicación.The constructor defines a single explicit style for applying to Button instances throughout the application. Explícito Style las instancias se agregan a ResourceDictionary mediante el Add método, especificando una key cadena para hacer referencia a la Style instancia.Explicit Style instances are added to the ResourceDictionary using the Add method, specifying a key string to refer to the Style instance. StyleA continuación, la instancia se puede aplicar a cualquier control del tipo correcto en la aplicación.The Style instance can then be applied to any controls of the correct type in the application. Sin embargo, los estilos globales pueden ser explícitos o implícitos.However, global styles can be explicit or implicit.

En el ejemplo de código siguiente se muestra una página de C# buttonStyle que aplica a las instancias de la página Button :The following code example shows a C# page applying the buttonStyle to the page's Button instances:

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"]
                }
            }
        };
    }
}

buttonStyleSe aplica a las Button instancias mediante el establecimiento Style de sus propiedades y controla la apariencia de las Button instancias.The buttonStyle is applied to the Button instances by setting their Style properties, and controls the appearance of the Button instances.