Xamarin.Forms使用級聯樣式表設定應用程式樣式表 （CSS）

Xamarin.Forms 支援使用級聯樣式表 （CSS） 設定可視化元素的樣式。

Xamarin.Forms 應用程式可以使用 CSS 來設定樣式。 樣式表單包含規則清單，每個規則都包含一或多個選取器和宣告區塊。 宣告區塊是由大括弧中的宣告清單所組成，每個宣告都包含屬性、冒號和值。 當區塊中有多個宣告時，分號會插入為分隔符。 下列程式代碼範例顯示一些 Xamarin.Forms 符合規範的 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;
}

在 中 Xamarin.Forms，CSS 樣式表單會在運行時間剖析和評估，而不是編譯時間，而且樣式表單會在使用時重新剖析。

此範例示範如何使用 CSS 來設定簡單應用程式的樣式，並顯示在下列螢幕快照中：

使用樣式表單

將樣式表單新增至解決方案的程式如下：

1. 將空白 CSS 檔案新增至 .NET Standard 連結庫專案。
2. 將 CSS 檔案的建置動作設定為 EmbeddedResource。

載入樣式表單

有許多方法可用來載入樣式表單。

XAML

在加入 ResourceDictionary至 之前，可以先載入樣式表單並剖StyleSheet析 類別：

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

屬性 StyleSheet.Source 會將樣式表單指定為相對於封入 XAML 檔案位置的 URI，或當 URI 以 開頭 /時相對於專案根目錄。

或者，在將樣式表單內CDATA嵌至 ResourceDictionary區段之前，可以先載入和剖StyleSheet析類別：

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

如需資源字典的詳細資訊，請參閱 資源字典。

C#

在 C# 中，可以從 載入 StringReader 樣式表單並新增至 ResourceDictionary：

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

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

方法的 StyleSheet.FromReader 自變數是 TextReader 已讀取樣式表單的 。

選取專案並套用屬性

CSS 會使用選取器來判斷要設為目標的元素。 具有相符選取器的樣式會依定義順序連續套用。 特定項目上定義的樣式一律會套用到最後。 如需支持選取器的詳細資訊，請參閱 選取器參考。

CSS 會使用屬性來設定選取元素的樣式。 每個屬性都有一組可能的值，有些屬性可能會影響任何類型的專案，而其他屬性則套用至元素群組。 如需支援屬性的詳細資訊，請參閱 屬性參考。

如果子樣式表單設定相同的屬性，子樣式表單一律會覆寫父樣式表單。 因此，套用設定相同屬性的樣式時，會遵循下列優先順序規則：

• 如果在應用程式資源中定義的樣式，則會在頁面資源中定義的樣式覆寫，如果他們設定相同的屬性。
• 如果控件資源中定義的樣式設定相同的屬性，頁面資源中定義的樣式將會覆寫。
• 如果控件資源中定義的樣式設定相同的屬性，應用程式資源中定義的樣式將會覆寫。

依類型選取專案

您可以透過類型來選取視覺化樹狀結構中的元素，且不區分大小寫 element 的選取器：

stacklayout {
    margin: 20;
}

此選取器會識別使用樣式表單之頁面上的任何 StackLayout 元素，並將其邊界設定為 20 的統一粗細。

依基類選取元素

視覺化樹狀結構中的元素可由基類選取，且不區分大小寫 ^base 的選取器：

^contentpage {
    background-color: lightgray;
}

這個選取器會識別任何 ContentPage 使用樣式表單的專案，並將其背景色彩設定為 lightgray。

依名稱選取專案

您可以使用區分大小寫 #id 的選取器來選取視覺化樹狀結構中的個別專案：

#listView {
    background-color: lightgray;
}

這個選取器會識別屬性設定為listView的專案StyleId。 不過，如果未 StyleId 設定 屬性，選取器會回復為使用 x:Name 專案的 。 因此，在下列 XAML 範例中， #listView 選取器會識別 ListView 屬性 x:Name 設定為 listView的 ，並將它的背景色彩設定為 lightgray。

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

選取具有特定類別屬性的專案

您可以使用區分大小寫 .class 的選取器來選取具有特定類別屬性的專案：

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

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

