CSS 樣式

發行項
08/22/2023

重要

此專案是實驗性版本。我們希望您嘗試實驗性行動裝置 Blazor 系結，並在提供意見反應 https://github.com/xamarin/MobileBlazorBindings 。

概觀

使用行動裝置 Blazor 系結所建置的應用程式具有各種樣式，可套用以控制 UI 的外觀。這些樣式可以直接套用至元件，或者可以使用級聯樣式表套用 (CSS) 。使用 CSS 而非直接樣式的一些優點是，它可讓您更妥善地區隔考慮 (，也就是讓元件樣式與其版面配置和功能分開) ，並允許與其他媒體共用 CSS (，例如 Web 應用程式) 。

在專案中包含 CSS

若要將 CSS 新增至行動裝置 Blazor 系結專案：

在應用程式的共用 UI 專案中，以滑鼠右鍵按一下任何資料夾，然後選取 [新增] -- > [新增專案] 並選取 [樣式表單] 專案類型 (如果您找不到，請使用搜尋功能來尋找 style sheet) 。
為您的樣式表單選擇適當的名稱，然後按 [新增]。
視需要編輯 CSS 檔案的內容， (請參閱下方支援的樣式) 。例如，若要將所有標籤設定為 large 具有字型大小：
```
label {
    font-size: large;
}
```
.razor開啟您想要使用 CSS 的檔案。

注意

許多應用程式都會有一個包含在應用程式主頁面中的單一 CSS 檔案。
將下列標記新增至 .razor 檔案，通常是在檔案的最上層。變更 CSS 檔案的名稱和路徑，以符合您所建立的內容：
```
<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>
```

注意

CSS 支援需要參考 Xamarin.Forms 4.5 或更新版本。若要更新此參考，請管理方案的 NuGet 套件，並確定解決方案使用的是 4.5 版或更新版本的 Xamarin.Forms。行動裝置 Blazor 系結的未來版本預設會包含此版本。

將 CSS 套用至元件

CSS 樣式會使用標準 CSS 語法在 CSS 檔案中宣告。樣式是使用選取器來指定，其允許根據專案類型、基類、名稱、類別屬性和數個其他方法套用樣式， (請參閱下列 Xamarin.Forms 參考) 。

在每個元件上允許 CSS 樣式的 .razor 檔案中，您可以分別透過 class 和 StyleId 屬性設定類別或名稱。

注意

支援 CSS 樣式的專案也有 StyleClass 屬性，這相當於 class 屬性。如果您需要從 C# 以程式設計方式使用 class 屬性，請使用逸出語法 @class ，例如 myElement.@class ，或使用 StyleClass 屬性，例如 myElement.StyleClass 。

範例 CSS 檔案：

/* this rule applies to all labels */
label {
    font-size: large;
}

/* these rules apply only when this class is specified */
.happyText {
    color: green;
}

.sadText {
    color: red;
}

範例 Razor 檔案程式碼片段：

<Label Text="Seattle" /> @* no class specified, so only 'label' rule applied *@
<Label class="happyText" Text="Weather: good" /> @* class is specified, so 'label' rule and '.happyText' rules applied *@
<Label class="sadText" Text="Traffic: bad" /> @* class is specified, so 'label' rule and '.sadText' rules applied *@

支援的 CSS 樣式

由於內建 UI 元件是以 Xamarin.Forms 控制項為基礎，請參閱使用 CSS 設定 Xamarin.Forms 應用程式的樣式，以深入瞭解此功能，以及哪些樣式可以套用至哪些元件。

疑難排解

將 [建置動作] 設定為 [內嵌資源]

在 Visual Studio 中新增 CSS 檔案時，CSS 檔案應該會自動設定 Embedded resource 為 Build Action ，以確保其包含在建置專案中。如果不是，請以滑鼠右鍵按一下 CSS 檔案，選取 [屬性]，然後將設定 Build Action 為 Embedded resource 。

針對子資料夾中的 CSS 使用正確的路徑語法

如果 CSS 檔案位於資料夾中，請使用其路徑搭配正斜線作為路徑分隔符號來指定其名稱。例如，如果 CSS 檔案是 <PROJECT ROOT>/assets/styles/MyApp.css ，則要包含在檔案中的 .razor 標記為：

<StyleSheet Resource="assets/styles/MyApp.css" Assembly="GetType().Assembly"></StyleSheet>

共用方式為