Úvod do Xamarin.Forms stylů

Styly umožňují přizpůsobit vzhled vizuálních prvků. Styly jsou definovány pro konkrétní typ a obsahují hodnoty vlastností dostupných pro tento typ.

Xamarin.Forms Aplikace často obsahují více ovládacích prvků, které mají stejný vzhled. Aplikace může mít například více instancí se stejnými možnostmi písma a možnostmi rozložení, jak je znázorněno v Label 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á stejné 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 panelů může být opakující se a náchylné k chybám. Místo toho lze vytvořit styl, který definuje vzhled, a pak použít na požadované ovládací prvky.

Vytvoření stylu

Třída Style seskupuje kolekci hodnot vlastností do jednoho objektu, který lze poté použít na více instancí vizuálních prvků. To pomáhá snížit počet opakovaných značek a umožňuje snadněji měnit vzhled aplikací.

Přestože byly styly navrženy primárně pro aplikace založené na XAML, lze je také vytvořit v jazyce C#:

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

Volba toho, kde definovat Style dopady, kde se má použít:

  • Style Instance definované na úrovni ovládacího prvku lze použít pouze u ovládacího prvku a jeho dětí.
  • Style Instance definované na úrovni stránky lze použít pouze pro stránku a její děti.
  • Style Instance definované na úrovni aplikace lze použít v celé aplikaci.

Každá Style instance obsahuje kolekci jednoho nebo více objektů, z nichž každá Setter má a SetterPropertyValue . je název vázání vlastnosti prvku, na který je styl použit, a je hodnota, Property která se použije na vlastnost Value .

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

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

Při vytváření Style objektu se vždy vyžaduje vlastnost TargetType . Následující příklad kódu ukazuje explicitní styl (všimněte si ) vytvořeného v jazyce XAML:

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

Aby bylo možné použít objekt , musí být cílovým objektem , který odpovídá hodnotě vlastnosti objektu , jak je znázorněno StyleVisualElement v následujícím TargetTypeStyle příkladu kódu XAML:

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

Styly nižší v hierarchii zobrazení mají přednost před styly definovanými výše. Například nastavení , které se nastavuje na úrovni aplikace, se přepíše stylem na úrovni stránky, Style který se nastaví na Label.TextColorRedLabel.TextColorGreen . Podobně se styl na úrovni stránky přepíše stylem na úrovni ovládacího prvku. Kromě toho, 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 vytvořit a použít explicitní a implicitní styly, jak vytvořit globální styly, dědičnost stylu, jak reagovat na změny stylu za běhu a jak používat předdefinové styly zahrnuté v .

Poznámka

Co je StyleId?

Před 2.2 se vlastnost používala k identifikaci jednotlivých prvků v aplikaci pro identifikaci při testování uživatelského rozhraní a v motivových strojůch, jako Xamarin.FormsStyleId je Pixate. Xamarin.Forms2.2 ale představil vlastnost , která nahrazuje AutomationId vlastnost StyleId .