Basamaklı Stil Sayfaları (CSS) kullanarak uygulama stili oluşturma Xamarin.Forms

Makale
03/08/2024

Xamarin.Forms , Basamaklı Stil Sayfaları (CSS) kullanarak görsel öğeleri şekillendirmeyi destekler.

Xamarin.Forms uygulamalar CSS kullanılarak stillendirilebilir. Stil sayfası, her kural bir veya daha fazla seçiciden ve bildirim bloğundan oluşan bir kural listesinden oluşur. Bildirim bloğu, her bildirimin bir özellik, iki nokta üst üste ve bir değerden oluşan küme ayraçlarındaki bildirimlerin bir listesinden oluşur. Bir blokta birden çok bildirim olduğunda, ayırıcı olarak noktalı virgül eklenir. Aşağıdaki kod örneği bazı Xamarin.Forms uyumlu CSS'leri gösterir:

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

içinde Xamarin.Forms, CSS stil sayfaları derleme zamanı yerine çalışma zamanında ayrıştırılır ve değerlendirilir ve stil sayfaları kullanımda yeniden ayrıştırılır.

Not

Şu anda, XAML stiliyle mümkün olan tüm stil CSS ile gerçekleştirilemez. Ancak, XAML stilleri tarafından şu anda desteklenmeyen Xamarin.Formsözellikler için CSS'yi desteklemek için kullanılabilir. XAML stilleri hakkında daha fazla bilgi için bkz . XAML Stillerini kullanarak Uygulama Stili Xamarin.Forms Oluşturma.

MonkeyAppCSS örneği, basit bir uygulamaya stil eklemek için CSS'yi kullanmayı gösterir ve aşağıdaki ekran görüntülerinde gösterilir:

Stil sayfası kullanma

Çözüme stil sayfası ekleme işlemi aşağıdaki gibidir:

.NET Standart kitaplık projenize boş bir CSS dosyası ekleyin.
CSS dosyasının derleme eylemini EmbeddedResource olarak ayarlayın.

Stil sayfası yükleme

Stil sayfası yüklemek için kullanılabilecek bir dizi yaklaşım vardır.

Not

Çalışma zamanında bir stil sayfasını değiştirmek ve yeni stil sayfasının uygulanması şu anda mümkün değildir.

XAML

Stil sayfası bir öğesine eklenmeden StyleSheetResourceDictionaryönce sınıfıyla yüklenebilir ve ayrıştırılabilir:

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

StyleSheet.Source özelliği stil sayfasını kapsayan XAML dosyasının konumuna göre URI olarak veya URI ile /başlıyorsa proje köküne göre belirtir.

Uyarı

Derleme eylemi EmbeddedResource olarak ayarlanmadıysa CSS dosyası yüklenemiyor.

Alternatif olarak, bir stil sayfası bir bölüm içinde çizilerek CDATA bir öğesine ResourceDictionaryeklenmeden StyleSheet önce sınıfıyla yüklenebilir ve ayrıştırılabilir:

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

Kaynak sözlükleri hakkında daha fazla bilgi için bkz . Kaynak Sözlükleri.

C#

C# dilinde, bir stil sayfası'ndan StringReader yüklenebilir ve öğesine ResourceDictionaryeklenebilir:

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

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

yönteminin StyleSheet.FromReader bağımsız değişkeni, stil sayfasını okuyan değişkendir TextReader .

Öğeleri seçme ve özellikleri uygulama

CSS, hangi öğelerin hedefleneceğini belirlemek için seçicileri kullanır. Eşleşen seçicilere sahip stiller, tanım sırasına göre art arda uygulanır. Belirli bir öğede tanımlanan stiller her zaman en son uygulanır. Desteklenen seçiciler hakkında daha fazla bilgi için bkz . Seçici Başvurusu.

CSS, seçili öğeye stil eklemek için özellikleri kullanır. Her özelliğin bir dizi olası değeri vardır ve bazı özellikler herhangi bir öğe türünü etkileyebilirken, diğerleri öğe gruplarına uygulanır. Desteklenen özellikler hakkında daha fazla bilgi için bkz . Özellik Başvurusu.

Alt stil sayfaları, aynı özellikleri ayarlarsa her zaman üst stil sayfalarını geçersiz kılar. Bu nedenle, aynı özellikleri ayarlayan stiller uygulanırken aşağıdaki öncelik kurallarına uyulur:

Uygulama kaynaklarında tanımlanan stilin üzerine sayfa kaynaklarında tanımlanan bir stil (aynı özellikleri ayarlarlarsa) yazılır.
Aynı özellikleri ayarlarlarsa, sayfa kaynaklarında tanımlanan stilin üzerine denetim kaynaklarında tanımlanan bir stil yazılır.
Uygulama kaynaklarında tanımlanan bir stilin üzerine denetim kaynaklarında tanımlanan bir stil (aynı özellikleri ayarlarlarsa) yazılır.

Önemli

CSS değişkenleri desteklenmiyor.

Türe göre öğe seçme

Görsel ağaçtaki öğeler büyük/küçük harfe duyarsız element seçici ile türe göre seçilebilir:

stacklayout {
    margin: 20;
}

Bu seçici, sayfalardaki stil sayfasını kullanan tüm StackLayout öğeleri tanımlar ve kenar boşluklarını 20 tekdüzen kalınlıkta ayarlar.

Not

Seçici, element belirtilen türün alt sınıflarını tanımlamaz.

Temel sınıfa göre öğeleri seçme

Görsel ağaçtaki öğeler, büyük/küçük harfe duyarsız ^base seçici ile temel sınıf tarafından seçilebilir:

^contentpage {
    background-color: lightgray;
}

Bu seçici, stil sayfasını kullanan tüm ContentPage öğeleri tanımlar ve arka plan renklerini olarak lightgrayayarlar.

Not

Seçici ^base , öğesine Xamarin.Formsözgüdür ve CSS belirtiminin bir parçası değildir.

Ada göre öğe seçme

Görsel ağaçtaki tek tek öğeler büyük/küçük harfe duyarlı #id seçici ile seçilebilir:

#listView {
    background-color: lightgray;
}

Bu seçici özelliği olarak listViewayarlanmış öğesini StyleId tanımlar. Ancak özelliği ayarlanmazsa StyleId seçici öğesinin kullanımına x:Name geri döner. Bu nedenle, aşağıdaki XAML örneğinde seçici, #listView özniteliği olarak ayarlanmış listViewolan x:Name öğesini tanımlar ListView ve arka plan rengini olarak lightgrayayarlar.

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

Belirli bir sınıf özniteliğine sahip öğeleri seçme

Büyük/küçük harfe duyarlı .class seçici ile belirli bir sınıf özniteliğine sahip öğeler seçilebilir:

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

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

CSS sınıfı, öğesinin özelliği CSS sınıf adı olarak ayarlanarak StyleClass bir XAML öğesine atanabilir. Bu nedenle, aşağıdaki XAML örneğinde, sınıfı tarafından .detailPageTitle tanımlanan stiller ilk Labelöğesine atanırken, sınıfı tarafından .detailPageSubtitle tanımlanan stiller ikinci Labelöğesine atanır.

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

Alt öğeleri seçme

Görsel ağaçtaki alt öğeler büyük/küçük harfe duyarsız element element seçici ile seçilebilir:

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

Bu seçici, öğelerin alt ListView öğesi olan tüm Image öğeleri tanımlar ve yükseklik ve genişliklerini 60 olarak ayarlar. Bu nedenle, aşağıdaki XAML örneğinde seçici listview image , öğesinin Image alt öğesini ListViewtanımlar ve yükseklik ve genişliğini 60 olarak ayarlar.

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

Not

Seçici, element element alt öğenin üst öğenin doğrudan alt öğesi olmasını gerektirmez; alt öğenin farklı bir üst öğesi olabilir. Bir üst öğenin belirtilen ilk öğe olması koşuluyla seçim gerçekleşir.

Doğrudan alt öğeleri seçme

Görsel ağaçtaki doğrudan alt öğeler büyük/küçük harfe duyarsız element>element seçici ile seçilebilir:

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

Bu seçici, öğelerin doğrudan alt öğeleri StackLayout olan tüm Image öğeleri tanımlar ve boy ve genişliklerini 200 olarak ayarlar. Bu nedenle, aşağıdaki XAML örneğinde seçici stacklayout>image , öğesinin Image doğrudan alt öğesi StackLayoutolduğunu belirler ve yüksekliğini ve genişliğini 200 olarak ayarlar.

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

Not

Seçici, element>element alt öğenin üst öğenin doğrudan alt öğesi olmasını gerektirir.

Seçici başvurusu

Aşağıdaki CSS seçicileri tarafından Xamarin.Formsdesteklenir:

Seçici	Örnek	Açıklama
`.class`	`.header`	'header' içeren özelliğine `StyleClass` sahip tüm öğeleri seçer. Bu seçicinin büyük/küçük harfe duyarlı olduğunu unutmayın.
`#id`	`#email`	olarak ayarlanmış `email`tüm öğeleri `StyleId` seçer. Ayarlanmadıysa `StyleId` geri dönüş olarak `x:Name`ayarlayın. XAML kullanılırken yerine `x:Name` tercih `StyleId`edilir. Bu seçicinin büyük/küçük harfe duyarlı olduğunu unutmayın.
`*`	`*`	Tüm öğeleri seçer.
`element`	`label`	türüne `Label`ait tüm öğeleri seçer, ancak alt sınıfları seçmez. Bu seçicinin büyük/küçük harfe duyarsız olduğunu unutmayın.
`^base`	`^contentpage`	kendi dahil olmak üzere `ContentPage` temel sınıf olarak ile `ContentPage` tüm öğeleri seçer. Bu seçicinin büyük/küçük harfe duyarlı olmadığını ve CSS belirtiminin bir parçası olmadığını unutmayın.
`element,element`	`label,button`	Tüm öğeleri ve tüm `ButtonLabel` öğeleri seçer. Bu seçicinin büyük/küçük harfe duyarsız olduğunu unutmayın.
`element element`	`stacklayout label`	içindeki `StackLayout`tüm `Label` öğeleri seçer. Bu seçicinin büyük/küçük harfe duyarsız olduğunu unutmayın.
`element>element`	`stacklayout>label`	ile tüm `LabelStackLayout` öğeleri doğrudan üst öğe olarak seçer. Bu seçicinin büyük/küçük harfe duyarsız olduğunu unutmayın.
`element+element`	`label+entry`	Bir öğesinin hemen ardından `Label`tüm `Entry` öğeleri seçer. Bu seçicinin büyük/küçük harfe duyarsız olduğunu unutmayın.
`element~element`	`label~entry`	öncesinde bir `Label`olan tüm `Entry` öğeleri seçer. Bu seçicinin büyük/küçük harfe duyarsız olduğunu unutmayın.

Eşleşen seçicilere sahip stiller, tanım sırasına göre art arda uygulanır. Belirli bir öğede tanımlanan stiller her zaman en son uygulanır.

İpucu

Seçiciler gibi sınırlama StackLayout>ContentView>label.emailolmadan birleştirilebilir.

Şu anda aşağıdaki seçiciler desteklenmiyor:

[attribute]
@media ve @supports
: ve ::

Not

Özgüllük ve özgüllük geçersiz kılmaları desteklenmez.

Özellik başvurusu

Aşağıdaki CSS özellikleri tarafından Xamarin.Forms desteklenir ( Değerler sütununda türler italikken, dize değişmez değerleri şunlardır gray):

