içinde Dinamik Stiller Xamarin.Forms

  • Makale

Stiller özellik değişikliklerine yanıt vermez ve uygulama süresi boyunca değişmeden kalır. Örneğin, bir görsel öğesine Stil atandıktan sonra, Setter örneklerinden biri değiştirilirse, kaldırılırsa veya yeni bir Setter örneği eklenirse, değişiklikler görsel öğesine uygulanmaz. Ancak, uygulamalar çalışma zamanında dinamik kaynakları kullanarak stil değişikliklerine dinamik olarak yanıt verebilir.

biçimlendirme DynamicResource uzantısı, içindeki işaretleme uzantısına StaticResource benzer ve her ikisi de bir sözlük anahtarı kullanarak bir değerinden ResourceDictionarybir değer getirir. Ancak, tek bir sözlük araması gerçekleştirirken StaticResource , DynamicResource sözlük anahtarına bir bağlantı tutar. Bu nedenle, anahtarla ilişkili sözlük girdisi değiştirilirse, değişiklik görsel öğesine uygulanır. Bu, bir uygulamada çalışma zamanı stili değişiklikleri yapılmasını sağlar.

Aşağıdaki kod örneği, bir XAML sayfasındaki dinamik stilleri gösterir:

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

Örnekler, SearchBar XAML'de tanımlanmayan DynamicResource adlandırılmış searchBarStylebir Style öğesine başvurmak için işaretleme uzantısını kullanır. Ancak, örneklerin Style özellikleri kullanılarak DynamicResourceayarlandığındanSearchBar, eksik sözlük anahtarı bir özel durum oluşturmaz.

Bunun yerine, aşağıdaki kod örneğinde gösterildiği gibi, arka planda kod dosyasında oluşturucu anahtarıyla searchBarStylebir ResourceDictionary girdi oluşturur:

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

OnButtonClicked Olay işleyicisi yürütürken ile searchBarStyle greenSearchBarStylearasında blueSearchBarStyle geçiş yapacaktır. Bu, aşağıdaki ekran görüntülerinde gösterilen görünüme neden olur:

Mavi Dinamik Stil ÖrneğiYeşil Dinamik Stil Örneği

Aşağıdaki kod örneği C# dilinde eşdeğer sayfayı gösterir:

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

C# dilinde SearchBar , örnekler başvurmak SetDynamicResource searchBarStyleiçin yöntemini kullanır. Olay OnButtonClicked işleyici kodu XAML örneğiyle aynıdır ve yürütürken searchBarStyle ile greenSearchBarStylearasında blueSearchBarStyle geçiş yapacaktır.

Dinamik stil devralma

Dinamik bir stilden stil türetme özelliği kullanılarak Style.BasedOn elde edilemiyor. Bunun yerine sınıfı, Style değeri dinamik olarak değişebilen bir sözlük anahtarına ayarlanabilen özelliğini içerir BaseResourceKey .

Aşağıdaki kod örneği, bir XAML sayfasında dinamik stil devralmayı gösterir:

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

SearchBar Örnekler, adlandırılmış tealSearchBarStylebir Style öğesine başvurmak için işaretleme uzantısını kullanırStaticResource. Bu Style , bazı ek özellikleri ayarlar ve başvurmak BaseResourceKey searchBarStyleiçin özelliğini kullanır. Biçimlendirme DynamicResource uzantısı gerekli değildir, çünkü tealSearchBarStyle bu uzantıdan türetildiği durumlar Style dışında değişmez. Bu nedenle, tealSearchBarStyle temel stil değiştiğinde bağlantısı korunur searchBarStyle ve değiştirilir.

Arka planda kod dosyasında oluşturucu, dinamik stilleri gösteren önceki örnekte olduğu gibi anahtarıyla searchBarStylebir ResourceDictionary girdi oluşturur. OnButtonClicked Olay işleyicisi yürütürken ile searchBarStyle greenSearchBarStylearasında blueSearchBarStyle geçiş yapacaktır. Bu, aşağıdaki ekran görüntülerinde gösterilen görünüme neden olur:

Mavi Dinamik Stil Devralma ÖrneğiYeşil Dinamik Stil Devralma Örneği

Aşağıdaki kod örneği C# dilinde eşdeğer sayfayı gösterir:

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

tealSearchBarStyle doğrudan örneklerin Style özelliğine SearchBar atanır. Bu Style , bazı ek özellikleri ayarlar ve başvurmak BaseResourceKey searchBarStyleiçin özelliğini kullanır. SetDynamicResource Yöntemin türetildiği durumlar dışında değişmeyeceği için Style burada tealSearchBarStyle gerekli değildir. Bu nedenle, tealSearchBarStyle temel stil değiştiğinde bağlantısı korunur searchBarStyle ve değiştirilir.

Channel 9 ve YouTube'da daha fazla Xamarin videosu bulun.