subindev 개발 블로그

[Xamarin.Forms] CornerRadius 위 아래 다른 값 주기 (위만 둥만 둥근 모서리) 본문

.NET/Xamarin

[Xamarin.Forms] CornerRadius 위 아래 다른 값 주기 (위만 둥만 둥근 모서리)

subindev 2025. 12. 11. 21:17

✅ Xamarin.Forms - PancakeView로 위 아래 다른 Radius

BottomSheet을 사용할 때 위만 둥근 모서리를 구현하고 싶은 상황,

기본 패키지에서는 제공하지 않으므로 PancakeView 다운

 

✔ 1. 반드시 설치해야 하는 NuGet

Xamarin.Forms.PancakeView

→ PCL(공용), Android 프로젝트 둘 다 설치해야 정상 동작함.


✔ 2. XAML에서 꼭 지켜야 하는 규칙

✘ 잘못된 코드 - Background가 CornerRadius를 무시함.

Background="#ffffff"

✔ 올바른 코드

BackgroundColor="#ffffff"

✔ 3. 레이아웃 조건(필수)

둥근 모서리가 잘리면 안 되므로 모든 부모 컨테이너들도 Clip이 꺼져 있어야 함.

<Grid IsClippedToBounds="False">
    <pv:PancakeView IsClippedToBounds="False" ... />
</Grid>


✔ 4. 정상 동작하는 PancakeView 구조 예시

이 구조를 그대로 쓰면 라운드가 100% 보임.

<pv:PancakeView
    CornerRadius="24,24,0,0"
    BackgroundColor="White"
    IsClippedToBounds="False"
    Padding="20"
    VerticalOptions="End"
    TranslationY="400">