您可以將 元素的 屬性設定 StyleClass 為 CSS 類別名稱，將 CSS 類別指派給 XAML 元素。 因此，在下列 XAML 範例中，類別所 .detailPageTitle 定義的樣式會指派給第一 Label個 ，而 類別所 .detailPageSubtitle 定義的樣式則會指派給第二個 Label。

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

選取子專案

您可以使用不區分大小寫 element element 的選取器選取視覺化樹狀結構中的子元素：

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

此選取器會識別任何 Image 屬於元素子系的專案 ListView ，並將其高度和寬度設定為 60。 因此，在下列 XAML 範例中， listview image 選取器會識別 Image 的 子系 ListView，並將其高度和寬度設定為 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>

選取直接子專案

您可以使用不區分大小寫 element>element 的選取器選取視覺化樹狀結構中的直接子專案：

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

此選取器會識別任何 Image 直接元素子系的專案 StackLayout ，並將其高度和寬度設定為 200。 因此，在下列 XAML 範例中， stacklayout>image 選取器會識別 Image 為的直接子系 StackLayout，並將其高度和寬度設定為 200。

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

選取器參考

支援 Xamarin.Forms下列 CSS 選取器：

具有相符選取器的樣式會依定義順序連續套用。 特定項目上定義的樣式一律會套用到最後。

目前不支援下列選取器：

• [attribute]
• @media 和 @supports
• : 和 ::

屬性參考

支援下列 CSS 屬性（在 Values 資料Xamarin.Forms行中，類型為斜體，而字串常值為 gray）：

目前不支援下列屬性：

• all: initial.
• 版面配置屬性（方塊或方格）。
• 速記屬性，例如 font、 和 border。

此外，沒有 inherit 值，因此不支持繼承。 因此，您無法在版面配置上設定 font-size 屬性，並預期 Label 配置中的所有實例都繼承值。 其中一個例外狀況是 direction 屬性，其預設值 inherit為 。

目標 Span 專案有一個已知問題，導致範圍無法同時以元素和名稱作為 CSS 樣式的目標（使用 # 符號）。 專案 Span 衍生自 GestureElement，其沒有 StyleClass 屬性，因此範圍不支援 CSS 類別目標。 如需詳細資訊，請參閱 無法將 CSS 樣式套用至 Span 控件。

Xamarin.Forms 特定屬性

也支援下列Xamarin.Forms特定的 CSS 屬性（在 Values 數據行中，類型為斜體，而字串常值為 gray）：

Xamarin.Forms 殼層特定屬性

也支援下列 Xamarin.Forms Shell 特定 CSS 屬性（在 Values 數據行中，類型為斜體，而字串常值為 gray）：

顏色

支援下列 color 值：

• X11色彩，符合 CSS 色彩、UWP 預先定義的色彩和Xamarin.Forms色彩。 請注意，這些色彩值不區分大小寫。
• 十六進位色彩：#rgb、、、#rrggbb#argb、#aarrggbb
• rgb 色彩： rgb(255,0,0)、 rgb(100%,0%,0%)。 值的範圍為 0-255 或 0%-100%。
• rgba 色彩： rgba(255, 0, 0, 0.8)、 rgba(100%, 0%, 0%, 0.8)。 不透明度值位於 0.0-1.0 範圍內。
• hsl 色彩： hsl(120, 100%, 50%)。 h 值介於 0-360 的範圍內，而 s 和 l 則介於 0%-100% 的範圍內。
• hsla 色彩： hsla(120, 100%, 50%, .8)。 不透明度值位於 0.0-1.0 範圍內。

Thickness

支援一、二、三或四 thickness 個值，每個值會以空格符分隔：

• 單一值表示統一粗細。
• 兩個值表示垂直，然後水準粗細。
• 三個值表示頂端，然後水準 （左和右），然後是底部粗細。
• 四個值表示頂端、右、下、左粗細。

NamedSize

支援下列不區分 namedsize 大小寫的值：

• default
• micro
• small
• medium
• large

每個 namedsize 值的確切意義是平臺相依和檢視相依。

函式

您可以分別使用 linear-gradient() 和 radial-gradient() CSS 函式來指定線性和星形漸層。 這些函式的結果應該指派給 background 控件的 屬性。

與 Xamarin.University 搭配的 Xamarin.Forms CSS

Xamarin.Forms 3.0 CSS 影片

相關連結

• 資源字典
• 使用 XAML 樣式設定 Xamarin.Forms 應用程式樣式