Menata Xamarin.Forms gaya aplikasi menggunakan Cascading Style Sheets (CSS)

Artikel
07/28/2020

Xamarin.Forms mendukung elemen visual gaya menggunakan Cascading Style Sheets (CSS).

Xamarin.Forms aplikasi dapat ditata menggunakan CSS. Lembar gaya terdiri dari daftar aturan, dengan setiap aturan terdiri dari satu atau beberapa pemilih dan blok deklarasi. Blok deklarasi terdiri dari daftar deklarasi dalam kurung kurawal, dengan setiap deklarasi yang terdiri dari properti, titik dua, dan nilai. Ketika ada beberapa deklarasi dalam blok, titik koma dimasukkan sebagai pemisah. Contoh kode berikut menunjukkan beberapa Xamarin.Forms CSS yang sesuai:

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;
}

Dalam Xamarin.Formslembar gaya , CSS diurai dan dievaluasi saat runtime, daripada mengkompilasi waktu, dan lembar gaya diurai ulang saat digunakan.

Catatan

Saat ini, semua gaya yang dimungkinkan dengan gaya XAML tidak dapat dilakukan dengan CSS. Namun, gaya XAML dapat digunakan untuk melengkapi CSS untuk properti yang saat ini tidak didukung oleh Xamarin.Forms. Untuk informasi selengkapnya tentang gaya XAML, lihat Styling Xamarin.Forms Apps menggunakan Gaya XAML.

Sampel menunjukkan penggunaan CSS untuk menata aplikasi sederhana, dan ditampilkan dalam cuplikan layar berikut:

Mengkonsumsi lembar gaya

Proses untuk menambahkan lembar gaya ke solusi adalah sebagai berikut:

Tambahkan file CSS kosong ke proyek pustaka .NET Standard Anda.
Atur tindakan build file CSS ke EmbeddedResource.

Memuat lembar gaya

Ada sejumlah pendekatan yang dapat digunakan untuk memuat lembar gaya.

Catatan

Saat ini tidak dimungkinkan untuk mengubah lembar gaya saat runtime dan menerapkan lembar gaya baru.

XAML

Lembar gaya dapat dimuat dan diurai dengan StyleSheet kelas sebelum ditambahkan ke ResourceDictionary:

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

Properti StyleSheet.Source menentukan lembar gaya sebagai URI yang relatif terhadap lokasi file XAML yang tertutup, atau relatif terhadap akar proyek jika URI dimulai dengan /.

Peringatan

File CSS akan gagal dimuat jika tindakan buildnya tidak diatur ke EmbeddedResource.

Atau, lembar gaya dapat dimuat dan diurai dengan StyleSheet kelas , sebelum ditambahkan ke ResourceDictionary, dengan menginliningkannya di CDATA bagian:

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

Untuk informasi selengkapnya tentang kamus sumber daya, lihat Kamus Sumber Daya.

C#

Di C#, lembar gaya dapat dimuat dari StringReader dan ditambahkan ke ResourceDictionary:

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

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

Argumen ke StyleSheet.FromReader metode adalah TextReader yang telah membaca lembar gaya.

Memilih elemen dan menerapkan properti

CSS menggunakan pemilih untuk menentukan elemen mana yang akan ditargetkan. Gaya dengan pemilih yang cocok diterapkan secara berturut-turut, dalam urutan definisi. Gaya yang ditentukan pada item tertentu selalu diterapkan terakhir. Untuk informasi selengkapnya tentang pemilih yang didukung, lihat Referensi Pemilih.

CSS menggunakan properti untuk menata elemen yang dipilih. Setiap properti memiliki sekumpulan nilai yang mungkin, dan beberapa properti dapat memengaruhi semua jenis elemen, sementara yang lain berlaku untuk grup elemen. Untuk informasi selengkapnya tentang properti yang didukung, lihat Referensi Properti.

Lembar gaya anak selalu mengambil alih lembar gaya induk jika mereka mengatur properti yang sama. Oleh karena itu, aturan prioritas berikut diikuti saat menerapkan gaya yang mengatur properti yang sama:

Gaya yang ditentukan dalam sumber daya aplikasi akan ditimpa oleh gaya yang ditentukan dalam sumber daya halaman, jika mereka mengatur properti yang sama.
Gaya yang ditentukan dalam sumber daya halaman akan ditimpa oleh gaya yang ditentukan dalam sumber daya kontrol, jika mereka mengatur properti yang sama.
Gaya yang ditentukan dalam sumber daya aplikasi akan ditimpa oleh gaya yang ditentukan dalam sumber daya kontrol, jika mereka mengatur properti yang sama.

