使用級聯樣式表單的樣式應用程式
.NET 多平臺應用程式 UI （.NET MAUI） 應用程式可以使用級聯樣式表 （CSS） 來設定樣式。 樣式表單包含規則清單，每個規則都包含一或多個選取器和宣告區塊。 宣告區塊是由大括弧中的宣告清單所組成，每個宣告都包含屬性、冒號和值。 當區塊中有多個宣告時，分號會插入為分隔符。
下列範例顯示一些符合 .NET MAUI 規範的 CSS：
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;
}
在 .NET MAUI 中，CSS 樣式表單會在運行時間剖析和評估，而不是編譯時間，而且樣式表單會在使用時重新剖析。
重要
您無法使用 CSS 完整設定 .NET MAUI 應用程式的樣式。 不過，XAML 樣式可用來補充 CSS。 如需 XAML 樣式的詳細資訊，請參閱 使用 XAML 設定應用程式的樣式。
取用樣式表單
將樣式表單新增至 .NET MAUI 應用程式的程式如下：
- 將空白 CSS 檔案新增至 .NET MAUI 應用程式專案。 CSS 檔案可以放在任何資料夾中，而 Resources 資料夾是建議的位置。
- 將 CSS 檔案的建置動作設定為 MauiCss。
載入樣式表單
有許多方法可用來載入樣式表單。
注意
您無法在運行時間變更樣式表單，並套用新的樣式表單。
在 XAML 中載入樣式表單
在加入 ResourceDictionary至 之前，可以先載入樣式表單並剖StyleSheet析 類別：
<Application ...>
<Application.Resources>
<StyleSheet Source="/Resources/styles.css" />
</Application.Resources>
</Application>
屬性 StyleSheet.Source 會將樣式表單指定為相對於封入 XAML 檔案位置的 URI，或當 URI 以 開頭 /時相對於專案根目錄。
警告
如果 CSS 檔案的建置動作未設定為 MauiCss，將無法載入。
或者，在將樣式表單內CDATA嵌至 ResourceDictionary區段之前，可以先載入和剖StyleSheet析類別：
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet>
<![CDATA[
^contentpage {
background-color: lightgray;
}
]]>
</StyleSheet>
</ContentPage.Resources>
...
</ContentPage>
如需資源字典的詳細資訊，請參閱 資源字典。
在 C 中載入樣式表單#
在 C# 中，可以從 載入 StringReader 樣式表單並新增至 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));
}
}
}
方法的 StyleSheet.FromReader 自變數是 TextReader 已讀取樣式表單的 。
選取元素並套用屬性
CSS 會使用選取器來判斷要設為目標的元素。 具有相符選取器的樣式會依定義順序連續套用。 特定項目上定義的樣式一律會套用到最後。 如需支持選取器的詳細資訊，請參閱 選取器參考。
CSS 會使用屬性來設定選取元素的樣式。 每個屬性都有一組可能的值，有些屬性可能會影響任何類型的專案，而其他屬性則套用至元素群組。 如需支援屬性的詳細資訊，請參閱 屬性參考。
如果子樣式表單設定相同的屬性，子樣式表單一律會覆寫父樣式表單。 因此，套用設定相同屬性的樣式時，會遵循下列優先順序規則：
- 如果設定相同的屬性，應用程式資源中定義的樣式將會由頁面資源中定義的樣式覆寫。
- 如果控件資源中定義的樣式設定相同的屬性，頁面資源中定義的樣式將會覆寫。
- 如果控件資源中定義的樣式設定相同的屬性，應用程式資源中定義的樣式將會覆寫。
注意
不支援 CSS 變數。
依類型選取元素
您可以透過類型來選取視覺化樹狀結構中的元素，且不區分大小寫 element 的選取器：
stacklayout {
margin: 20;
}
此選取器會識別使用樣式表單之頁面上的任何 StackLayout 元素，並將其邊界設定為 20 的統一粗細。
注意
選取 element 器不會識別指定類型的子類別。
依基類選取元素
視覺化樹狀結構中的元素可由基類選取，且不區分大小寫 ^base 的選取器：
^contentpage {
background-color: lightgray;
}
這個選取器會識別任何 ContentPage 使用樣式表單的專案，並將其背景色彩設定為 lightgray。
注意
選取 ^base 器專屬於 .NET MAUI，且不屬於 CSS 規格的一部分。
依名稱選取專案
您可以使用區分大小寫 #id 的選取器來選取視覺化樹狀結構中的個別專案：
#listView {
background-color: lightgray;
}
這個選取器會識別屬性設定為listView的專案StyleId。 不過，如果未 StyleId 設定 屬性，選取器會回復為使用 x:Name 專案的 。 因此，在下列範例中， #listView 選取器會識別 ListView 屬性 x:Name 設定為 listView的 ，並將它的背景色彩設定為 lightgray。
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Resources/styles.css" />
</ContentPage.Resources>
<StackLayout>
<ListView x:Name="listView">
...
</ListView>
</StackLayout>
</ContentPage>
選取具有特定類別屬性的專案
您可以使用區分大小寫 .class 的選取器來選取具有特定類別屬性的專案：
.detailPageTitle {
font-style: bold;
font-size: 14;
text-align: center;
}
.detailPageSubtitle {
text-align: center;
font-style: italic;
}
您可以將 元素的 屬性設定 StyleClass 為 CSS 類別名稱，將 CSS 類別指派給 XAML 元素。 因此，在下列範例中，類別所 .detailPageTitle 定義的樣式會指派給第一 Label個 ，而 類別所 .detailPageSubtitle 定義的樣式則會指派給第二個 Label。
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Resources/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="/Resources/styles.css" />
</ContentPage.Resources>
<StackLayout>
<ListView ...>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
...
<Image ... />
...
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
注意
選取 element element 器不需要子專案是 父系的直接 子系， 子元素可能有不同的父代。 如果上階是指定的第一個專案，就會發生選取。
選取直接子專案
您可以使用不區分大小寫 element>element 的選取器選取視覺化樹狀結構中的直接子專案：
stacklayout>image {
height: 200;
width: 200;
}
此選取器會識別任何 Image 直接元素子系的專案 StackLayout ，並將其高度和寬度設定為 200。 因此，在下列範例中， stacklayout>image 選取器會識別 Image 為的 StackLayout直接子系，並將其高度和寬度設定為200。
<ContentPage ...>
<ContentPage.Resources>
<StyleSheet Source="/Resources/styles.css" />
</ContentPage.Resources>
<ScrollView>
<StackLayout>
...
<Image ... />
...
</StackLayout>
</ScrollView>
</ContentPage>
注意
選取 element>element 器要求子專案是 父系的直接 子系。
選取器參考
.NET MAUI 支援下列 CSS 選取器：
| 選取器 | 範例 | 描述 |
|---|---|---|
.class |
.header |
選取包含 StyleClass 『header』 屬性的所有元素。 此選取器區分大小寫。 |
#id |
#email |
選取所有設定為email的專案StyleId。 如果未 StyleId 設定，則後援為 x:Name。 使用 XAML 時， x:Name 優先於 StyleId。 此選取器區分大小寫。 |
* |
* |
選取所有元素。 |
element |
label |
選取 類型 Label的所有專案，但不會選取子類別。 此選取器不區分大小寫。 |
^base |
^contentpage |
選取具有 ContentPage 做為基類的所有元素，包括 ContentPage 本身。 此選取器不區分大小寫，且不屬於 CSS 規格的一部分。 |
element,element |
label,button |
選取所有 Button 元素和所有 Label 元素。 此選取器不區分大小寫。 |
element element |
stacklayout label |
Label選取 中的所有StackLayout專案。 此選取器不區分大小寫。 |
element>element |
stacklayout>label |
選取具有 StackLayout 作為直接父代的所有Label元素。 此選取器不區分大小寫。 |
element+element |
label+entry |
直接選取 之後Label的所有Entry專案。 此選取器不區分大小寫。 |
element~element |
label~entry |
選取前面加上 Label的所有Entry專案。 此選取器不區分大小寫。 |
具有相符選取器的樣式會依定義順序連續套用。 特定項目上定義的樣式一律會套用到最後。
提示
選擇器可以無限制地結合，例如 StackLayout>ContentView>label.email。
不支援下列選取器：
[attribute]@media和@supports:和::
注意
不支援特定性和特定性覆寫。
屬性參考
.NET MAUI 支援下列 CSS 屬性（在 Values 數據行中，類型為斜體，而字串常值為 gray）：
| 屬性 | 適用於 | 值 | 範例 |
|---|---|---|---|
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 | color | initial |
background-color: springgreen; |
background-image |
Page | string | initial |
background-image: bg.png; |
border-color |
Button、 、 FrameImageButton | color | 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、Button、CheckBox、、EditorLabelProgressBarEntryPickerDatePicker、、 SearchBarSwitchTimePicker | color | 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。 此外，範圍 0% 到 100% 的百分比可以使用符號來指定 % 。 |
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、 TimePickerSpan | string | initial |
font-family: Consolas; |
font-size |
Button、DatePicker、Editor、Entry、Label、Picker、SearchBar、 TimePickerSpan | double | initial |
font-size: 12; |
font-style |
Button、DatePicker、Editor、Entry、Label、Picker、SearchBar、 TimePickerSpan | bold | italic | initial |
font-style: bold; |
height |
VisualElement | double | 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、、 SpanTimePicker | double | initial |
letter-spacing: 2.5; |
line-height |
Label, Span | double | initial |
line-height: 1.8; |
margin |
View | 厚度 | initial |
margin: 6 12; |
margin-left |
View | 厚度 | initial |
margin-left: 3; |
margin-top |
View | 厚度 | initial |
margin-top: 2; |
margin-right |
View | 厚度 | initial |
margin-right: 1; |
margin-bottom |
View | 厚度 | 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 | 厚度 | 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 應該避免在右至左環境中使用和 right 。 |
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、scaleXscaleYtranslate、、 translateXtranslateYinitial |
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 |
width: 320; |
注意
initial 是所有屬性的有效值。 它會清除從另一個樣式設定的值（重設為預設值）。
不支援下列屬性：
all: initial.- 版面配置屬性（方塊或方格）。
- 速記屬性，例如
font、 和border。
此外，沒有 inherit 值，因此不支持繼承。 因此，您無法在版面配置上設定 font-size 屬性，並預期 Label 配置中的所有實例都繼承值。 其中一個例外狀況是 direction 屬性，其預設值 inherit為 。
重要
Span 無法使用 CSS 將元素設為目標。
.NET MAUI 特定屬性
也支援下列 .NET MAUI 特定 CSS 屬性（在 Values 數據行中，類型為斜體，而字串常值為 gray）：
| 屬性 | 適用於 | 值 | 範例 |
|---|---|---|---|
-maui-bar-background-color |
NavigationPage, TabbedPage | color | initial |
-maui-bar-background-color: teal; |
-maui-bar-text-color |
NavigationPage, TabbedPage | color | 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、 、 EditorSearchBar | int | initial |
-maui-max-length: 20; |
-maui-max-track-color |
Slider | color | initial |
-maui-max-track-color: red; |
-maui-min-track-color |
Slider | color | initial |
-maui-min-track-color: yellow; |
-maui-orientation |
ScrollView, StackLayout | horizontal | vertical | both | initial. both 只有在 上 ScrollView才支援 。 |
-maui-orientation: horizontal; |
-maui-placeholder |
Entry、 、 EditorSearchBar | 引號文字 | initial |
-maui-placeholder: Enter name; |
-maui-placeholder-color |
Entry、 、 EditorSearchBar | color | initial |
-maui-placeholder-color: green; |
-maui-spacing |
StackLayout |
double | initial |
-maui-spacing: 8; |
-maui-thumb-color |
Slider, Switch | color | 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 | string | initial |
-maui-visual: material; |
.NET MAUI Shell 特定屬性
也支援下列 .NET MAUI Shell 特定 CSS 屬性（在 Values 數據行中，類型為斜體，而字串常值為 gray）：
| 屬性 | 適用於 | 值 | 範例 |
|---|---|---|---|
-maui-flyout-background |
Shell | color | initial |
-maui-flyout-background: red; |
-maui-shell-background |
Element | color | initial |
-maui-shell-background: green; |
-maui-shell-disabled |
Element | color | initial |
-maui-shell-disabled: blue; |
-maui-shell-foreground |
Element | color | initial |
-maui-shell-foreground: yellow; |
-maui-shell-tabbar-background |
Element | color | initial |
-maui-shell-tabbar-background: white; |
-maui-shell-tabbar-disabled |
Element | color | initial |
-maui-shell-tabbar-disabled: black; |
-maui-shell-tabbar-foreground |
Element | color | initial |
-maui-shell-tabbar-foreground: gray; |
-maui-shell-tabbar-title |
Element | color | initial |
-maui-shell-tabbar-title: lightgray; |
-maui-shell-tabbar-unselected |
Element | color | initial |
-maui-shell-tabbar-unselected: cyan; |
-maui-shell-title |
Element | color | initial |
-maui-shell-title: teal; |
-maui-shell-unselected |
Element | color | initial |
-maui-shell-unselected: limegreen; |
顏色
支援下列 color 值：
X11色彩，符合 CSS 色彩和 .NET MAUI 色彩。 這些色彩值不區分大小寫。- 十六進位色彩：
#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 個值，每個值會以空格符分隔：
- 單一值表示統一粗細。
- 兩個值表示垂直，然後水準粗細。
- 三個值表示頂端，然後水準 （左和右），然後是底部粗細。
- 四個值表示頂端、右、下、左粗細。
注意
CSS thickness 值與 XAML Thickness 值不同。 例如，在 XAML 中，兩個值 Thickness 表示水準和垂直粗細，而四個值 Thickness 則表示左、上、右、下粗細。 此外，XAML Thickness 值會以逗號分隔。
函式
您可以分別使用 linear-gradient() 和 radial-gradient() CSS 函式來指定線性和星形漸層。 這些函式的結果應該指派給 background 控件的 屬性。
