Skip to content

Commit 2f0b86f

Browse files
albyrock87albyrock87
committed
Android shadow
1 parent dde0d73 commit 2f0b86f

File tree

9 files changed

+566
-197
lines changed

9 files changed

+566
-197
lines changed

‎src/Controls/tests/TestCases.HostApp/Issues/Issue24414.xaml‎

Lines changed: 297 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,321 @@
44
x:Class="Maui.Controls.Sample.Issues.Issue24414"
55
Title="Issue24414">
66

7-
<Grid RowDefinitions="Auto,*,*" RowSpacing="24">
8-
<Label Text="Shadows" AutomationId="WaitForStubControl" />
7+
<Grid RowDefinitions="Auto,*,*,*,*" ColumnDefinitions="*,*,*,*" RowSpacing="6" ColumnSpacing="6" Padding="16">
8+
<Label x:Name="TheLabel" AutomationId="WaitForStubControl" Grid.ColumnSpan="4">
9+
<Label.GestureRecognizers>
10+
<TapGestureRecognizer Tapped="OnTapGestureRecognizerTapped"/>
11+
</Label.GestureRecognizers>
12+
</Label>
13+
14+
<!-- Test solid black shadows with offsets and opacity -->
915
<Border Grid.Row="1"
10-
HeightRequest="248"
11-
WidthRequest="248"
16+
HeightRequest="72"
17+
WidthRequest="72"
1218
VerticalOptions="Center"
1319
HorizontalOptions="Center"
14-
StrokeShape="{RoundRectangle CornerRadius=24}"
20+
StrokeShape="{RoundRectangle CornerRadius=12}"
1521
Stroke="Black"
1622
Padding="24" />
1723
<Border Grid.Row="1"
18-
HeightRequest="200"
19-
WidthRequest="200"
24+
HeightRequest="48"
25+
WidthRequest="48"
2026
VerticalOptions="Center"
2127
HorizontalOptions="Center"
22-
StrokeShape="{RoundRectangle CornerRadius=24}"
28+
StrokeShape="{RoundRectangle CornerRadius=12}"
2329
Background="LightGreen"
2430
Shadow="{Shadow Brush=Black, Offset='0,0', Radius=24, Opacity=1}" />
31+
32+
<Border Grid.Row="1"
33+
Grid.Column="1"
34+
HeightRequest="72"
35+
WidthRequest="72"
36+
VerticalOptions="Center"
37+
HorizontalOptions="Center"
38+
StrokeShape="{RoundRectangle CornerRadius=12}"
39+
Stroke="Black"
40+
Padding="24" />
41+
<Border Grid.Row="1"
42+
Grid.Column="1"
43+
HeightRequest="48"
44+
WidthRequest="48"
45+
VerticalOptions="Center"
46+
HorizontalOptions="Center"
47+
StrokeShape="{RoundRectangle CornerRadius=12}"
48+
Background="LightGreen"
49+
Shadow="{Shadow Brush=Black, Offset='24,24', Radius=24, Opacity=1}" />
50+
51+
<Border Grid.Row="1"
52+
Grid.Column="2"
53+
HeightRequest="72"
54+
WidthRequest="72"
55+
VerticalOptions="Center"
56+
HorizontalOptions="Center"
57+
StrokeShape="{RoundRectangle CornerRadius=12}"
58+
Stroke="Black"
59+
Padding="24" />
60+
<Border Grid.Row="1"
61+
Grid.Column="2"
62+
HeightRequest="48"
63+
WidthRequest="48"
64+
Margin="0,0,-16,-16"
65+
VerticalOptions="Center"
66+
HorizontalOptions="Center"
67+
StrokeShape="{RoundRectangle CornerRadius=12}"
68+
Background="LightGreen"
69+
Shadow="{Shadow Brush=Black, Offset='-24,-24', Radius=12, Opacity=1}" />
70+
71+
<Border Grid.Row="1"
72+
Grid.Column="3"
73+
HeightRequest="72"
74+
WidthRequest="72"
75+
VerticalOptions="Center"
76+
HorizontalOptions="Center"
77+
StrokeShape="{RoundRectangle CornerRadius=12}"
78+
Stroke="Black"
79+
Padding="24" />
80+
<Border Grid.Row="1"
81+
Grid.Column="3"
82+
HeightRequest="48"
83+
WidthRequest="48"
84+
VerticalOptions="Center"
85+
HorizontalOptions="Center"
86+
StrokeShape="{RoundRectangle CornerRadius=12}"
87+
Background="LightGreen"
88+
Shadow="{Shadow Brush=Black, Offset='-12,-12', Radius=12, Opacity=.5}" />
89+
90+
<!-- Test different brush shadows with offsets and opacity -->
2591
<Border Grid.Row="2"
26-
HeightRequest="248"
27-
WidthRequest="248"
92+
HeightRequest="72"
93+
WidthRequest="72"
2894
VerticalOptions="Center"
2995
HorizontalOptions="Center"
30-
StrokeShape="{RoundRectangle CornerRadius=24}"
96+
StrokeShape="{RoundRectangle CornerRadius=12}"
3197
Stroke="Black"
3298
Padding="24" />
3399
<Border Grid.Row="2"
34-
HeightRequest="200"
35-
WidthRequest="200"
100+
HeightRequest="48"
101+
WidthRequest="48"
36102
VerticalOptions="Center"
37103
HorizontalOptions="Center"
38-
StrokeShape="{RoundRectangle CornerRadius=24}"
104+
StrokeShape="{RoundRectangle CornerRadius=12}"
39105
Background="LightGreen"
40-
Shadow="{Shadow Brush=Black, Offset='24,24', Radius=24, Opacity=1}" />
106+
Shadow="{Shadow Brush=SlateBlue, Offset='12,12', Radius=12, Opacity=0.8}" />
107+
108+
<Border Grid.Row="2"
109+
Grid.Column="1"
110+
HeightRequest="72"
111+
WidthRequest="72"
112+
VerticalOptions="Center"
113+
HorizontalOptions="Center"
114+
StrokeShape="{RoundRectangle CornerRadius=12}"
115+
Stroke="Black"
116+
Padding="24" />
117+
<Border Grid.Row="2"
118+
Grid.Column="1"
119+
HeightRequest="48"
120+
WidthRequest="48"
121+
VerticalOptions="Center"
122+
HorizontalOptions="Center"
123+
StrokeShape="{RoundRectangle CornerRadius=12}"
124+
Background="LightGreen">
125+
<Border.Shadow>
126+
<Shadow Offset="12,12" Radius="12" Opacity="1">
127+
<Shadow.Brush>
128+
<LinearGradientBrush StartPoint="0,0"
129+
EndPoint="1,0">
130+
<GradientStop Color="Orange" Offset="0.0"/>
131+
<GradientStop Color="DarkGreen" Offset="0.75"/>
132+
</LinearGradientBrush>
133+
</Shadow.Brush>
134+
</Shadow>
135+
</Border.Shadow>
136+
</Border>
137+
138+
<Border Grid.Row="2"
139+
Grid.Column="2"
140+
HeightRequest="72"
141+
WidthRequest="72"
142+
VerticalOptions="Center"
143+
HorizontalOptions="Center"
144+
StrokeShape="{RoundRectangle CornerRadius=12}"
145+
Stroke="Black"
146+
Padding="24" />
147+
<Border Grid.Row="2"
148+
Grid.Column="2"
149+
HeightRequest="48"
150+
WidthRequest="48"
151+
Margin="0,0,-16,-16"
152+
VerticalOptions="Center"
153+
HorizontalOptions="Center"
154+
StrokeShape="{RoundRectangle CornerRadius=12}"
155+
Background="LightGreen">
156+
<Border.Shadow>
157+
<Shadow Offset="-24,-24" Radius="12" Opacity="1">
158+
<Shadow.Brush>
159+
<RadialGradientBrush Center="0.5,0.5"
160+
Radius="0.75">
161+
<GradientStop Color="Orange" Offset="0.0"/>
162+
<GradientStop Color="DarkGreen" Offset="1"/>
163+
</RadialGradientBrush>
164+
</Shadow.Brush>
165+
</Shadow>
166+
</Border.Shadow>
167+
</Border>
168+
169+
<Border Grid.Row="2"
170+
Grid.Column="3"
171+
HeightRequest="72"
172+
WidthRequest="72"
173+
VerticalOptions="Center"
174+
HorizontalOptions="Center"
175+
StrokeShape="{RoundRectangle CornerRadius=12}"
176+
Stroke="Black"
177+
Padding="24" />
178+
<Border Grid.Row="2"
179+
Grid.Column="3"
180+
HeightRequest="48"
181+
WidthRequest="48"
182+
VerticalOptions="Center"
183+
HorizontalOptions="Center"
184+
StrokeShape="{RoundRectangle CornerRadius=12}"
185+
Background="LightGreen">
186+
<Border.Shadow>
187+
<Shadow Offset="-12,-12" Radius="12" Opacity=".5">
188+
<Shadow.Brush>
189+
<LinearGradientBrush StartPoint="0,0"
190+
EndPoint="1,0">
191+
<GradientStop Color="Orange" Offset="0.0"/>
192+
<GradientStop Color="DarkGreen" Offset="0.75"/>
193+
</LinearGradientBrush>
194+
</Shadow.Brush>
195+
</Shadow>
196+
</Border.Shadow>
197+
</Border>
198+
199+
<!-- Test clipping -->
200+
<Border Grid.Row="3"
201+
HeightRequest="72"
202+
WidthRequest="72"
203+
VerticalOptions="Center"
204+
HorizontalOptions="Center"
205+
StrokeShape="{RoundRectangle CornerRadius=12}"
206+
Stroke="Black"
207+
Padding="24" />
208+
<Border Grid.Row="3"
209+
HeightRequest="48"
210+
WidthRequest="48"
211+
VerticalOptions="Center"
212+
HorizontalOptions="Center"
213+
StrokeShape="{RoundRectangle CornerRadius=12}"
214+
Background="LightGreen"
215+
Shadow="{Shadow Brush=SlateBlue, Offset='12,12', Radius=12, Opacity=0.8}">
216+
<Border.Clip>
217+
<RoundRectangleGeometry Rect="-24,-24,60,60"
218+
CornerRadius="24"/>
219+
</Border.Clip>
220+
</Border>
221+
222+
<Border Grid.Row="3"
223+
Grid.Column="1"
224+
HeightRequest="72"
225+
WidthRequest="72"
226+
VerticalOptions="Center"
227+
HorizontalOptions="Center"
228+
StrokeShape="{RoundRectangle CornerRadius=12}"
229+
Stroke="Black"
230+
Padding="24" />
231+
<Border Grid.Row="3"
232+
Grid.Column="1"
233+
HeightRequest="48"
234+
WidthRequest="48"
235+
VerticalOptions="Center"
236+
HorizontalOptions="Center"
237+
StrokeShape="{RoundRectangle CornerRadius=12}"
238+
Background="LightGreen">
239+
<Border.Shadow>
240+
<Shadow Offset="-12,-12" Radius="12" Opacity="1">
241+
<Shadow.Brush>
242+
<LinearGradientBrush StartPoint="0,0"
243+
EndPoint="1,0">
244+
<GradientStop Color="Orange" Offset="0.0"/>
245+
<GradientStop Color="DarkGreen" Offset="0.75"/>
246+
</LinearGradientBrush>
247+
</Shadow.Brush>
248+
</Shadow>
249+
</Border.Shadow>
250+
<Border.Clip>
251+
<RoundRectangleGeometry Rect="-24,-24,60,60"
252+
CornerRadius="24"/>
253+
</Border.Clip>
254+
</Border>
255+
256+
<Border Grid.Row="3"
257+
Grid.Column="2"
258+
HeightRequest="72"
259+
WidthRequest="72"
260+
VerticalOptions="Center"
261+
HorizontalOptions="Center"
262+
StrokeShape="{RoundRectangle CornerRadius=12}"
263+
Stroke="Black"
264+
Padding="24" />
265+
<Border Grid.Row="3"
266+
Grid.Column="2"
267+
HeightRequest="48"
268+
WidthRequest="48"
269+
VerticalOptions="Center"
270+
HorizontalOptions="Center"
271+
StrokeShape="{RoundRectangle CornerRadius=12}"
272+
Background="LightGreen">
273+
<Border.Shadow>
274+
<Shadow Offset="-12,-12" Radius="12" Opacity="1">
275+
<Shadow.Brush>
276+
<RadialGradientBrush Center="0.5,0.5"
277+
Radius="0.75">
278+
<GradientStop Color="Orange" Offset="0.0"/>
279+
<GradientStop Color="DarkGreen" Offset="1"/>
280+
</RadialGradientBrush>
281+
</Shadow.Brush>
282+
</Shadow>
283+
</Border.Shadow>
284+
<Border.Clip>
285+
<RoundRectangleGeometry Rect="-24,-24,60,60"
286+
CornerRadius="24"/>
287+
</Border.Clip>
288+
</Border>
289+
290+
<Border Grid.Row="3"
291+
Grid.Column="3"
292+
HeightRequest="72"
293+
WidthRequest="72"
294+
VerticalOptions="Center"
295+
HorizontalOptions="Center"
296+
StrokeShape="{RoundRectangle CornerRadius=12}"
297+
Stroke="Black"
298+
Padding="24" />
299+
<Border Grid.Row="3"
300+
Grid.Column="3"
301+
HeightRequest="48"
302+
WidthRequest="48"
303+
VerticalOptions="Center"
304+
HorizontalOptions="Center"
305+
StrokeShape="{RoundRectangle CornerRadius=12}"
306+
Background="LightGreen">
307+
<Border.Shadow>
308+
<Shadow Offset="-12,-12" Radius="12" Opacity=".5">
309+
<Shadow.Brush>
310+
<LinearGradientBrush StartPoint="0,0"
311+
EndPoint="1,0">
312+
<GradientStop Color="Orange" Offset="0.0"/>
313+
<GradientStop Color="DarkGreen" Offset="0.75"/>
314+
</LinearGradientBrush>
315+
</Shadow.Brush>
316+
</Shadow>
317+
</Border.Shadow>
318+
<Border.Clip>
319+
<RoundRectangleGeometry Rect="-24,-24,60,60"
320+
CornerRadius="24"/>
321+
</Border.Clip>
322+
</Border>
41323
</Grid>
42324
</ContentPage>

