Udostępnij za pośrednictwem


Style dynamiczne w programie Xamarin.Forms

Style nie reagują na zmiany właściwości i pozostają niezmienione przez czas trwania aplikacji. Na przykład po przypisaniu stylu do elementu wizualizacji, jeśli jedno z wystąpień setter zostanie zmodyfikowane, usunięte lub dodane nowe wystąpienie Setter, zmiany nie zostaną zastosowane do elementu wizualizacji. Jednak aplikacje mogą reagować na zmiany stylu dynamicznie w czasie wykonywania przy użyciu zasobów dynamicznych.

Rozszerzenie DynamicResource znaczników jest podobne do StaticResource rozszerzenia znaczników, w przypadku którego oba używają klucza słownika do pobierania wartości z klasy ResourceDictionary. Jednak podczas wykonywania StaticResource pojedynczego wyszukiwania DynamicResource słownika element utrzymuje link do klucza słownika. W związku z tym, jeśli wpis słownika skojarzony z kluczem zostanie zastąpiony, zmiana zostanie zastosowana do elementu wizualizacji. Umożliwia to wprowadzanie zmian stylu środowiska uruchomieniowego w aplikacji.

Poniższy przykład kodu przedstawia style dynamiczne na stronie 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>

Wystąpienia SearchBar używają DynamicResource rozszerzenia znaczników, aby odwołać się do nazwanego searchBarStyleStyle elementu , który nie jest zdefiniowany w języku XAML. Jednak ponieważ Style właściwości SearchBar wystąpień są ustawiane przy użyciu DynamicResourceelementu , brak klucza słownika nie powoduje zgłoszenia wyjątku.

Zamiast tego w pliku za pomocą kodu konstruktor tworzy ResourceDictionary wpis z kluczem searchBarStyle, jak pokazano w poniższym przykładzie kodu:

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

Po wykonaniu searchBarStyle programu obsługi zdarzeń OnButtonClicked przełączy się między blueSearchBarStyle i greenSearchBarStyle. Spowoduje to wyświetlenie wyglądu pokazanego na poniższych zrzutach ekranu:

Przykład niebieskiego stylu dynamicznegoPrzykład zielonego stylu dynamicznego

Poniższy przykład kodu przedstawia równoważną stronę w języku 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    }
        };
    }
    ...
}

W języku SearchBar C# wystąpienia używają SetDynamicResource metody , aby odwołać się searchBarStyledo metody . Kod OnButtonClicked procedury obsługi zdarzeń jest identyczny z przykładem XAML, a po wykonaniu searchBarStyle przełączy się między blueSearchBarStyle i greenSearchBarStyle.

Dziedziczenie stylu dynamicznego

Nie można osiągnąć wyprowadzania stylu dynamicznego przy użyciu Style.BasedOn właściwości . Style Zamiast tego klasa zawiera BaseResourceKey właściwość , którą można ustawić na klucz słownika, którego wartość może się dynamicznie zmieniać.

W poniższym przykładzie kodu pokazano dziedziczenie stylu dynamicznego na stronie 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>

Wystąpienia SearchBar używają StaticResource rozszerzenia znaczników, aby odwołać się do nazwanego tealSearchBarStyleStyle elementu . Spowoduje to Style ustawienie niektórych dodatkowych właściwości i użycie BaseResourceKey właściwości do odwołania searchBarStyle. DynamicResource Rozszerzenie znaczników nie jest wymagane, ponieważ tealSearchBarStyle nie ulegnie zmianie, z wyjątkiem tego, z którego Style pochodzi. tealSearchBarStyle W związku z tym utrzymuje link do searchBarStyle elementu i jest zmieniany po zmianie stylu podstawowego.

W pliku za pomocą kodu konstruktor tworzy ResourceDictionary wpis z kluczem searchBarStyle, zgodnie z poprzednim przykładem, który demonstrował style dynamiczne. Po wykonaniu searchBarStyle programu obsługi zdarzeń OnButtonClicked przełączy się między blueSearchBarStyle i greenSearchBarStyle. Spowoduje to wyświetlenie wyglądu pokazanego na poniższych zrzutach ekranu:

Przykład dziedziczenia niebieskiego stylu dynamicznegoPrzykład dziedziczenia stylu dynamicznego zielony

Poniższy przykład kodu przedstawia równoważną stronę w języku 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 },
                ...
            }
        };
    }
    ...
}

Właściwość tealSearchBarStyle jest przypisywana bezpośrednio do Style właściwości SearchBar wystąpień. Spowoduje to Style ustawienie niektórych dodatkowych właściwości i użycie BaseResourceKey właściwości w celu odwołania searchBarStylesię do elementu . Metoda nie jest tutaj wymagana SetDynamicResource , ponieważ tealSearchBarStyle nie ulegnie zmianie, z wyjątkiem tego, z którego Style pochodzi. tealSearchBarStyle W związku z tym utrzymuje link do searchBarStyle elementu i jest zmieniany po zmianie stylu podstawowego.

Więcej filmów na platformie Xamarin można znaleźć w witrynach Channel 9 i YouTube.