Estilos implícitos en Xamarin.Forms

Descargar ejemploDescargar el ejemplo

Un estilo implícito es uno que usan todos los controles del mismo TargetType, sin necesidad de que cada control haga referencia al estilo.

Crear un estilo implícito en XAML

Para declarar un Style objeto en el nivel de página, debe agregarse a la página y, a continuación, ResourceDictionary se pueden incluir una o varias Style declaraciones en .ResourceDictionary Un Style elemento se convierte en implícito al no especificar un x:Key atributo . A continuación, el estilo se aplicará a los elementos visuales que coincidan TargetType exactamente, pero no a los elementos derivados del TargetType valor.

En el ejemplo de código siguiente se muestra un estilo implícito declarado en XAML en el ResourceDictionary, y aplicado a las instancias de Entry la página:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Styles;assembly=Styles" x:Class="Styles.ImplicitStylesPage" Title="Implicit" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Entry">
                <Setter Property="HorizontalOptions" Value="Fill" />
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                <Setter Property="BackgroundColor" Value="Yellow" />
                <Setter Property="FontAttributes" Value="Italic" />
                <Setter Property="TextColor" Value="Blue" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Entry Text="These entries" />
            <Entry Text="are demonstrating" />
            <Entry Text="implicit styles," />
            <Entry Text="and an implicit style override" BackgroundColor="Lime" TextColor="Red" />
            <local:CustomEntry Text="Subclassed Entry is not receiving the style" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

ResourceDictionary define un único estilo implícito que se aplica a las instancias de Entry la página. Style se usa para mostrar texto azul en un fondo amarillo, mientras que también se establecen otras opciones de apariencia. Style se agrega a la página ResourceDictionary sin especificar un x:Key atributo . Por lo tanto, Style se aplica a todas las Entry instancias implícitamente a medida que coinciden con la TargetType propiedad de exactamente Style . Sin embargo, no Style se aplica a la CustomEntry instancia de , que es una subclase Entry. El resultado es el aspecto que se muestra en las capturas de pantalla siguientes:

Ejemplo de estilos implícitos

Además, la cuarta Entry invalida las BackgroundColor propiedades y TextColor del estilo implícito en valores diferentes Color .

Crear un estilo implícito en el nivel de control

Además de crear estilos implí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" xmlns:local="clr-namespace:Styles;assembly=Styles" x:Class="Styles.ImplicitStylesPage" Title="Implicit" IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <StackLayout.Resources>
                <ResourceDictionary>
                    <Style TargetType="Entry">
                        <Setter Property="HorizontalOptions" Value="Fill" />
                        ...
                    </Style>
                </ResourceDictionary>
            </StackLayout.Resources>
            <Entry Text="These entries" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

En este ejemplo, el implícitoStyle se asigna a la Resources colección del StackLayout control . A continuación, el estilo implícito se puede 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 implí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 ResourceDictionaryy, a continuación, agregando las Style instancias a ResourceDictionary, como se muestra en el ejemplo de código siguiente:

public class ImplicitStylesPageCS : ContentPage
{
    public ImplicitStylesPageCS ()
    {
        var entryStyle = new Style (typeof(Entry)) {
            Setters = {
                ...
                new Setter { Property = Entry.TextColorProperty, Value = Color.Blue }
            }
        };

        ...
        Resources = new ResourceDictionary ();
        Resources.Add (entryStyle);

        Content = new StackLayout {
            Children = {
                new Entry { Text = "These entries" },
                new Entry { Text = "are demonstrating" },
                new Entry { Text = "implicit styles," },
                new Entry { Text = "and an implicit style override", BackgroundColor = Color.Lime, TextColor = Color.Red },
                new CustomEntry  { Text = "Subclassed Entry is not receiving the style" }
            }
        };
    }
}

El constructor define un único estilo implícito que se aplica a las instancias de Entry la página. Style se usa para mostrar texto azul en un fondo amarillo, mientras que también se establecen otras opciones de apariencia. Style se agrega a la página ResourceDictionary sin especificar una key cadena. Por lo tanto, Style se aplica a todas las Entry instancias implícitamente a medida que coinciden con la TargetType propiedad de exactamente Style . Sin embargo, no Style se aplica a la CustomEntry instancia de , que es una subclase Entry.

Aplicar un estilo a los tipos derivados

La Style.ApplyToDerivedTypes propiedad permite aplicar un estilo a los controles derivados del tipo base al que hace referencia la TargetType propiedad . Por lo tanto, establecer esta propiedad en true permite que un único estilo tenga como destino varios tipos, siempre que los tipos deriven del tipo base especificado en la TargetType propiedad .

En el ejemplo siguiente se muestra un estilo implícito que establece el color de fondo de Button las instancias en rojo:

<Style TargetType="Button"
       ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor"
            Value="Red" />
</Style>

Colocar este estilo en un nivel ResourceDictionary de página dará lugar a que se aplique a todas las instancias de la página y también a los Button controles derivados de Button. Sin embargo, si la ApplyToDerivedTypes propiedad seguía sin establecerse, el estilo solo se aplicaría a Button las instancias.

El código de C# equivalente es el siguiente:

var buttonStyle = new Style(typeof(Button))
{
    ApplyToDerivedTypes = true,
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.Red
        }
    }
};

Resources = new ResourceDictionary { buttonStyle };