‎src/Controls/tests/TestCases.HostApp/Issues/Issue24414.xaml.cs‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,54 @@
1+
using Microsoft.Maui.Controls.Shapes;
2+
13
namespace Maui.Controls.Sample.Issues;
24

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

57
public partial class Issue24414 : ContentPage
68
{
9+
int fn = 0;
710
public Issue24414()
811
{
912
InitializeComponent();
13+
UpdateLabel();
14+
}
15+
16+
private void OnTapGestureRecognizerTapped(object sender, EventArgs e)
17+
{
18+
var grid = (Grid)Content;
19+
foreach (IView view in grid)
20+
{
21+
if (view is Border { Shadow: not null } border)
22+
{
23+
switch (fn)
24+
{
25+
case 0:
26+
border.WidthRequest += 4;
27+
border.HeightRequest += 4;
28+
break;
29+
case 1:
30+
border.StrokeShape = new RoundRectangle { CornerRadius = border.WidthRequest };
31+
break;
32+
case 2:
33+
border.Shadow.Radius -= 8;
34+
break;
35+
}
36+
}
37+
}
38+
39+
UpdateLabel();
40+
41+
++fn;
42+
}
43+
44+
void UpdateLabel()
45+
{
46+
TheLabel.Text = fn switch
47+
{
48+
0 => "Tap to resize the border",
49+
1 => "Tap to change the border shape",
50+
2 => "Tap to change the shadow radius",
51+
_ => "Done"
52+
};
1053
}
1154
}

0 commit comments

Comments
 (0)