Sdílet prostřednictvím

Úvod do Xamarin.Forms stylů

  • Článek

Styly umožňují přizpůsobit vzhled vizuálních prvků. Styly jsou definovány pro určitý typ a obsahují hodnoty pro vlastnosti dostupné v daném typu.

Xamarin.Forms aplikace často obsahují více ovládacích prvků, které mají stejný vzhled. Aplikace může mít například více Label instancí se stejnými možnostmi písma a možnostmi rozložení, jak je znázorněno v následujícím příkladu kódu XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Styles.NoStylesPage"
    Title="No Styles"
    IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="are not"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="using styles"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Následující příklad kódu ukazuje ekvivalentní stránku vytvořenou v jazyce C#:

public class NoStylesPageCS : ContentPage
{
    public NoStylesPageCS ()
    {
        Title = "No Styles";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label {
                    Text = "These labels",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "are not",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "using styles",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                }
            }
        };
    }
}

Každá Label instance má identické hodnoty vlastností pro řízení vzhledu textu zobrazeného objektem Label. Výsledkem je vzhled zobrazený na následujících snímcích obrazovky:

Label Appearance without Styles

Nastavení vzhledu jednotlivých ovládacích prvků může být opakované a náchylné k chybám. Místo toho je možné vytvořit styl, který definuje vzhled a pak se použije u požadovaných ovládacích prvků.

Vytvoření stylu

Style Třída seskupí kolekci hodnot vlastností do jednoho objektu, který pak lze použít na více instancí elementů vizuálu. To pomáhá snížit opakované revize a umožňuje snadnější změně vzhledu aplikací.

I když byly styly navrženy primárně pro aplikace založené na XAML, je možné je vytvořit také v jazyce C#:

  • Style Instance vytvořené v jazyce XAML jsou obvykle definovány v ResourceDictionary kolekci Resources ovládacího prvku, stránky nebo Resources kolekce aplikace.
  • Style Instance vytvořené v jazyce C# jsou obvykle definovány ve třídě stránky nebo ve třídě, ke které lze globálně přistupovat.

Volba místa, kde se má definovat Style dopad, kde se dá použít:

  • Style instance definované na úrovni ovládacího prvku lze použít pouze pro ovládací prvek a jeho podřízené položky.
  • Style instance definované na úrovni stránky lze použít pouze na stránku a její podřízené položky.
  • Style instance definované na úrovni aplikace je možné použít v celé aplikaci.

Každá Style instance obsahuje kolekci jednoho nebo více Setter objektů, přičemž každá Setter má Property a a Value. Je Property název bindable vlastnost elementu, na který je styl použit, a Value je hodnota, která je použita na vlastnost.

Každá Style instance může být explicitní nebo implicitní:

  • Explicitní Style instance je definována TargetType zadáním hodnoty a x:Key nastavením vlastnosti cílového prvku Style na x:Key odkaz. Další informace o explicitních stylech naleznete v tématu Explicitní styly.
  • Implicitní Style instance je definována zadáním pouze .TargetType Instance Style se pak automaticky použije pro všechny prvky tohoto typu. Všimněte si, že podtřídy TargetType nejsou automaticky Style použity. Další informace o implicitních stylech naleznete v tématu Implicitní styly.

Při vytváření StyleTargetType je vlastnost vždy vyžadována. Následující příklad kódu ukazuje explicitní styl (poznámkax:Key) vytvořený v XAML:

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

Chcete-li použít Style, musí být cílový objekt, VisualElement který odpovídá TargetType hodnotě Stylevlastnosti , jak je znázorněno v následujícím příkladu kódu XAML:

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

Styly nižší v hierarchii zobrazení mají přednost před těmi, které jsou definovány výše. Například nastavení Style sady Label.TextColor na Red úrovni aplikace bude přepsáno stylem na úrovni stránky, který se nastaví Label.TextColor na Green. Podobně se styl na úrovni stránky přepíše stylem na úrovni ovládacího prvku. Kromě toho platí, že pokud Label.TextColor je nastavena přímo u vlastnosti ovládacího prvku, má přednost před všemi styly.

Články v této části ukazují a vysvětlují, jak vytvářet a používat explicitní a implicitní styly, jak vytvářet globální styly, dědičnost stylů, jak reagovat na změny stylu za běhu a jak používat předdefinované styly, které jsou součástí Xamarin.Forms.

Poznámka:

Co je StyleId?

Xamarin.Forms Před verzí 2.2 byla vlastnost použita k identifikaci jednotlivých prvků v aplikaci pro identifikaci při testování uživatelského rozhraní a v modulech motivů, StyleId jako je Pixate. Xamarin.Forms 2.2 však zavedla AutomationId vlastnost, která nahradila StyleId vlastnost.