カスケードスタイルシートを使用した 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.

XAMLXAML

@No__t_3に追加する前に、 StyleSheetクラスを使用してスタイルシートを読み込んで解析することができます。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>

@No__t_1プロパティは、スタイルシートを、外側の 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.

また、 ResourceDictionaryに追加する前に、 StyleSheetクラスを使用してスタイルシートを読み込んで解析することもできます。そのためには、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));
        }
    }
}

@No__t_0 メソッドの引数は、スタイルシートを読み取った 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.

種類別の要素の選択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.

注意

@No__t_0 セレクターは、指定された型のサブクラスを識別しません。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.

注意

@No__t_0 セレクターは、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 セレクターは x:Name 属性が listView に設定されている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 クラスで定義されているスタイルが2番目の Label に割り当てられます。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;
}

このセレクターは、 ListView要素の子であるImage要素を識別し、それらの高さと幅を60に設定します。This selector identifies any Image elements that are children of ListView elements, and sets their height and width to 60. したがって、次の XAML の例では、listview image セレクターはListViewの子であるImageを識別し、その高さと幅を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>

注意

@No__t_0 セレクターでは、子要素が親の_直接_の子である必要はありません。子要素は、親が異なる場合があります。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;
}

このセレクターは、 StackLayout要素の直接の子であるImage要素を識別し、それらの高さと幅を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 セレクターはStackLayoutの直接の子であるImageを識別し、その高さと幅を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>

注意

@No__t_0 セレクターを選択するには、子要素が親の_直接_の子である必要があります。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 @No__t_0 が email に設定されているすべての要素を選択します。Selects all elements with StyleId set to email. @No__t_0 が設定されていない場合は、x:Name にフォールバックします。If StyleId is not set, fallback to x:Name. XAML を使用する場合は、StyleId よりも x:Name が優先されます。When using XAML, x:Name is preferred over StyleId. このセレクターでは大文字と小文字が区別されることに注意してください。Note that this selector is case sensitive.
* * すべての要素を選択します。Selects all elements.
element label @No__t_0 型のすべての要素を選択しますが、サブクラスは選択しません。Selects all elements of type Label, but not subclasses. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.
^base ^contentpage @No__t_1 自体を含む基本クラスとして 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 @No__t_1 内のすべての Label 要素を選択します。Selects all Label elements inside a StackLayout. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.
element>element stacklayout>label @No__t_1 を持つすべての Label 要素を直接の親として選択します。Selects all Label elements with StackLayout as a direct parent. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.
element+element label+entry @No__t_1 の直後にすべての Entry 要素を選択します。Selects all Entry elements directly after a Label. このセレクターは大文字と小文字が区別されないことに注意してください。Note that this selector is case insensitive.
element~element label~entry @No__t_1 の前にあるすべての Entry 要素を選択します。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):

propertyProperty 対象Applies to Values Example
align-content FlexLayout stretch | center | start | end | spacebetween | 0 1 2 3 4 5 6 7 8 9 0 1 2stretch | 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 | 0 1 2stretch | center | start | end | flex-start | flex-end | initial align-items: flex-start;
align-self VisualElement auto | stretch | center | start | end | 0 1 2 3 4auto | 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 ダブル| initialdouble | initial border-radius: 10;
border-width ButtonImageButtonButton, ImageButton ダブル| initialdouble | initial border-width: .5;
color ActivityIndicatorBoxViewButtonCheckBoxDatePickerEditorEntryLabelPickerProgressBarSearchBarSwitchTimePickerActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker | initialcolor | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid ダブル| 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 | 0 1 2column | columnreverse | row | rowreverse | row-reverse | column-reverse | initial flex-direction: column-reverse;
flex-basis VisualElement 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 double | 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 ダブル| initialdouble | initial min-height: 250;
justify-content FlexLayout start | center | end | spacebetween | spacearound | 0 1 2 3 4 5 6 7 8 9 0start | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initial justify-content: flex-end;
line-height LabelSpanLabel, Span ダブル| 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 ダブル| initialdouble | initial min-height: 50;
min-width VisualElement ダブル| initialdouble | initial min-width: 112;
opacity VisualElement ダブル| 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 ダブル| initialdouble | initial padding-left: 3;
padding-top Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page ダブル| initialdouble | initial padding-top: 4;
padding-right Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page ダブル| initialdouble | initial padding-right: 2;
padding-bottom Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page ダブル| initialdouble | initial padding-bottom: 6;
position FlexLayout relative | absolute | initialrelative | absolute | initial position: absolute;
row-gap Grid ダブル| initialdouble | initial row-gap: 12;
text-align Entry, EntryCell, Label, SearchBarEntry, EntryCell, Label, SearchBar left | top | right | bottom | start | 0 1 2 3 4 5 6。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 LabelSpanLabel, 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 | 0 1 2 3 4 5 6left | top | right | bottom | start | center | middle | end | initial vertical-align: bottom;
visibility VisualElement true | visible | false | hidden | collapse | 0true | visible | false | hidden | collapse | initial visibility: hidden;
width VisualElement ダブル| 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).
  • @No__t_0、`border` などの短縮形のプロパティ。Shorthand 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.

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):

propertyProperty 対象Applies to Values Example
-xf-bar-background-color NavigationPageTabbedPageNavigationPage, TabbedPage | initialcolor | initial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPageTabbedPageNavigationPage, 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 EntryEditorEntry, Editor 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 ScrollViewStackLayoutScrollView, StackLayout horizontal | vertical | both | initialhorizontal | vertical | both | initial. bothScrollView でのみサポートされています。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 ダブル| initialdouble | initial -xf-spacing: 8;
-xf-thumb-color SliderSwitchSlider, 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. フォームシェル固有のプロパティ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):

propertyProperty 対象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:

  • CSS の色、UWP の定義済みの色、および Xamarin 形式の色と一致するX11 します。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、または4つの thickness 値がサポートされており、それぞれが空白で区切られています。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 は左、次に上、次に右、次に下の太さを示します。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