[C#/MAUI/.NET6] PathGeometry 엘리먼트 : 복수 피규어들을 사용해 패스 지오메트리 만들기 (프리뷰 버전 오류)

■ PathGeometry 엘리먼트에서 복수 피규어들을 사용해 패스 지오메트리를 만드는 방법을 보여준다.

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">
    <Path
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="300"
        HeightRequest="300"
        StrokeThickness="10"
        Stroke="Black"
        BackgroundColor="Yellow"
        Aspect="Fill">
        <Path.Data>
            <PathGeometry>
                <!-- H -->
                <PathFigure StartPoint="0,0">
                    <LineSegment Point="0,100" />
                </PathFigure>
                <PathFigure StartPoint="0,50">
                    <LineSegment Point="50,50" />
                </PathFigure>
                <PathFigure StartPoint="50,0">
                    <LineSegment Point="50,100" />
                </PathFigure>
                <!-- E -->
                <PathFigure StartPoint="125,0">
                    <BezierSegment
                        Point1="60,-10"
                        Point2="60,60"
                        Point3="125,50" />
                    <BezierSegment
                        Point1="60,40"
                        Point2="60,110"
                        Point3="125,100" />
                </PathFigure>
                <!-- L -->
                <PathFigure StartPoint="150,0">
                    <LineSegment Point="150,100" />
                    <LineSegment Point="200,100" />
                </PathFigure>
                <!-- L -->
                <PathFigure StartPoint="225,0">
                    <LineSegment Point="225,100" />
                    <LineSegment Point="275,100" />
                </PathFigure>
                <!-- O -->
                <PathFigure StartPoint="300,50">
                    <ArcSegment
                        Point="300,50"
                        Size="25,50"
                        IsLargeArc="True" />
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</ContentPage>

※ 프리뷰 버전 테스트시, Path 엘리먼트가 설정된 크기대로 표시되지 않고 화면 전체를 채운 상태로 표시되었다. 디버깅 모드에서 Path 엘리먼트의 WidthRequest/HeightRequest 속성을 반복적으로 변경하면 표시가 정상적으로 되었다.