Udostępnij za pośrednictwem

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

  • Artykuł

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:

Strona główna Aplikacji MonkeyApp ze stylem CSS

Strona szczegółów Aplikacji MonkeyApp ze stylem CSS

Korzystanie z arkusza stylów

Proces dodawania arkusza stylów do rozwiązania jest następujący:

  1. Dodaj pusty plik CSS do projektu biblioteki .NET Standard.
  2. 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ą StyleIdemail. 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 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, 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