[MAUI] Styles

Style Folder

 

Styles.xaml

-기본 스타일값 지정된 xaml 파일.

Colors.xaml

-기본 컬러값 지정된 xaml 파일.

CalcDictionary.xaml ( ResourceDictionary.xaml )

-사용자 지정 xaml 파일.

 

CalcView.xaml

-ContentPage.xaml (표현하는 View)

---

Style.xaml

---

Color.xaml

---

ResourceDictionary.xaml

---

App.xaml

App.xaml에 

                <ResourceDictionary Source="Resources/Styles/CalcDictionary.xaml" />

사용자 정의한 스타일 xaml 파일 추가

**순서중요**

-추가한 순서대로 스타일 순차 적용.

 

위처럼 추가된 스타일 파일(CalcDictionary.xaml)에 정의된 스타일 값은

기본값 스타일(Styles.xaml)의 AppThemeBinding을 무시하고 Light테마 Dark테마 상관없이 디폴트(Light)값으로 적용됨.

( 테마 모드에 따른 스타일 변화를 프로퍼티 별로 지정하여 사용하여야 함.)

EX)

<Style
        TargetType="BoxView">
        <Setter Property="Color" Value="{AppThemeBinding Dark={StaticResource DarkPrimary}, Light={StaticResource LightPrimary}}"/>
        <Setter Property="CornerRadius" Value="30,30,0,0"/>
    </Style>

---

 

    <!--#region Labels -->
    <Style
        Class="LabelText"
        TargetType="Label">
        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LightText}, Dark={StaticResource DarkText}}"/>
        <Setter Property="HorizontalTextAlignment" Value="End"/>
    </Style>

    <Style 
        Class="LabelOperations"
        TargetType="Label">
        <Setter Property="FontFamily" Value="SublimaLight"/>
        <Setter Property="FontSize" Value="25"/>
    </Style>

    <Style 
        Class="LabelResult"
        TargetType="Label">
        <Setter Property="FontFamily" Value="SublimaBold"/>
        <Setter Property="FontSize" Value="50"/>
    </Style>
    <!--#endregion-->

ResourceDictionary.xaml

Class로 지정하여

        <VerticalStackLayout>
            <Label 
                StyleClass="LabelText, LabelOperations"
                Text="5 * 5"/>
            <Label 
                StyleClass="LabelText, LabelResult"
                Text="25"/>
        </VerticalStackLayout>

ContentPage.xaml

원하는 Class 스타일 적용하여 사용가능.

2가지 Class에 중복되는 property있을 시 뒤에있는 순서의 property가 적용.

( 코딩한 class 순서로 순차 적용)

EX) StyleClass="LabelText, LabelOperations" 

LabelText 클래스가 먼저 적용되고 LabelOperations 클래스가 적용.