[C#/MAUI/.NET6] VisualElement 엘리먼트 : StyleClass 속성을 사용해 스타일 클래스 설정하기 (프리뷰 버전 오류)

■ VisualElement 엘리먼트의 StyleClass 속성을 사용해 스타일 클래스를 설정하는 방법을 보여준다.

TestProject.zip

0.15MB

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentPage.Resources>
        <Style Class="Separator" TargetType="BoxView">
            <Setter Property="HeightRequest"   Value="1"       />
            <Setter Property="BackgroundColor" Value="#cccccc" />
        </Style>
        <Style Class="Rounded" TargetType="BoxView">
            <Setter Property="CornerRadius"    Value="10"      />
            <Setter Property="BackgroundColor" Value="#1faece" />
        </Style>
        <Style Class="Circle" TargetType="BoxView">
            <Setter Property="WidthRequest"    Value="100"     />
            <Setter Property="HeightRequest"   Value="100"     />
            <Setter Property="CornerRadius"    Value="50"      />
            <Setter Property="BackgroundColor" Value="#1faece" />
        </Style>
        <Style Class="Rotated" TargetType="VisualElement"
            ApplyToDerivedTypes="true">
            <Setter Property="Rotation" Value="45" />
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="30">
        <BoxView
            StyleClass="Separator"
            HorizontalOptions="Center"/>
        <BoxView
            StyleClass="Rounded,Rotated"
            HorizontalOptions="Center"
            WidthRequest="100"
            HeightRequest="100" />
        <BoxView
            StyleClass="Circle"
            HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

※ 프리뷰 버전 테스트시, StyleClass 속성이 "Rounded,Rotated"와 "Circle"인 경우 정상적으로 표시되지 않았다.