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 Labelobiektu , podczas gdy style zdefiniowane przez .detailPageSubtitle klasę są przypisywane do drugiego Labelelementu .

<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 ListViewobiektu 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 StackLayoutobiektu , 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`, , `FrameImageButton`	Kolor \| `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`, , , `DatePickerLabelCheckBoxEntrySwitchEditorPickerProgressBarSearchBarButtonTimePicker`	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`	zmiennoprzecinkowy`initial` \| `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`, `LabelEntry`, `Picker`, , `TimePickerSearchBarSpan`	string \| `initial`	`font-family: Consolas;`
`font-size`	`Button`, `DatePicker`, , `Editor`, `LabelEntry`, `Picker`, , `TimePickerSearchBarSpan`	double \| namedsize \| `initial`	`font-size: 12;`
`font-style`	`Button`, `DatePicker`, , `Editor`, `LabelEntry`, `Picker`, , `TimePickerSearchBarSpan`	`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`, , , `LabelSpanEntryPickerSearchBarSearchHandlerEditorTimePicker`	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`, , `LayoutPage`	grubość \| `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` 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`, , , `SearchBarSearchHandler`	`none` \| `default` \| `uppercase` \| `lowercase` \| `initial`	`text-transform: uppercase;`
`transform`	`VisualElement`	`none`, `rotate`, , , `scaletranslatetranslateYrotateYscaleXscaleYtranslateXrotateXinitial`	`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, i border.

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ść inheritdomyś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 GestureElementklasy , 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`, , `EditorSearchBar`	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`, , `EditorSearchBar`	tekst cytowany \| `initial`	`-xf-placeholder: Enter name;`
`-xf-placeholder-color`	`Entry`, , `EditorSearchBar`	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:

X11kolory, 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

Last updated on 2020-07-28

Udostępnij za pomocą

Tworzenie Xamarin.Forms stylów aplikacji przy użyciu kaskadowych arkuszy stylów (CSS)

Korzystanie z arkusza stylów

Ładowanie arkusza stylów

XAML

C#

Wybieranie elementów i stosowanie właściwości

Wybieranie elementów według typu

Wybieranie elementów według klasy bazowej

Wybieranie elementu według nazwy

Wybieranie elementów z określonym atrybutem klasy

Wybieranie elementów podrzędnych

Wybieranie bezpośrednich elementów podrzędnych

Dokumentacja selektora

Odwołanie do właściwości

Xamarin.Forms określone właściwości

Xamarin.Forms Właściwości specyficzne dla powłoki

Color

Grubość

Nazwany rozmiar

Funkcje

Arkusz CSS w programie Xamarin.Forms Xamarin.University

Linki powiązane

Dodatkowe zasoby