Skip to content

Commit

Permalink
Android shadow
Browse files Browse the repository at this point in the history
  • Loading branch information
@albyrock87
albyrock87 committed Dec 24, 2024
1 parent dde0d73 commit eccf37e
Show file tree
Hide file tree
Showing 9 changed files with 566 additions and 197 deletions.
312 changes: 297 additions & 15 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue24414.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,321 @@
x:Class="Maui.Controls.Sample.Issues.Issue24414"
Title="Issue24414">

<Grid RowDefinitions="Auto,*,*" RowSpacing="24">
<Label Text="Shadows" AutomationId="WaitForStubControl" />
<Grid RowDefinitions="Auto,*,*,*,*" ColumnDefinitions="*,*,*,*" RowSpacing="6" ColumnSpacing="6" Padding="16">
<Label x:Name="TheLabel" AutomationId="WaitForStubControl" Grid.ColumnSpan="4">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"/>
</Label.GestureRecognizers>
</Label>

<!-- Test solid black shadows with offsets and opacity -->
<Border Grid.Row="1"
HeightRequest="248"
WidthRequest="248"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=24}"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="1"
HeightRequest="200"
WidthRequest="200"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=24}"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen"
Shadow="{Shadow Brush=Black, Offset='0,0', Radius=24, Opacity=1}" />

<Border Grid.Row="1"
Grid.Column="1"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="1"
Grid.Column="1"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen"
Shadow="{Shadow Brush=Black, Offset='12,12', Radius=12, Opacity=1}" />

<Border Grid.Row="1"
Grid.Column="2"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="1"
Grid.Column="2"
HeightRequest="48"
WidthRequest="48"
Margin="0,0,-16,-16"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen"
Shadow="{Shadow Brush=Black, Offset='-24,-24', Radius=12, Opacity=1}" />

<Border Grid.Row="1"
Grid.Column="3"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="1"
Grid.Column="3"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen"
Shadow="{Shadow Brush=Black, Offset='-12,-12', Radius=12, Opacity=.5}" />

<!-- Test different brush shadows with offsets and opacity -->
<Border Grid.Row="2"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="2"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen"
Shadow="{Shadow Brush=SlateBlue, Offset='12,12', Radius=12, Opacity=0.8}" />

<Border Grid.Row="2"
Grid.Column="1"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="2"
Grid.Column="1"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen">
<Border.Shadow>
<Shadow Offset="12,12" Radius="12" Opacity="1">
<Shadow.Brush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="Orange" Offset="0.0"/>
<GradientStop Color="DarkGreen" Offset="0.75"/>
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
</Border>

<Border Grid.Row="2"
Grid.Column="2"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="2"
Grid.Column="2"
HeightRequest="48"
WidthRequest="48"
Margin="0,0,-16,-16"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen">
<Border.Shadow>
<Shadow Offset="-24,-24" Radius="12" Opacity="1">
<Shadow.Brush>
<RadialGradientBrush Center="0.5,0.5"
Radius="0.75">
<GradientStop Color="Orange" Offset="0.0"/>
<GradientStop Color="DarkGreen" Offset="1"/>
</RadialGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
</Border>

<Border Grid.Row="2"
HeightRequest="248"
WidthRequest="248"
Grid.Column="3"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=24}"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="2"
HeightRequest="200"
WidthRequest="200"
Grid.Column="3"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen">
<Border.Shadow>
<Shadow Offset="-12,-12" Radius="12" Opacity=".5">
<Shadow.Brush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="Orange" Offset="0.0"/>
<GradientStop Color="DarkGreen" Offset="0.75"/>
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
</Border>

<!-- Test clipping -->
<Border Grid.Row="3"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="3"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=24}"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen"
Shadow="{Shadow Brush=Black, Offset='24,24', Radius=24, Opacity=1}" />
Shadow="{Shadow Brush=SlateBlue, Offset='12,12', Radius=12, Opacity=0.8}">
<Border.Clip>
<RoundRectangleGeometry Rect="-24,-24,60,60"
CornerRadius="24"/>
</Border.Clip>
</Border>

<Border Grid.Row="3"
Grid.Column="1"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="3"
Grid.Column="1"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen">
<Border.Shadow>
<Shadow Offset="-12,-12" Radius="12" Opacity="1">
<Shadow.Brush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="Orange" Offset="0.0"/>
<GradientStop Color="DarkGreen" Offset="0.75"/>
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
<Border.Clip>
<RoundRectangleGeometry Rect="-24,-24,60,60"
CornerRadius="24"/>
</Border.Clip>
</Border>

<Border Grid.Row="3"
Grid.Column="2"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="3"
Grid.Column="2"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen">
<Border.Shadow>
<Shadow Offset="-12,-12" Radius="12" Opacity="1">
<Shadow.Brush>
<RadialGradientBrush Center="0.5,0.5"
Radius="0.75">
<GradientStop Color="Orange" Offset="0.0"/>
<GradientStop Color="DarkGreen" Offset="1"/>
</RadialGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
<Border.Clip>
<RoundRectangleGeometry Rect="-24,-24,60,60"
CornerRadius="24"/>
</Border.Clip>
</Border>

<Border Grid.Row="3"
Grid.Column="3"
HeightRequest="72"
WidthRequest="72"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Stroke="Black"
Padding="24" />
<Border Grid.Row="3"
Grid.Column="3"
HeightRequest="48"
WidthRequest="48"
VerticalOptions="Center"
HorizontalOptions="Center"
StrokeShape="{RoundRectangle CornerRadius=12}"
Background="LightGreen">
<Border.Shadow>
<Shadow Offset="-12,-12" Radius="12" Opacity=".5">
<Shadow.Brush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="Orange" Offset="0.0"/>
<GradientStop Color="DarkGreen" Offset="0.75"/>
</LinearGradientBrush>
</Shadow.Brush>
</Shadow>
</Border.Shadow>
<Border.Clip>
<RoundRectangleGeometry Rect="-24,-24,60,60"
CornerRadius="24"/>
</Border.Clip>
</Border>
</Grid>
</ContentPage>
43 changes: 43 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue24414.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,54 @@
using Microsoft.Maui.Controls.Shapes;

namespace Maui.Controls.Sample.Issues;

[Issue(IssueTracker.Github, 24414, "Shadows not rendering as expected on Android and iOS", PlatformAffected.Android | PlatformAffected.iOS)]

public partial class Issue24414 : ContentPage
{
int fn = 0;
public Issue24414()
{
InitializeComponent();
UpdateLabel();
}

private void OnTapGestureRecognizerTapped(object sender, EventArgs e)
{
var grid = (Grid)Content;
foreach (IView view in grid)
{
if (view is Border { Shadow: not null } border)
{
switch (fn)
{
case 0:
border.WidthRequest += 4;
border.HeightRequest += 4;
break;
case 1:
border.StrokeShape = new RoundRectangle { CornerRadius = border.WidthRequest };
break;
case 2:
border.Shadow.Radius -= 8;
break;
}
}
}

UpdateLabel();

++fn;
}

void UpdateLabel()
{
TheLabel.Text = fn switch
{
0 => "Tap to resize the border",
1 => "Tap to change the border shape",
2 => "Tap to change the shadow radius",
_ => "Done"
};
}
}
Loading

0 comments on commit eccf37e

Please sign in to comment.