Özellik	Şunlara uygulanır	Değerler	Örnek
`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`	Renk \| `initial`	`background-color: springgreen;`
`background-image`	`Page`	string \| `initial`	`background-image: bg.png;`
`border-color`	`Button`, `Frame`, `ImageButton`	Renk \| `initial`	`border-color: #9acd32;`
`border-radius`	`BoxView`, `Button`, `Frame`, `ImageButton`	double \| `initial`	`border-radius: 10;`
`border-width`	`Button`, `ImageButton`	double \| `initial`	`border-width: .5;`
`color`	`ActivityIndicator`, , `Button`, , `CheckBox`, `DatePicker`, `Editor`, , `Entry`, `Label`, `ProgressBarPicker`, `SwitchSearchBar`, `BoxViewTimePicker`	Renk \| `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`	kaydırarak seçin`initial` \| `auto` \| . Ayrıca, %0 ile %100 aralığındaki bir yüzde işaretiyle `%` belirtilebilir.	`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`, , `Entry`, `Label`, `Picker`, `SearchBar`, `TimePicker`, `Span`	string \| `initial`	`font-family: Consolas;`
`font-size`	`Button`, `DatePicker`, `Editor`, , `Entry`, `Label`, `Picker`, `SearchBar`, `TimePicker`, `Span`	double \| namedsize \| `initial`	`font-size: 12;`
`font-style`	`Button`, `DatePicker`, `Editor`, , `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`, , `EditorDatePicker`, , `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`	Kalın -lığı \| `initial`	`margin: 6 12;`
`margin-left`	`View`	Kalın -lığı \| `initial`	`margin-left: 3;`
`margin-top`	`View`	Kalın -lığı \| `initial`	`margin-top: 2;`
`margin-right`	`View`	Kalın -lığı \| `initial`	`margin-right: 1;`
`margin-bottom`	`View`	Kalın -lığı \| `initial`	`margin-bottom: 6;`
`max-lines`	`Label`	int \| `initial`	`max-lines: 2;`
`min-height`	`VisualElement`	double \| `initial`	`min-height: 50;`
`min-width`	`VisualElement`	double \| `initial`	`min-width: 112;`
`opacity`	`VisualElement`	double \| `initial`	`opacity: .3;`
`order`	`VisualElement`	int \| `initial`	`order: -1;`
`padding`	`Button`, `ImageButton`, `Layout`, `Page`	Kalın -lığı \| `initial`	`padding: 6 12 12;`
`padding-left`	`Button`, `ImageButton`, `Layout`, `Page`	double \| `initial`	`padding-left: 3;`
`padding-top`	`Button`, `ImageButton`, `Layout`, `Page`	double \| `initial`	`padding-top: 4;`
`padding-right`	`Button`, `ImageButton`, `Layout`, `Page`	double \| `initial`	`padding-right: 2;`
`padding-bottom`	`Button`, `ImageButton`, `Layout`, `Page`	double \| `initial`	`padding-bottom: 6;`
`position`	`FlexLayout`	`relative` \| `absolute` \| `initial`	`position: absolute;`
`row-gap`	`Grid`	double \| `initial`	`row-gap: 12;`
`text-align`	`Entry`, `EntryCell`, `Label`, `SearchBar`	`left` \| `top` \| `right` \| `bottom` \| `start` \| `center` \| `middle` \| `end` \| `initial`. `left` ve `right` sağdan sola ortamlarda kaçınılmalıdır.	`text-align: right;`
`text-decoration`	`Label`, `Span`	`none` \| `underline` \| `strikethrough` \| `line-through` \| `initial`	`text-decoration: underline, line-through;`
`text-transform`	`Button`,`Editor`, `Entry`, `Label`, `SearchBar`, `SearchHandler`	`none` \| `default` \| `uppercase` \| `lowercase` \| `initial`	`text-transform: uppercase;`
`transform`	`VisualElement`	`none`, `rotate`, , `rotateX`, `rotateY`, `scale`, `scaleX`, , `scaleYtranslate`, `translateX`, `translateY`,`initial`	`transform: rotate(180), scaleX(2.5);`
`transform-origin`	`VisualElement`	double, double \| `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;`

Not

initial tüm özellikler için geçerli bir değerdir. Başka bir stilden ayarlanan değeri temizler (varsayılana sıfırlanır).

Şu anda aşağıdaki özellikler desteklenmiyor:

all: initial.
Düzen özellikleri (kutu veya kılavuz).
, ve bordergibi fontkısaltma özellikleri.

Buna ek olarak, değer yoktur inherit ve bu nedenle devralma desteklenmez. Bu nedenle, örneğin, bir düzende özelliğini ayarlayamaz font-size ve düzendeki tüm örneklerin Label değeri devralmasını bekleyemezsiniz. Tek özel durum direction , varsayılan değeri olan özelliğidir inherit.

