Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rounded corners with drop shadow not rendering correctly on iOS #149

Open
experimentalPrivateRepos opened this issue Nov 5, 2020 · 0 comments

Comments

@experimentalPrivateRepos

Problem

When trying to use a Drop Shadow + Rounded Corners on iOS in a CarouselView, the corners of the pancake view are not being rendered correctly.

On Android, no shadow is being rendered at all.

Rendered Output on iOS

render_output_ios

Rendered Output on Android

rendered_output_android

Xaml Code

<CarouselView x:Name="JobOfferCarousel" HeightRequest="200" Margin="0,10,0,10" PeekAreaInsets="25">
                        <CarouselView.ItemsLayout>
                            <LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"></LinearItemsLayout>
                        </CarouselView.ItemsLayout>
                        <CarouselView.ItemTemplate>
                            <DataTemplate>
                                <yummy:PancakeView Background="#ffffff" Padding="20" CornerRadius="13">
                                    <yummy:PancakeView.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding OpenUrl}" CommandParameter="{Binding Url}"></TapGestureRecognizer>
                                    </yummy:PancakeView.GestureRecognizers>
                                    <yummy:PancakeView.Shadow>
                                        <yummy:DropShadow BlurRadius="3"></yummy:DropShadow>
                                    </yummy:PancakeView.Shadow>
                                    <StackLayout>
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition></RowDefinition>
                                                <RowDefinition></RowDefinition>
                                                <RowDefinition></RowDefinition>
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                                            </Grid.ColumnDefinitions>
                                        </Grid>


                                        <Label Grid.Row="1" Grid.ColumnSpan="2"  Text="{Binding Name}" FontAttributes="Bold" TextColor="Black" FontSize="Large">
                                            <Label.FontFamily>Inter</Label.FontFamily>
                                        </Label>
                                        <Label Grid.Row="2" Grid.Column="1" MaxLines="3" LineBreakMode="TailTruncation" TextColor="Gray" Text="{Binding Description}" FontSize="Small"></Label>

                                    </StackLayout>
                                </yummy:PancakeView>
                            </DataTemplate>
                        </CarouselView.ItemTemplate>
                    </CarouselView>

Do you have any idea what might cause this rendering error? Thanks in advance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant