xamarin/Xamarin.Forms

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

Ouverte

#5 108 ouverte le 1 févr. 2019

 (6 commentaires) (2 réactions) (1 personne assignée)C# (1 926 forks)batch import
a/CSSe/3 :clock3:help wantedin-progressinactivep/iOS 🍎t/bug :bug:up-for-grabs

Métriques du dépôt

Stars
 (5 644 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

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.

Guide contributeur