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

Download Sample Stažení ukázky

podporuje stylování vizuální prvky pomocí šablony stylů CSS (CSS).

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. V případě, že je v bloku více deklarací, je jako oddělovač vložena střední dvojtečka. Následující příklad kódu ukazuje některé z Xamarin.Forms odpovídajících šablon 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;
}

V nástroji Xamarin.Forms jsou šablony stylů CSS analyzovány a vyhodnocovány za běhu, nikoli během kompilace a šablony stylů jsou při použití znovu analyzovány.

Poznámka

V současné době nelze všechny styly, které lze použít s stylem XAML, provádět pomocí šablon stylů CSS. Styly XAML lze však použít k doplnění šablon stylů CSS pro vlastnosti, které aktuálně nejsou podporovány nástrojem Xamarin.Forms . Další informace o stylech XAML naleznete v tématu Styling Xamarin.Forms Apps using XAML Styles .

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

MonkeyApp Main Page with CSS styling

MonkeyApp Detail Page with CSS styling

Používání šablon stylů

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

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

Načítání předlohy se styly

Existuje několik přístupů, které lze použít k načtení předlohy se styly.

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 načíst a analyzovat StyleSheet třídou před přidáním do ResourceDictionary :

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

StyleSheet.SourceVlastnost určuje šablonu stylů jako identifikátor URI relativně k umístění ohraničujícího souboru XAML nebo relativní ke kořenu projektu, pokud identifikátor URI začíná na / .

Upozornění

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

Alternativně může být šablona stylů načtena a analyzována s StyleSheet třídou, před přidáním do a, tak, že ji zařadíte do ResourceDictionaryCDATA oddílu:

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

Další informace o slovnících Resources najdete v tématu slovníky prostředků.

C#

V jazyce C# může být šablona stylů načtena z StringReader a přidána do ResourceDictionary :

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

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

Argument StyleSheet.FromReader metody je TextReader , který má číst šablonu stylů.

Výběr elementů a aplikování vlastností

Šablona stylů CSS používá k určení prvků, které se mají zaměřit, selektory. Styly s vyhovujícími selektory se v pořadí podle definice aplikují po sobě. Styly definované na konkrétní položce se vždycky aplikují jako poslední. Další informace o podporovaných selektorech naleznete v tématu Reference k selektoru.

Šablona stylů CSS používá k výběru stylu vybraný prvek vlastnosti. Každá vlastnost má sadu možných hodnot a některé vlastnosti mohou ovlivnit jakýkoli typ elementu, zatímco ostatní se vztahují na skupiny prvků. Další informace o podporovaných vlastnostech naleznete v tématu Reference k vlastnostem.

Podřízené šablony stylů vždy přepíšou nadřazené šablony stylů, pokud nastavují stejné vlastnosti. Proto jsou při použití stylů, které nastavují stejné vlastnosti, dodržena následující pravidla přednosti:

  • Styl definovaný v prostředcích aplikace bude přepsán stylem definovaným v prostředcích stránky, pokud nastaví stejné vlastnosti.
  • Styl definovaný v prostředcích stránky bude přepsán stylem definovaným v prostředcích ovládacího prvku, pokud nastaví stejné vlastnosti.
  • Styl definovaný v prostředcích aplikace bude přepsán stylem definovaným v prostředcích ovládacího prvku, pokud nastaví stejné vlastnosti.

Důležité

Proměnné CSS nejsou podporovány.

Výběr elementů podle typu

Prvky ve vizuálním stromu lze vybrat podle typu s selektorem bez rozlišení velkých a malých písmen element :

stacklayout {
    margin: 20;
}

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

Poznámka

elementSelektor neidentifikuje podtřídy zadaného typu.

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

Prvky ve vizuálním stromu mohou být vybrány podle základní třídy s selektorem malých a velkých písmen ^base :

^contentpage {
    background-color: lightgray;
}

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

Poznámka

^baseSelektor je specifický pro Xamarin.Forms , a není součástí specifikace CSS.

Výběr prvku podle názvu

Jednotlivé prvky ve vizuálním stromu lze vybrat pomocí selektoru s rozlišováním malých a velkých písmen #id :

#listView {
    background-color: lightgray;
}

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

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

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

Prvky s konkrétním atributem třídy lze vybrat pomocí selektoru s rozlišováním malých a velkých písmen .class :

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

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

Třída šablony stylů CSS může být přiřazena elementu XAML nastavením StyleClass vlastnosti prvku na název třídy CSS. Proto v následujícím příkladu XAML jsou styly definované .detailPageTitle třídou přiřazeny prvnímu Label , zatímco styly definované .detailPageSubtitle třídou jsou přiřazeny k druhému 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 elementů

