Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve shadow rendering on Android, fix shadow clipping on iOS #26789

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Improve shadow rendering on Android, fix shadow clipping on iOS #26789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1702ea7
Android shadow
albyrock87 Dec 23, 2024
a9b540b
Update screenshots
albyrock87 Jan 9, 2025
14eecfe
Small speedup
albyrock87 Jan 14, 2025
166b602
Address feedbacks and fix iOS shadows/clipping
albyrock87 Jan 15, 2025
7cee0bb
Merge branch 'main' into android-shadow
albyrock87 Jan 15, 2025
cea78e7
Regenerate correct aar
albyrock87 Jan 15, 2025
d5b7225
Updated Screenshots
albyrock87 Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified src/Controls/tests/TestCases.Android.Tests/snapshots/android/Issue24414Test.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Controls/tests/TestCases.Android.Tests/snapshots/android/Issue24414Test_1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Controls/tests/TestCases.Android.Tests/snapshots/android/Issue24414Test_2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Controls/tests/TestCases.Android.Tests/snapshots/android/Issue24414Test_3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Controls/tests/TestCases.Android.Tests/snapshots/android/Issue24414Test_4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Controls/tests/TestCases.Android.Tests/snapshots/android/Issue24414Test_5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion ...Controls/tests/TestCases.HostApp/Elements/CollectionView/CollectionViewCoreGalleryPage.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
using Maui.Controls.Sample.CollectionViewGalleries.GroupingGalleries;
using Maui.Controls.Sample.CollectionViewGalleries.HeaderFooterGalleries;
using Maui.Controls.Sample.CollectionViewGalleries.ItemSizeGalleries;
using Maui.Controls.Sample.CollectionViewGalleries.PerformanceGalleries;
using Maui.Controls.Sample.CollectionViewGalleries.SelectionGalleries;

namespace Maui.Controls.Sample.CollectionViewGalleries
Expand Down Expand Up @@ -45,7 +46,8 @@ public CollectionViewCoreGalleryContentPage()
// ItemsFromViewModelShouldBeSelected (src\Compatibility\ControlGallery\src\Issues.Shared\CollectionViewBoundMultiSelection.cs)
TestBuilder.NavButton("Selection Galleries", () => new SelectionGallery(), Navigation),
TestBuilder.NavButton("Item Size Galleries", () => new ItemsSizeGallery(), Navigation),
TestBuilder.NavButton("EmptyView Galleries", () => new EmptyViewGallery(), Navigation)
TestBuilder.NavButton("EmptyView Galleries", () => new EmptyViewGallery(), Navigation),
TestBuilder.NavButton("Performance Galleries", () => new ShadowBenchmark(), Navigation),
}
}
};
Expand Down
222 changes: 222 additions & 0 deletions ...tests/TestCases.HostApp/Elements/CollectionView/PerformanceGalleries/ShadowBenchmark.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Maui.Controls.Sample.CollectionViewGalleries.PerformanceGalleries.ShadowBenchmark"
Title="Shadow Benchmark">
<ContentView.Resources>
<ResourceDictionary>

<Style x:Key="PostBorderStyle" TargetType="Border">
<Setter Property="StrokeThickness" Value="0" />
<Setter Property="HeightRequest" Value="240" />
</Style>

<Style x:Key="UserBorderStyle" TargetType="Border">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Stroke" Value="{Binding User.Color}" />
<Setter Property="StrokeThickness" Value="4" />
<Setter Property="HeightRequest" Value="54" />
<Setter Property="WidthRequest" Value="54" />
<Setter Property="HorizontalOptions" Value="Start" />
<Setter Property="Margin" Value="12" />
</Style>

<Style x:Key="UserNameStyle" TargetType="Label">
<Setter Property="TextColor" Value="Black" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>

<Style x:Key="CreatedAtStyle" TargetType="Label">
<Setter Property="FontSize" Value="10" />
<Setter Property="TextColor" Value="Black" />
<Setter Property="Opacity" Value="0.75" />
</Style>

