-
[MAUI] StylesC#/MAUI 2022. 11. 4. 16:15
Styles.xaml
-기본 스타일값 지정된 xaml 파일.
Colors.xaml
-기본 컬러값 지정된 xaml 파일.
CalcDictionary.xaml ( ResourceDictionary.xaml )
-사용자 지정 xaml 파일.
CalcView.xaml
-ContentPage.xaml (표현하는 View)
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 클래스가 적용.
728x90'C# > MAUI' 카테고리의 다른 글
[MAUI] ResourceDictionary (0) 2022.11.03 댓글