Podřízené elementy ve vizuálním stromu lze vybrat s selektorem bez rozlišení velkých a malých písmen element element :

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

Tento selektor identifikuje všechny Image prvky, které jsou podřízenými ListView prvky, a nastaví jejich výšku a šířku na 60. Proto v následujícím příkladu XAML listview image selektoru identifikuje prvek Image , který je podřízený objektu ListView , a nastaví jeho 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

element elementSelektor nevyžaduje, aby podřízený element byl element element podřízeným objektu Parent – podřízený element může mít jinou nadřazenou položku. K výběru dojde za předpokladu, že nadřazený prvek je určený jako první.

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

Přímé podřízené elementy ve vizuálním stromu lze vybrat s selektorem bez rozlišení velkých a malých písmen element>element :

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

Tento selektor identifikuje všechny Image prvky, které jsou přímými podřízenými StackLayout prvky, a nastaví jejich výšku a šířku na 200. Proto v následujícím příkladu XAML stacklayout>image selektoru identifikuje prvek Image , který je přímým podřízeným prvku StackLayout , 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

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

Odkaz na selektor

Následující selektory šablon stylů CSS podporují Xamarin.Forms :

Volič Příklad Description
.class .header Vybere všechny prvky s StyleClass vlastností obsahující ' header '. Všimněte si, že tento selektor rozlišuje velká a malá písmena.
#id #email Vybere všechny prvky s StyleId nastavením na email . Pokud StyleId není nastavené, zálohujte na x:Name . Při použití XAML x:Name je upřednostňováno StyleId . Všimněte si, že tento selektor rozlišuje 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 rozlišuje velká a malá písmena.
^base ^contentpage Vybere všechny prvky ContentPage jako základní třídu, včetně ContentPage sebe samé. Všimněte si, že tento selektor rozlišuje velká a malá písmena 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 rozlišuje velká a malá písmena.
element element stacklayout label Vybere všechny Label prvky uvnitř StackLayout . Všimněte si, že tento selektor rozlišuje velká a malá písmena.
element>element stacklayout>label Vybere všechny Label elementy s StackLayout přímým nadřazeným objektem. Všimněte si, že tento selektor rozlišuje velká a malá písmena.
element+element label+entry Vybere všechny Entry prvky přímo za Label . Všimněte si, že tento selektor rozlišuje velká a malá písmena.
element~element label~entry Vybere všechny Entry prvky předcházejí Label . Všimněte si, že tento selektor rozlišuje velká a malá písmena.

Styly s vyhovujícími selektory se v pořadí podle definice aplikují po sobě. Styly definované na konkrétní položce se vždycky aplikují jako poslední.

Tip

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

Následující selektory nejsou aktuálně podporovány:

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

Poznámka

Přepsání specifičnosti a specifičnosti nejsou podporována.

Odkaz na vlastnost

Následující vlastnosti šablon stylů CSS jsou podporovány nástrojem Xamarin.Forms (ve sloupci Xamarin.Forms jsou typy kurzívou, zatímco řetězcové literály jsou ):

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 barevnýchinitial background-color: springgreen;
background-image Page řetezceinitial background-image: bg.png;
border-color Button, Frame, ImageButton barevnýchinitial border-color: #9acd32;
border-radius BoxView, Button, Frame, ImageButton klepatinitial border-radius: 10;
border-width Button, ImageButton klepatinitial border-width: .5;
color ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker barevnýchinitial color: rgba(255, 0, 0, 0.3);
column-gap Grid klepatinitial 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 floatauto | initial . Navíc lze pomocí znaménka zadat procento v rozsahu 0 až 100% % . flex-basis: 25%;
flex-grow VisualElement Plovákinitial flex-grow: 1.5;
flex-shrink VisualElement Plovákinitial 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 řetezceinitial font-family: Consolas;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span typ Doublenamedsizeinitial font-size: 12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span bold | italic | initial font-style: bold;
height VisualElement klepatinitial 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 klepatinitial letter-spacing: 2.5;
line-height Label, Span klepatinitial line-height: 1.8;
margin View silnějšíinitial margin: 6 12;
margin-left View silnějšíinitial margin-left: 3;
margin-top View silnějšíinitial margin-top: 2;
margin-right View silnějšíinitial margin-right: 1;
margin-bottom View silnějšíinitial margin-bottom: 6;
max-lines Label hmotinitial max-lines: 2;
min-height VisualElement klepatinitial min-height: 50;
min-width VisualElement klepatinitial min-width: 112;
opacity VisualElement klepatinitial opacity: .3;
order VisualElement hmotinitial order: -1;
padding Button, ImageButton, Layout, Page silnějšíinitial padding: 6 12 12;
padding-left Button, ImageButton, Layout, Page klepatinitial padding-left: 3;
padding-top Button, ImageButton, Layout, Page klepatinitial padding-top: 4;
padding-right Button, ImageButton, Layout, Page klepatinitial padding-right: 2;
padding-bottom Button, ImageButton, Layout, Page klepatinitial padding-bottom: 6;
position FlexLayout relative | absolute | initial position: absolute;
row-gap Grid klepatinitial row-gap: 12;
text-align Entry, EntryCell, Label, SearchBar left | top | right | bottom | start | center | middle | end | initial. left a je right třeba se vyhnout v prostředích se zápisem 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 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 klepatinitial min-width: 320;

Poznámka

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

V tuto chvíli nejsou podporovány následující vlastnosti:

  • all: initial.
  • Vlastnosti rozložení (box nebo Grid).
  • Sdružené vlastnosti, například font , a border .

Kromě toho neexistuje žádná inherit hodnota, takže dědění není podporováno. 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 .

Cílení Span elementů se známým problémem, který znemožňuje, aby se zavedly cíle stylů CSS pomocí elementu i názvu (pomocí # symbolu). SpanElement je odvozen z GestureElement , který nemá StyleClass vlastnost, takže rozsahy nepodporují cílení na třídy CSS. Další informace najdete v tématu Xamarin. Forms /issues/5979 "data-LINKTYPE =" external ">nemůžete použít styly stylů CSS pro ovládací prvek span .

Xamarin.Forms specifické vlastnosti

Xamarin.FormsPodporovány jsou také následující specifické vlastnosti šablony stylů CSS (ve sloupci Xamarin.Forms typy jsou kurzívou, zatímco řetězcové literály jsou ):

Vlastnost Platí pro Hodnoty Příklad
-xf-bar-background-color NavigationPage, TabbedPage barevnýchinitial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPage, TabbedPage barevnýchinitial -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 hmotinitial -xf-max-length: 20;
-xf-max-track-color Slider barevnýchinitial -xf-max-track-color: red;
-xf-min-track-color Slider barevnýchinitial -xf-min-track-color: yellow;
-xf-orientation ScrollView, StackLayout horizontal | vertical | both | initial. both je podporován pouze v ScrollView . -xf-orientation: horizontal;
-xf-placeholder Entry, Editor, SearchBar text v uvozovkáchinitial -xf-placeholder: Enter name;
-xf-placeholder-color Entry, Editor, SearchBar barevnýchinitial -xf-placeholder-color: green;
-xf-spacing StackLayout klepatinitial -xf-spacing: 8;
-xf-thumb-color Slider, Switch barevnýchinitial -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 řetezceinitial -xf-visual: material;

Xamarin.Forms Vlastnosti specifické pro prostředí

Xamarin.FormsPodporovány jsou také následující vlastnosti šablony stylů CSS specifické pro prostředí (ve sloupci Xamarin.Forms jsou typy kurzívou, zatímco řetězcové literály jsou ):

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

Barva

colorPodporovány jsou následující hodnoty:

  • X11X11, které odpovídají barvám CSS, předem definovaným barvám UWP a Xamarin.Forms barvám. Všimněte si, že tyto hodnoty barev rozlišují malá a velká písmena.
  • šestnáctkové barvy: #rgb , #argb , #rrggbb , #aarrggbb
  • barvy RGB: 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 od 0,0 do 1,0.
  • barvy HSL: hsl(120, 100%, 50%) . Hodnota h je v rozsahu 0-360, zatímco s a l jsou v rozsahu 0% až 100%.
  • HSLA barvy: hsla(120, 100%, 50%, .8) . Hodnota neprůhlednosti je v rozsahu od 0,0 do 1,0.

Tloušťka

Je podporována jedna, dvě, tři nebo čtyři thickness hodnoty, každou oddělenou mezerou:

  • Jedna hodnota označuje jednotnou tloušťku.
  • Dvě hodnoty označují svislou a vodorovnou tloušťku.
  • Tři hodnoty udávají horní, vodorovnou (levou a pravou) a spodní tloušťku.
  • Čtyři hodnoty udávají horní, pravý, dolní a levou tloušťku.

Poznámka

thicknessHodnoty CSS se liší od Thickness hodnot XAML. Například v jazyce XAML se dvě hodnota Thickness označuje vodorovná svislá tloušťka, zatímco čtyři hodnoty Thickness označují levou, horní a pravou a spodní tloušťku. Hodnoty XAML jsou navíc odděleny Thickness čárkami.

NamedSize

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

  • default
  • micro
  • small
  • medium
  • large

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

Funkce

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

Šablony stylů CSS v Xamarin.Forms nástroji Xamarin. University

video šablony stylů 3,0