Sdílet prostřednictvím


Dynamické styly v Xamarin.Forms

Styly nereagují na změny vlastností a zůstávají beze změny po dobu trvání aplikace. Například po přiřazení stylu k elementu vizuálu, pokud je některá z instancí Setter upravena, odebrána nebo přidána nová instance Setter, změny se u elementu vizuálu nepoužijí. Aplikace však můžou reagovat na změny stylu dynamicky za běhu pomocí dynamických prostředků.

Rozšíření DynamicResource značek je podobné StaticResource rozšíření značek v tom, že obě používají klíč slovníku k načtení hodnoty z objektu ResourceDictionary. I když se StaticResource ale provede jedno vyhledávání slovníku, DynamicResource udržuje odkaz na klíč slovníku. Proto pokud je položka slovníku přidružená ke klíči nahrazena, změna se použije u vizuálního prvku. To umožňuje provádět změny stylu modulu runtime v aplikaci.

Následující příklad kódu ukazuje dynamické styly na stránce XAML:

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

Instance SearchBar používají DynamicResource rozšíření značek odkazovat na pojmenovaný Style searchBarStyle, který není definován v XAML. Protože Style jsou však vlastnosti SearchBar instancí nastaveny pomocí DynamicResource, chybějící klíč slovníku nemá za následek vyvolání výjimky.

Místo toho v souboru kódu vytvoří ResourceDictionary konstruktor položku s klíčem searchBarStyle, jak je znázorněno v následujícím příkladu kódu:

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

Při spuštění obslužné OnButtonClicked rutiny události se searchBarStyle přepne mezi blueSearchBarStyle a greenSearchBarStyle. Výsledkem je vzhled zobrazený na následujících snímcích obrazovky:

Příklad modrého dynamického styluPříklad zeleného dynamického stylu

Následující příklad kódu ukazuje ekvivalentní stránku v jazyce 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    }
        };
    }
    ...
}

V jazyce C# SearchBar instance používají metodu SetDynamicResource pro odkaz .searchBarStyle Kód OnButtonClicked obslužné rutiny události je identický s příkladem XAML a při spuštění searchBarStyle se přepne mezi blueSearchBarStyle a greenSearchBarStyle.

Dynamická dědičnost stylu

Odvozování stylu z dynamického stylu nelze dosáhnout pomocí Style.BasedOn vlastnosti. Style Místo toho třída obsahuje BaseResourceKey vlastnost, kterou lze nastavit na klíč slovníku, jehož hodnota se může dynamicky měnit.

Následující příklad kódu ukazuje dynamickou dědičnost stylu na stránce XAML:

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

Instance SearchBar používají rozšíření značek odkazovat na pojmenovaný Style tealSearchBarStyle.StaticResource Tím Style se nastaví některé další vlastnosti a tato vlastnost se použije BaseResourceKey k odkazu searchBarStyle. DynamicResource Rozšíření značek není povinné, protože tealSearchBarStyle se nezmění, s výjimkou Style odvozených z. tealSearchBarStyle Proto udržuje odkaz na searchBarStyle základní styl a je změněn při změně základního stylu.

V souboru kódu vytvoří konstruktor ResourceDictionary položku s klíčem searchBarStyle, podle předchozího příkladu, který demonstroval dynamické styly. Při spuštění obslužné OnButtonClicked rutiny události se searchBarStyle přepne mezi blueSearchBarStyle a greenSearchBarStyle. Výsledkem je vzhled zobrazený na následujících snímcích obrazovky:

Příklad dědičnosti modrého dynamického styluPříklad dědičnosti zeleného dynamického stylu

Následující příklad kódu ukazuje ekvivalentní stránku v jazyce 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 },
                ...
            }
        };
    }
    ...
}

Je tealSearchBarStyle přiřazen přímo k Style vlastnosti SearchBar instancí. Tím Style se nastaví některé další vlastnosti a tato vlastnost se použije BaseResourceKey k odkazech searchBarStyle. Metoda SetDynamicResource se zde nevyžaduje, protože tealSearchBarStyle se nezmění, s výjimkou Style odvozené metody. tealSearchBarStyle Proto udržuje odkaz na searchBarStyle základní styl a je změněn při změně základního stylu.

Další videa o Xamarinu najdete na Channel 9 a YouTube.