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

Jump to bottom

[ShadowContainer] Inner Shadows not properly fitted in Rectangle and Ellipse (backport #757) #787

Merged
merged 9 commits into from
Aug 30, 2023
Merged

[ShadowContainer] Inner Shadows not properly fitted in Rectangle and Ellipse (backport #757) #787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
81cd14c
chore: add Ellipse and Rectangle Fill
RafaelMendesRosa Aug 24, 2023
a9fc1a2
chore: add corner radius
RafaelMendesRosa Aug 29, 2023
a69c7cc
chore: fix ellipse & rectangle shadow shape
Xiaoy312 Aug 29, 2023
fa0d21c
chore: add/update shadow samples
Xiaoy312 Aug 29, 2023
063a7fd
chore: fix tests
RafaelMendesRosa Aug 30, 2023
0dd2e2b
chore: add test for irregular corner radius
RafaelMendesRosa Aug 30, 2023
8223438
chore: add reset on irregular corner test
RafaelMendesRosa Aug 30, 2023
ea38800
chore: set name of the test
RafaelMendesRosa Aug 30, 2023
5df2db3
chore: fix cache problem
RafaelMendesRosa Aug 30, 2023
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
57 changes: 57 additions & 0 deletions ....Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,10 @@
Spread="0"
Color="#8c76ff" />
</utu:ShadowCollection>
<utu:ShadowCollection x:Key="TestRedGreenShadows">
<utu:Shadow OffsetX="-5" OffsetY="-5" BlurRadius="10" Spread="0" Color="Red" Opacity="1" IsInner="True" />
<utu:Shadow OffsetX="4" OffsetY="4" BlurRadius="10" Spread="0" Color="Green" Opacity="1" IsInner="True" />
</utu:ShadowCollection>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
Expand All @@ -90,6 +94,7 @@
<ScrollViewer HorizontalScrollMode="Disabled">
<StackPanel Spacing="24">

<!-- Calculator -->
<StackPanel>
<TextBlock Text="Many colored shadows" Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock Text="You can add as many shadows as you like. You can also dynamically change the shadow properties." Style="{StaticResource BodyTextBlockStyle}" />
Expand Down Expand Up @@ -202,6 +207,7 @@
</utu:ShadowContainer>
</StackPanel>

<!-- Purple-ish Panel -->
<StackPanel>
<TextBlock Text="Enable neumorphism" Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock Text="Being able to add several shadows enables you to create neumorphic designs." Style="{StaticResource BodyTextBlockStyle}" />
Expand Down Expand Up @@ -303,6 +309,57 @@
</utu:ShadowContainer>
</StackPanel>
</StackPanel>
</StackPanel>

<!-- Complex Shadow Shapes -->
<StackPanel Spacing="8">
<TextBlock Text="Complex Shadow Shapes" Style="{StaticResource TitleTextBlockStyle}" />

<StackPanel>
<TextBlock Text="Border 200x100 CR=10,50,10,50" />
<StackPanel Orientation="Horizontal">
<Border Width="200" Height="100" CornerRadius="10,50,10,50" Background="Blue" />
<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
<Border Width="200" Height="100" CornerRadius="10,50,10,50" />
</utu:ShadowContainer>
</StackPanel>
</StackPanel>
<StackPanel>
<TextBlock Text="Rectangle 200x100 Radius=50,20" />
<StackPanel Orientation="Horizontal">
<Rectangle Width="200" Height="100" RadiusX="50" RadiusY="20" Fill="Blue" />
<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
<Rectangle Width="200" Height="100" RadiusX="50" RadiusY="20" />
</utu:ShadowContainer>
</StackPanel>
</StackPanel>
<StackPanel>
<TextBlock Text="Rectangle 200x100 Radius=20,20" />
<StackPanel Orientation="Horizontal">
<Rectangle Width="200" Height="100" RadiusX="20" RadiusY="20" Fill="Blue" />
<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
<Rectangle Width="200" Height="100" RadiusX="20" RadiusY="20" />
</utu:ShadowContainer>
</StackPanel>
</StackPanel>
<StackPanel>
<TextBlock Text="Ellipse 100x100" />
<StackPanel Orientation="Horizontal">
<Ellipse Width="100" Height="100" Fill="Blue" />
<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
<Ellipse Width="100" Height="100" />
</utu:ShadowContainer>
</StackPanel>
</StackPanel>
<StackPanel>
<TextBlock Text="Ellipse 200x100" />
<StackPanel Orientation="Horizontal">
<Ellipse Width="200" Height="100" Fill="Blue" />
<utu:ShadowContainer Background="Blue" Shadows="{StaticResource TestRedGreenShadows}">
<Ellipse Width="200" Height="100" />
</utu:ShadowContainer>
</StackPanel>
</StackPanel>


<!--Test ShadowContainer stretching its content by default-->
Expand Down
10 changes: 6 additions & 4 deletions ...mples/Uno.Toolkit.Samples.Shared/Content/Controls/ShadowContainerSamplePage.WinUI.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,13 @@ public ShadowContainerSamplePage()

this.Loaded += (s, e) =>
{
var shadowContainer = SamplePageLayout.GetSampleChild<ShadowContainer>(Design.Agnostic, "ShadowContainer");
_shadows = shadowContainer.Shadows;
if (SamplePageLayout.GetSampleChild<ShadowContainer>(Design.Agnostic, "ShadowContainer") is { } shadowContainer)
{
_shadows = shadowContainer.Shadows;

var shadowsItemsControl = SamplePageLayout.GetSampleChild<ItemsControl>(Design.Agnostic, "ShadowsItemsControl");
shadowsItemsControl.ItemsSource = _shadows;
var shadowsItemsControl = SamplePageLayout.GetSampleChild<ItemsControl>(Design.Agnostic, "ShadowsItemsControl");
shadowsItemsControl.ItemsSource = _shadows;
}
};
}

Expand Down
73 changes: 73 additions & 0 deletions .../Uno.Toolkit.Samples.Shared/Content/TestPages/ShadowContainerRectangleTestPage.WinUI.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<Page x:Class="Uno.Toolkit.Samples.Content.TestPages.ShadowContainerRectangleTestPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Uno.Toolkit.Samples.Content.TestPages"
xmlns:utu="using:Uno.Toolkit.UI"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid Background="Yellow"
RowSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<Border x:Name="outerBorder"
Background="Blue"
Padding="10"
Height="220"
Width="220">
<utu:ShadowContainer x:Name="shadowContainer">
<Rectangle Width="200"
Height="200"
x:Name="border"
Fill="Green" />
</utu:ShadowContainer>
</Border>
</StackPanel>

<StackPanel Spacing="10"
Grid.Row="1"
Orientation="Horizontal"
VerticalAlignment="Center"
HorizontalAlignment="Center">

<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock Text="Current Case"
FontWeight="Bold"
FontSize="20" />
<StackPanel Orientation="Horizontal"
VerticalAlignment="Center">
<TextBlock Text="X Offset:" />
<TextBox x:Name="xOffsetText" />
</StackPanel>
<StackPanel Orientation="Horizontal"
VerticalAlignment="Center">
<TextBlock Text="Y Offset:" />
<TextBox x:Name="yOffsetText" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Content="Inner"
x:Name="inner" />
</StackPanel>
</StackPanel>

<Button Content="Run Test Case"
x:Name="runButton"
Click="runButton_Click" />
<Button Content="Reset"
x:Name="resetButton"
Click="reset_Click" />
<TextBlock x:Name="statusText"
VerticalAlignment="Center" />


</StackPanel>
</Grid>
</Page>
75 changes: 75 additions & 0 deletions ...o.Toolkit.Samples.Shared/Content/TestPages/ShadowContainerRectangleTestPage.WinUI.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
#if IS_WINUI
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Uno.Toolkit.Samples.Entities;
using Windows.Foundation;
using Windows.Foundation.Collections;

using Microsoft.UI;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;

namespace Uno.Toolkit.Samples.Content.TestPages
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>

[SamplePage(SampleCategory.Tests, "ShadowContainerRectangleTest")]
public sealed partial class ShadowContainerRectangleTestPage : Page
{
public ShadowContainerRectangleTestPage()
{
this.InitializeComponent();
}

private void runButton_Click(object sender, RoutedEventArgs e)
{
statusText.Text = "Running";
shadowContainer.Shadows.Clear();

if (!int.TryParse(xOffsetText.Text, out var xOffset))
{
xOffset = 0;
}

if (!int.TryParse(yOffsetText.Text, out var yOffset))
{
yOffset = 0;
}

var isInner = inner.IsChecked ?? false;

shadowContainer.Shadows.Add(new UI.Shadow
{
OffsetX = xOffset,
OffsetY = yOffset,
IsInner = isInner,
Opacity = 1,
Color = Colors.Red,
});

statusText.Text = "Verify";
}

private void reset_Click(object sender, RoutedEventArgs e)
{
statusText.Text = string.Empty;

xOffsetText.Text = string.Empty;
yOffsetText.Text = string.Empty;
inner.IsChecked = false;

shadowContainer.Shadows.Clear();
}
}
}
#endif
64 changes: 58 additions & 6 deletions ...t.Samples/Uno.Toolkit.Samples.Shared/Content/TestPages/ShadowContainerTestPage.WinUI.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,69 @@
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid Background="Yellow"
RowSpacing="10">
<Grid RowSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
VerticalAlignment="Center"
x:Name="containerBorder">
<Border x:Name="outerBorder"
Background="Blue"
Padding="10"
Height="220"
Width="220">
<utu:ShadowContainer x:Name="shadowContainer"
Background="Green">
<Border Width="200"
Background="Green">
<Border Width="200"
Height="200"
x:Name="border"/>
</utu:ShadowContainer>
</Border>

</StackPanel>

<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Name="containerRectangle"
Visibility="Collapsed">
<Border x:Name="outerBorderRetangle"
Background="Blue"
Padding="10"
Height="220"
Width="220">
<utu:ShadowContainer x:Name="shadowContainerRectangle"
Background="Green">

<Rectangle Width="200"
Height="200"
x:Name="border" />
x:Name="rectangle"/>

</utu:ShadowContainer>
</Border>
</StackPanel>

<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Name="containerIrregularCorner"
Visibility="Collapsed">
<Border x:Name="outerBorderIrregularCorner"
Background="Blue"
Padding="10"
Height="220"
Width="220">
<utu:ShadowContainer x:Name="shadowContainerIrregularCorner"
Background="Green">

<Border Width="200"
Height="200"
CornerRadius="0,200,0,200"
x:Name="borderIrregularCorner"/>
</utu:ShadowContainer>
</Border>
</StackPanel>
<StackPanel Spacing="10"
Grid.Row="1"
Orientation="Horizontal"
Expand All @@ -56,6 +96,18 @@
<CheckBox Content="Inner"
x:Name="inner" />
</StackPanel>
<StackPanel Orientation="Vertical">

<TextBlock Text="Border"/>
<RadioButton GroupName="RadioGroup" Content="Border" x:Name="check_Border" Click="Border_ClickElement" />

<TextBlock Text="Rectangle"/>
<RadioButton GroupName="RadioGroup" Content="Rectangle" x:Name="check_Rectangle" Click="Rectangle_ClickElement" />

<TextBlock Text="Irrelugar Corner Radius"/>
<RadioButton GroupName="RadioGroup" Content="Irrelugar Corner Radius" x:Name="check_IrregularCorner" Click="IrregularCorner_ClickElement" />

</StackPanel>
</StackPanel>

<Button Content="Run Test Case"
Expand Down
Loading