Penting

Variabel CSS tidak didukung.

Memilih elemen menurut jenis

Elemen di pohon visual dapat dipilih berdasarkan jenis dengan pemilih yang tidak peka huruf besar/kecil element :

stacklayout {
    margin: 20;
}

Pemilih ini mengidentifikasi elemen apa pun StackLayout pada halaman yang menggunakan lembar gaya, dan mengatur marginnya ke ketebalan seragam 20.

Catatan

Pemilih element tidak mengidentifikasi subkelas dari jenis yang ditentukan.

Memilih elemen menurut kelas dasar

Elemen di pohon visual dapat dipilih oleh kelas dasar dengan pemilih yang tidak peka huruf besar/kecil ^base :

^contentpage {
    background-color: lightgray;
}

Pemilih ini mengidentifikasi elemen apa pun ContentPage yang menggunakan lembar gaya, dan mengatur warna latar belakangnya ke lightgray.

Catatan

Pemilih ^base khusus untuk Xamarin.Forms, dan bukan bagian dari spesifikasi CSS.

Memilih elemen menurut nama

Elemen individual di pohon visual dapat dipilih dengan pemilih peka huruf besar/kecil #id :

#listView {
    background-color: lightgray;
}

Pemilih ini mengidentifikasi elemen yang propertinya StyleId diatur ke listView. Namun, jika StyleId properti tidak diatur, pemilih akan kembali menggunakan x:Name elemen . Oleh karena itu, dalam contoh XAML berikut, pemilih #listView akan mengidentifikasi ListView atribut yang x:Name diatur ke listView, dan akan mengatur warna latar belakangnya ke lightgray.

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

Memilih elemen dengan atribut kelas tertentu

Elemen dengan atribut kelas tertentu dapat dipilih dengan pemilih peka huruf besar/kecil .class :

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

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

Kelas CSS dapat ditetapkan ke elemen XAML dengan mengatur StyleClass properti elemen ke nama kelas CSS. Oleh karena itu, dalam contoh XAML berikut, gaya yang ditentukan oleh .detailPageTitle kelas ditetapkan ke yang pertama Label, sementara gaya yang ditentukan oleh .detailPageSubtitle kelas ditetapkan ke yang kedua Label.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
            ...
        </StackLayout>
    </ScrollView>
</ContentPage>

Memilih elemen turunan

Elemen anak di pohon visual dapat dipilih dengan pemilih yang tidak peka huruf besar/kecil element element :

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

Pemilih ini mengidentifikasi elemen apa pun Image yang merupakan turunan elemen ListView , dan mengatur tinggi dan lebarnya menjadi 60. Oleh karena itu, dalam contoh XAML berikut, pemilih listview image akan mengidentifikasi Image bahwa itu adalah anak dari ListView, dan mengatur tinggi dan lebarnya menjadi 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>

Catatan

Pemilih element element tidak mengharuskan elemen turunan menjadi turunan langsung dari induk – elemen turunan mungkin memiliki induk yang berbeda. Pemilihan terjadi asalkan leluhur adalah elemen pertama yang ditentukan.

Memilih elemen turunan langsung

Elemen turunan langsung di pohon visual dapat dipilih dengan pemilih yang tidak peka huruf besar/kecil element>element :

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

Pemilih ini mengidentifikasi elemen apa pun Image yang merupakan turunan langsung elemen StackLayout , dan mengatur tinggi dan lebarnya menjadi 200. Oleh karena itu, dalam contoh XAML berikut, pemilih stacklayout>image akan mengidentifikasi Image bahwa itu adalah anak langsung dari StackLayout, dan mengatur tinggi dan lebarnya menjadi 200.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            ...
            <Image ... />
            ...
        </StackLayout>
    </ScrollView>
</ContentPage>

Catatan

Pemilih element>element mengharuskan elemen turunan adalah turunan langsung dari induk.

Referensi pemilih

Pemilih CSS berikut didukung oleh Xamarin.Forms:

