CSS 스타일시트를 사용 하 여 Xamarin Forms 앱 스타일 지정 (CSS)Styling Xamarin.Forms apps using Cascading Style Sheets (CSS)

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Xamarin.ios는 CSS (CSS 스타일시트)를 사용 하 여 시각적 요소 스타일 지정을 지원 합니다.Xamarin.Forms supports styling visual elements using Cascading Style Sheets (CSS).

CSS를 사용 하 여 Xamarin Forms 응용 프로그램에 스타일을 지정할 수 있습니다.Xamarin.Forms applications can be styled using CSS. 스타일 시트는 하나 이상의 선택기와 선언 블록으로 구성 된 규칙의 목록으로 구성 됩니다.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. 블록에 선언이 여러 개 있으면 세미콜론 (;)이 구분 기호로 삽입 됩니다.When there are multiple declarations in a block, a semi-colon is inserted as a separator. 다음 코드 예제에서는 몇 가지 Xamarin.ios 규격 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.ios에서 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. 그러나 XAML 스타일을 사용 하 여 현재 Xamarin.ios에서 지원 하지 않는 속성에 대해 CSS를 보완할 수 있습니다.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. .NET Standard library 프로젝트에 빈 CSS 파일을 추가 합니다.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

ResourceDictionary에 추가 되기 전에 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>

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. 지원 되는 선택기에 대 한 자세한 내용은 선택기 참조를 참조 하세요.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.

참고

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.ios와 관련 되며 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;
}

요소의 StyleClass 속성을 css 클래스 이름으로 설정 하 여 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에 할당 됩니다.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>

참고

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

이 선택기는 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>

참고

element>element 선택기를 사용 하려면 자식 요소가 부모의 직계 자식 이어야 합니다.The element>element selector requires that the child element is a direct child of the parent.

선택기 참조Selector reference

다음 CSS 선택기는 Xamarin.ios에서 지원 됩니다.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 StackLayout내에서 Label 요소를 모두 선택 합니다.Selects all Label elements inside a StackLayout. 이 선택기는 대/소문자를 구분 하지 않습니다.Note that this selector is case insensitive.
element>element stacklayout>label StackLayout가 있는 모든 Label 요소를 직접 부모로 선택 합니다.Selects all Label elements with StackLayout as a direct parent. 이 선택기는 대/소문자를 구분 하지 않습니다.Note that this selector is case insensitive.
element+element label+entry Label바로 뒤의 모든 Entry 요소를 선택 합니다.Selects all Entry elements directly after a Label. 이 선택기는 대/소문자를 구분 하지 않습니다.Note that this selector is case insensitive.
element~element label~entry Label앞에 있는 모든 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.ios에서 지원 됩니다 ( 열에서 형식은 기울임꼴, 문자열 리터럴은 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 |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 | 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 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 | 0 1 2column | columnreverse | row | rowreverse | row-reverse | column-reverse | initial flex-direction: column-reverse;
flex-basis VisualElement float | auto | initial.float | 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 double | initialdouble | initial min-height: 250;
justify-content FlexLayout start | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around |start | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initial justify-content: flex-end;
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 | 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 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 double, double | 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 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: initialall: initial.
  • 레이아웃 속성 (상자 또는 그리드).Layout properties (box, or grid).
  • font, 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. 한 가지 예외는 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 요소는 StyleClass 속성이 없는 GestureElement에서 파생 되므로 범위는 CSS 클래스 대상을 지원 하지 않습니다.The Span element derives from GestureElement, which does not have the StyleClass property so spans do not support CSS class targeting. 자세한 내용은 범위 제어에 CSS 스타일을 적용할 수 없음을 참조 하세요.For more information, see Not able to apply CSS styling to Span control.

Xamarin.ios 관련 속성Xamarin.Forms specific properties

다음 Xamarin.ios 관련 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, EditorEntry, 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 ScrollView, StackLayoutScrollView, StackLayout horizontal | vertical | both | initial.horizontal | 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 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.ios 셸 관련 속성Xamarin.Forms Shell specific properties

다음 Xamarin. Forms 셸 특정 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:

  • CSS 색, UWP 미리 정의 된 색 및 Xamarin.ios 색과 일치 하는 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.

ThicknessThickness

각각 공백으로 구분 되는 1, 2, 3 또는 4 개의 thickness 값이 지원 됩니다.One, two, three, or four thickness values are supported, each separated by white space:

  • 단일 값은 균일 두께를 나타냅니다.A single value indicates uniform thickness.
  • 두 값은 세로와 가로 두께를 나타냄Two values indicate vertical then horizontal thickness.
  • 위쪽, 가로 (왼쪽 및 오른쪽), 아래쪽 두께를 나타내는 세 개의 값이 있습니다.Three values indicate top, then horizontal (left and right), then bottom thickness.
  • 네 개의 값은 위쪽, 오른쪽, 아래쪽, 왼쪽 두께를 표시 합니다.Four values indicate top, then right, then bottom, then left thickness.

참고

CSS thickness 값은 XAML Thickness 값과 다릅니다.CSS thickness values differ from XAML Thickness values. 예를 들어 XAML에서 두 값 Thickness는 가로, 세로 두께를 나타냅니다. 반면 네 값 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.ios를 사용 하는 Xamarin.ios의 CSSCSS in Xamarin.Forms with Xamarin.University

Xamarin.ios 3.0 CSS 비디오Xamarin.Forms 3.0 CSS video