xamarin/Xamarin.Forms

Frame with a shadow on iOS adds a shadow to the contents

Open

#5,108 opened on Feb 1, 2019

 (6 comments) (2 reactions) (1 assignee)C# (1,926 forks)batch import
a/CSSe/3 :clock3:help wantedin-progressinactivep/iOS 🍎t/bug :bug:up-for-grabs

Repository metrics

Stars
 (5,644 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Description

Frames on iOS have drop shadows on the contents of the frame.

Given a simple frame like this:

<Frame class="ColouredFrame" CornerRadius="10" >
  <StackLayout Spacing="0">
    <StackLayout Orientation="Horizontal" Margin="0, 5, 0, 20">
      <Label class="RadioText" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Start" FontAttributes="Bold">Please review and confirm that you agree to our terms and conditions before continuing.</Label>
      <Button Text="View" Clicked="Button_Clicked" class="Primary" HorizontalOptions="End" VerticalOptions="Start" BorderRadius="8" WidthRequest="80"></Button>
    </StackLayout>
    <StackLayout Orientation="Horizontal" Margin="0, 5, 0, 5">
      <Label class="RadioText" FontAttributes="Bold" VerticalTextAlignment="Center">I agree</Label>
      <Switch x:Name="rbTerms" HorizontalOptions="StartAndExpand" />
      <Button x:Name="btnContinue" StyleClass="Primary" Text="Continue" HorizontalOptions="Center" Clicked="ContinueButton_Clicked" BorderRadius="8" IsEnabled="False" WidthRequest="150"></Button>
    </StackLayout>
  </StackLayout>
</Frame>

and some CSS:

.ColouredFrame {
    border-color: #57BABE;
    background-color: #2257BABE;
    padding: 10 10 10 10;
}

    .ColouredFrame label {
        color: #57BABE;
    }

On iOS the shadow applies to everything within the Frame on Android, it only applies to the frame.

Expected Behavior

I would not expect the shadow to apply to the contents of the frame. At the very least iOS and Android should be consistent.

  • Version with issue: Forms 4.0.0.94569-pre3
  • Last known good version: N/A

Screenshots

Android: screenshot_20190201-android

iOS: screenshot_20190201-ios

Workaround

Adding HasShadow='False' to the frame solves the issue.

Contributor guide