Pemilih	Contoh	Deskripsi
`.class`	`.header`	Memilih semua elemen dengan `StyleClass` properti yang berisi 'header'. Perhatikan bahwa pemilih ini peka huruf besar/kecil.
`#id`	`#email`	Memilih semua elemen dengan `StyleId` diatur ke `email`. Jika `StyleId` tidak diatur, mundur ke `x:Name`. Saat menggunakan XAML, `x:Name` lebih disukai daripada `StyleId`. Perhatikan bahwa pemilih ini peka huruf besar/kecil.
`*`	`*`	Memilih semua elemen.
`element`	`label`	Memilih semua elemen jenis `Label`, tetapi bukan subkelas. Perhatikan bahwa pemilih ini tidak peka huruf besar/kecil.
`^base`	`^contentpage`	Memilih semua elemen dengan `ContentPage` sebagai kelas dasar, termasuk `ContentPage` dirinya sendiri. Perhatikan bahwa pemilih ini tidak peka huruf besar/kecil dan bukan bagian dari spesifikasi CSS.
`element,element`	`label,button`	Memilih semua `Button` elemen dan semua `Label` elemen. Perhatikan bahwa pemilih ini tidak peka huruf besar/kecil.
`element element`	`stacklayout label`	Memilih semua `Label` elemen di dalam `StackLayout`. Perhatikan bahwa pemilih ini tidak peka huruf besar/kecil.
`element>element`	`stacklayout>label`	Memilih semua `Label` elemen dengan `StackLayout` sebagai induk langsung. Perhatikan bahwa pemilih ini tidak peka huruf besar/kecil.
`element+element`	`label+entry`	Memilih semua `Entry` elemen langsung setelah `Label`. Perhatikan bahwa pemilih ini tidak peka huruf besar/kecil.
`element~element`	`label~entry`	Memilih semua `Entry` elemen yang didahului oleh `Label`. Perhatikan bahwa pemilih ini tidak peka huruf besar/kecil.

Gaya dengan pemilih yang cocok diterapkan secara berturut-turut, dalam urutan definisi. Gaya yang ditentukan pada item tertentu selalu diterapkan terakhir.

Tip

Pemilih dapat digabungkan tanpa batasan, seperti StackLayout>ContentView>label.email.

Pemilih berikut saat ini tidak didukung:

[attribute]
@media dan @supports
: dan ::

Catatan

Kekhususan, dan penimpaan kekhususan tidak didukung.

Referensi properti

Properti CSS berikut didukung oleh Xamarin.Forms (di kolom Nilai , jenisnya miring, sementara literal string adalah gray):

Properti	Berlaku untuk	Nilai	Contoh
`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`	Warna \| `initial`	`background-color: springgreen;`
`background-image`	`Page`	tali \| `initial`	`background-image: bg.png;`
`border-color`	`Button`, , `FrameImageButton`	Warna \| `initial`	`border-color: #9acd32;`
`border-radius`	`BoxView`, , `ButtonFrame`,`ImageButton`	Double \| `initial`	`border-radius: 10;`
`border-width`	`Button`, `ImageButton`	Double \| `initial`	`border-width: .5;`
`color`	`ActivityIndicator`, , `BoxViewButton`, `CheckBox`, `DatePicker`, `Editor`, `Entry`, `Label`, `Picker`, `ProgressBar`, , `SearchBar`, , `SwitchTimePicker`	Warna \| `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`	float \| \| `autoinitial`. Selain itu, persentase dalam rentang 0% hingga 100% dapat ditentukan dengan `%` tanda.	`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`, , `EditorDatePicker`, `Entry`, `Label`, `Picker`, `SearchBar`, , `TimePicker`,`Span`	tali \| `initial`	`font-family: Consolas;`
`font-size`	`Button`, , `EditorDatePicker`, `Entry`, `Label`, `Picker`, `SearchBar`, , `TimePicker`,`Span`	ukuran nama ganda \| \| `initial`	`font-size: 12;`
`font-style`	`Button`, , `EditorDatePicker`, `Entry`, `Label`, `Picker`, `SearchBar`, , `TimePicker`,`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`, , `DatePickerEditor`, `Entry`, `Label`, `Picker`, `SearchBar`, `SearchHandler`, , `Span`,`TimePicker`	Double \| `initial`	`letter-spacing: 2.5;`
`line-height`	`Label`, `Span`	Double \| `initial`	`line-height: 1.8;`
`margin`	`View`	Ketebalan \| `initial`	`margin: 6 12;`
`margin-left`	`View`	Ketebalan \| `initial`	`margin-left: 3;`
`margin-top`	`View`	Ketebalan \| `initial`	`margin-top: 2;`
`margin-right`	`View`	Ketebalan \| `initial`	`margin-right: 1;`
`margin-bottom`	`View`	Ketebalan \| `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`, , `ImageButtonLayout`,`Page`	Ketebalan \| `initial`	`padding: 6 12 12;`
`padding-left`	`Button`, , `ImageButtonLayout`,`Page`	Double \| `initial`	`padding-left: 3;`
`padding-top`	`Button`, , `ImageButtonLayout`,`Page`	Double \| `initial`	`padding-top: 4;`
`padding-right`	`Button`, , `ImageButtonLayout`,`Page`	Double \| `initial`	`padding-right: 2;`
`padding-bottom`	`Button`, , `ImageButtonLayout`,`Page`	Double \| `initial`	`padding-bottom: 6;`
`position`	`FlexLayout`	`relative` \| `absolute` \| `initial`	`position: absolute;`
`row-gap`	`Grid`	Double \| `initial`	`row-gap: 12;`
`text-align`	`Entry`, , `EntryCellLabel`,`SearchBar`	`left` \| `top` \| `right` \| `bottom` \| `start` \| `center` \| `middle` \| `end` \| `initial`. `left` dan `right` harus dihindari di lingkungan kanan-ke-kiri.	`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`, , `rotaterotateX`, `rotateY`, `scale`, `scaleX`, `scaleY`, `translate`, `translateX`, , , `translateYinitial`	`transform: rotate(180), scaleX(2.5);`
`transform-origin`	`VisualElement`	ganda, ganda \| `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;`

