カスケードスタイルシートを使用した Xamarin. フォームアプリのスタイル設定 (CSS)Styling Xamarin.Forms apps using Cascading Style Sheets (CSS)

サンプルをダウンロードするサンプルをダウンロードするDownload Sample Download the sample

Xamarin は、カスケードスタイルシート (CSS) を使用したビジュアル要素のスタイル設定をサポートしています。Xamarin.Forms supports styling visual elements using Cascading Style Sheets (CSS).

Xamarin. フォームアプリケーションは、CSS を使用してスタイルを設定できます。Xamarin.Forms applications can be styled using CSS. スタイルシートは、ルールの一覧で構成され、各ルールは1つ以上のセレクターと宣言ブロックで構成されます。A style sheet consists of a list of rules, with each rule consisting of one or more selectors and a declaration block. 宣言ブロックは、中かっこで囲まれた宣言のリストで構成され、各宣言はプロパティ、コロン、および値で構成されます。A declaration block consists of a list of declarations in braces, with each declaration consisting of a property, a colon, and a value. 1つのブロックに複数の宣言がある場合、セミコロンは区切り記号として挿入されます。When there are multiple declarations in a block, a semi-colon is inserted as a separator. 次のコード例は、いくつかの Xamarin. Forms に準拠した CSS を示しています。The following code example shows some Xamarin.Forms compliant 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 スタイルシートはコンパイル時ではなく実行時に解析および評価され、使用時にスタイルシートが再解析されます。In Xamarin.Forms, CSS style sheets are parsed and evaluated at runtime, rather than compile time, and style sheets are re-parsed on use.

注意

現時点では、XAML スタイルで可能なすべてのスタイル設定を CSS で実行することはできません。Currently, all of the styling that's possible with XAML styling cannot be performed with CSS. ただし、現在、Xamarin. フォームではサポートされていないプロパティの CSS を補うために、XAML スタイルを使用できます。However, XAML styles can be used to supplement CSS for properties that are currently unsupported by Xamarin.Forms. XAML スタイルの詳細については、「XAML スタイルを使用した Xamarin.Forms アプリのスタイル設定」をご覧ください。For more information about XAML styles, see Styling Xamarin.Forms Apps using XAML Styles.

Monkeyappcssサンプルでは、単純なアプリのスタイルを CSS で使用する方法を示しています。次のスクリーンショットを参照してください。The MonkeyAppCSS sample demonstrates using CSS to style a simple app, and is shown in the following screenshots:

CSS スタイルが設定される MonkeyApp メインページMonkeyApp Main Page with CSS styling

CSS スタイルが設定される MonkeyApp の詳細ページMonkeyApp Detail Page with CSS styling

スタイルシートの使用Consuming a style sheet

ソリューションにスタイルシートを追加するには、次の手順を実行します。The process for adding a style sheet to a solution is as follows:

  1. 空の CSS ファイルを .NET Standard ライブラリプロジェクトに追加します。Add an empty CSS file to your .NET Standard library project.
  2. CSS ファイルのビルドアクションをEmbeddedResourceに設定します。Set the build action of the CSS file to EmbeddedResource.

スタイルシートの読み込みLoading a style sheet

スタイルシートの読み込みに使用できる方法はいくつかあります。There are a number of approaches that can be used to load a style sheet.

注意

現在、実行時にスタイルシートを変更し、新しいスタイルシートを適用することはできません。It's not currently possible to change a style sheet at runtime and have the new style sheet applied.

XAMLXAML

スタイルシートは、 StyleSheet ResourceDictionaryに追加する前に、クラスで読み込んで解析することができます。A style sheet can be loaded and parsed with the StyleSheet class before being added to a ResourceDictionary:

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

プロパティStyleSheet.Sourceは、外側の XAML ファイルの位置からの相対 uri としてスタイルシートを指定し/ます。または、uri がで始まる場合は、プロジェクトのルートからの相対 uri として指定します。The StyleSheet.Source property specifies the style sheet as a URI relative to the location of the enclosing XAML file, or relative to the project root if the URI starts with a /.

警告

ビルドアクションがEmbeddedResourceに設定されていない場合、CSS ファイルの読み込みに失敗します。The CSS file will fail to load if its build action is not set to EmbeddedResource.

またはStyleSheet ResourceDictionary、スタイルシートをに追加する前に、クラスを使用してスタイルシートを読み込んで解析することCDATAもできます。これを行うには、セクションにインライン展開します。Alternatively, a style sheet can be loaded and parsed with the StyleSheet class, before being added to a ResourceDictionary, by inlining it in a CDATA section:

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
            ^contentpage {
                background-color: lightgray;
            }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    ...
</ContentPage>

リソースディクショナリの詳細については、「リソースディクショナリ」を参照してください。For more information about resource dictionaries, see Resource Dictionaries.

C#C#

C# では、スタイルシートをからStringReader読み込んで、 ResourceDictionaryに追加することができます。In C#, a style sheet can be loaded from a StringReader and added to a 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スタイルシートを読み取ったです。The argument to the StyleSheet.FromReader method is the TextReader that has read the style sheet.

要素の選択とプロパティの適用Selecting elements and applying properties

CSS はセレクターを使用して、対象とする要素を決定します。CSS uses selectors to determine which elements to target. セレクターが一致するスタイルは、定義の順序で連続して適用されます。Styles with matching selectors are applied consecutively, in definition order. 特定の項目に定義されているスタイルは、常に最後に適用されます。Styles defined on a specific item are always applied last. サポートされているセレクターの詳細については、「 Selector Reference」を参照してください。For more information about supported selectors, see Selector Reference.

CSS では、プロパティを使用して、選択した要素のスタイルを適用します。CSS uses properties to style a selected element. 各プロパティには使用可能な値のセットがあり、一部のプロパティは要素の型に影響を与えますが、他のプロパティは要素のグループに適用されます。Each property has a set of possible values, and some properties can affect any type of element, while others apply to groups of elements. サポートされるプロパティの詳細については、「プロパティリファレンス」を参照してください。For more information about supported properties, see Property Reference.

重要

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

種類別の要素の選択Selecting elements by type

ビジュアルツリー内の要素は、大文字と小文字を区別elementしないセレクターを使用して、型で選択できます。Elements in the visual tree can be selected by type with the case insensitive element selector:

stacklayout {
    margin: 20;
}

このセレクターは、 StackLayoutスタイルシートを使用するページ上のすべての要素を識別し、それらの余白を均一の太さ20に設定します。This selector identifies any StackLayout elements on pages that consume the style sheet, and sets their margins to a uniform thickness of 20.

注意

elementセレクターは、指定された型のサブクラスを識別しません。The element selector does not identify subclasses of the specified type.

基本クラスによる要素の選択Selecting elements by base class

ビジュアルツリー内の要素は、大文字と小文字を区別^baseしないセレクターを使用して、基本クラスで選択できます。Elements in the visual tree can be selected by base class with the case insensitive ^base selector:

^contentpage {
    background-color: lightgray;
}

このセレクターは、 ContentPageスタイルシートを使用するすべての要素を識別し、そのlightgray背景色をに設定します。This selector identifies any ContentPage elements that consume the style sheet, and sets their background color to lightgray.

注意

^baseセレクターは、Xamarin. Forms に固有のものであり、CSS 仕様には含まれていません。The ^base selector is specific to Xamarin.Forms, and isn't part of the CSS specification.

名前による要素の選択Selecting an element by name

大文字と小文字を区別#idするセレクターを使用して、ビジュアルツリー内の個々の要素を選択できます。Individual elements in the visual tree can be selected with the case sensitive #id selector:

#listView {
    background-color: lightgray;
}

このセレクターは、 StyleIdプロパティがにlistView設定されている要素を識別します。This selector identifies the element whose StyleId property is set to listView. ただし、 StyleIdプロパティが設定されていない場合、セレクターは要素x:Nameのを使用するようにフォールバックします。However, if the StyleId property is not set, the selector will fall back to using the x:Name of the element. したがって、次の XAML の例で#listViewは、セレクターがListView x:Name属性がにlistView設定されているを識別し、背景色lightgrayをに設定します。Therefore, in the following XAML example, the #listView selector will identify the ListView whose x:Name attribute is set to listView, and will set it's background color to lightgray.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView x:Name="listView" ...>
            ...
        </ListView>
    </StackLayout>
</ContentPage>

特定のクラス属性を持つ要素の選択Selecting elements with a specific class attribute

特定のクラス属性を持つ要素は、大文字と小.class文字を区別するセレクターで選択できます。Elements with a specific class attribute can be selected with the case sensitive .class selector:

.detailPageTitle {
    font-style: bold;
    font-size: medium;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

Css クラスは、要素のStyleClassプロパティを css クラス名に設定することによって、XAML 要素に割り当てることができます。A CSS class can be assigned to a XAML element by setting the StyleClass property of the element to the CSS class name. したがって、次の XAML の.detailPageTitle例では、クラスで定義されているスタイルLabelが最初のに割り当てられ.detailPageSubtitle 、クラスで定義されLabelているスタイルが2番目のに割り当てられます。Therefore, in the following XAML example, the styles defined by the .detailPageTitle class are assigned to the first Label, while the styles defined by the .detailPageSubtitle class are assigned to the second Label.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
            ...
        </StackLayout>
    </ScrollView>
</ContentPage>

子要素の選択Selecting child elements

大文字と小文字を区別element elementしないセレクターを使用して、ビジュアルツリー内の子要素を選択できます。Child elements in the visual tree can be selected with the case insensitive element element selector:

listview image {
    height: 60;
    width: 60;
}

このセレクターは、 Image要素のListView子である要素を識別し、それらの高さと幅を60に設定します。This selector identifies any Image elements that are children of ListView elements, and sets their height and width to 60. したがって、次の XAML の例でlistview imageは、セレクターがImageの子ListViewであるを識別し、その高さと幅を60に設定します。Therefore, in the following XAML example, the listview image selector will identify the Image that's a child of the ListView, and sets its height and width to 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セレクターでは、子要素が親の_直接_の子である必要はありません。子要素は、親が異なる場合があります。The element element selector does not require the child element to be a direct child of the parent – the child element may have a different parent. 先祖が指定された最初の要素である場合、選択が行われます。Selection occurs provided that an ancestor is the specified first element.

直接の子要素の選択Selecting direct child elements

ビジュアルツリー内の直接の子要素は、大文字と小element>element文字を区別しないセレクターで選択できます。Direct child elements in the visual tree can be selected with the case insensitive element>element selector:

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

このセレクターは、 Image要素の直接のStackLayout子である要素を識別し、それらの高さと幅を200に設定します。This selector identifies any Image elements that are direct children of StackLayout elements, and sets their height and width to 200. したがって、次の XAML の例でstacklayout>imageは、セレクターがImageの直接の子StackLayoutであるを識別し、その高さと幅を200に設定します。Therefore, in the following XAML example, the stacklayout>image selector will identify the Image that's a direct child of the StackLayout, and sets its height and width to 200.

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

注意

セレクター element>elementでは、子要素が親の_直接_の子である必要があります。The element>element selector requires that the child element is a direct child of the parent.

セレクターリファレンスSelector reference

次の CSS セレクターが Xamarin. Forms でサポートされています。The following CSS selectors are supported by Xamarin.Forms:

セレクターSelector Example 説明Description
.class .header ' Header ' を含むStyleClassプロパティを持つすべての要素を選択します。Selects all elements with the StyleClass property containing 'header'. このセレクターでは大文字と小文字が区別されることに注意してください。Note that this selector is case sensitive.
#id #email がにemail設定さStyleIdれているすべての要素を選択します。Selects all elements with StyleId set to email. StyleId設定されていないx:Name場合は、にフォールバックします。If StyleId is not set, fallback to x:Name. XAML を使用するx:Name場合は、 StyleIdよりも優先されます。When using XAML, x:Name is preferred over StyleId. このセレクターでは大文字と小文字が区別されることに注意してください。Note that this selector is case sensitive.
* * すべての要素を選択します。Selects all elements.
element label Labelのすべての要素を選択しますが、サブクラスは選択しません。Selects all elements of type Label, but not subclasses. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.
^base ^contentpage ContentPage含むContentPageすべての要素を基底クラスとして選択します。Selects all elements with ContentPage as the base class, including ContentPage itself. このセレクターでは大文字と小文字が区別されず、CSS 仕様の一部ではないことに注意してください。Note that this selector is case insensitive and isn't part of the CSS specification.
element,element label,button すべてButtonの要素とすべてLabelの要素を選択します。Selects all Button elements and all Label elements. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.
element element stacklayout label 内のLabelすべての要素StackLayoutを選択します。Selects all Label elements inside a StackLayout. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.
element>element stacklayout>label を直接Labelの親StackLayoutとして使用しているすべての要素を選択します。Selects all Label elements with StackLayout as a direct parent. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.
element+element label+entry の直後EntryにあるすべてのLabel要素を選択します。Selects all Entry elements directly after a Label. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.
element~element label~entry の前EntryにあるすべてのLabel要素を選択します。Selects all Entry elements preceded by a Label. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.

セレクターが一致するスタイルは、定義の順序で連続して適用されます。Styles with matching selectors are applied consecutively, in definition order. 特定の項目に定義されているスタイルは、常に最後に適用されます。Styles defined on a specific item are always applied last.

ヒント

セレクターは、などの制限なしで組み合わせるStackLayout>ContentView>label.emailことができます。Selectors can be combined without limitation, such as StackLayout>ContentView>label.email.

現在、次のセレクターはサポートされていません。The following selectors are currently unsupported:

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

注意

特異性、および特異性のオーバーライドはサポートされていません。Specificity, and specificity overrides are unsupported.

プロパティ リファレンスProperty reference

次の CSS プロパティは、Xamarin. Forms でサポートされています ([] 列では、 gray型は_斜体_、文字列リテラルは)。The following CSS properties are supported by Xamarin.Forms (in the Values column, types are italic, while string literals are gray):

プロパティProperty 適用対象Applies to Values Example
align-content FlexLayout stretch | center | start | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initialstretch | 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 | initialstretch | center | start | end | flex-start | flex-end | initial align-items: flex-start;
align-self VisualElement auto | stretch | center | start | end | flex-start | flex-end | initialauto | stretch | center | start | end | flex-start | flex-end | initial align-self: flex-end;
background-color VisualElement |initialcolor | initial background-color: springgreen;
background-image Page 文字列 |initialstring | initial background-image: bg.png;
border-color Button, Frame, ImageButtonButton, Frame, ImageButton |initialcolor | initial border-color: #9acd32;
border-radius BoxView, Button, Frame, ImageButtonBoxView, Button, Frame, ImageButton double |initialdouble | initial border-radius: 10;
border-width Button, ImageButtonButton, ImageButton double |initialdouble | initial border-width: .5;
color ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePickerActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker |initialcolor | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid double |initialdouble | initial column-gap: 9;
direction VisualElement ltr | rtl | inherit | initialltr | rtl | inherit | initial direction: rtl;
flex-direction FlexLayout column | columnreverse | row | rowreverse | row-reverse | column-reverse | initialcolumn | columnreverse | row | rowreverse | row-reverse | column-reverse | initial flex-direction: column-reverse;
flex-basis VisualElement float | float auto 。 | initialfloat | auto | initial. さらに、0 ~ 100% の範囲のパーセンテージを%符号と共に指定できます。In addition, a percentage in the range 0% to 100% can be specified with the % sign. flex-basis: 25%;
flex-grow VisualElement float | initialfloat | initial flex-grow: 1.5;
flex-shrink VisualElement float | initialfloat | initial flex-shrink: 1;
flex-wrap VisualElement nowrap | wrap | reverse | wrap-reverse | initialnowrap | wrap | reverse | wrap-reverse | initial flex-wrap: wrap-reverse;
font-family Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span 文字列 |initialstring | initial font-family: Consolas;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span 2 |つの_namedsize_ | initialdouble | namedsize | initial font-size: 12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span bold | italic | initialbold | italic | initial font-style: bold;
height VisualElement double |initialdouble | initial min-height: 250;
justify-content FlexLayout start | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initialstart | 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, TimePickerButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, SearchHandler, Span, TimePicker double |initialdouble | initial letter-spacing: 2.5;
line-height Label, SpanLabel, Span double |initialdouble | initial line-height: 1.8;
margin View 太さ |initialthickness | initial margin: 6 12;
margin-left View 太さ |initialthickness | initial margin-left: 3;
margin-top View 太さ |initialthickness | initial margin-top: 2;
margin-right View 太さ |initialthickness | initial margin-right: 1;
margin-bottom View 太さ |initialthickness | initial margin-bottom: 6;
max-lines Label INT | initialint | initial max-lines: 2;
min-height VisualElement double |initialdouble | initial min-height: 50;
min-width VisualElement double |initialdouble | initial min-width: 112;
opacity VisualElement double |initialdouble | initial opacity: .3;
order VisualElement INT | initialint | initial order: -1;
padding Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page 太さ |initialthickness | initial padding: 6 12 12;
padding-left Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page double |initialdouble | initial padding-left: 3;
padding-top Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page double |initialdouble | initial padding-top: 4;
padding-right Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page double |initialdouble | initial padding-right: 2;
padding-bottom Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page double |initialdouble | initial padding-bottom: 6;
position FlexLayout relative | absolute | initialrelative | absolute | initial position: absolute;
row-gap Grid double |initialdouble | initial row-gap: 12;
text-align Entry, EntryCell, Label, SearchBarEntry, EntryCell, Label, SearchBar left | top | right | bottom | start | center | middle | end | initial.left | top | right | bottom | start | center | middle | end | initial. leftrightから左に記述された環境では回避する必要があります。left and right should be avoided in right-to-left environments. text-align: right;
text-decoration Label, SpanLabel, Span none | underline | strikethrough | line-through | initialnone | underline | strikethrough | line-through | initial text-decoration: underline, line-through;
transform VisualElement none, rotate, rotateX, rotateY, scale, scaleX, scaleY, translate, translateX, translateY, initialnone, rotate, rotateX, rotateY, scale, scaleX, scaleY, translate, translateX, translateY, initial transform: rotate(180), scaleX(2.5);
transform-origin VisualElement doubledouble |initialdouble, double | initial transform-origin: 7.5, 12.5;
vertical-align Label left | top | right | bottom | start | center | middle | end | initialleft | top | right | bottom | start | center | middle | end | initial vertical-align: bottom;
visibility VisualElement true | visible | false | hidden | collapse | initialtrue | visible | false | hidden | collapse | initial visibility: hidden;
width VisualElement double |initialdouble | initial min-width: 320;

注意

initialは、すべてのプロパティの有効な値です。initial is a valid value for all properties. 別のスタイルから設定された値 (既定値にリセット) をクリアします。It clears the value (resets to default) that was set from another style.

次のプロパティは現在サポートされていません。The following properties are currently unsupported:

  • all: initial.all: initial.
  • レイアウトのプロパティ (ボックスまたはグリッド)。Layout properties (box, or grid).
  • font、などの短縮形のプロパティborderShorthand properties, such as font, and border.

また、値はないinheritため、継承はサポートされません。In addition, there's no inherit value and so inheritance isn't supported. したがって、たとえば、レイアウトのfont-sizeプロパティを設定して、レイアウト内のすべてLabelのインスタンスが値を継承することを想定することはできません。Therefore you can't, for example, set the font-size property on a layout and expect all the Label instances in the layout to inherit the value. 1つの例外はdirectionプロパティで、既定値はinheritです。The one exception is the direction property, which has a default value of inherit.

ターゲットSpan要素には既知の問題があり、範囲が CSS スタイルのターゲットになるのを防ぐために# 、要素と名前の両方 (記号を使用) になります。Targeting Span elements has a known issue preventing spans from being the target of CSS styles by both element and name (using the # symbol). 要素Spanはから派生GestureElementします。これにはStyleClassプロパティがないため、span では CSS クラスのターゲット設定がサポートされません。The Span element derives from GestureElement, which does not have the StyleClass property so spans do not support CSS class targeting. 詳細については、「 Span コントロールに CSS スタイルを適用できない」を参照してください。For more information, see Not able to apply CSS styling to Span control.

Xamarin. フォーム固有のプロパティXamarin.Forms specific properties

次の Xamarin. Forms 固有の CSS プロパティもサポートされています ([] 列では、型grayは_斜体_ですが、文字列リテラルは)。The following Xamarin.Forms specific CSS properties are also supported (in the Values column, types are italic, while string literals are gray):

プロパティProperty 適用対象Applies to Values Example
-xf-bar-background-color NavigationPage, TabbedPageNavigationPage, TabbedPage |initialcolor | initial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPage, TabbedPageNavigationPage, TabbedPage |initialcolor | initial -xf-bar-text-color: gray
-xf-horizontal-scroll-bar-visibility ScrollView default | always | never | initialdefault | always | never | initial -xf-horizontal-scroll-bar-visibility: never;
-xf-max-length Entry, Editor, SearchBarEntry, Editor, SearchBar INT | initialint | initial -xf-max-length: 20;
-xf-max-track-color Slider |initialcolor | initial -xf-max-track-color: red;
-xf-min-track-color Slider |initialcolor | initial -xf-min-track-color: yellow;
-xf-orientation ScrollView, StackLayoutScrollView, StackLayout horizontal | vertical | both | initial.horizontal | vertical | both | initial. bothは、 ScrollViewでのみサポートされています。both is only supported on a ScrollView. -xf-orientation: horizontal;
-xf-placeholder Entry, Editor, SearchBarEntry, Editor, SearchBar 引用符で囲ま |れたテキストinitialquoted text | initial -xf-placeholder: Enter name;
-xf-placeholder-color Entry, Editor, SearchBarEntry, Editor, SearchBar |initialcolor | initial -xf-placeholder-color: green;
-xf-spacing StackLayout double |initialdouble | initial -xf-spacing: 8;
-xf-thumb-color Slider, SwitchSlider, Switch |initialcolor | initial -xf-thumb-color: limegreen;
-xf-vertical-scroll-bar-visibility ScrollView default | always | never | initialdefault | always | never | initial -xf-vertical-scroll-bar-visibility: always;
-xf-vertical-text-alignment Label start | center | end | initialstart | center | end | initial -xf-vertical-text-alignment: end;
-xf-visual VisualElement 文字列 |initialstring | initial -xf-visual: material;

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

次の Xamarin. フォームシェル固有の CSS プロパティもサポートされています ([] 列では、型grayは_斜体_ですが、文字列リテラルは)。The following Xamarin.Forms Shell specific CSS properties are also supported (in the Values column, types are italic, while string literals are gray):

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

ColorColor

colorの値がサポートされています。The following color values are supported:

  • X11CSS の色、UWP の定義済みの色、および Xamarin 形式の色と一致するX11 colors, which match CSS colors, UWP pre-defined colors, and Xamarin.Forms colors. これらの色の値は大文字と小文字を区別しないことに注意してください。Note that these color values are case insensitive.
  • 16進数の#rgb#argb: #rrggbb、、、#aarrggbbhex colors: #rgb, #argb, #rrggbb, #aarrggbb
  • rgb 色: rgb(255,0,0)rgb(100%,0%,0%)rgb colors: rgb(255,0,0), rgb(100%,0%,0%). 値の範囲は 0-255 ~ 0%-100% です。Values are in the range 0-255, or 0%-100%.
  • rgba 色: rgba(255, 0, 0, 0.8)rgba(100%, 0%, 0%, 0.8)rgba colors: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). 不透明度の値は、0.0 ~ 1.0 の範囲で指定します。The opacity value is in the range 0.0-1.0.
  • hsl の色hsl(120, 100%, 50%):。hsl colors: hsl(120, 100%, 50%). H 値は0-360 の範囲にあり、s と l の範囲は 0%-100% です。The h value is in the range 0-360, while s and l are in the range 0%-100%.
  • hsla の色hsla(120, 100%, 50%, .8):。hsla colors: hsla(120, 100%, 50%, .8). 不透明度の値は、0.0 ~ 1.0 の範囲で指定します。The opacity value is in the range 0.0-1.0.

太さThickness

1つ、2つ、3つthickness 、または4つの値がサポートされており、それぞれが空白で区切られています。One, two, three, or four thickness values are supported, each separated by white space:

  • 1つの値が均一の太さを示します。A single value indicates uniform thickness.
  • 2つの値は、垂直方向の幅を示します。Two values indicate vertical then horizontal thickness.
  • 3つの値は、top、横方向 (左と右)、下の太さを示します。Three values indicate top, then horizontal (left and right), then bottom thickness.
  • 4つの値は、top、right、bottom、left の各太さを示します。Four values indicate top, then right, then bottom, then left thickness.

注意

CSS thickness値は XAML Thickness値とは異なります。CSS thickness values differ from XAML Thickness values. たとえば、XAML では、2つのThickness値は水平方向の幅を示し、4つThicknessの値は left、top、right、bottom の各太さを示します。For example, in XAML a two-value Thickness indicates horizontal then vertical thickness, while a four-value Thickness indicates left, then top, then right, then bottom thickness. また、XAML Thickness値はコンマで区切られます。In addition, XAML Thickness values are comma delimited.

NamedSizeNamedSize

次の大文字namedsizeと小文字を区別しない値がサポートされています。The following case insensitive namedsize values are supported:

  • default
  • micro
  • small
  • medium
  • large

namedsize値の正確な意味は、プラットフォームに依存し、ビューに依存します。The exact meaning of each namedsize value is platform-dependent and view-dependent.

Xamarin. 大学を使用した Xamarin 形式の CSSCSS in Xamarin.Forms with Xamarin.University

Xamarin. Forms 3.0 CSS ビデオXamarin.Forms 3.0 CSS video