Estilos dinámicos enXamarin.FormsDynamic Styles in Xamarin.Forms

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Los estilos no responden a los cambios de propiedad y permanecen sin cambios durante la ejecución de una aplicación. Por ejemplo, después de asignar un estilo a un elemento visual, si una de las instancias del establecedor se modifica, se quita o se agrega una nueva instancia de establecedor, los cambios no se aplicarán al elemento visual. Sin embargo, las aplicaciones pueden responder dinámicamente a los cambios de estilo en tiempo de ejecución mediante recursos dinámicos.Styles do not respond to property changes, and remain unchanged for the duration of an application. For example, after assigning a Style to a visual element, if one of the Setter instances is modified, removed, or a new Setter instance added, the changes won't be applied to the visual element. However, applications can respond to style changes dynamically at runtime by using dynamic resources.

La DynamicResource extensión de marcado es similar a la StaticResource extensión de marcado en que ambos usan una clave de diccionario para capturar un valor de ResourceDictionary .The DynamicResource markup extension is similar to the StaticResource markup extension in that both use a dictionary key to fetch a value from a ResourceDictionary. Sin embargo, mientras StaticResource realiza una búsqueda de un solo diccionario, DynamicResource mantiene un vínculo a la clave del diccionario.However, while the StaticResource performs a single dictionary lookup, the DynamicResource maintains a link to the dictionary key. Por lo tanto, si se reemplaza la entrada del diccionario asociada a la clave, el cambio se aplica al elemento visual.Therefore, if the dictionary entry associated with the key is replaced, the change is applied to the visual element. Esto permite realizar cambios de estilo en tiempo de ejecución en una aplicación.This enables runtime style changes to be made in an application.

En el ejemplo de código siguiente se muestran los estilos dinámicos en una página XAML:The following code example demonstrates dynamic styles in a XAML page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DynamicStylesPage" Title="Dynamic" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="baseStyle" TargetType="View">
              ...
            </Style>
            <Style x:Key="blueSearchBarStyle"
                   TargetType="SearchBar"
                   BasedOn="{StaticResource baseStyle}">
              ...
            </Style>
            <Style x:Key="greenSearchBarStyle"
                   TargetType="SearchBar">
              ...
            </Style>
            ...
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <SearchBar Placeholder="These SearchBar controls"
                       Style="{DynamicResource searchBarStyle}" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Las SearchBar instancias de usan la DynamicResource extensión de marcado para hacer referencia a un Style denominado searchBarStyle , que no está definido en el XAML.The SearchBar instances use the DynamicResource markup extension to reference a Style named searchBarStyle, which is not defined in the XAML. Sin embargo, dado que las Style propiedades de las SearchBar instancias se establecen mediante DynamicResource , la clave del diccionario que falta no produce una excepción.However, because the Style properties of the SearchBar instances are set using a DynamicResource, the missing dictionary key doesn't result in an exception being thrown.

En su lugar, en el archivo de código subyacente, el constructor crea una ResourceDictionary entrada con la clave searchBarStyle , como se muestra en el ejemplo de código siguiente:Instead, in the code-behind file, the constructor creates a ResourceDictionary entry with the key searchBarStyle, as shown in the following code example:

public partial class DynamicStylesPage : ContentPage
{
    bool originalStyle = true;

    public DynamicStylesPage ()
    {
        InitializeComponent ();
        Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
    }

    void OnButtonClicked (object sender, EventArgs e)
    {
        if (originalStyle) {
            Resources ["searchBarStyle"] = Resources ["greenSearchBarStyle"];
            originalStyle = false;
        } else {
            Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
            originalStyle = true;
        }
    }
}

Cuando OnButtonClicked se ejecuta el controlador de eventos, cambiará searchBarStyle entre blueSearchBarStyle y greenSearchBarStyle .When the OnButtonClicked event handler is executed, searchBarStyle will switch between blueSearchBarStyle and greenSearchBarStyle. 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 estilo dinámico  azul ejemplode  estilo dinámico verdeBlue Dynamic Style Example Green Dynamic Style Example

En el ejemplo de código siguiente se muestra la página equivalente en C#:The following code example demonstrates the equivalent page in C#:

public class DynamicStylesPageCS : ContentPage
{
    bool originalStyle = true;

    public DynamicStylesPageCS ()
    {
        ...
        var baseStyle = new Style (typeof(View)) {
            ...
        };
        var blueSearchBarStyle = new Style (typeof(SearchBar)) {
            ...
        };
        var greenSearchBarStyle = new Style (typeof(SearchBar)) {
            ...
        };
        ...
        var searchBar1 = new SearchBar { Placeholder = "These SearchBar controls" };
        searchBar1.SetDynamicResource (VisualElement.StyleProperty, "searchBarStyle");
        ...
        Resources = new ResourceDictionary ();
        Resources.Add ("blueSearchBarStyle", blueSearchBarStyle);
        Resources.Add ("greenSearchBarStyle", greenSearchBarStyle);
        Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];

        Content = new StackLayout {
            Children = { searchBar1, searchBar2, searchBar3, searchBar4,    button    }
        };
    }
    ...
}

