Stylování Xamarin.Forms aplikací pomocí šablon stylů CSS (Cascading)

Download Sample Stažení ukázky

Xamarin.Forms podporuje stylování vizuálních prvků pomocí šablon stylů CSS (Cascading Style Sheet).

Xamarin.Forms aplikace lze stylovat pomocí šablon stylů CSS. Šablona stylů se skládá ze seznamu pravidel, přičemž každé pravidlo se skládá z jednoho nebo více selektorů a bloku deklarace. Blok deklarace se skládá ze seznamu deklarací v závorkách, přičemž každá deklarace se skládá z vlastnosti, dvojtečky a hodnoty. Pokud v bloku existuje více deklarací, vloží se středník jako oddělovač. Následující příklad kódu ukazuje některé Xamarin.Forms kompatibilní šablony stylů CSS:

navigationpage {
    -xf-bar-background-color: lightgray;
}

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
}

.mainPageTitle {
    font-style: bold;
    font-size: medium;
}

.mainPageSubtitle {
    margin-top: 15;
}

.detailPageTitle {
    font-style: bold;
    font-size: medium;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

listview image {
    height: 60;
    width: 60;
}

stacklayout>image {
    height: 200;
    width: 200;
}

Šablony Xamarin.Formsstylů CSS se analyzují a vyhodnocují za běhu, nikoli v době kompilace, a šablony stylů se při použití znovu analyzují.

Poznámka

V současné době se všechny styly, které je možné s stylováním XAML, nedají provést se šablonou STYLŮ CSS. Styly XAML však lze použít k doplnění šablon stylů CSS pro vlastnosti, které jsou aktuálně nepodporované Xamarin.Forms. Další informace o stylech XAML najdete v tématu Stylování Xamarin.Forms aplikací pomocí stylů XAML.

Ukázka MonkeyAppCSS ukazuje použití šablon stylů CSS k vytvoření stylu jednoduché aplikace a je znázorněno na následujících snímcích obrazovky:

MonkeyApp Main Page with CSS styling

MonkeyApp Detail Page with CSS styling

Využívání šablony stylů

Postup přidání šablony stylů do řešení je následující:

  1. Přidejte do projektu knihovny .NET Standard prázdný soubor CSS.
  2. Nastavte akci sestavení souboru CSS na EmbeddedResource.

Načtení šablony stylů

Existuje řada přístupů, které lze použít k načtení šablony stylů.

Poznámka

V současné době není možné změnit šablonu stylů za běhu a použít novou šablonu stylů.

XAML

Šablonu stylů lze před přidáním do ResourceDictionarytřídy načíst a analyzovat s StyleSheet třídou:

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </Application.Resources>
</Application>

Vlastnost StyleSheet.Source určuje šablonu stylů jako identifikátor URI vzhledem k umístění ohraničujícího souboru XAML nebo vzhledem k kořenovému adresáři projektu, pokud identifikátor URI začíná hodnotou /.

Upozornění

Soubor CSS se nepodaří načíst, pokud není akce sestavení nastavená na EmbeddedResource.

Případně je možné šablonu stylů načíst a analyzovat s StyleSheet třídou, než ji přidáte do ResourceDictionaryoddílu, a to tak, že ji vložíte do oddílu CDATA :

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
            ^contentpage {
                background-color: lightgray;
            }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    ...
</ContentPage>

Další informace o slovníkech prostředků najdete v tématu Slovníky zdrojů.

C#

V jazyce C# lze šablonu stylů načíst z a přidat do :StringReaderResourceDictionary

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();

        using (var reader = new StringReader("^contentpage { background-color: lightgray; }"))
        {
            this.Resources.Add(StyleSheet.FromReader(reader));
        }
    }
}

Argumentem StyleSheet.FromReader metody je TextReader přečtená šablona stylů.

Výběr prvků a použití vlastností

Css používá selektory k určení prvků, které se mají cílit. Styly s odpovídajícími selektory se po sobě použijí v pořadí definic. Styly definované pro konkrétní položku se vždy použijí jako poslední. Další informace o podporovaných selektorech najdete v tématu Referenční informace o výběru.

Css používá vlastnosti pro styl vybraného prvku. Každá vlastnost má sadu možných hodnot a některé vlastnosti mohou ovlivnit libovolný typ prvku, zatímco jiné platí pro skupiny prvků. Další informace o podporovaných vlastnostech najdete v tématu Referenční informace o vlastnostech.