<Style x:Key="InfoLayoutStyle" TargetType="StackLayout">
<Setter Property="Margin" Value="12, 0" />
</Style>

<Style x:Key="HeartIconStyle" TargetType="Path">
<Setter Property="Fill" Value="Black" />
<Setter Property="Scale" Value="0.5" />
<Setter Property="HorizontalOptions" Value="Start" />
<Setter Property="VerticalOptions" Value="Center" />
</Style>

<Style x:Key="HeartTextStyle" TargetType="Label">
<Setter Property="FontSize" Value="10" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="Margin" Value="2, 0" />
</Style>

<Style x:Key="MarkIconStyle" TargetType="Path">
<Setter Property="Fill" Value="Black" />
<Setter Property="Scale" Value="0.5" />
<Setter Property="HorizontalOptions" Value="Start" />
<Setter Property="VerticalOptions" Value="Center" />
</Style>

<Style x:Key="PlayBorderStyle" TargetType="Border">
<Setter Property="Background" Value="White" />
<Setter Property="StrokeThickness" Value="0" />
<Setter Property="HeightRequest" Value="44" />
<Setter Property="WidthRequest" Value="44" />
<Setter Property="Margin" Value="12" />
</Style>

<Style x:Key="PlayIconStyle" TargetType="Path">
<Setter Property="Fill" Value="Black" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="Scale" Value="0.5" />
<Setter Property="Margin" Value="6" />
</Style>

<Style x:Key="TitleTextStyle" TargetType="Label">
<Setter Property="FontSize" Value="18" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="TextColor" Value="White" />
<Setter Property="LineBreakMode" Value="WordWrap" />
<Setter Property="MaxLines" Value="2" />
<Setter Property="HorizontalOptions" Value="Start" />
<Setter Property="WidthRequest" Value="280" />
</Style>

<Style x:Key="FromTextStyle" TargetType="Label">
<Setter Property="FontSize" Value="12" />
<Setter Property="TextColor" Value="LightGray" />
<Setter Property="Opacity" Value="0.95" />
</Style>