Catatan

initial adalah nilai yang valid untuk semua properti. Ini menghapus nilai (reset ke default) yang diatur dari gaya lain.

Properti berikut saat ini tidak didukung:

all: initial.
Properti tata letak (kotak, atau kisi).
Properti singkatan, seperti font, dan border.

Selain itu, tidak inherit ada nilai dan sehingga warisan tidak didukung. Oleh karena itu Anda tidak dapat, misalnya, mengatur font-size properti pada tata letak dan mengharapkan semua Label instans dalam tata letak untuk mewarisi nilai. Satu pengecualian adalah direction properti , yang memiliki nilai default .inherit

Elemen penargetan Span memiliki masalah yang diketahui yang mencegah rentang menjadi target gaya CSS oleh elemen dan nama (menggunakan # simbol ). Elemen Span berasal dari GestureElement, yang tidak memiliki StyleClass properti sehingga rentang tidak mendukung penargetan kelas CSS. Untuk informasi selengkapnya, lihat Tidak dapat menerapkan gaya CSS ke kontrol Rentang.

Xamarin.Forms properti tertentu

Properti CSS tertentu berikut ini Xamarin.Forms juga didukung (di kolom Nilai , jenisnya miring, sementara literal string adalah gray):

Properti	Berlaku untuk	Nilai	Contoh
`-xf-bar-background-color`	`NavigationPage`, `TabbedPage`	Warna \| `initial`	`-xf-bar-background-color: teal;`
`-xf-bar-text-color`	`NavigationPage`, `TabbedPage`	Warna \| `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`	Warna \| `initial`	`-xf-max-track-color: red;`
`-xf-min-track-color`	`Slider`	Warna \| `initial`	`-xf-min-track-color: yellow;`
`-xf-orientation`	`ScrollView`, `StackLayout`	`horizontal` \| `vertical` \| `both` \| `initial`. `both` hanya didukung pada `ScrollView`.	`-xf-orientation: horizontal;`
`-xf-placeholder`	`Entry`, , `EditorSearchBar`	teks kutipan \| `initial`	`-xf-placeholder: Enter name;`
`-xf-placeholder-color`	`Entry`, , `EditorSearchBar`	Warna \| `initial`	`-xf-placeholder-color: green;`
`-xf-spacing`	`StackLayout`	Double \| `initial`	`-xf-spacing: 8;`
`-xf-thumb-color`	`Slider`, `Switch`	Warna \| `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`	tali \| `initial`	`-xf-visual: material;`

Xamarin.Forms Properti khusus shell

Properti CSS spesifik Shell berikut ini Xamarin.Forms juga didukung (di kolom Nilai , jenisnya miring, sementara literal string adalah gray):

Properti	Berlaku untuk	Nilai	Contoh
`-xf-flyout-background`	`Shell`	Warna \| `initial`	`-xf-flyout-background: red;`
`-xf-shell-background`	`Element`	Warna \| `initial`	`-xf-shell-background: green;`
`-xf-shell-disabled`	`Element`	Warna \| `initial`	`-xf-shell-disabled: blue;`
`-xf-shell-foreground`	`Element`	Warna \| `initial`	`-xf-shell-foreground: yellow;`
`-xf-shell-tabbar-background`	`Element`	Warna \| `initial`	`-xf-shell-tabbar-background: white;`
`-xf-shell-tabbar-disabled`	`Element`	Warna \| `initial`	`-xf-shell-tabbar-disabled: black;`
`-xf-shell-tabbar-foreground`	`Element`	Warna \| `initial`	`-xf-shell-tabbar-foreground: gray;`
`-xf-shell-tabbar-title`	`Element`	Warna \| `initial`	`-xf-shell-tabbar-title: lightgray;`
`-xf-shell-tabbar-unselected`	`Element`	Warna \| `initial`	`-xf-shell-tabbar-unselected: cyan;`
`-xf-shell-title`	`Element`	Warna \| `initial`	`-xf-shell-title: teal;`
`-xf-shell-unselected`	`Element`	Warna \| `initial`	`-xf-shell-unselected: limegreen;`

Warna

Nilai berikut color ini didukung:

X11warna, yang cocok dengan warna CSS, warna UWP yang telah ditentukan sebelumnya, dan Xamarin.Forms warna. Perhatikan bahwa nilai warna ini tidak peka huruf besar/kecil.
warna heks: #rgb, #argb, #rrggbb, #aarrggbb
warna rgb: rgb(255,0,0), rgb(100%,0%,0%). Nilai berada dalam rentang 0-255, atau 0%-100%.
warna rgba: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). Nilai opasitas berada dalam rentang 0,0-1,0.
warna hsl: hsl(120, 100%, 50%). Nilai h berada dalam rentang 0-360, sedangkan s dan l berada dalam rentang 0%-100%.
warna hsla: hsla(120, 100%, 50%, .8). Nilai opasitas berada dalam rentang 0,0-1,0.

