カスケード スタイル シートを使用してアプリをスタイル設定する

.NET マルチプラットフォーム アプリ UI (.NET MAUI) アプリは、カスケード スタイル シート (CSS) を使用してスタイルを設定できます。 スタイル シートはルールのリストで構成され、各ルールは 1 つ以上のセレクターと宣言ブロックで構成されます。 宣言ブロックは、プロパティ、コロン、値で構成される各宣言で、中かっこ内の宣言の一覧で構成されます。 ブロック内に複数の宣言がある場合は、セミコロンが区切り記号として挿入されます。

次の例は、.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 スタイル シートはコンパイル時ではなく実行時に解析して評価し、スタイル シートは使用中に再解析します。

スタイル シートを使用する

.NET MAUI アプリにスタイル シートを追加するプロセスは次のとおりです。

1. 空の CSS ファイルを .NET MAUI アプリ プロジェクトに追加します。 CSS ファイルは任意のフォルダーに配置することができ、推奨場所は [リソース] フォルダーです。
2. CSS ファイルのビルド アクションを MauiCss に設定します。

スタイル シートの読み込み

スタイル シートの読み込み方法は多数あります。

XAML でスタイル シートを読み込む

スタイル シートは、StyleSheet クラスを使用して読み込んで解析してから、ResourceDictionary に追加できます。

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

StyleSheet.Source プロパティは、外側の XAML ファイルの場所に関わる URI、あるいは URI が / で開始した場合は、プロジェクト ルートに関わる URI としてスタイル シートを指定します。

または、スタイル シートを読み込んで StyleSheet クラスで解析してから、CDATA セクション内にインライン展開して、スタイル シートを ResourceDictionary に追加することもできます。

<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 では、プロパティを使用して選択した要素のスタイルを設定します。 各プロパティには考えられる一連の値があり、一部のプロパティは任意の種類の要素に影響を与え、他のプロパティは要素のグループに適用します。 サポートされるプロパティの詳細については、「プロパティ リファレンス」をご覧ください。

子スタイルシートは、同じプロパティを設定する場合、常に親スタイルシートをオーバーライドします。 そのため、同じプロパティを設定するスタイルを適用する場合は、次の優先順位の規則に従います。

• アプリ リソースで定義されているスタイルは、同じプロパティを設定した場合、ページ リソースで定義されているスタイルで上書きされます。
• ページ リソースで定義されているスタイルは、同じプロパティを設定した場合、コントロール リソースで定義されているスタイルで上書きされます。
• アプリ リソースで定義されているスタイルは、同じプロパティを設定した場合、コントロール リソースで定義されているスタイルによって上書きされます。

型で要素を選択する

ビジュアル ツリー内の要素は、大文字と小文字を区別しない element セレクターで、型によって選択できます。

stacklayout {
    margin: 20;
}

このセレクターは、スタイル シートを使用するページ上の StackLayout 要素を識別し、余白を 20 の均一な太さに設定します。

基底クラスで要素を選択する

ビジュアル ツリー内の要素は、大文字と小文字を区別しない ^base セレクターを使用して基底クラスで選択できます。

^contentpage {
    background-color: lightgray;
}

このセレクターは、スタイル シートを使用するあらゆる ContentPage 要素を識別し、その背景色を lightgray に設定します。

名前で要素を選択する

ビジュアル ツリー内の個々の要素は、大文字と小文字を区別する #id セレクターを使用して選択できます。

#listView {
    background-color: lightgray;
}

このセレクターは、StyleId プロパティが listView に設定されている要素を識別します。 ただし、StyleId プロパティが設定されていない場合、セレクターはフォールバックして要素の x:Name を使用します。 したがって、次の例では、#listView セレクターは、x:Name 属性が listView に設定されている 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;
}

CSS クラスは、要素の StyleClass プロパティを CSS クラス名に設定することで、XAML 要素に割り当てることができます。 したがって、次の例では、.detailPageTitle クラスで定義されているスタイルが最初の Label に割り当てられるのに対して、.detailPageSubtitle クラスで定義されているスタイルは 2 番目の 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;
}

このセレクターは、ListView 要素の子である Image 要素を識別し、その高さと幅を 60 に設定します。 したがって、次の XAML の例では、listview image セレクターは、ListView の子である Image を識別し、その高さと幅を 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 セレクターで選択できます。

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

このセレクターは、StackLayout 要素の直接の子である Image 要素を識別し、その高さと幅を 200 に設定します。 したがって、次の例では、stacklayout>image セレクターは、StackLayout の直接の子である Image を識別し、その高さと幅を 200 に設定します。

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

セレクター リファレンス

.NET MAUI では、次の CSS セレクターがサポートされています。

セレクターが一致するスタイルを、定義順に連続して適用します。 特定の項目に定義されているスタイルは、常に最後に適用されます。

次のセレクターはサポートされていません。

• [attribute]
• @media と @supports
• : および ::

プロパティ リファレンス

次の CSS プロパティが .NET MAUI でサポートされています ([値] 列で、文字列リテラルは gray ですが、型は 斜体 です) 。

次のプロパティはサポートされていません。

• all: initial。
• レイアウトのプロパティ (ボックスまたはグリッド)。
• 短縮形のプロパティ (例: font、border)。

また、inherit の値がないため、継承はサポートされていません。 そのためたとえば、レイアウトに font-size プロパティを設定して、レイアウト内のすべての Label インスタンスが値を継承することを想定することはできません。 1 つの例外は direction プロパティで、既定値は inherit です。

.NET MAUI 固有のプロパティ

次の .NET MAUI 固有の CSS プロパティもサポートされています ([値] の列では、型は 斜体 ですが、文字列リテラルは gray です)。

NET MAUI Shell 固有のプロパティ

次の .NET MAUI Shell 固有の CSS プロパティもサポートされています (値列では、型は斜体、文字列リテラルは gray で示します)。

色

サポートされている color 値を次に示します。

• X11 の 色。CSS の色と .NET MAUI の色にマッチします。 これらの色値は、大文字と小文字が区別されます。
• 16 進数の色: #rgb、#argb、#rrggbb、#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 です。

厚さ

1 つ、2 つ、3 つ、または 4 つの thickness 値がサポートされ、それぞれ空白で区切られます。

• 値が 1 つの場合は、厚さが均一であることを示します。
• 値が 2 つの場合は、垂直方向、水平方向の厚さを示します。
• 値が 3 つの場合は、上面、水平方向 (左と右)、下面の厚さを示します。
• 値が 4 つの場合は、上、右、下、左の厚さの順に示します。

関数

直線的なグラデーションと放射状のグラデーションは、それぞれ CSS 関数 linear-gradient()、radial-gradient() を使用して指定できます。 これらの関数の結果は、コントロールの background プロパティに割り当てる必要があります。