Skip to content
This repository has been archived by the owner on May 1, 2024. It is now read-only.

Commit

Permalink
[iOS] Fix Frame IsClippedToBounds issue (#11129)
Browse files Browse the repository at this point in the history
* Fixed issue clipping the Frame content on iOS

* Updated sample

* Updated iOS FrameRenderer

* Added sample to test issue 11291
  • Loading branch information
jsuarezruiz committed Jul 6, 2020
1 parent 3f6ae8f commit 816e1c8
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xamarin.Forms.Controls.Issues.Issue11120"
Title="Issue 11120">
<Grid
BackgroundColor="Wheat"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Padding="12"
BackgroundColor="Black"
TextColor="White"
Text="If the corners of the buttons clip to bounds, the test has passed."/>
<Grid
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Frame
Padding="0"
CornerRadius="{Binding Source={x:Reference CornerRadiusSlider},Path=Value}"
IsClippedToBounds="{Binding Source={x:Reference IsClippedToBoundsCheckBox},Path=IsChecked}">
<Frame.Resources>
<ResourceDictionary>

<Style
TargetType="Frame">
<Setter Property="BackgroundColor" Value="WhiteSmoke"/>
<Setter Property="HasShadow" Value="True"/>
<Setter Property="HorizontalOptions" Value="FillAndExpand"/>
<Setter Property="Margin" Value="40"/>
<Setter Property="Padding" Value="20"/>
<Setter Property="VerticalOptions" Value="Center"/>
</Style>

</ResourceDictionary>
</Frame.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
FontSize="Subtitle"
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
Text="..."
VerticalOptions="Center"/>
<Grid
Grid.Row="1"
ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Button
BackgroundColor="Blue"
TextColor="White"
CornerRadius="0"
Grid.Column="1"
Text="YES"/>
<Button
BackgroundColor="Gray"
TextColor="White"
CornerRadius="0"
Text="NO"/>
</Grid>
</Grid>
</Frame>
<StackLayout
Grid.Row="1">
<StackLayout
Orientation="Horizontal"
VerticalOptions="Start"
Padding="12 , 0">
<CheckBox
x:Name="IsClippedToBoundsCheckBox"
VerticalOptions="Center"
IsChecked="True"/>
<Label
VerticalOptions="Center"
Text="IsClippedToBounds"/>
</StackLayout>
<Label
Text="CornerRadius"
Margin="12, 0"/>
<Slider
x:Name="CornerRadiusSlider"
Minimum="0"
Maximum="48"
Value="12"/>
</StackLayout>
</Grid>
</Grid>
</ContentPage>
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
using Xamarin.Forms.CustomAttributes;
using Xamarin.Forms.Internals;

#if UITEST
using Xamarin.UITest;
using NUnit.Framework;
using Xamarin.Forms.Core.UITests;
#endif

namespace Xamarin.Forms.Controls.Issues
{
#if UITEST
[Category(UITestCategories.Frame)]
#endif
[Preserve(AllMembers = true)]
[Issue(IssueTracker.Github, 11120, "[Bug] IsClippedToBounds iOS not work", PlatformAffected.iOS)]
public partial class Issue11120 : ContentPage
{
public Issue11120()
{
#if APP
InitializeComponent();
#endif

}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
using Xamarin.Forms.CustomAttributes;
using Xamarin.Forms.Internals;

#if UITEST
using Xamarin.UITest;
using NUnit.Framework;
using Xamarin.Forms.Core.UITests;
#endif

namespace Xamarin.Forms.Controls.Issues
{
#if UITEST
[Category(UITestCategories.Frame)]
#endif
[Preserve(AllMembers = true)]
[Issue(IssueTracker.Github, 11291,
"[Bug] IsClippedToBounds not clipping Image when inside a Frame",
PlatformAffected.iOS)]
public class Issue11291 : TestContentPage
{
public Issue11291()
{

}

protected override void Init()
{
Title = "Issue 11291";

var layout = new StackLayout();

var instructions = new Label
{
Padding = 12,
BackgroundColor = Color.Black,
TextColor = Color.White,
Text = "If the image clips with the border of the Frame, the test has passed."
};

var frame = new Frame
{
IsClippedToBounds=true,
BorderColor = Color.Black,
Padding = 0,
CornerRadius = 24,
Margin = 12
};

var image = new Image
{
Aspect = Aspect.AspectFill,
Source = "oasis.jpg"
};

frame.Content = image;

layout.Children.Add(instructions);
layout.Children.Add(frame);

Content = layout;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -1430,6 +1430,8 @@
<Compile Include="$(MSBuildThisFileDirectory)Issue11113.xaml.cs" />
<Compile Include="$(MSBuildThisFileDirectory)Issue10182.cs" />
<Compile Include="$(MSBuildThisFileDirectory)Issue11107.cs" />
<Compile Include="$(MSBuildThisFileDirectory)Issue11120.xaml.cs" />
<Compile Include="$(MSBuildThisFileDirectory)Issue11291.cs" />
<Compile Include="$(MSBuildThisFileDirectory)Issue11272.cs" />
</ItemGroup>
<ItemGroup>
Expand Down Expand Up @@ -1673,6 +1675,9 @@
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
</EmbeddedResource>
<EmbeddedResource Include="$(MSBuildThisFileDirectory)Issue11113.xaml">
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
</EmbeddedResource>
<EmbeddedResource Include="$(MSBuildThisFileDirectory)Issue11120.xaml">
<Generator>MSBuild:UpdateDesignTimeXaml</Generator>
</EmbeddedResource>
</ItemGroup>
Expand Down
3 changes: 3 additions & 0 deletions Xamarin.Forms.Platform.iOS/Renderers/FrameRenderer.cs
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ protected override void OnElementPropertyChanged(object sender, PropertyChangedE
e.PropertyName == Xamarin.Forms.Frame.BorderColorProperty.PropertyName ||
e.PropertyName == Xamarin.Forms.Frame.HasShadowProperty.PropertyName ||
e.PropertyName == Xamarin.Forms.Frame.CornerRadiusProperty.PropertyName ||
e.PropertyName == Xamarin.Forms.Frame.IsClippedToBoundsProperty.PropertyName ||
e.PropertyName == VisualElement.IsVisibleProperty.PropertyName)
SetupLayer();
}
Expand Down Expand Up @@ -108,9 +109,11 @@ public virtual void SetupLayer()

Layer.RasterizationScale = UIScreen.MainScreen.Scale;
Layer.ShouldRasterize = true;
Layer.MasksToBounds = false;

_actualView.Layer.RasterizationScale = UIScreen.MainScreen.Scale;
_actualView.Layer.ShouldRasterize = true;
_actualView.Layer.MasksToBounds = Element.IsClippedToBounds;
}

public override void LayoutSubviews()
Expand Down

0 comments on commit 816e1c8

Please sign in to comment.