Skip to content

Commit

Permalink
Merge pull request #757 from unoplatform/dev/ramr/issue740-EllipseInn…
Browse files Browse the repository at this point in the history
…erShadow
  • Loading branch information
Xiaoy312 committed Aug 30, 2023
2 parents cd6b89a + 65f320e commit ff48082
Show file tree
Hide file tree
Showing 12 changed files with 610 additions and 61 deletions.
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
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
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>
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
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

0 comments on commit ff48082

Please sign in to comment.