</ResourceDictionary>
</ContentView.Resources>
<ContentPage.Content>
<CollectionView
ItemsSource="{Binding Posts}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="16">
<Border
BackgroundColor="White"
Style="{StaticResource PostBorderStyle}">
<Border.StrokeShape>
<RoundRectangle
CornerRadius="12, 120, 12, 12"/>
</Border.StrokeShape>
<Border.Shadow>
<Shadow
Brush="Black"
Radius="6"
Offset="2, 2"/>
</Border.Shadow>
<Grid>
<Image
Aspect="AspectFill"
Source="{Binding Image}"/>
<Grid
BackgroundColor="Black"
Opacity="0.1"/>
<Grid
ColumnDefinitions="72, Auto"
RowDefinitions="Auto, Auto, *">
<Grid
HorizontalOptions="Start">
<Border
Style="{StaticResource UserBorderStyle}">
<Border.StrokeShape>
<Ellipse />
</Border.StrokeShape>
<Image
Source="{Binding User.Image}"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="1">
<Image.Clip>
<EllipseGeometry
Center="25, 25"
RadiusX="25"
RadiusY="25"/>
</Image.Clip>
</Image>
</Border>
</Grid>
<Grid
Grid.Column="1"
RowDefinitions="Auto, Auto"
Margin="0, 18" >
<Label
Text="{Binding User.Name}"
Style="{StaticResource UserNameStyle}"/>
<Label
Grid.Row="1"
Text="4 HOURS AGO"
Style="{StaticResource CreatedAtStyle}"/>
</Grid>
<StackLayout
Grid.Row="1"
Style="{StaticResource InfoLayoutStyle}">
<StackLayout
Orientation="Horizontal">
<Path
Data="M8.5319849,0C11.560988,7.3866431E-08 14.464015,1.6680007 15.99997,4.5209999 18.139016,0.55099538 22.921994,-1.1230173 27.008008,0.7949839 31.297024,2.8069787 33.185032,8.0069957 31.22604,12.411997 29.27303,16.804 15.998994,30.380001 15.998994,30.380001 15.915985,30.327022 2.7269701,16.804 0.77395964,12.411997 -1.1850933,8.0069957 0.70291448,2.8069787 4.9929701,0.7949839 6.1419612,0.25497467 7.3469826,7.3866431E-08 8.5319849,0z"
Style="{StaticResource HeartIconStyle}"/>
<Label
Text="{Binding Likes}"
Style="{StaticResource HeartTextStyle}"/>
</StackLayout>
<Grid>
<Path
Data="M4.2800019,0L11.127999,0C13.491008,0,15.408001,1.9349976,15.408001,4.3209839L15.408001,32 7.5820063,23.104004 0,32 0,4.3209839C2.0228617E-07,1.9349976,1.9169938,0,4.2800019,0z"
Style="{StaticResource MarkIconStyle}"/>
</Grid>
</StackLayout>
<Grid
Grid.ColumnSpan="2"
Grid.Row="2"
ColumnDefinitions="Auto, *"
VerticalOptions="End"
Margin="0, 12">
<Border
Style="{StaticResource PlayBorderStyle}">
<Border.StrokeShape>
<Ellipse />
</Border.StrokeShape>
<Border.Shadow>
<Shadow
Brush="LightGray"
Radius="6"
Offset="4, 4"/>
</Border.Shadow>
<Path
Data="M0,0L15.825011,8.0009766 31.650999,15.997986 15.825011,23.998993 0,32 0,15.997986z"
Style="{StaticResource PlayIconStyle}"/>
</Border>
<StackLayout
Grid.Column="1">
<Label
Text="{Binding Title}"
Style="{StaticResource TitleTextStyle}">
<!--
<Label.Shadow>
<Shadow
Brush="LightGray"
Radius="6"
Offset="2, 2"/>
</Label.Shadow>
-->
</Label>
<Label
Text="{Binding User.From}"
Style="{StaticResource FromTextStyle}"/>
</StackLayout>
</Grid>
</Grid>
</Grid>
</Border>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ContentPage.Content>
</ContentPage>
67 changes: 67 additions & 0 deletions ...ts/TestCases.HostApp/Elements/CollectionView/PerformanceGalleries/ShadowBenchmark.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
namespace Maui.Controls.Sample.CollectionViewGalleries.PerformanceGalleries
{
public class ShadowBenchmarkShell : Shell
{
public ShadowBenchmarkShell()
{
FlyoutBehavior = FlyoutBehavior.Flyout;
Items.Add(new ShellContent
{
Content = new ShadowBenchmark(),
Title = "Shadow Benchmark"
});
}
}

public partial class ShadowBenchmark : ContentPage
{
public ShadowBenchmark()
{
BindingContext = new ShadowBenchmarkViewModel();
InitializeComponent();
}
}

public class User
{
public string Name { get; set; }
public string Image { get; set; }
public Color Color { get; set; }
public string From { get; set; }
}

public class Post
{
public string Title { get; set; }
public string Content { get; set; }
public string Image { get; set; }
public string Likes { get; set; }
public User User { get; set; }
public DateTime CreatedAt { get; set; }
}

public class ShadowBenchmarkViewModel
{
public List<Post> Posts { get; } = GetData();

static List<Post> GetData()
{
var posts = new List<Post>();

User user = new User
{
Name = "Lorem ipsum",
Image = "oasis.jpg",
Color = Color.FromArgb("#62D7FB"),
From = "Lorem ipsum"
};

for(int i = 0; i < 1000; i++)
{
posts.Add(new Post { Title = $"Lorem ipsum {i + 1} dolor sit amet, consectetur adipiscing elit", Image = "photo21314.jpg", Likes = "1k", User = user });
}

return posts;
}
}
}
Loading
Loading