Öğeleri hedeflemenin Span , hem öğe hem de ada göre (simgeyi kullanarak # ) spans'ın CSS stillerinin hedefi olmasını engelleyen bilinen bir sorunu vardır. Span öğesi, özelliğine sahip StyleClass olmayan öğesinden GestureElementtüretilir, bu nedenle spans CSS sınıfı hedeflemesini desteklemez. Daha fazla bilgi için bkz . Span denetimine CSS stili uygulanamıyor.

Xamarin.Forms belirli özellikler

Aşağıdaki Xamarin.Forms belirli CSS özellikleri de desteklenir ( Değerler sütununda türler italikken dize değişmez değerleri şunlardır gray):

Özellik	Şunlara uygulanır	Değerler	Örnek
`-xf-bar-background-color`	`NavigationPage`, `TabbedPage`	Renk \| `initial`	`-xf-bar-background-color: teal;`
`-xf-bar-text-color`	`NavigationPage`, `TabbedPage`	Renk \| `initial`	`-xf-bar-text-color: gray`
`-xf-horizontal-scroll-bar-visibility`	`ScrollView`	`default` \| `always` \| `never` \| `initial`	`-xf-horizontal-scroll-bar-visibility: never;`
`-xf-max-length`	`Entry`, `Editor`, `SearchBar`	int \| `initial`	`-xf-max-length: 20;`
`-xf-max-track-color`	`Slider`	Renk \| `initial`	`-xf-max-track-color: red;`
`-xf-min-track-color`	`Slider`	Renk \| `initial`	`-xf-min-track-color: yellow;`
`-xf-orientation`	`ScrollView`, `StackLayout`	`horizontal` \| `vertical` \| `both` \| `initial`. `both` yalnızca üzerinde `ScrollView`desteklenir.	`-xf-orientation: horizontal;`
`-xf-placeholder`	`Entry`, `Editor`, `SearchBar`	tırnak içine alınmış metin \| `initial`	`-xf-placeholder: Enter name;`
`-xf-placeholder-color`	`Entry`, `Editor`, `SearchBar`	Renk \| `initial`	`-xf-placeholder-color: green;`
`-xf-spacing`	`StackLayout`	double \| `initial`	`-xf-spacing: 8;`
`-xf-thumb-color`	`Slider`, `Switch`	Renk \| `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 Kabuğa özgü özellikler

Aşağıdaki Xamarin.Forms Shell'e özgü CSS özellikleri de desteklenir ( Değerler sütununda türler italikken dize değişmez değerleri şunlardır gray):

Özellik	Şunlara uygulanır	Değerler	Örnek
`-xf-flyout-background`	`Shell`	Renk \| `initial`	`-xf-flyout-background: red;`
`-xf-shell-background`	`Element`	Renk \| `initial`	`-xf-shell-background: green;`
`-xf-shell-disabled`	`Element`	Renk \| `initial`	`-xf-shell-disabled: blue;`
`-xf-shell-foreground`	`Element`	Renk \| `initial`	`-xf-shell-foreground: yellow;`
`-xf-shell-tabbar-background`	`Element`	Renk \| `initial`	`-xf-shell-tabbar-background: white;`
`-xf-shell-tabbar-disabled`	`Element`	Renk \| `initial`	`-xf-shell-tabbar-disabled: black;`
`-xf-shell-tabbar-foreground`	`Element`	Renk \| `initial`	`-xf-shell-tabbar-foreground: gray;`
`-xf-shell-tabbar-title`	`Element`	Renk \| `initial`	`-xf-shell-tabbar-title: lightgray;`
`-xf-shell-tabbar-unselected`	`Element`	Renk \| `initial`	`-xf-shell-tabbar-unselected: cyan;`
`-xf-shell-title`	`Element`	Renk \| `initial`	`-xf-shell-title: teal;`
`-xf-shell-unselected`	`Element`	Renk \| `initial`	`-xf-shell-unselected: limegreen;`

Color

Aşağıdaki color değerler desteklenir:

X11CSS renkleri, UWP önceden tanımlanmış renkler ve Xamarin.Forms renklerle eşleşen renkler. Bu renk değerlerinin büyük/küçük harfe duyarlı olmadığını unutmayın.
onaltılık renkler: #rgb, #argb, #rrggbb, #aarrggbb
rgb renkleri: rgb(255,0,0), rgb(100%,0%,0%). Değerler 0-255 veya %0-100 aralığındadır.
rgba renkleri: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). Opaklık değeri 0,0-1,0 aralığındadır.
hsl renkleri: hsl(120, 100%, 50%). h değeri 0-360 aralığında, s ve l ise %0-100 aralığında yer alır.
hsla renkleri: hsla(120, 100%, 50%, .8). Opaklık değeri 0,0-1,0 aralığındadır.

Kalın -lığı

Her biri boşlukla ayrılmış bir, iki, üç veya dört thickness değer desteklenir:

Tek bir değer tekdüzen kalınlığı gösterir.
İki değer dikey ve yatay kalınlığı gösterir.
Üç değer üst, sonra yatay (sol ve sağ) ve ardından alt kalınlığı gösterir.
Dört değer üst, sonra sağ, sonra alt ve sonra sol kalınlığı gösterir.

Not

CSS thickness değerleri XAML Thickness değerlerinden farklıdır. Örneğin, XAML'de iki değer Thickness yatay ve dikey kalınlığı belirtirken, dört değer Thickness sola, sonra üst, sonra sağa ve sonra alt kalınlık gösterir. Ayrıca, XAML Thickness değerleri virgülle ayrılmıştır.

NamedSize

Aşağıdaki büyük/küçük harfe duyarsız namedsize değerler desteklenir:

default
micro
small
medium
large

Her namedsize değerin tam anlamı platforma ve görünüme bağımlıdır.

İşlevler

Doğrusal ve radyal gradyanlar sırasıyla ve radial-gradient() CSS işlevleri kullanılarak linear-gradient() belirtilebilir. Bu işlevlerin sonucu bir denetimin özelliğine background atanmalıdır.

Xamarin.University ile CSS Xamarin.Forms

Xamarin.Forms 3.0 CSS videosu