Tworzenie Xamarin.Forms stylów aplikacji przy użyciu kaskadowych arkuszy stylów (CSS)
Xamarin.Forms obsługuje style elementów wizualizacji przy użyciu kaskadowych arkuszy stylów (CSS).
Xamarin.Forms aplikacje można stylować przy użyciu arkuszy CSS. Arkusz stylów składa się z listy reguł, z każdą regułą składającą się z co najmniej jednego selektora i bloku deklaracji. Blok deklaracji składa się z listy deklaracji w nawiasach klamrowych, z każdą deklaracją składającą się z właściwości, dwukropka i wartości. Jeśli w bloku znajduje się wiele deklaracji, średnik jest wstawiany jako separator. Poniższy przykład kodu przedstawia zgodny Xamarin.Forms kod 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;
}
W Xamarin.Formsprogramie arkusze stylów CSS są analizowane i oceniane w czasie wykonywania, a nie w czasie kompilacji, a arkusze stylów są ponownie analizowane w użyciu.
Uwaga
Obecnie nie można wykonać wszystkich stylów, które są możliwe przy użyciu stylów XAML. Jednak style XAML mogą służyć do uzupełnienia css dla właściwości, które są obecnie nieobsługiwane przez Xamarin.Forms. Aby uzyskać więcej informacji na temat stylów XAML, zobacz Styling Apps using XAML Styles (Stylowanie Xamarin.Forms aplikacji przy użyciu stylów XAML).
W przykładzie pokazano, jak używać arkuszy CSS do tworzenia stylu prostej aplikacji i przedstawiono je na poniższych zrzutach ekranu:
Korzystanie z arkusza stylów
Proces dodawania arkusza stylów do rozwiązania jest następujący:
- Dodaj pusty plik CSS do projektu biblioteki .NET Standard.
- Ustaw akcję kompilacji pliku CSS na EmbeddedResource.
Ładowanie arkusza stylów
Istnieje wiele podejść, których można użyć do załadowania arkusza stylów.
Uwaga
Obecnie nie można zmienić arkusza stylów w czasie wykonywania i zastosować nowy arkusz stylów.
XAML
Arkusz stylów można załadować i przeanalizować z StyleSheet
klasą przed dodaniu do klasy ResourceDictionary
:
<Application ...>
<Application.Resources>
<StyleSheet Source="/Assets/styles.css" />
</Application.Resources>
</Application>
Właściwość StyleSheet.Source
określa arkusz stylów jako identyfikator URI względem lokalizacji otaczającego pliku XAML lub względem katalogu głównego projektu, jeśli identyfikator URI zaczyna się od /
.
Ostrzeżenie
Nie można załadować pliku CSS, jeśli jego akcja kompilacji nie jest ustawiona na EmbeddedResource.
Alternatywnie arkusz stylów można załadować i przeanalizować z StyleSheet
klasą ResourceDictionary
, zanim zostanie dodany do klasy , tworząc go w CDATA
sekcji:
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet>
<![CDATA[
^contentpage {
background-color: lightgray;
}
]]>
</StyleSheet>
</ContentPage.Resources>
...
</ContentPage>
Aby uzyskać więcej informacji na temat słowników zasobów, zobacz Słowniki zasobów.
C#
W języku C# arkusz stylów można załadować z obiektu StringReader
i dodany do elementu ResourceDictionary
:
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 jest TextReader
to, który odczytał arkusz stylów.
Wybieranie elementów i stosowanie właściwości
Arkusz CSS używa selektorów do określania elementów docelowych. Style z pasującymi selektorami są stosowane kolejno w kolejności definicji. Style zdefiniowane na określonym elemencie są zawsze stosowane jako ostatnie. Aby uzyskać więcej informacji na temat obsługiwanych selektorów, zobacz Dokumentacja selektora.
Arkusz CSS używa właściwości do stylu wybranego elementu. Każda właściwość ma zestaw możliwych wartości, a niektóre właściwości mogą mieć wpływ na dowolny typ elementu, podczas gdy inne mają zastosowanie do grup elementów. Aby uzyskać więcej informacji na temat obsługiwanych właściwości, zobacz Odwołanie do właściwości.
Arkusze stylów podrzędnych zawsze zastępują nadrzędne arkusze stylów, jeśli ustawiają te same właściwości. W związku z tym następujące reguły pierwszeństwa są przestrzegane podczas stosowania stylów, które ustawiają te same właściwości:
- Styl zdefiniowany w zasobach aplikacji zostanie zastąpiony przez styl zdefiniowany w zasobach strony, jeśli ustawi te same właściwości.
- Styl zdefiniowany w zasobach strony zostanie zastąpiony przez styl zdefiniowany w zasobach sterujących, jeśli ustawi te same właściwości.
- Styl zdefiniowany w zasobach aplikacji zostanie zastąpiony przez styl zdefiniowany w zasobach sterujących, jeśli ustawi te same właściwości.
Ważne
Zmienne CSS nie są obsługiwane.
Wybieranie elementów według typu
Elementy w drzewie wizualizacji można wybrać według typu z selektorem bez uwzględniania element
wielkości liter:
stacklayout {
margin: 20;
}
Ten selektor identyfikuje wszystkie StackLayout
elementy na stronach korzystających z arkusza stylów i ustawia ich marginesy na jednolitą grubość 20.
Uwaga
Selektor element
nie identyfikuje podklas określonego typu.
Wybieranie elementów według klasy bazowej
Elementy w drzewie wizualizacji można wybrać za pomocą klasy bazowej z selektorem bez uwzględniania ^base
wielkości liter:
^contentpage {
background-color: lightgray;
}
Ten selektor identyfikuje wszystkie ContentPage
elementy, które używają arkusza stylów, i ustawia kolor tła na lightgray
.
Uwaga
Selektor ^base
jest specyficzny dla Xamarin.Formselementu i nie jest częścią specyfikacji CSS.
Wybieranie elementu według nazwy
Poszczególne elementy w drzewie wizualizacji można wybrać za pomocą selektora uwzględniającego wielkość liter #id
:
#listView {
background-color: lightgray;
}
Ten selektor identyfikuje element, którego StyleId
właściwość jest ustawiona na listView
. Jeśli StyleId
jednak właściwość nie jest ustawiona, selektor powróci do użycia x:Name
elementu . W związku z tym w poniższym przykładzie #listView
XAML selektor zidentyfikuje ListView
, którego x:Name
atrybut jest ustawiony na listView
, i ustawi kolor tła na lightgray
.
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Assets/styles.css" />
</ContentPage.Resources>
<StackLayout>
<ListView x:Name="listView" ...>
...
</ListView>
</StackLayout>
</ContentPage>
Wybieranie elementów z określonym atrybutem klasy
Elementy z określonym atrybutem klasy można wybrać za pomocą selektora uwzględniającego .class
wielkość liter:
.detailPageTitle {
font-style: bold;
font-size: medium;
text-align: center;
}
.detailPageSubtitle {
text-align: center;
font-style: italic;
}
Klasę CSS można przypisać do elementu XAML, ustawiając StyleClass
właściwość elementu na nazwę klasy CSS. W związku z tym w poniższym przykładzie XAML style zdefiniowane przez klasę .detailPageTitle
są przypisywane do pierwszego Label
obiektu , podczas gdy style zdefiniowane przez .detailPageSubtitle
klasę są przypisywane do drugiego Label
elementu .
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Assets/styles.css" />
</ContentPage.Resources>
<ScrollView>
<StackLayout>
<Label ... StyleClass="detailPageTitle" />
<Label ... StyleClass="detailPageSubtitle"/>
...
</StackLayout>
</ScrollView>
</ContentPage>
Wybieranie elementów podrzędnych
Elementy podrzędne w drzewie wizualizacji można wybrać za pomocą selektora bez uwzględniania element element
wielkości liter:
listview image {
height: 60;
width: 60;
}
Ten selektor identyfikuje wszystkie Image
elementy podrzędne ListView
elementów i ustawia ich wysokość i szerokość na 60. W związku z tym w poniższym przykładzie listview image
XAML selektor zidentyfikuje Image
element podrzędny ListView
obiektu i ustawia jego wysokość i szerokość 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>
Uwaga
Selektor element element
nie wymaga, aby element podrzędny był bezpośrednim elementem podrzędnym elementu nadrzędnego — element podrzędny może mieć inny element nadrzędny. Wybór występuje pod warunkiem, że element nadrzędny jest określonym pierwszym elementem.
Wybieranie bezpośrednich elementów podrzędnych
Bezpośrednie elementy podrzędne w drzewie wizualizacji można wybrać za pomocą selektora bez uwzględniania element>element
wielkości liter:
stacklayout>image {
height: 200;
width: 200;
}
Ten selektor identyfikuje wszystkie Image
elementy, które są bezpośrednimi elementami podrzędnymi StackLayout
elementów, i ustawia ich wysokość i szerokość na 200. W związku z tym w poniższym przykładzie stacklayout>image
XAML selektor zidentyfikuje Image
element podrzędny StackLayout
obiektu , a następnie ustawia jego wysokość i szerokość na 200.
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Assets/styles.css" />
</ContentPage.Resources>
<ScrollView>
<StackLayout>
...
<Image ... />
...
</StackLayout>
</ScrollView>
</ContentPage>
Uwaga
Selektor element>element
wymaga, aby element podrzędny był bezpośrednim elementem podrzędnym elementu nadrzędnego.
Dokumentacja selektora
Następujące selektory CSS są obsługiwane przez program Xamarin.Forms:
Selektor | Przykład | opis |
---|---|---|
.class |
.header |
Wybiera wszystkie elementy z właściwością zawierającą StyleClass "nagłówek". Należy pamiętać, że w selektorze jest uwzględniana wielkość liter. |
#id |
#email |
Wybiera wszystkie elementy z ustawioną wartością StyleId email . Jeśli StyleId nie jest ustawiona, powrót do elementu x:Name . W przypadku korzystania z języka XAML x:Name preferowane jest użycie elementu StyleId . Należy pamiętać, że w selektorze jest uwzględniana wielkość liter. |
* |
* |
Wybiera wszystkie elementy. |
element |
label |
Wybiera wszystkie elementy typu Label , ale nie podklasy. Należy pamiętać, że ten selektor jest niewrażliwy na wielkość liter. |
^base |
^contentpage |
Wybiera wszystkie elementy z ContentPage jako klasą bazową, w tym ContentPage samą klasą. Należy pamiętać, że ten selektor jest niewrażliwy na wielkość liter i nie jest częścią specyfikacji CSS. |
element,element |
label,button |
Wybiera wszystkie Button elementy i wszystkie Label elementy. Należy pamiętać, że ten selektor jest niewrażliwy na wielkość liter. |
element element |
stacklayout label |
Wybiera wszystkie Label elementy wewnątrz elementu StackLayout . Należy pamiętać, że ten selektor jest niewrażliwy na wielkość liter. |
element>element |
stacklayout>label |
Wybiera wszystkie Label elementy z elementem StackLayout nadrzędnym bezpośrednim. Należy pamiętać, że ten selektor jest niewrażliwy na wielkość liter. |
element+element |
label+entry |
Wybiera wszystkie Entry elementy bezpośrednio po elem.Label Należy pamiętać, że ten selektor jest niewrażliwy na wielkość liter. |
element~element |
label~entry |
Wybiera wszystkie Entry elementy poprzedzone elementem Label . Należy pamiętać, że ten selektor jest niewrażliwy na wielkość liter. |
Style z pasującymi selektorami są stosowane kolejno w kolejności definicji. Style zdefiniowane na określonym elemencie są zawsze stosowane jako ostatnie.
Napiwek
Selektory można łączyć bez ograniczeń, na przykład StackLayout>ContentView>label.email
.
Następujące selektory są obecnie nieobsługiwane:
[attribute]
@media
i@supports
:
i::
Uwaga
Specyfika i przesłonięcia specyficzne są nieobsługiwane.
Odwołanie do właściwości
Następujące właściwości CSS są obsługiwane przez Xamarin.Forms (w kolumnie Wartości typy są kursywą, a literały ciągu to gray
):
Właściwości | Dotyczy | Wartości | Przykład |
---|---|---|---|
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 |
Kolor | initial |
background-color: springgreen; |
background-image |
Page |
string | initial |
background-image: bg.png; |
border-color |
Button , , Frame ImageButton |
Kolor | initial |
border-color: #9acd32; |
border-radius |
BoxView , , Button , , Frame ImageButton |
double | initial |
border-radius: 10; |
border-width |
Button , ImageButton |
double | initial |
border-width: .5; |
color |
ActivityIndicator , BoxView , , , DatePicker Label CheckBox Entry Switch Editor Picker ProgressBar SearchBar Button TimePicker |
Kolor | 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 |
zmiennoprzecinkowyinitial | auto | . Ponadto można określić wartość procentową w zakresie od 0% do 100% przy użyciu % znaku . |
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 , Label Entry , Picker , , TimePicker SearchBar Span |
string | initial |
font-family: Consolas; |
font-size |
Button , DatePicker , , Editor , Label Entry , Picker , , TimePicker SearchBar Span |
double | namedsize | initial |
font-size: 12; |
font-style |
Button , DatePicker , , Editor , Label Entry , Picker , , TimePicker SearchBar Span |
bold | italic | initial |
font-style: bold; |
height |
VisualElement |
double | 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 , , , Label Span Entry Picker SearchBar SearchHandler Editor TimePicker |
double | initial |
letter-spacing: 2.5; |
line-height |
Label , Span |
double | initial |
line-height: 1.8; |
margin |
View |
grubość | initial |
margin: 6 12; |
margin-left |
View |
grubość | initial |
margin-left: 3; |
margin-top |
View |
grubość | initial |
margin-top: 2; |
margin-right |
View |
grubość | initial |
margin-right: 1; |
margin-bottom |
View |
grubość | 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 , , Layout Page |
grubość | initial |
padding: 6 12 12; |
padding-left |
Button , , ImageButton , , Layout Page |
double | initial |
padding-left: 3; |
padding-top |
Button , , ImageButton , , Layout Page |
double | initial |
padding-top: 4; |
padding-right |
Button , , ImageButton , , Layout Page |
double | initial |
padding-right: 2; |
padding-bottom |
Button , , ImageButton , , Layout Page |
double | initial |
padding-bottom: 6; |
position |
FlexLayout |
relative | absolute | initial |
position: absolute; |
row-gap |
Grid |
double | initial |
row-gap: 12; |
text-align |
Entry , , EntryCell , , Label SearchBar |
left | top | right | bottom | start | center | middle | end | initial . left należy right unikać w środowiskach od prawej do lewej. |
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 , , , scale translate translateY rotateY scaleX scaleY translateX rotateX initial |
transform: rotate(180), scaleX(2.5); |
transform-origin |
VisualElement |
podwójna, podwójna | 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 |
min-width: 320; |
Uwaga
initial
jest prawidłową wartością dla wszystkich właściwości. Spowoduje to wyczyszczenie wartości (resetuje wartość domyślną), która została ustawiona z innego stylu.
Następujące właściwości są obecnie nieobsługiwane:
all: initial
.- Właściwości układu (pole lub siatka).
- Właściwości skrótu, takie jak
font
, iborder
.
Ponadto nie inherit
ma żadnej wartości i dlatego dziedziczenie nie jest obsługiwane. W związku z tym nie można na przykład ustawić font-size
właściwości w układzie i oczekiwać, że wszystkie Label
wystąpienia w układzie będą dziedziczyć wartość. Jednym wyjątkiem jest direction
właściwość, która ma wartość inherit
domyślną .
Elementy określania wartości docelowej Span
mają znany problem uniemożliwiający bycie obiektem docelowym stylów CSS zarówno według elementu, jak i nazwy (przy użyciu symbolu #
). Element Span
pochodzi z GestureElement
klasy , która nie ma StyleClass
właściwości , więc zakresy nie obsługują określania wartości docelowych klas CSS. Aby uzyskać więcej informacji, zobacz Nie można zastosować stylów CSS do kontrolki Span.
Xamarin.Forms określone właściwości
Obsługiwane są również następujące konkretne Xamarin.Forms właściwości CSS (w kolumnie Wartości typy są kursywą, a literały ciągu to gray
):
Właściwości | Dotyczy | Wartości | Przykład |
---|---|---|---|
-xf-bar-background-color |
NavigationPage , TabbedPage |
Kolor | initial |
-xf-bar-background-color: teal; |
-xf-bar-text-color |
NavigationPage , TabbedPage |
Kolor | 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 |
Kolor | initial |
-xf-max-track-color: red; |
-xf-min-track-color |
Slider |
Kolor | initial |
-xf-min-track-color: yellow; |
-xf-orientation |
ScrollView , StackLayout |
horizontal | vertical | both | initial . both program jest obsługiwany tylko w obiekcie ScrollView . |
-xf-orientation: horizontal; |
-xf-placeholder |
Entry , , Editor SearchBar |
tekst cytowany | initial |
-xf-placeholder: Enter name; |
-xf-placeholder-color |
Entry , , Editor SearchBar |
Kolor | initial |
-xf-placeholder-color: green; |
-xf-spacing |
StackLayout |
double | initial |
-xf-spacing: 8; |
-xf-thumb-color |
Slider , Switch |
Kolor | 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 |
string | initial |
-xf-visual: material; |
Xamarin.Forms Właściwości specyficzne dla powłoki
Obsługiwane są również następujące Xamarin.Forms właściwości css specyficzne dla powłoki (w kolumnie Wartości typy są kursywą, a literały ciągu to gray
):
Właściwości | Dotyczy | Wartości | Przykład |
---|---|---|---|
-xf-flyout-background |
Shell |
Kolor | initial |
-xf-flyout-background: red; |
-xf-shell-background |
Element |
Kolor | initial |
-xf-shell-background: green; |
-xf-shell-disabled |
Element |
Kolor | initial |
-xf-shell-disabled: blue; |
-xf-shell-foreground |
Element |
Kolor | initial |
-xf-shell-foreground: yellow; |
-xf-shell-tabbar-background |
Element |
Kolor | initial |
-xf-shell-tabbar-background: white; |
-xf-shell-tabbar-disabled |
Element |
Kolor | initial |
-xf-shell-tabbar-disabled: black; |
-xf-shell-tabbar-foreground |
Element |
Kolor | initial |
-xf-shell-tabbar-foreground: gray; |
-xf-shell-tabbar-title |
Element |
Kolor | initial |
-xf-shell-tabbar-title: lightgray; |
-xf-shell-tabbar-unselected |
Element |
Kolor | initial |
-xf-shell-tabbar-unselected: cyan; |
-xf-shell-title |
Element |
Kolor | initial |
-xf-shell-title: teal; |
-xf-shell-unselected |
Element |
Kolor | initial |
-xf-shell-unselected: limegreen; |
Color
Obsługiwane są następujące color
wartości:
X11
kolory, które są zgodne z kolorami CSS, wstępnie zdefiniowanymi kolorami platformy UWP i Xamarin.Forms kolorami. Należy pamiętać, że te wartości kolorów są niewrażliwe na wielkość liter.- Kolory szesnastkowe:
#rgb
,#argb
, ,#rrggbb
#aarrggbb
- kolory rgb:
rgb(255,0,0)
,rgb(100%,0%,0%)
. Wartości znajdują się w zakresie od 0 do 255 lub 0%-100%. - kolory rgba:
rgba(255, 0, 0, 0.8)
,rgba(100%, 0%, 0%, 0.8)
. Wartość nieprzezroczystości znajduje się w zakresie od 0,0 do 1,0. - Kolory hsl:
hsl(120, 100%, 50%)
. Wartość h znajduje się w zakresie od 0 do 360, podczas gdy s i l znajdują się w zakresie 0%-100%. - Kolory hsla:
hsla(120, 100%, 50%, .8)
. Wartość nieprzezroczystości znajduje się w zakresie od 0,0 do 1,0.
Grubość
Obsługiwane są dwie, trzy lub cztery thickness
wartości, z których każda jest oddzielona białym znakiem:
- Pojedyncza wartość wskazuje jednolitą grubość.
- Dwie wartości wskazują pionową, a następnie poziomą grubość.
- Trzy wartości wskazują górną, a następnie poziomą (lewą i prawą), a następnie grubość dolnej.
- Cztery wartości wskazują górną, a następnie prawą, a następnie dolną, a następnie grubość po lewej stronie.
Uwaga
Wartości CSS thickness
różnią się od wartości XAML Thickness
. Na przykład w języku XAML wartość dwuwarta Thickness
wskazuje poziomą, a następnie pionową grubość, a cztery wartości Thickness
wskazują w lewo, a następnie górną, a następnie prawą, a następnie grubość dolną. Ponadto wartości XAML Thickness
są rozdzielane przecinkami.
Nazwany rozmiar
Obsługiwane są następujące wartości bez uwzględniania namedsize
wielkości liter:
default
micro
small
medium
large
Dokładne znaczenie każdej namedsize
wartości jest zależne od platformy i zależne od widoku.
Funkcje
Gradienty liniowe i promieniowe można określić odpowiednio przy użyciu linear-gradient()
funkcji i radial-gradient()
CSS. Wynik tych funkcji należy przypisać do background
właściwości kontrolki.
Arkusz CSS w programie Xamarin.Forms Xamarin.University
Xamarin.Forms 3.0 Klip wideo CSS