Podřízené šablony stylů vždy přepíší nadřazené šablony stylů, pokud nastaví stejné vlastnosti. Při použití stylů, které nastavují stejné vlastnosti, se proto použijí následující pravidla priority:

  • Styl definovaný v prostředcích aplikace se přepíše stylem definovaným v prostředcích stránky, pokud nastaví stejné vlastnosti.
  • Styl definovaný v prostředcích stránky se přepíše stylem definovaným v ovládacích prostředcích, pokud nastaví stejné vlastnosti.
  • Styl definovaný v prostředcích aplikace se přepíše stylem definovaným v ovládacích prostředcích, pokud nastaví stejné vlastnosti.

Důležité

Proměnné CSS nejsou podporovány.

Výběr prvků podle typu

Prvky ve vizuálním stromu lze vybrat podle typu s nerozlišujícími element písmeny:

stacklayout {
    margin: 20;
}

Tento selektor identifikuje všechny StackLayout prvky na stránkách, které využívají šablonu stylů, a nastaví jejich okraje na jednotnou tloušťku 20.

Poznámka

Selektor element neidentifikuje podtřídy zadaného typu.

Výběr prvků podle základní třídy

Elementy ve vizuálním stromu lze vybrat podle základní třídy s nerozlišujícími ^base písmeny selektor:

^contentpage {
    background-color: lightgray;
}

Tento selektor identifikuje všechny ContentPage prvky, které využívají šablonu stylů, a nastaví barvu pozadí na lightgray.

Poznámka

Selektor ^base je specifický pro Xamarin.Formsspecifikaci CSS a není součástí specifikace CSS.

Výběr elementu podle názvu

Jednotlivé prvky ve vizuálním stromu je možné vybrat pomocí selektoru rozlišující malá a velká písmena #id :

#listView {
    background-color: lightgray;
}

Tento selektor identifikuje prvek, jehož StyleId vlastnost je nastavena na listView. Pokud však StyleId vlastnost není nastavena, selektor se vrátí k použití x:Name prvku. V následujícím příkladu #listView XAML proto selektor identifikuje ListView , jehož x:Name atribut je nastaven na listView, a nastaví barvu pozadí na lightgray.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView x:Name="listView" ...>
            ...
        </ListView>
    </StackLayout>
</ContentPage>

Výběr prvků s konkrétním atributem třídy

Prvky s konkrétním atributem třídy je možné vybrat pomocí selektoru rozlišující malá a velká písmena .class :

.detailPageTitle {
    font-style: bold;
    font-size: medium;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

Třídu CSS lze přiřadit elementu XAML nastavením StyleClass vlastnosti elementu na název třídy CSS. Proto v následujícím příkladu XAML jsou styly definované .detailPageTitle třídou přiřazeny k první Label, zatímco styly definované .detailPageSubtitle třídou jsou přiřazeny druhé Label.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
            ...
        </StackLayout>
    </ScrollView>
</ContentPage>

Výběr podřízených prvků

Podřízené prvky ve vizuálním stromu je možné vybrat s nerozlišujícími element element písmeny:

listview image {
    height: 60;
    width: 60;
}

Tento selektor identifikuje všechny Image prvky, které jsou podřízenými prvky prvků, a nastaví jejich výšku ListView a šířku na 60. V následujícím příkladu listview image XAML proto selektor identifikuje Image podřízenou položku ListViewa nastaví její výšku a šířku na 60.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView ...>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            ...
                            <Image ... />
                            ...
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Poznámka

Selektor element element nevyžaduje, aby podřízený prvek byl přímým podřízeným prvkem nadřazeného objektu – podřízený prvek může mít jiný nadřazený prvek. Výběr nastane za předpokladu, že předkem je zadaný první prvek.

Výběr přímých podřízených prvků

Přímé podřízené prvky ve vizuálním stromu je možné vybrat pomocí selektoru nerozlišující malá element>element písmena:

stacklayout>image {
    height: 200;
    width: 200;
}

Tento selektor identifikuje všechny Image prvky, které jsou přímými podřízenými prvky prvků, a nastaví jejich výšku StackLayout a šířku na 200. V následujícím příkladu stacklayout>image XAML proto selektor identifikuje Image přímé podřízené StackLayoutpoložky a nastaví jeho výšku a šířku na 200.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            ...
            <Image ... />
            ...
        </StackLayout>
    </ScrollView>
</ContentPage>

Poznámka

Selektor element>element vyžaduje, aby podřízený prvek byl přímým podřízeným prvkem nadřazeného objektu.

Referenční dokumentace selektoru

Následující selektory css podporují Xamarin.Forms:

Volič Příklad Description
.class .header Vybere všechny prvky s vlastností obsahující hlavičku StyleClass . Všimněte si, že tento selektor rozlišují velká a malá písmena.
#id #email Vybere všechny prvky s nastavenou StyleId na email. Pokud StyleId není nastavena, přepošli na x:Name. Při použití XAML x:Name je upřednostňovaný před StyleId. Všimněte si, že tento selektor rozlišují velká a malá písmena.
* * Vybere všechny prvky.
element label Vybere všechny prvky typu Label, ale ne podtřídy. Všimněte si, že tento selektor nerozlišuje velká a malá písmena.
^base ^contentpage Vybere všechny prvky jako ContentPage základní třídu, včetně ContentPage samotné. Všimněte si, že tento selektor nerozlišuje velká a není součástí specifikace CSS.
element,element label,button Vybere všechny Button prvky a všechny Label prvky. Všimněte si, že tento selektor nerozlišuje velká a malá písmena.
element element stacklayout label Vybere všechny Label prvky uvnitř .StackLayout Všimněte si, že tento selektor nerozlišuje malá a velká písmena.
element>element stacklayout>label Vybere všechny Label prvky s StackLayout přímým nadřazeným objektem. Všimněte si, že tento selektor nerozlišuje malá a velká písmena.
element+element label+entry Vybere všechny Entry prvky přímo za .Label Všimněte si, že tento selektor nerozlišuje malá a velká písmena.
element~element label~entry Vybere všechny Entry prvky předcházející znaku Label. Všimněte si, že tento selektor nerozlišuje malá a velká písmena.

Styly s odpovídajícími selektory se po sobě po sobě použijí v pořadí definic. Styly definované u konkrétní položky se vždy použijí jako poslední.

Tip

Selektory lze kombinovat bez omezení, například StackLayout>ContentView>label.email.

Aktuálně nejsou podporovány následující selektory:

  • [attribute]
  • @media a @supports
  • : a ::

Poznámka

Specificita a přepsání specificity nejsou podporována.

Referenční dokumentace vlastností

Následující vlastnosti css jsou podporovány Xamarin.Forms (ve sloupci Hodnoty jsou typy kurzívou, zatímco řetězcové literály jsou gray):

Vlastnost Platí pro Hodnoty Příklad
align-content FlexLayout stretch | center | start | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initial align-content: space-between;
align-items FlexLayout stretch | center | start | end | flex-start | flex-end | initial align-items: flex-start;
align-self VisualElement auto | stretch | center | start | end | flex-start | flex-end | initial align-self: flex-end;
background-color VisualElement Barev | initial background-color: springgreen;
background-image Page Řetězec | initial background-image: bg.png;
border-color Button, Frame, ImageButton Barev | initial border-color: #9acd32;
border-radius BoxView, Button, Frame, ImageButton Dvojité | initial border-radius: 10;
border-width Button, ImageButton Dvojité | initial border-width: .5;
color ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker Barev | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid Dvojité | initial column-gap: 9;
direction VisualElement ltr | rtl | inherit | initial direction: rtl;
flex-direction FlexLayout column | columnreverse | row | rowreverse | row-reverse | column-reverse | initial flex-direction: column-reverse;
flex-basis VisualElement float | auto | initial. Kromě toho lze pomocí znaménka zadat procento v rozsahu % 0 až 100 %. flex-basis: 25%;
flex-grow VisualElement Float | initial flex-grow: 1.5;
flex-shrink VisualElement Float | initial flex-shrink: 1;
flex-wrap VisualElement nowrap | wrap | reverse | wrap-reverse | initial flex-wrap: wrap-reverse;
font-family Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span Řetězec | initial font-family: Consolas;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span Dvojité | namedsize | initial font-size: 12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span bold | italic | initial font-style: bold;
height VisualElement Dvojité | initial min-height: 250;
justify-content FlexLayout start | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initial justify-content: flex-end;
letter-spacing Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, SearchHandler, Span, TimePicker Dvojité | initial letter-spacing: 2.5;
line-height Label, Span Dvojité | initial line-height: 1.8;
margin View Tloušťka | initial margin: 6 12;
margin-left View Tloušťka | initial margin-left: 3;
margin-top View Tloušťka | initial margin-top: 2;
margin-right View Tloušťka | initial margin-right: 1;
margin-bottom View Tloušťka | initial margin-bottom: 6;
max-lines Label Int | initial max-lines: 2;
min-height VisualElement Dvojité | initial min-height: 50;
min-width VisualElement Dvojité | initial min-width: 112;
opacity VisualElement Dvojité | initial opacity: .3;
order VisualElement Int | initial order: -1;
padding Button, ImageButton, Layout, Page Tloušťka | initial padding: 6 12 12;
padding-left Button, ImageButton, Layout, Page Dvojité | initial padding-left: 3;
padding-top Button, ImageButton, Layout, Page Dvojité | initial padding-top: 4;
padding-right Button, ImageButton, Layout, Page Dvojité | initial padding-right: 2;
padding-bottom Button, ImageButton, Layout, Page Dvojité | initial padding-bottom: 6;
position FlexLayout relative | absolute | initial position: absolute;
row-gap Grid Dvojité | initial row-gap: 12;
text-align Entry, EntryCell, Label, SearchBar left | top | right | bottom | start | center | middle | end | initial. left a right měli byste se vyhnout v prostředích se zprava doleva. text-align: right;
text-decoration Label, Span none | underline | strikethrough | line-through | initial text-decoration: underline, line-through;
text-transform Button,Editor, Entry, Label, SearchBar, SearchHandler none | default | uppercase | lowercase | initial text-transform: uppercase;
transform VisualElement none, rotate, rotateX, rotateY, scale, scaleX, scaleY, translate, translateX, translateY, initial transform: rotate(180), scaleX(2.5);
transform-origin VisualElement double, double | initial transform-origin: 7.5, 12.5;
vertical-align Label left | top | right | bottom | start | center | middle | end | initial vertical-align: bottom;
visibility VisualElement true | visible | false | hidden | collapse | initial visibility: hidden;
width VisualElement Dvojité | initial min-width: 320;

Poznámka

initial je platná hodnota pro všechny vlastnosti. Vymaže hodnotu (obnoví výchozí hodnotu), která byla nastavena z jiného stylu.

V současné době nejsou podporovány následující vlastnosti:

  • all: initial.
  • Vlastnosti rozložení (pole nebo mřížka).
  • Zkrácené vlastnosti, například font, a border.

Navíc neexistuje žádná inherit hodnota, takže dědičnost není podporovaná. Proto nemůžete například nastavit font-size vlastnost v rozložení a očekávat, že všechny Label instance v rozložení zdědí hodnotu. Jedinou výjimkou je direction vlastnost, která má výchozí hodnotu inherit.

Prvky cílení Span mají známý problém, který brání tomu, aby byly cílem stylů CSS jak element, tak názvem (pomocí symbolu # ). Element Span je odvozen od GestureElement, který nemá StyleClass vlastnost tak spans nepodporuje css třídy cílení. Další informace naleznete v tématu Nejde použít styl css pro ovládací prvek Span.

Xamarin.Forms specifické vlastnosti

Podporují se také následující Xamarin.Forms specifické vlastnosti CSS (ve sloupci Hodnoty jsou typy kurzíva, zatímco řetězcové literály jsou gray):

Vlastnost Platí pro Hodnoty Příklad
-xf-bar-background-color NavigationPage, TabbedPage Barev | initial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPage, TabbedPage Barev | initial -xf-bar-text-color: gray
-xf-horizontal-scroll-bar-visibility ScrollView default | always | never | initial -xf-horizontal-scroll-bar-visibility: never;
-xf-max-length Entry, Editor, SearchBar Int | initial -xf-max-length: 20;
-xf-max-track-color Slider Barev | initial -xf-max-track-color: red;
-xf-min-track-color Slider Barev | initial -xf-min-track-color: yellow;
-xf-orientation ScrollView, StackLayout horizontal | vertical | both | initial. both je podporován pouze na ScrollView. -xf-orientation: horizontal;
-xf-placeholder Entry, Editor, SearchBar Citovaný text | initial -xf-placeholder: Enter name;
-xf-placeholder-color Entry, Editor, SearchBar Barev | initial -xf-placeholder-color: green;
-xf-spacing StackLayout Dvojité | initial -xf-spacing: 8;
-xf-thumb-color Slider, Switch Barev | initial -xf-thumb-color: limegreen;
-xf-vertical-scroll-bar-visibility ScrollView default | always | never | initial -xf-vertical-scroll-bar-visibility: always;
-xf-vertical-text-alignment Label start | center | end | initial -xf-vertical-text-alignment: end;
-xf-visual VisualElement Řetězec | initial -xf-visual: material;

Xamarin.Forms Vlastnosti specifické pro prostředí

Podporují se také následující Xamarin.Forms vlastnosti CSS pro prostředí (ve sloupci Hodnoty jsou typy kurzíva, zatímco řetězcové literály jsou gray):

Vlastnost Platí pro Hodnoty Příklad
-xf-flyout-background Shell Barev | initial -xf-flyout-background: red;
-xf-shell-background Element Barev | initial -xf-shell-background: green;
-xf-shell-disabled Element Barev | initial -xf-shell-disabled: blue;
-xf-shell-foreground Element Barev | initial -xf-shell-foreground: yellow;
-xf-shell-tabbar-background Element Barev | initial -xf-shell-tabbar-background: white;
-xf-shell-tabbar-disabled Element Barev | initial -xf-shell-tabbar-disabled: black;
-xf-shell-tabbar-foreground Element Barev | initial -xf-shell-tabbar-foreground: gray;
-xf-shell-tabbar-title Element Barev | initial -xf-shell-tabbar-title: lightgray;
-xf-shell-tabbar-unselected Element Barev | initial -xf-shell-tabbar-unselected: cyan;
-xf-shell-title Element Barev | initial -xf-shell-title: teal;
-xf-shell-unselected Element Barev | initial -xf-shell-unselected: limegreen;

Barva

Podporují se následující color hodnoty:

  • X11barvy, které odpovídají barvám CSS, předem definovaným barvám UPW a Xamarin.Forms barvám. Všimněte si, že tyto barevné hodnoty nerozlišují malá a velká písmena.
  • šestnáctkové barvy: #rgb, #argb, #rrggbb#aarrggbb
  • rgb barvy: rgb(255,0,0), rgb(100%,0%,0%). Hodnoty jsou v rozsahu 0–255 nebo 0–100 %.
  • rgba barvy: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). Hodnota neprůhlednosti je v rozsahu 0,0 až 1,0.
  • hsl barvy: hsl(120, 100%, 50%). Hodnota h je v rozsahu 0 až 360, zatímco s a l jsou v rozsahu 0%-100%.
  • barvy hsla: hsla(120, 100%, 50%, .8). Hodnota neprůhlednosti je v rozsahu 0,0 až 1,0.

Tloušťka

Jedna, dvě, tři nebo čtyři thickness hodnoty jsou podporovány, přičemž každá je oddělená prázdným znakem:

  • Jedna hodnota označuje jednotnou tloušťku.
  • Dvě hodnoty označují svislou tloušťku a pak vodorovnou tloušťku.
  • Tři hodnoty označují nahoře, pak vodorovné (vlevo a vpravo) a pak tloušťku dolního okraje.
  • Čtyři hodnoty označují horní, pak vpravo, pak dole a pak levou tloušťku.

Poznámka

Hodnoty CSS thickness se liší od hodnot XAML Thickness . Například v XAML dvouhodnotová hodnota Thickness označuje vodorovnou a svislou tloušťku, zatímco čtyřhodnotová hodnota Thickness označuje vlevo, pak nahoře, pak vpravo a pak dole tloušťku. Kromě toho jsou hodnoty XAML Thickness oddělené čárkami.

NamedSize

Podporují se následující hodnoty nerozlišující namedsize malá a malá písmena:

  • default
  • micro
  • small
  • medium
  • large

Přesný význam každé namedsize hodnoty je závislý na platformě a závislé na zobrazení.

Functions

Lineární a paprskové přechody lze zadat pomocí linear-gradient() funkcí CSS.radial-gradient() Výsledek těchto funkcí by měl být přiřazen vlastnosti background ovládacího prvku.

CSS v Xamarin.Forms Xamarin.University

Xamarin.Forms 3.0 Css video