Aplikasi gaya menggunakan Lembar Gaya Berskala

Artikel
09/30/2024

Aplikasi .NET Multi-platform App UI (.NET MAUI) dapat ditata menggunakan Cascading Style Sheets (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 berikut menunjukkan beberapa CSS yang mematuhi .NET MAUI:

navigationpage {
    -maui-bar-background-color: lightgray;
}

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
    -maui-spacing: 6;
}

grid {
    row-gap: 6;
    column-gap: 6;
}
.mainPageTitle {
    font-style: bold;
    font-size: 14;
}

.mainPageSubtitle {
    margin-top: 15;
}

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

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

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

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

Di .NET MAUI, lembar gaya CSS diurai dan dievaluasi pada waktu proses, bukan waktu kompilasi, dan lembar gaya diurai ulang saat digunakan.

Penting

Tidak dimungkinkan untuk sepenuhnya menata aplikasi .NET MAUI menggunakan CSS. Namun, gaya XAML dapat digunakan untuk melengkapi CSS. Untuk informasi selengkapnya tentang gaya XAML, lihat Aplikasi gaya menggunakan XAML.

Menggunakan lembar gaya

Proses untuk menambahkan lembar gaya ke aplikasi .NET MAUI adalah sebagai berikut:

Tambahkan file CSS kosong ke proyek aplikasi .NET MAUI Anda. File CSS dapat ditempatkan di folder apa pun, dengan folder Sumber Daya menjadi lokasi yang direkomendasikan.
Atur tindakan build file CSS ke MauiCss.

Memuat lembar gaya

Ada sejumlah pendekatan yang dapat digunakan untuk memuat lembar gaya.

Catatan

Tidak dimungkinkan untuk mengubah lembar gaya saat runtime dan menerapkan lembar gaya baru.

Memuat lembar gaya di XAML

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

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Resources/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 MauiCss.

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.

Memuat lembar gaya di C#

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

using Microsoft.Maui.Controls.StyleSheets;

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

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

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

Pilih elemen dan terapkan 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.

Catatan

Variabel CSS tidak didukung.

Pilih 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 .NET MAUI, 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 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="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView x:Name="listView">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

Pilih 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: 14;
    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 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="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

Pilih elemen anak

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="/Resources/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.

Pilih 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 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="/Resources/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 .NET MAUI:

Pemilih	Contoh	Deskripsi
`.class`	`.header`	Memilih semua elemen dengan `StyleClass` properti yang berisi 'header'. 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`. Pemilih ini peka huruf besar/kecil.
`*`	`*`	Memilih semua elemen.
`element`	`label`	Memilih semua elemen jenis Label, tetapi bukan subkelas. Pemilih ini tidak peka huruf besar/kecil.
`^base`	`^contentpage`	Memilih semua elemen dengan ContentPage sebagai kelas dasar, termasuk ContentPage dirinya sendiri. 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. Pemilih ini tidak peka huruf besar/kecil.
`element element`	`stacklayout label`	Memilih semua Label elemen di dalam StackLayout. Pemilih ini tidak peka huruf besar/kecil.
`element>element`	`stacklayout>label`	Memilih semua Label elemen dengan StackLayout sebagai induk langsung. Pemilih ini tidak peka huruf besar/kecil.
`element+element`	`label+entry`	Memilih semua Entry elemen langsung setelah Label. Pemilih ini tidak peka huruf besar/kecil.
`element~element`	`label~entry`	Memilih semua Entry elemen yang didahului oleh Label. 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 tidak didukung:

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

Catatan

Kekhususan, dan penimpaan kekhususan tidak didukung.

Referensi properti

Properti CSS berikut didukung oleh .NET MAUI (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, , Frame ImageButton	warna \| `initial`	`border-color: #9acd32;`
`border-radius`	BoxView, , Button Frame,ImageButton	dobel \| `initial`	`border-radius: 10;`
`border-width`	Button, ImageButton	dobel \| `initial`	`border-width: .5;`
`color`	ActivityIndicator, , BoxView Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, , SearchBar, , Switch TimePicker	warna \| `initial`	`color: rgba(255, 0, 0, 0.3);`
`column-gap`	Grid	dobel \| `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, , Editor DatePicker, Entry, Label, Picker, SearchBar, , TimePicker,Span	tali \| `initial`	`font-family: Consolas;`
`font-size`	Button, , Editor DatePicker, Entry, Label, Picker, SearchBar, , TimePicker,Span	dobel \| `initial`	`font-size: 12;`
`font-style`	Button, , Editor DatePicker, Entry, Label, Picker, SearchBar, , TimePicker,Span	`bold` \| `italic` \| `initial`	`font-style: bold;`
`height`	VisualElement	dobel \| `initial`	`height: 250;`
`justify-content`	FlexLayout	`start` \| `center` \| `end` \| `spacebetween` \| `spacearound` \| `spaceevenly` \| `flex-start` \| `flex-end` \| `space-between` \| `space-around` \| `initial`	`justify-content: flex-end;`
`letter-spacing`	Button, , DatePicker Editor, Entry, Label, Picker, SearchBar, SearchHandler, , Span,TimePicker	dobel \| `initial`	`letter-spacing: 2.5;`
`line-height`	Label, Span	dobel \| `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	dobel \| `initial`	`min-height: 50;`
`min-width`	VisualElement	dobel \| `initial`	`min-width: 112;`
`opacity`	VisualElement	dobel \| `initial`	`opacity: .3;`
`order`	VisualElement	int \| `initial`	`order: -1;`
`padding`	Button, , ImageButton Layout,Page	Ketebalan \| `initial`	`padding: 6 12 12;`
`padding-left`	Button, , ImageButton Layout,Page	dobel \| `initial`	`padding-left: 3;`
`padding-top`	Button, , ImageButton Layout,Page	dobel \| `initial`	`padding-top: 4;`
`padding-right`	Button, , ImageButton Layout,Page	dobel \| `initial`	`padding-right: 2;`
`padding-bottom`	Button, , ImageButton Layout,Page	dobel \| `initial`	`padding-bottom: 6;`
`position`	FlexLayout	`relative` \| `absolute` \| `initial`	`position: absolute;`
`row-gap`	Grid	dobel \| `initial`	`row-gap: 12;`
`text-align`	Entry, , EntryCell Label,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	dobel \| `initial`	`width: 320;`

