Aplikace stylů používající šablony stylů CASCADING
Aplikace .NET Multi-Platform App UI (.NET MAUI) se dají stylovat pomocí šablon stylů CSS (Cascading Style Sheet). Š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í ve složených závorkách, přičemž každá deklarace se skládá z vlastnosti, dvojtečky a hodnoty. Pokud je v bloku více deklarací, vloží se středník jako oddělovač.
Následující příklad ukazuje některé šablony stylů CSS kompatibilní s rozhraním .NET MAUI:
navigationpage {
-maui-bar-background-color: lightgray;
}
^contentpage {
background-color: lightgray;
}
#listView {
background-color: lightgray;
}
stacklayout {
margin: 20;
-maui-spacing: 6;
}
grid {
row-gap: 6;
column-gap: 6;
}
.mainPageTitle {
font-style: bold;
font-size: 14;
}
.mainPageSubtitle {
margin-top: 15;
}
.detailPageTitle {
font-style: bold;
font-size: 14;
text-align: center;
}
.detailPageSubtitle {
text-align: center;
font-style: italic;
}
listview image {
height: 60;
width: 60;
}
stacklayout>image {
height: 200;
width: 200;
}
V .NET MAUI se šablony stylů CSS analyzují a vyhodnocují za běhu, nikoli v době kompilace, a šablony stylů se znovu analyzují při použití.
Důležité
Pomocí šablon stylů CSS není možné plně stylovat aplikaci .NET MAUI. Styly XAML se ale dají použít k doplnění šablon stylů CSS. Další informace o stylech XAML najdete v tématu Aplikace stylů využívající JAZYK XAML.
Využití šablony stylů
Postup přidání šablony stylů do aplikace .NET MAUI je následující:
- Do projektu aplikace .NET MAUI přidejte prázdný soubor CSS. Soubor CSS lze umístit do libovolné složky s doporučenou složkou Resources .
- Nastavte akci sestavení souboru CSS na MauiCss.
Načtení šablony stylů
Existuje řada přístupů, které lze použít k načtení šablony stylů.
Poznámka:
Šablonu stylů není možné změnit za běhu a použít novou šablonu stylů.
Načtení šablony stylů v XAML
Šablonu stylů lze před přidáním StyleSheet
do ResourceDictionarytřídy načíst a parsovat s třídou:
<Application ...>
<Application.Resources>
<StyleSheet Source="/Resources/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á řetězcem /
.
Upozorňující
Soubor CSS se nepodaří načíst, pokud není jeho akce sestavení nastavená na MauiCss.
Případně můžete šablonu stylů načíst a parsovat s StyleSheet
třídou před přidáním do ResourceDictionaryoddílu 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 ve slovníkech zdrojů.
Načtení šablony stylů v jazyce C#
V jazyce C# lze šablonu stylů načíst z StringReader
a přidat do:ResourceDictionary
using Microsoft.Maui.Controls.StyleSheets;
public partial class MyPage : ContentPage
{
public MyPage()
{
InitializeComponent();
using (var reader = new StringReader("^contentpage { background-color: lightgray; }"))
{
this.Resources.Add(StyleSheet.FromReader(reader));
}
}
}
Argumentem metody StyleSheet.FromReader
je TextReader
přečtená šablona stylů.
Výběr prvků a použití vlastností
Šablony stylů CSS používají selektory k určení prvků, které se mají cílit. Styly s odpovídajícími selektory se po sobě po sobě použijí v pořadí definic. Styly definované pro konkrétní položku se vždy použijí jako poslední. Další informace opodporovaných
Šablony stylů CSS používají vlastnosti pro styl vybraného prvku. Každá vlastnost má sadu možných hodnot a některé vlastnosti mohou ovlivnit jakýkoli typ prvku, zatímco jiné platí pro skupiny prvků. Další informace o podporovaných vlastnostech naleznete v referenčních informacích k vlastnostem.
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 řídicích prostředcích, pokud nastaví stejné vlastnosti.
- Styl definovaný v prostředcích aplikace se přepíše stylem definovaným v řídicích prostředcích, pokud nastaví stejné vlastnosti.
Poznámka:
Proměnné CSS nejsou podporovány.
Výběr prvků podle typu
Prvky ve vizuálním stromu je možné vybrat podle typu, který nerozlišuje element
velká a malá písmena:
stacklayout {
margin: 20;
}
Tento selektor identifikuje všechny StackLayout prvky na stránkách, které použí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 stromu vizuálu lze vybrat podle základní třídy s rozlišováním malých a malých písmen ^base
selektorem:
^contentpage {
background-color: lightgray;
}
Tento selektor identifikuje všechny ContentPage prvky, které používají šablonu stylů, a nastaví barvu pozadí na lightgray
.
Poznámka:
Selektor ^base
je specifický pro .NET MAUI a není součástí specifikace CSS.
Výběr elementu podle názvu
Jednotlivé prvky ve vizuálním stromu lze vybrat pomocí selektoru rozlišující malá a velká #id
písmena:
#listView {
background-color: lightgray;
}
Tento selektor identifikuje prvek, jehož StyleId
vlastnost je nastavena na listView
. Pokud StyleId
však vlastnost není nastavena, selektor se vrátí k použití x:Name
prvku. Proto v následujícím příkladu #listView
selektor identifikuje ListView , jehož x:Name
atribut je nastaven na listView
, a nastaví barvu pozadí na lightgray
.
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Resources/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 lze vybrat pomocí selektoru rozlišující malá a velká .class
písmena:
.detailPageTitle {
font-style: bold;
font-size: 14;
text-align: center;
}
.detailPageSubtitle {
text-align: center;
font-style: italic;
}
Třídu CSS lze přiřadit k elementu XAML nastavením StyleClass
vlastnosti elementu na název třídy CSS. Proto v následujícím příkladu jsou styly definované .detailPageTitle
třídou přiřazeny první Label, zatímco styly definované .detailPageSubtitle
třídou jsou přiřazeny druhé Label.
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Resources/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 lze vybrat pomocí selektoru nerozlišující malá element element
a velká písmena:
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. Proto v následujícím příkladu listview image
XAML selektor identifikuje Image podřízenou položku a nastaví jeho výšku ListViewa šířku na 60.
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Resources/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 nadřazený prvek je zadaným prvním prvkem.
Výběr přímých podřízených prvků
Přímé podřízené prvky ve vizuálním stromu lze vybrat pomocí selektoru nerozlišující malá element>element
a velká písmena:
stacklayout>image {
height: 200;
width: 200;
}
Tento selektor identifikuje všechny Image prvky, které jsou přímými podřízenými StackLayout prvky prvků, a nastaví jejich výšku a šířku na 200. V následujícím příkladu stacklayout>image
tedy selektor identifikuje Image přímé podřízení objektu StackLayouta nastaví jeho výšku a šířku na 200.
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Resources/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í informace k selektoru
Rozhraní .NET MAUI podporuje následující selektory CSS:
Výběr | Příklad | Popis |
---|---|---|
.class |
.header |
Vybere všechny prvky s vlastností obsahující hlavičku StyleClass . V tomto selektoru se rozlišují malá a velká písmena. |
#id |
#email |
Vybere všechny prvky s nastavenou StyleId na email hodnotu . Pokud StyleId není nastaven, přechádět na x:Name . Při použití XAML x:Name je upřednostňovaný před StyleId . V tomto selektoru se rozlišují malá a velká písmena. |
* |
* |
Vybere všechny prvky. |
element |
label |
Vybere všechny prvky typu Label, ale ne podtřídy. 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é. Tento selektor nerozlišuje malá a velká písmena a není součástí specifikace CSS. |
element,element |
label,button |
Vybere všechny Button prvky a všechny Label prvky. Tento selektor nerozlišuje velká a malá písmena. |
element element |
stacklayout label |
Vybere všechny Label prvky uvnitř objektu StackLayout. Tento selektor nerozlišuje velká a malá písmena. |
element>element |
stacklayout>label |
Vybere všechny Label prvky s StackLayout přímým nadřazeným objektem. Tento selektor nerozlišuje velká a malá písmena. |
element+element |
label+entry |
Vybere všechny Entry prvky přímo za .Label Tento selektor nerozlišuje velká a malá písmena. |
element~element |
label~entry |
Vybere všechny Entry prvky předcházející znaku Label. Tento selektor nerozlišuje velká a malá písmena. |
Styly s odpovídajícími selektory se po sobě po sobě použijí v pořadí definic. Styly definované pro konkrétní položku se vždy použijí jako poslední.
Tip
Selektory lze kombinovat bez omezení, například StackLayout>ContentView>label.email
.
Následující selektory nejsou podporovány:
[attribute]
@media
a@supports
:
a::
Poznámka:
Specifika a přepsání specificity nejsou podporována.
Referenční dokumentace k vlastnostem
Rozhraní .NET MAUI podporuje následující vlastnosti CSS (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 | string | initial |
background-image: bg.png; |
border-color |
Button, , FrameImageButton | Barev | initial |
border-color: #9acd32; |
border-radius |
BoxView, Button, , FrameImageButton | double | initial |
border-radius: 10; |
border-width |
Button, ImageButton | double | initial |
border-width: .5; |
color |
ActivityIndicator, BoxView, , Button, DatePickerCheckBox, EditorSearchBarLabelEntryPickerProgressBar, SwitchTimePicker | Barev | initial |
color: rgba(255, 0, 0, 0.3); |
column-gap |
Grid | double | 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 | plovákinitial | auto | . 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, , EntryPickerSearchBarEditorLabel, , TimePickerSpan | string | initial |
font-family: Consolas; |
font-size |
Button, DatePicker, , EntryPickerSearchBarEditorLabel, , TimePickerSpan | double | initial |
font-size: 12; |
font-style |
Button, DatePicker, , EntryPickerSearchBarEditorLabel, , TimePickerSpan | bold | italic | initial |
font-style: bold; |
height |
VisualElement | double | initial |
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, LabelEntry, PickerSearchBarSearchHandler, , SpanTimePicker | double | initial |
letter-spacing: 2.5; |
line-height |
Label, Span | double | 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 | double | initial |
min-height: 50; |
min-width |
VisualElement | double | initial |
min-width: 112; |
opacity |
VisualElement | double | initial |
opacity: .3; |
order |
VisualElement | int | initial |
order: -1; |
padding |
Button, ImageButton, , LayoutPage | Tloušťka | initial |
padding: 6 12 12; |
padding-left |
Button, ImageButton, , LayoutPage | double | initial |
padding-left: 3; |
padding-top |
Button, ImageButton, , LayoutPage | double | initial |
padding-top: 4; |
padding-right |
Button, ImageButton, , LayoutPage | double | initial |
padding-right: 2; |
padding-bottom |
Button, ImageButton, , LayoutPage | double | initial |
padding-bottom: 6; |
position |
FlexLayout | relative | absolute | initial |
position: absolute; |
row-gap |
Grid | double | initial |
row-gap: 12; |
text-align |
Entry, EntryCell, , LabelSearchBar | left | top | right | bottom | start | center | middle | end | initial . left a right měly by 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, SearchBarSearchHandler | none | default | uppercase | lowercase | initial |
text-transform: uppercase; |
transform |
VisualElement | none , rotate , , rotateX , scale translateX rotateY scaleX scaleY translate , 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 | double | initial |
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.
Následující vlastnosti nejsou podporovány:
all: initial
.- Vlastnosti rozložení (pole nebo mřížka)
- Zkrácené vlastnosti, například
font
, aborder
.
Kromě toho 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
.
Důležité
Span prvky nelze cílit pomocí šablon stylů CSS.
Specifické vlastnosti .NET MAUI
Podporují se také následující vlastnosti CSS specifické pro .NET MAUI (ve sloupci Hodnoty jsou typy kurzíva, zatímco řetězcové literály jsou gray
):
Vlastnost | Platí pro | Hodnoty | Příklad |
---|---|---|---|
-maui-bar-background-color |
NavigationPage, TabbedPage | Barev | initial |
-maui-bar-background-color: teal; |
-maui-bar-text-color |
NavigationPage, TabbedPage | Barev | initial |
-maui-bar-text-color: gray |
-maui-horizontal-scroll-bar-visibility |
ScrollView | default | always | never | initial |
-maui-horizontal-scroll-bar-visibility: never; |
-maui-max-length |
Entry, , EditorSearchBar | int | initial |
-maui-max-length: 20; |
-maui-max-track-color |
Slider | Barev | initial |
-maui-max-track-color: red; |
-maui-min-track-color |
Slider | Barev | initial |
-maui-min-track-color: yellow; |
-maui-orientation |
ScrollView, StackLayout | horizontal | vertical | both | initial . both je podporována pouze v systému ScrollView. |
-maui-orientation: horizontal; |
-maui-placeholder |
Entry, , EditorSearchBar | Citovaný text | initial |
-maui-placeholder: Enter name; |
-maui-placeholder-color |
Entry, , EditorSearchBar | Barev | initial |
-maui-placeholder-color: green; |
-maui-spacing |
StackLayout |
double | initial |
-maui-spacing: 8; |
-maui-thumb-color |
Slider, Switch | Barev | initial |
-maui-thumb-color: limegreen; |
-maui-vertical-scroll-bar-visibility |
ScrollView | default | always | never | initial |
-maui-vertical-scroll-bar-visibility: always; |
-maui-vertical-text-alignment |
Label | start | center | end | initial |
-maui-vertical-text-alignment: end; |
-maui-visual |
VisualElement | string | initial |
-maui-visual: material; |
Specifické vlastnosti prostředí .NET MAUI
Podporují se také následující vlastnosti CSS specifické pro prostředí .NET MAUI (ve sloupci Hodnoty jsou typy kurzíva, zatímco řetězcové literály jsou gray
):
Vlastnost | Platí pro | Hodnoty | Příklad |
---|---|---|---|
-maui-flyout-background |
Shell | Barev | initial |
-maui-flyout-background: red; |
-maui-shell-background |
Element | Barev | initial |
-maui-shell-background: green; |
-maui-shell-disabled |
Element | Barev | initial |
-maui-shell-disabled: blue; |
-maui-shell-foreground |
Element | Barev | initial |
-maui-shell-foreground: yellow; |
-maui-shell-tabbar-background |
Element | Barev | initial |
-maui-shell-tabbar-background: white; |
-maui-shell-tabbar-disabled |
Element | Barev | initial |
-maui-shell-tabbar-disabled: black; |
-maui-shell-tabbar-foreground |
Element | Barev | initial |
-maui-shell-tabbar-foreground: gray; |
-maui-shell-tabbar-title |
Element | Barev | initial |
-maui-shell-tabbar-title: lightgray; |
-maui-shell-tabbar-unselected |
Element | Barev | initial |
-maui-shell-tabbar-unselected: cyan; |
-maui-shell-title |
Element | Barev | initial |
-maui-shell-title: teal; |
-maui-shell-unselected |
Element | Barev | initial |
-maui-shell-unselected: limegreen; |
Color
Podporují se následující color
hodnoty:
X11
barvy, které odpovídají barvám CSS a barvám .NET MAUI. 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–1,0. - hsl barvy:
hsl(120, 100%, 50%)
. Hodnota h je v rozsahu 0–360, zatímco s a l jsou v rozsahu 0%-100%. - hsla barvy:
hsla(120, 100%, 50%, .8)
. Hodnota neprůhlednosti je v rozsahu 0,0–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 a vodorovnou tloušťku.
- Tři hodnoty označují horní a pak vodorovnou (levou a pravou) a pak tloušťku dolního okraje.
- Čtyři hodnoty označují horní, pak vpravo, pak dole a potom levou tloušťku.
Poznámka:
Hodnoty CSS thickness
se liší od hodnot XAML Thickness
. Například v XAML dvouhodnotová Thickness
hodnota označuje vodorovnou a svislou tloušťku, zatímco čtyři hodnoty Thickness
označují vlevo, pak nahoře, pak vpravo a potom dole tloušťku. Kromě toho jsou hodnoty XAML Thickness
oddělené čárkami.
Funkce
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.
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro