Cascading 스타일시트를 사용하여 앱 스타일 지정

.NET 다중 플랫폼 앱 UI(.NET MAUI) 앱은 CSS(Cascading Style Sheets)를 사용하여 스타일을 지정할 수 있습니다. 스타일시트가 규칙 목록으로 구성되며 각 규칙은 하나 이상의 선택기와 선언 블록으로 구성됩니다. 선언 블록은 속성, 콜론 및 값으로 구성된 각 선언과 함께 중괄호로 된 선언 목록으로 구성됩니다. 블록에 여러 선언이 있는 경우 세미콜론이 구분 기호로 삽입됩니다.

다음 예제에서는 일부 .NET MAUI 규격 CSS를 보여 줍니다.

navigationpage {
    -maui-bar-background-color: lightgray;
}

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
    -maui-spacing: 6;
}

grid {
    row-gap: 6;
    column-gap: 6;
}
.mainPageTitle {
    font-style: bold;
    font-size: 14;
}

.mainPageSubtitle {
    margin-top: 15;
}

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

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

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

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

.NET MAUI에서 CSS 스타일시트를 컴파일 시간이 아닌 런타임에 구문 분석하고 평가하며, 스타일시트가 사용 시 다시 구문 분석됩니다.

중요하다

CSS를 사용하여 .NET MAUI 앱의 스타일을 완전히 지정할 수 없습니다. 그러나 XAML 스타일을 사용하여 CSS를 보완할 수 있습니다. XAML 스타일에 대한 자세한 내용은 XAML 사용하여Style 앱을 참조하세요.

스타일시트 사용

.NET MAUI 앱에 스타일시트를 추가하는 프로세스는 다음과 같습니다.

  1. .NET MAUI 앱 프로젝트에 빈 CSS 파일을 추가합니다. CSS 파일은 모든 폴더에 배치할 수 있으며 Resources 폴더가 권장되는 위치입니다.
  2. CSS 파일의 빌드 동작을 MauiCss으로 설정합니다.

스타일시트 로드

스타일시트를 로드하는 데 사용할 수 있는 방법은 여러 가지가 있습니다.

메모

런타임에 스타일시트를 변경하고 새 스타일시트를 적용할 수 없습니다.

XAML에서 스타일시트 로드

스타일시트는 StyleSheet에 추가하기 전에 ResourceDictionary 클래스로 로드하고 구문 분석할 수 있습니다.

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

StyleSheet.Source 속성은 스타일시트를 바깥쪽 XAML 파일의 위치를 기준으로 하는 URI로 지정하거나, URI가 /시작하는 경우 프로젝트 루트를 기준으로 지정합니다.

경고

빌드 작업이 MauiCss로 설정되지 않은 경우 CSS 파일이 로드되지 않습니다.

또는 스타일시트를 StyleSheet 클래스로 로드한 후 구문 분석하고, ResourceDictionary 섹션에서 인라인으로 추가하여 CDATA에 더할 수 있습니다.

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

리소스 사전에 대한 자세한 내용은 리소스 사전참조하세요.

C에서 스타일시트 로드#

C#에서 스타일시트를 StringReader에서 가져와 ResourceDictionary에 추가할 수 있습니다.

using Microsoft.Maui.Controls.StyleSheets;

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 선택기는 .NET MAUI와 관련이 있으며 CSS 사양에 포함되지 않습니다.

이름으로 요소 선택

대/소문자를 구분하는 #id 선택기를 사용하여 시각적 트리의 개별 요소를 선택할 수 있습니다.

#listView {
    background-color: lightgray;
}

이 선택기는 StyleId 속성이 listView설정되는 요소를 식별합니다. 그러나 StyleId 속성이 설정되지 않은 경우 선택기는 요소의 x:Name 사용으로 대체됩니다. 따라서 다음 예제에서 #listView 선택기는 ListView 특성이 x:Name로 설정된 listView을 식별하고, 그 배경색을 lightgray로 설정합니다.

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

특정 클래스 특성이 있는 요소 선택

대/소문자를 구분하는 .class 선택기를 사용하여 특정 클래스 특성을 가진 요소를 선택할 수 있습니다.

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

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

CSS 클래스는 요소의 StyleClass 속성을 CSS 클래스 이름으로 설정하여 XAML 요소에 할당할 수 있습니다. 따라서 다음 예제에서는 .detailPageTitle 클래스에서 정의한 스타일이 첫 번째 Label할당되고 .detailPageSubtitle 클래스에서 정의한 스타일은 두 번째 Label할당됩니다.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/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="/Resources/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으로 설정합니다. 따라서 다음 예제에서 stacklayout>image 선택기는 Image직접 자식인 StackLayout 식별하고 높이와 너비를 200으로 설정합니다.

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

메모

element>element 선택기를 사용하려면, 자식 요소가 부모의 과의 직접 자식이 되는 것을 요구합니다.

선택기 참조

다음 CSS 선택기는 .NET MAUI에서 지원됩니다.

선택자 예시 묘사
.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 규칙이 동일한 요소를 가리키는 경우 가장 구체적인 선택기가 우선적으로 적용되고 해당 스타일 선언이 요소에 적용됩니다. 특이성 알고리즘 CSS 선택기의 가중치를 계산하여 경쟁 CSS 선언에서 요소에 적용되는 규칙을 결정합니다.

속성 참조

다음 CSS 속성은 .NET MAUI에서 지원됩니다 (값 열에서는 형식이 기울임꼴로, 문자열 리터럴은 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 색 | initial background-color: springgreen;
background-image Page 문자열 | initial background-image: bg.png;
border-color Border, Button, , Frame, ImageButton 색 | initial border-color: #9acd32;
border-radius Border, BoxView, Button, FrameImageButton 이중 | initial border-radius: 10;
border-width Border, Button, ImageButton 이중 | initial border-width: .5;
color ActivityIndicator, BoxView,Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker 색 | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid 이중 | 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 부동 | auto | initial. 또한 % 기호를 사용하여 0에서 100까지의%% 백분율을 지정할 수 있습니다. flex-basis: 25%;
flex-grow VisualElement 부동 | initial flex-grow: 1.5;
flex-shrink VisualElement 부동 | initial flex-shrink: 1;
flex-wrap VisualElement nowrap | wrap | reverse | wrap-reverse | initial flex-wrap: wrap-reverse;
font-family Button,DatePicker, Editor, Entry, Label, PickerSearchBar, TimePickerSpan 문자열 | initial font-family: Consolas;
font-size Button,DatePicker, Editor, Entry, Label, PickerSearchBar, TimePickerSpan 이중 | initial font-size: 12;
font-style Button,DatePicker, Editor, Entry, Label, PickerSearchBar, TimePickerSpan bold | italic | initial font-style: bold;
height VisualElement 이중 | initial 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, SearchBarSearchHandler, SpanTimePicker 이중 | initial letter-spacing: 2.5;
line-height Label, Span 이중 | 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 이중 | initial min-height: 50;
min-width VisualElement 이중 | initial min-width: 112;
opacity VisualElement 이중 | 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 이중 | initial padding-left: 3;
padding-top Button, ImageButton, , Layout, Page 이중 | initial padding-top: 4;
padding-right Button, ImageButton, , Layout, Page 이중 | initial padding-right: 2;
padding-bottom Button, ImageButton, , Layout, Page 이중 | initial padding-bottom: 6;
position FlexLayout relative | absolute | initial position: absolute;
row-gap Grid 이중 | 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, , EntryLabel, SearchBarSearchHandler none | default | uppercase | lowercase | initial text-transform: uppercase;
transform VisualElement none, rotate, rotateX, rotateY, scale, scaleX, scaleY, translatetranslateX, translateYinitial transform: rotate(180), scaleX(2.5);
transform-origin VisualElement 더블, 더블 | 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 이중 | initial width: 320;

메모

initial 모든 속성에 유효한 값입니다. 다른 스타일에서 설정된 값(기본값으로 다시 설정)을 지웁니다.

지원되지 않는 속성은 다음과 같습니다.

  • all: initial;
  • 레이아웃 속성(상자 또는 눈금).
  • font및 border같은 약식 속성입니다.

또한 inherit 값이 없으므로 상속이 지원되지 않습니다. 따라서 예를 들어 레이아웃에서 font-size 속성을 설정하고 레이아웃의 모든 Label 인스턴스가 값을 상속할 것으로 예상할 수 없습니다. 한 가지 예외는 기본값이 directioninherit 속성입니다.

중요하다

Span 요소는 CSS를 사용하여 대상으로 지정할 수 없습니다.

.NET MAUI 특정 속성

다음 .NET MAUI 특정 CSS 속성도 지원됩니다(값 열에서 형식은 기울임꼴 문자열 리터럴은 gray.

재산 적용 대상 가치 예시
-maui-bar-background-color NavigationPage, TabbedPage 색 | initial -maui-bar-background-color: teal;
-maui-bar-text-color NavigationPage, TabbedPage 색 | initial -maui-bar-text-color: gray
-maui-horizontal-scroll-bar-visibility ScrollView default | always | never | initial -maui-horizontal-scroll-bar-visibility: never;
-maui-max-length Entry, Editor, SearchBar Int | initial -maui-max-length: 20;
-maui-max-track-color Slider 색 | initial -maui-max-track-color: red;
-maui-min-track-color Slider 색 | initial -maui-min-track-color: yellow;
-maui-orientation ScrollView, StackLayout horizontal | vertical | both | initial. both은(는) ScrollView에서만 지원됩니다. -maui-orientation: horizontal;
-maui-placeholder Entry, Editor, SearchBar 따옴표 붙은 텍스트 | initial -maui-placeholder: Enter name;
-maui-placeholder-color Entry, Editor, SearchBar 색 | initial -maui-placeholder-color: green;
-maui-spacing StackLayout 이중 | initial -maui-spacing: 8;
-maui-shadow VisualElement 유효한 형식은 color, offsetX, offsetY | offset X, offsetY, radius, color | offset X, offsetY, radius, color, opacity -maui-shadow: #000000 4 4;
-maui-thumb-color Slider, Switch 색 | initial -maui-thumb-color: limegreen;
-maui-vertical-scroll-bar-visibility ScrollView default | always | never | initial -maui-vertical-scroll-bar-visibility: always;
-maui-vertical-text-alignment Label start | center | end | initial -maui-vertical-text-alignment: end;
-maui-visual VisualElement 문자열 | initial -maui-visual: material;

.NET MAUI Shell 특정 속성

다음 .NET MAUI Shell 특정 CSS 속성도 지원됩니다(값 열에서 형식은 기울임꼴 문자열 리터럴은 gray.

재산 적용 대상 가치 예시
-maui-flyout-background Shell 색 | initial -maui-flyout-background: red;
-maui-shell-background Element 색 | initial -maui-shell-background: green;
-maui-shell-disabled Element 색 | initial -maui-shell-disabled: blue;
-maui-shell-foreground Element 색 | initial -maui-shell-foreground: yellow;
-maui-shell-tabbar-background Element 색 | initial -maui-shell-tabbar-background: white;
-maui-shell-tabbar-disabled Element 색 | initial -maui-shell-tabbar-disabled: black;
-maui-shell-tabbar-foreground Element 색 | initial -maui-shell-tabbar-foreground: gray;
-maui-shell-tabbar-title Element 색 | initial -maui-shell-tabbar-title: lightgray;
-maui-shell-tabbar-unselected Element 색 | initial -maui-shell-tabbar-unselected: cyan;
-maui-shell-title Element 색 | initial -maui-shell-title: teal;
-maui-shell-unselected Element 색 | initial -maui-shell-unselected: limegreen;

색

지원되는 color 값은 다음과 같습니다.

  • CSS 색상 및 .NET MAUI 색상과 일치하는 X11색상. 이러한 색 값은 대/소문자를 구분하지 않습니다.
  • 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 값이 지원됩니다.

  • 단일 값은 균일한 두께를 나타냅니다.
  • 두 값은 세로 및 가로 두께를 나타냅니다.
  • 세 값은 위쪽, 가로(왼쪽 및 오른쪽), 아래쪽 두께를 나타냅니다.
  • 네 개의 값은 위쪽, 오른쪽, 아래쪽, 왼쪽 두께를 나타냅니다.

메모

CSS thickness 값은 XAML Thickness 값과 다릅니다. 예를 들어 XAML에서 두 값 Thickness 가로 및 세로 두께를 나타내고, 4개 값 Thickness 왼쪽, 위쪽, 오른쪽, 아래쪽 두께를 나타냅니다. 또한 XAML Thickness 값은 쉼표로 구분됩니다.

함수

linear-gradient() 및 radial-gradient() CSS 함수를 사용하여 선형 및 방사형 그라데이션을 각각 지정할 수 있습니다. 이러한 함수의 결과는 컨트롤의 background 속성에 할당되어야 합니다.

  • Last updated on