728x90
728x170
PancakeView package 를 Xamarin 프로젝트를 할때 아주 유용하게 사용했다
MAUI 에서 사용하려고 보니 아직은 지원이 되지 않는것 같아 찾아보니
Border 의 StrokeShape 를 이용해 PancakeView 를 따라할수 있다
<Border
Margin="5"
StrokeThickness="0">
<Border.StrokeShape>
<RoundRectangle CornerRadius="0, 50, 0, 50" />
</Border.StrokeShape>
</Border>
ConerRadius 의 값 4가지를 이용하면 된다. 상좌,상우,하좌,하우 값으로 값을 주게되면 곡선 처리가 된다.
예시
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="Maui.LikePancakeView.MainPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="White">
<Grid
Margin="0"
Padding="0"
RowDefinitions="100,100,100,200,*">
<Border
Grid.Row="0"
Margin="5"
StrokeThickness="0">
<Border.Shadow>
<Shadow
Opacity="1"
Radius="20"
Offset="0,10">
<Shadow.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.1" Color="LightGray" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
<Border.StrokeShape>
<RoundRectangle CornerRadius="0, 50, 0, 50" />
</Border.StrokeShape>
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Offset="0.1" Color="SkyBlue" />
<GradientStop Offset="1.0" Color="#253890" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Label
Grid.Row="0"
FontAttributes="Bold"
FontSize="30"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="MAUI"
TextColor="White"
VerticalOptions="Center"
VerticalTextAlignment="Center">
<Label.Shadow>
<Shadow
Opacity="1"
Radius="10"
Offset="10,10">
<Shadow.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.1" Color="Black" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Label.Shadow>
</Label>
<Border
Grid.Row="1"
Margin="5"
StrokeThickness="0">
<Border.Shadow>
<Shadow
Opacity="1"
Radius="10"
Offset="0,10">
<Shadow.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.1" Color="LightGray" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
<Border.StrokeShape>
<RoundRectangle CornerRadius="0, 0, 50, 50" />
</Border.StrokeShape>
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Offset="0.1" Color="SkyBlue" />
<GradientStop Offset="1.0" Color="#253890" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Label
Grid.Row="1"
FontAttributes="Bold"
FontSize="30"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="MAUI"
TextColor="White"
VerticalOptions="Center"
VerticalTextAlignment="Center">
<Label.Shadow>
<Shadow
Opacity="1"
Radius="0"
Offset="10,10">
<Shadow.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.1" Color="Black" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Label.Shadow>
</Label>
<Border
Grid.Row="2"
Margin="5"
StrokeThickness="0">
<Border.Shadow>
<Shadow
Opacity="1"
Radius="10"
Offset="0,10">
<Shadow.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.1" Color="LightGray" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
<Border.StrokeShape>
<RoundRectangle CornerRadius="50, 50, 50, 50" />
</Border.StrokeShape>
<Border.Background>
<RadialGradientBrush Center="0.5,0.5">
<GradientStop Offset="0" Color="#253890" />
<GradientStop Offset="0.8" Color="SkyBlue" />
</RadialGradientBrush>
</Border.Background>
</Border>
<Label
Grid.Row="2"
FontAttributes="Bold"
FontSize="30"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="MAUI"
TextColor="White"
VerticalOptions="Center"
VerticalTextAlignment="Center">
<Label.Shadow>
<Shadow
Opacity="1"
Radius="0"
Offset="0,15">
<Shadow.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.1" Color="Black" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Label.Shadow>
</Label>
<Border
Grid.Row="3"
Margin="5"
StrokeThickness="0">
<Border.Shadow>
<Shadow
Opacity="1"
Radius="10"
Offset="0,10">
<Shadow.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.1" Color="LightGray" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
<Border.StrokeShape>
<RoundRectangle CornerRadius="0, 0, 350, 350" />
</Border.StrokeShape>
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Offset="0.1" Color="#253890" />
<GradientStop Offset="1.0" Color="SkyBlue" />
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</ContentPage>
결과
소스
https://github.com/kei-soft/KJunBlog/tree/master/Maui.LikePancakeView
728x90
그리드형
'C# > Xamarin Maui' 카테고리의 다른 글
[.NET MAUI] SearchBar 사용하기 (0) | 2022.08.18 |
---|---|
[.NET MAUI] Grid 사용 Tip (0) | 2022.08.17 |
[.NET MAUI] Label 에 그림자(Shadow) 넣기 (0) | 2022.08.17 |
[.NET MAUI] 룰렛게임 (Roulette Game) (0) | 2022.08.11 |
[.NET MAUI] XAML Styler 사용하기 (0) | 2022.08.11 |