xamarin/Xamarin.Forms

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

オープン

#5,108 opened on 2019/02/01

 (6 件のコメント) (2 件のリアクション) (1 人の担当者)C# (1,926 件のフォーク)batch import
a/CSSe/3 :clock3:help wantedin-progressinactivep/iOS 🍎t/bug :bug:up-for-grabs

Repository metrics

Stars
 (5,644 個のスター)
PR merge metrics
 (30d に merged PR はありません)

説明

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.

コントリビューターガイド