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) #786

Merged
merged 9 commits into from
Aug 30, 2023
Merged

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

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
e48a59f
chore: add Ellipse and Rectangle Fill
RafaelMendesRosa Aug 24, 2023
b35d83c
chore: add corner radius
RafaelMendesRosa Aug 29, 2023
bf91558
chore: fix ellipse & rectangle shadow shape
Xiaoy312 Aug 29, 2023
cabf3fd
chore: add/update shadow samples
Xiaoy312 Aug 29, 2023
7b8dd5f
chore: fix tests
RafaelMendesRosa Aug 30, 2023
5e96ef1
chore: add test for irregular corner radius
RafaelMendesRosa Aug 30, 2023
1f2158f
chore: add reset on irregular corner test
RafaelMendesRosa Aug 30, 2023
7ed0999
chore: set name of the test
RafaelMendesRosa Aug 30, 2023
727334b
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
Loading