En C#, las SearchBar instancias de usan el SetDynamicResource método para hacer referencia a searchBarStyle .In C#, the SearchBar instances use the SetDynamicResource method to reference searchBarStyle. El OnButtonClicked código del controlador de eventos es idéntico al ejemplo XAML y, cuando se ejecuta, cambiará searchBarStyle entre blueSearchBarStyle y greenSearchBarStyle .The OnButtonClicked event handler code is identical to the XAML example, and when executed, searchBarStyle will switch between blueSearchBarStyle and greenSearchBarStyle.

Herencia de estilo dinámicoDynamic style inheritance

No se puede derivar un estilo a partir de un estilo dinámico mediante la Style.BasedOn propiedad.Deriving a style from a dynamic style can't be achieved using the Style.BasedOn property. En su lugar, la Style clase incluye la BaseResourceKey propiedad, que se puede establecer en una clave de diccionario cuyo valor puede cambiar dinámicamente.Instead, the Style class includes the BaseResourceKey property, which can be set to a dictionary key whose value might dynamically change.

En el ejemplo de código siguiente se muestra la herencia de estilo dinámico en una página XAML:The following code example demonstrates dynamic style inheritance in a XAML page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DynamicStylesInheritancePage" Title="Dynamic Inheritance" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="baseStyle" TargetType="View">
              ...
            </Style>
            <Style x:Key="blueSearchBarStyle" TargetType="SearchBar" BasedOn="{StaticResource baseStyle}">
              ...
            </Style>
            <Style x:Key="greenSearchBarStyle" TargetType="SearchBar">
              ...
            </Style>
            <Style x:Key="tealSearchBarStyle" TargetType="SearchBar" BaseResourceKey="searchBarStyle">
              ...
            </Style>
            ...
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <SearchBar Text="These SearchBar controls" Style="{StaticResource tealSearchBarStyle}" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Las SearchBar instancias de usan la StaticResource extensión de marcado para hacer referencia a un Style denominado tealSearchBarStyle .The SearchBar instances use the StaticResource markup extension to reference a Style named tealSearchBarStyle. Esto Style establece algunas propiedades adicionales y usa la BaseResourceKey propiedad como referencia searchBarStyle .This Style sets some additional properties and uses the BaseResourceKey property to reference searchBarStyle. La DynamicResource extensión de marcado no es necesaria porque tealSearchBarStyle no cambiará, salvo Style que se derive de.The DynamicResource markup extension is not required because tealSearchBarStyle will not change, except for the Style it derives from. Por lo tanto, tealSearchBarStyle mantiene un vínculo a searchBarStyle y se modifica cuando cambia el estilo base.Therefore, tealSearchBarStyle maintains a link to searchBarStyle and is altered when the base style changes.

En el archivo de código subyacente, el constructor crea una ResourceDictionary entrada con la clave searchBarStyle , tal y como se muestra en el ejemplo anterior que demostró los estilos dinámicos.In the code-behind file, the constructor creates a ResourceDictionary entry with the key searchBarStyle, as per the previous example that demonstrated dynamic styles. Cuando OnButtonClicked se ejecuta el controlador de eventos, cambiará searchBarStyle entre blueSearchBarStyle y greenSearchBarStyle .When the OnButtonClicked event handler is executed, searchBarStyle will switch between blueSearchBarStyle and greenSearchBarStyle. 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 herencia de  estilo dinámico azul ejemplode  herencia de estilo dinámico verdeBlue Dynamic Style Inheritance Example Green Dynamic Style Inheritance Example

En el ejemplo de código siguiente se muestra la página equivalente en C#:The following code example demonstrates the equivalent page in C#:

public class DynamicStylesInheritancePageCS : ContentPage
{
    bool originalStyle = true;

    public DynamicStylesInheritancePageCS ()
    {
        ...
        var baseStyle = new Style (typeof(View)) {
            ...
        };
        var blueSearchBarStyle = new Style (typeof(SearchBar)) {
            ...
        };
        var greenSearchBarStyle = new Style (typeof(SearchBar)) {
            ...
        };
        var tealSearchBarStyle = new Style (typeof(SearchBar)) {
            BaseResourceKey = "searchBarStyle",
            ...
        };
        ...
        Resources = new ResourceDictionary ();
        Resources.Add ("blueSearchBarStyle", blueSearchBarStyle);
        Resources.Add ("greenSearchBarStyle", greenSearchBarStyle);
        Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];

        Content = new StackLayout {
            Children = {
                new SearchBar { Text = "These SearchBar controls", Style = tealSearchBarStyle },
                ...
            }
        };
    }
    ...
}

tealSearchBarStyleSe asigna directamente a la Style propiedad de las SearchBar instancias de.The tealSearchBarStyle is assigned directly to the Style property of the SearchBar instances. Esto Style establece algunas propiedades adicionales y usa la BaseResourceKey propiedad como referencia searchBarStyle .This Style sets some additional properties, and uses the BaseResourceKey property to reference searchBarStyle. El SetDynamicResource método no es necesario aquí porque tealSearchBarStyle no cambiará, salvo Style que se derive de.The SetDynamicResource method isn't required here because tealSearchBarStyle will not change, except for the Style it derives from. Por lo tanto, tealSearchBarStyle mantiene un vínculo a searchBarStyle y se modifica cuando cambia el estilo base.Therefore, tealSearchBarStyle maintains a link to searchBarStyle and is altered when the base style changes.

Encuentre más vídeos de Xamarin en Channel 9 y YouTube.Find more Xamarin videos on Channel 9 and YouTube.