Catatan

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

Properti berikut 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

Penting

Span elemen tidak dapat ditargetkan menggunakan CSS.

Properti khusus .NET MAUI

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

Properti	Berlaku untuk	Nilai	Contoh
`-maui-bar-background-color`	NavigationPage, TabbedPage	warna \| `initial`	`-maui-bar-background-color: teal;`
`-maui-bar-text-color`	NavigationPage, TabbedPage	warna \| `initial`	`-maui-bar-text-color: gray`
`-maui-horizontal-scroll-bar-visibility`	ScrollView	`default` \| `always` \| `never` \| `initial`	`-maui-horizontal-scroll-bar-visibility: never;`
`-maui-max-length`	Entry, , Editor SearchBar	int \| `initial`	`-maui-max-length: 20;`
`-maui-max-track-color`	Slider	warna \| `initial`	`-maui-max-track-color: red;`
`-maui-min-track-color`	Slider	warna \| `initial`	`-maui-min-track-color: yellow;`
`-maui-orientation`	ScrollView, StackLayout	`horizontal` \| `vertical` \| `both` \| `initial`. `both` hanya didukung pada ScrollView.	`-maui-orientation: horizontal;`
`-maui-placeholder`	Entry, , Editor SearchBar	teks kutipan \| `initial`	`-maui-placeholder: Enter name;`
`-maui-placeholder-color`	Entry, , Editor SearchBar	warna \| `initial`	`-maui-placeholder-color: green;`
`-maui-spacing`	`StackLayout`	dobel \| `initial`	`-maui-spacing: 8;`
`-maui-thumb-color`	Slider, Switch	warna \| `initial`	`-maui-thumb-color: limegreen;`
`-maui-vertical-scroll-bar-visibility`	ScrollView	`default` \| `always` \| `never` \| `initial`	`-maui-vertical-scroll-bar-visibility: always;`
`-maui-vertical-text-alignment`	Label	`start` \| `center` \| `end` \| `initial`	`-maui-vertical-text-alignment: end;`
`-maui-visual`	VisualElement	tali \| `initial`	`-maui-visual: material;`

Properti spesifik .NET MAUI Shell

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

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

Warna

Nilai berikut color ini didukung:

X11warna, yang cocok dengan warna CSS dan warna MAUI .NET. 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.

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.

Bagikan melalui

Aplikasi gaya menggunakan Lembar Gaya Berskala

Menggunakan lembar gaya

Memuat lembar gaya

Memuat lembar gaya di XAML

Memuat lembar gaya di C#

Pilih elemen dan terapkan properti

Pilih elemen menurut jenis

Memilih elemen menurut kelas dasar

Memilih elemen menurut nama

Pilih elemen dengan atribut kelas tertentu

Pilih elemen anak

Pilih elemen turunan langsung

Referensi pemilih

Referensi properti

Properti khusus .NET MAUI

Properti spesifik .NET MAUI Shell

Warna

Ketebalan

Fungsi

Sumber Daya Tambahan: