カスケード スタイル シート (CSS) を使った Xamarin.Forms アプリのスタイル設定

Xamarin.Forms では、カスケード スタイル シート (CSS) を使ったビジュアル要素のスタイル設定がサポートされています。

Xamarin.Forms アプリケーションは、CSS を使用してスタイルを設定できます。 スタイル シートはルールのリストで構成され、各ルールは 1 つ以上のセレクターと宣言ブロックで構成されます。 宣言ブロックは、プロパティ、コロン、値で構成される各宣言で、中かっこ内の宣言の一覧で構成されます。 ブロック内に複数の宣言がある場合は、セミコロンが区切り記号として挿入されます。 次のコード例は、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

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

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Assets/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 に追加できます。

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 を使用します。 したがって、次の XAML の例では、#listView セレクターは x:Name 属性が listView に設定されている 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;
}

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

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

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

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

セレクター リファレンス

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

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

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

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

プロパティ リファレンス

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

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

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

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

Span 要素をターゲットに設定すると、(# シンボルを使用する) 要素と名前の両方でスパンが CSS スタイルのターゲットにならないという、既知の問題があります。 Span 要素は StyleClass プロパティを持たない GestureElement から派生するため、スパンでは CSS クラスのターゲット設定をサポートしません。 詳細については、「Span コントロールに CSS スタイル設定を適用できない」を参照してください。

Xamarin.Forms 固有のプロパティ

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

Xamarin.Forms シェル固有のプロパティ

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

色

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

• X11色:CSS の色、UWP の定義済みの色、Xamarin.Formsの色に一致します。 これらの色の値では大文字と小文字が区別されません。
• 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 つの場合は、上、右、下、左の厚さの順に示します。

NamedSize

次の大文字と小文字が区別されない namedsize 値がサポートされています。

• default
• micro
• small
• medium
• large

各 namedsize 値の正確な意味は、プラットフォームとビューに依存します。

関数

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

Xamarin University で学ぶ Xamarin.Forms の CSS

Xamarin.Forms 3.0 CSS の動画

関連リンク

• リソース ディクショナリ
• XAML スタイルを使用して Xamarin.Forms アプリのスタイルを設定する