xamarin/Xamarin.Forms

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

开放

#5,108 创建于 2019年2月1日

 (6 条评论) (2 个反应) (1 位负责人)C# (1,926 个派生)batch import
a/CSSe/3 :clock3:help wantedin-progressinactivep/iOS 🍎t/bug :bug:up-for-grabs

仓库指标

星标
 (5,644 个星标)
PR 合并指标
 (30 天内没有已合并 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.

贡献者指南