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

サンプルをダウンロードします。 サンプルをダウンロードする

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;
}

では、CSS スタイル シートはコンパイル時ではなく実行時に解析および評価され、スタイル シートは実行時 Xamarin.Forms に再解析されます。

注意

現時点では、XAML スタイルで可能なすべてのスタイル設定を CSS で実行することはできません。 ただし、XAML スタイルを使用して、 で現在サポートされていないプロパティの CSS を補完できます Xamarin.Forms 。 XAML スタイルの詳細については、「XAML スタイルを使用した Xamarin.Forms アプリのスタイル設定」を参照してください。

次のスクリーンショットは、シンプルなアプリのスタイルを設定するために CSS を使用する方法を示しています。

[![Css スタイルが設定された、サルアプリのメイン ページ](css-images/MonkeyAppMainPage.png Css スタイルが設定された、"MonkeyApp メイン ページ" を参照してください。](css-images/MonkeyAppMainPage-Large.png#lightbox "CSS スタイルが設定された、サルアプリのメイン ページ")

[![CSS スタイルが設定された [サルアプリの詳細ページ](css-images/MonkeyAppDetailPage.png Css スタイルが設定された、"サルアプリの詳細ページ" を参照してください。](css-images/MonkeyAppDetailPage-Large.png#lightbox "CSS スタイルが設定された [サルアプリの詳細] ページ")

スタイル シートの使用

ソリューションにスタイル シートを追加するプロセスは次のとおりです。

  1. ライブラリ プロジェクトに空の CSS ファイル.NET Standard追加します。
  2. CSS ファイルのビルド アクションを EmbeddedResource に設定します

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

スタイル シートを読み込むには、いくつかの方法があります。

注意

現在、実行時にスタイル シートを変更し、新しいスタイル シートを適用することはできません。

XAML

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

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

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

警告

ビルド アクションが EmbeddedResource に設定されていない場合、CSS ファイルの読み込 みは失敗します

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

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

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

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

重要

CSS 変数はサポートされていません。

型による要素の選択

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

stacklayout {
    margin: 20;
}

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

注意

セレクター element は、指定された型のサブクラスを識別できません。

基本クラス別の要素の選択

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

^contentpage {
    background-color: lightgray;
}

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

注意

セレクター ^base は に固有 Xamarin.Forms であり、CSS 仕様の一部ではない。

名前による要素の選択

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

#listView {
    background-color: lightgray;
}

このセレクターは、 プロパティが に設定されている StyleId 要素を識別します listView 。 ただし、 プロパティ 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;
}

要素の プロパティを CSS クラス名に設定することで、CSS クラスを StyleClass XAML 要素に割り当てることができます。 したがって、次の XAML の例では、 クラスによって定義されたスタイルが最初の に割り当てられますが、 クラスによって定義されたスタイルは 2 番目の に .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 が異なる場合があります。 先祖が指定された最初の要素である場合、選択が行われます。

直接の子要素の選択

ビジュアル ツリー内の直接の子要素は、大文字と小文字を区別しないセレクターを使用して選択 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>

注意

セレクター element>element では、子要素が親の直接 子である必要があります。

セレクター リファレンス

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

セレクター 説明
.class .header 'header' を含む StyleClass プロパティを持つすべての要素を選択します。 このセレクターでは大文字と小文字が区別されます。
#id #email を に設定して、すべての StyleId 要素を選択します email 。 が 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 を直接親 Label として持つ StackLayout すべての要素を選択します。 このセレクターでは大文字と小文字が区別されません。
element+element label+entry の直後 Entry のすべての要素を選択します Label 。 このセレクターでは大文字と小文字が区別されません。
element~element label~entry の前のすべての Entry 要素を選択します Label 。 このセレクターは大文字と小文字が区別されないことに注意してください。

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

ヒント

セレクターは、などの制限なしで組み合わせることができ StackLayout>ContentView>label.email ます。

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

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

注意

特異性、および特異性のオーバーライドはサポートされていません。

プロパティ リファレンス

では、次の CSS プロパティがサポートされてい Xamarin.Forms ます ([ ] 列では、型は 斜体、文字列リテラルは 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 文字列 |initial background-image: bg.png;
border-color Button, Frame, ImageButton color | initial border-color: #9acd32;
border-radius BoxView, Button, Frame, ImageButton double | initial border-radius: 10;
border-width Button, ImageButton double |initial border-width: .5;
color ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker 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 |auto | initial. さらに、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, TimePicker, Span string | initial font-family: Consolas;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span double |namedsize | initial font-size: 12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span bold | italic | initial font-style: bold;
height VisualElement double | initial min-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, Span, TimePicker 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, Layout, Page 太さ |initial padding: 6 12 12;
padding-left Button, ImageButton, Layout, Page double | initial padding-left: 3;
padding-top Button, ImageButton, Layout, Page double | initial padding-top: 4;
padding-right Button, ImageButton, Layout, Page double | initial padding-right: 2;
padding-bottom Button, ImageButton, Layout, Page double | initial padding-bottom: 6;
position FlexLayout relative | absolute | initial position: absolute;
row-gap Grid double | initial row-gap: 12;
text-align Entry, EntryCell, Label, SearchBar 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, scaleX, scaleY, translate, translateX, translateY, initial transform: rotate(180), scaleX(2.5);
transform-origin VisualElement doubledouble |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 min-width: 320;

注意

initial は、すべてのプロパティの有効な値です。 別のスタイルから設定された値 (既定値にリセット) をクリアします。

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

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

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

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

Xamarin.Forms 特定のプロパティ

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

プロパティ 適用対象
-xf-bar-background-color NavigationPage, TabbedPage color | initial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPage, TabbedPage color | initial -xf-bar-text-color: gray
-xf-horizontal-scroll-bar-visibility ScrollView default | always | never | initial -xf-horizontal-scroll-bar-visibility: never;
-xf-max-length Entry, Editor, SearchBar INT | initial -xf-max-length: 20;
-xf-max-track-color Slider color | initial -xf-max-track-color: red;
-xf-min-track-color Slider color | initial -xf-min-track-color: yellow;
-xf-orientation ScrollView, StackLayout horizontal | vertical | both | initial. both は、でのみサポートされてい ScrollView ます。 -xf-orientation: horizontal;
-xf-placeholder Entry, Editor, SearchBar 引用符で囲まれたテキスト |initial -xf-placeholder: Enter name;
-xf-placeholder-color Entry, Editor, SearchBar color | initial -xf-placeholder-color: green;
-xf-spacing StackLayout double | initial -xf-spacing: 8;
-xf-thumb-color Slider, Switch color | initial -xf-thumb-color: limegreen;
-xf-vertical-scroll-bar-visibility ScrollView default | always | never | initial -xf-vertical-scroll-bar-visibility: always;
-xf-vertical-text-alignment Label start | center | end | initial -xf-vertical-text-alignment: end;
-xf-visual VisualElement string | initial -xf-visual: material;

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

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

プロパティ 適用対象
-xf-flyout-background Shell color | initial -xf-flyout-background: red;
-xf-shell-background Element color | initial -xf-shell-background: green;
-xf-shell-disabled Element color | initial -xf-shell-disabled: blue;
-xf-shell-foreground Element color | initial -xf-shell-foreground: yellow;
-xf-shell-tabbar-background Element color | initial -xf-shell-tabbar-background: white;
-xf-shell-tabbar-disabled Element color | initial -xf-shell-tabbar-disabled: black;
-xf-shell-tabbar-foreground Element color | initial -xf-shell-tabbar-foreground: gray;
-xf-shell-tabbar-title Element color | initial -xf-shell-tabbar-title: lightgray;
-xf-shell-tabbar-unselected Element color | initial -xf-shell-tabbar-unselected: cyan;
-xf-shell-title Element color | initial -xf-shell-title: teal;
-xf-shell-unselected Element color | initial -xf-shell-unselected: limegreen;

Color

次の color 値がサポートされています。

  • X11CSS の色、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 つの値は、上、右、下、左の太さを示します。

注意

CSS thickness 値は XAML 値とは異 Thickness なります。 たとえば、XAML では、2 つの値は水平方向の太さ、垂直方向の太さを示し、4 つの値は左、上、右、下の太 Thickness Thickness さを示します。 また、XAML 値 Thickness はコンマで区切られます。

NamedSize

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

  • default
  • micro
  • small
  • medium
  • large

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

関数

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

Xamarin.FormsXamarin.University での CSS

Xamarin.Forms 3.0 CSS ビデオ