Ketebalan

Satu, dua, tiga, atau empat thickness nilai didukung, masing-masing dipisahkan oleh spasi kosong:

Satu nilai menunjukkan ketebalan seragam.
Dua nilai menunjukkan ketebalan vertikal lalu horizontal.
Tiga nilai menunjukkan atas, lalu horizontal (kiri dan kanan), lalu ketebalan bawah.
Empat nilai menunjukkan atas, lalu kanan, lalu bawah, lalu ketebalan kiri.

Catatan

Nilai CSS thickness berbeda dari nilai XAML Thickness . Misalnya, di XAML nilai dua Thickness menunjukkan ketebalan horizontal lalu vertikal, sementara empat nilai Thickness menunjukkan kiri, lalu atas, lalu kanan, lalu ketebalan bawah. Selain itu, nilai XAML Thickness dibatasi koma.

UkuranNama

Nilai tidak peka huruf besar/kecil namedsize berikut didukung:

default
micro
small
medium
large

Arti pasti dari setiap namedsize nilai bergantung pada platform dan bergantung pada tampilan.

Fungsi

Gradien linier dan radial dapat ditentukan menggunakan linear-gradient() fungsi dan radial-gradient() CSS, masing-masing. Hasil dari fungsi-fungsi ini harus ditetapkan ke background properti kontrol.

CSS dengan Xamarin.Forms Xamarin.University

Xamarin.Forms Video CSS 3.0

Bagikan melalui

Menata Xamarin.Forms gaya aplikasi menggunakan Cascading Style Sheets (CSS)

Mengkonsumsi lembar gaya

Memuat lembar gaya

XAML

C#

Memilih elemen dan menerapkan properti

Memilih elemen menurut jenis

Memilih elemen menurut kelas dasar

Memilih elemen menurut nama

Memilih elemen dengan atribut kelas tertentu

Memilih elemen turunan

Memilih elemen turunan langsung

Referensi pemilih

Referensi properti

Xamarin.Forms properti tertentu

Xamarin.Forms Properti khusus shell

Warna

Ketebalan

UkuranNama

Fungsi

CSS dengan Xamarin.Forms Xamarin.University

Sumber Daya Tambahan:

Bagikan melalui

Menata Xamarin.Forms gaya aplikasi menggunakan Cascading Style Sheets (CSS)

Mengkonsumsi lembar gaya

Memuat lembar gaya

XAML

C#

Memilih elemen dan menerapkan properti

Memilih elemen menurut jenis

Memilih elemen menurut kelas dasar

Memilih elemen menurut nama

Memilih elemen dengan atribut kelas tertentu

Memilih elemen turunan

Memilih elemen turunan langsung

Referensi pemilih

Referensi properti

Xamarin.Forms properti tertentu

Xamarin.Forms Properti khusus shell

Warna

Ketebalan

UkuranNama

Fungsi

CSS dengan Xamarin.Forms Xamarin.University

Link Terkait

Sumber Daya Tambahan: