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

docs(ShadowContainer): Adjusting docs after review #729

Merged
merged 9 commits into from
Aug 18, 2023
Merged

docs(ShadowContainer): Adjusting docs after review #729

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5d9c63e
docs: Adjusting docs after review
eriklimakc Aug 16, 2023
be3dc0b
chore: Adding text about inset to css box-shadow
eriklimakc Aug 16, 2023
a58c357
chore: Adjusts for shadows docs
eriklimakc Aug 16, 2023
1a5f725
chore: Adjusting shadow doc image
eriklimakc Aug 16, 2023
134aee8
chore: Adjusting shadows docs
eriklimakc Aug 16, 2023
b837b68
chore: Introducing Uno.Toolkit.Skia.WinUI to shadows docs
eriklimakc Aug 17, 2023
55bdbf1
chore: Shadows docs improvements
eriklimakc Aug 18, 2023
7e22bfe
chore: Fixing typo in Shadows Docs
eriklimakc Aug 18, 2023
ac0540f
docs: Adjust for typo
jeromelaban Aug 18, 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
Binary file added doc/assets/box-shadow-inset.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/assets/box-shadow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified doc/assets/shadows-neumorphism.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
182 changes: 136 additions & 46 deletions doc/controls/ShadowContainer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@ uid: Toolkit.Controls.ShadowContainer
---

## Summary
The `ShadowContainer` provides the possibility to add many-colored shadows to its content.
The `ShadowContainer` provides the ability to layer multiple shadows to its content.

## Package Reference
A reference to [Uno.Toolkit.Skia.WinUI](https://www.nuget.org/packages/Uno.Toolkit.Skia.WinUI) package must be added to your Uno app so you can access `ShadowContainer` class and its features.

## Remarks
For now, the control simply adapts its corner radius to the content's corner radius. More complicated shapes, such as text or pictures with alpha, are not supported.
Currently, the control simply mimic the shape of its content by size and by corner radius. Complicated shapes, such as text or pictures with alpha, are not yet supported.
jeromelaban marked this conversation as resolved.
Show resolved Hide resolved

### XAML
```xml
Expand Down Expand Up @@ -49,8 +52,25 @@ Opacity | double | The opacity of the shadow.
BlurRadius | double | The radius of the blur that will be applied to the shadow **[0..100]**.
Spread | double | The spread will inflate or deflate (if negative) the control shadow size **before** applying the blur.

As mentioned `IsInner` is similar to `inset` of `box-shadow` in CSS. See the images below that illustrate its effects:

With `inset` an Inner Shadow is rendered.

![CSS box-shadow with inset](../assets/box-shadow-inset.png)

Without `inset` a Drop (outer) Shadow is rendered.

![CSS box-shadow without inset](../assets/box-shadow.png)

For more info on how `inset` works in CSS for `box-shadow` follow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#values.

> [!IMPORTANT]
> Be careful not to confuse the `Shadow` property with the `Shadows` property. The singular `Shadow` property comes from `UIElement`. To add shadows to the `ShadowContainer`, use only the `Shadows` property.

## Usage

See how to add shadows to your controls with the following code and the result.
eriklimakc marked this conversation as resolved.
Show resolved Hide resolved

```xml
xmlns:utu="using:Uno.Toolkit.UI"
...
Expand All @@ -60,32 +80,32 @@ xmlns:utu="using:Uno.Toolkit.UI"
<Color x:Key="UnoPink">#f85977</Color>

<!-- You can define your shadows in the resource dictionary -->
<ui:ShadowCollection x:Name="ButtonShadows">
<ui:Shadow BlurRadius="15"
<utu:ShadowCollection x:Name="ButtonShadows">
<utu:Shadow BlurRadius="15"
OffsetY="8"
Opacity="0.5"
Color="{StaticResource UnoColor}" />
</ui:ShadowCollection>
</utu:ShadowCollection>
</Page.Resources>

<ui:ShadowContainer>
<ui:ShadowContainer.Shadows>
<utu:ShadowContainer>
<utu:ShadowContainer.Shadows>
<!-- You can define your shadows directly -->
<ui:ShadowCollection x:Name="Shadows">
<ui:Shadow BlurRadius="20"
<utu:ShadowCollection x:Name="Shadows">
<utu:Shadow BlurRadius="20"
OffsetX="10"
OffsetY="10"
Opacity="0.5"
Spread="-5"
Color="{StaticResource UnoColor}" />
<ui:Shadow BlurRadius="20"
<utu:Shadow BlurRadius="20"
OffsetX="-10"
OffsetY="-10"
Opacity="0.5"
Spread="-5"
Color="{StaticResource UnoPink}" />
</ui:ShadowCollection>
</ui:ShadowContainer.Shadows>
</utu:ShadowCollection>
</utu:ShadowContainer.Shadows>
<StackPanel Width="300"
Padding="16"
Background="White"
Expand All @@ -102,23 +122,23 @@ xmlns:utu="using:Uno.Toolkit.UI"
Spacing="16">

<!-- Reference to the dictionary button shadows -->
<ui:ShadowContainer Shadows="{StaticResource ButtonShadows}">
<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}">
<Button Background="{StaticResource UnoColor}"
BorderThickness="1"
Content="Add Shadow"
Foreground="White" />
</ui:ShadowContainer>
</utu:ShadowContainer>

<!-- Reference to the dictionary button shadows -->
<ui:ShadowContainer Shadows="{StaticResource ButtonShadows}">
<utu:ShadowContainer Shadows="{StaticResource ButtonShadows}">
<Button Background="{StaticResource UnoColor}"
BorderThickness="1"
Content="Remove Shadow"
Foreground="White" />
</ui:ShadowContainer>
</utu:ShadowContainer>
</StackPanel>
</StackPanel>
</ui:ShadowContainer>
</utu:ShadowContainer>
```

![2 colored shadows with 2 buttons with single shadows](../assets/shadows-colors.png)
Expand All @@ -127,81 +147,82 @@ xmlns:utu="using:Uno.Toolkit.UI"

[Following neumorphism rules](https://neumorphism.io), choose one background color, 2 shadow colors, and create a cool neumorphism style.

In order to achieve neumorphic depth effects (instead of having a raised element, it will feel as if it was hollow or bulging), set the `IsInner` property of a shadow to `True`.
To achieve neumorphic depth effects (instead of having a raised element, it will feel as if it was hollow or bulging), set the `IsInner` property of a shadow to `True`.

- The shadow will then be displayed *inside* the element instead of behind.
- This is equivalent to the `inset` property of the CSS `box-shadow`.

- This is equivalent to the `inset` property of the CSS `box-shadow` as mentioned previously.

## Usage

See how to integrate neumorphism into your designs with the following code and the result.

```xml
xmlns:utu="using:Uno.Toolkit.UI"
...

<Page.Resources>
<Color x:Key="UnoColor">#7a67f8</Color>

<ui:ShadowCollection x:Key="NeumorphismRaising">
<utu:ShadowCollection x:Key="NeumorphismRaising">
<!-- Bottom right darker violet -->
<ui:Shadow BlurRadius="30"
<utu:Shadow BlurRadius="30"
OffsetX="10"
OffsetY="10"
Opacity="1"
Spread="-5"
Color="#6858d3" />
<!-- Top left lighter violet -->
<ui:Shadow BlurRadius="30"
<utu:Shadow BlurRadius="30"
OffsetX="-10"
OffsetY="-10"
Opacity="1"
Spread="-5"
Color="#8c76ff" />
</ui:ShadowCollection>
</utu:ShadowCollection>

<ui:ShadowCollection x:Key="NeumorphismHollow">
<utu:ShadowCollection x:Key="NeumorphismHollow">
<!-- Inner top and left shadow -->
<ui:Shadow BlurRadius="10"
<utu:Shadow BlurRadius="10"
IsInner="True"
OffsetX="5"
OffsetY="5"
Opacity="1"
Spread="0"
Color="#6858d3" />
<!-- Inner bottom and right shadow -->
<ui:Shadow BlurRadius="10"
<utu:Shadow BlurRadius="10"
IsInner="True"
OffsetX="-4"
OffsetY="-4"
Opacity="1"
Spread="0"
Color="#8c76ff" />
</ui:ShadowCollection>
</utu:ShadowCollection>

<ui:ShadowCollection x:Key="NeumorphismBulging">
<ui:Shadow BlurRadius="10"
<utu:ShadowCollection x:Key="NeumorphismBulging">
<utu:Shadow BlurRadius="10"
IsInner="True"
OffsetX="-5"
OffsetY="-5"
Opacity="1"
Spread="0"
Color="#6858d3" />
<ui:Shadow BlurRadius="10"
<utu:Shadow BlurRadius="10"
IsInner="True"
OffsetX="4"
OffsetY="4"
Opacity="1"
Spread="0"
Color="#8c76ff" />
</ui:ShadowCollection>
</utu:ShadowCollection>
</Page.Resources>

<StackPanel Width="400"
Margin="0,32"
Padding="32"
Background="{StaticResource UnoColor}"
CornerRadius="30">
<ui:ShadowContainer Shadows="{StaticResource NeumorphismRaising}">
<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}">
<Grid Width="300"
Padding="20"
Background="{StaticResource UnoColor}"
Expand All @@ -219,9 +240,9 @@ xmlns:utu="using:Uno.Toolkit.UI"
Foreground="White"
Text="Raising element" />
</Grid>
</ui:ShadowContainer>
</utu:ShadowContainer>

<ui:ShadowContainer Margin="0,60,0,0" Shadows="{StaticResource NeumorphismHollow}">
<utu:ShadowContainer Margin="0,60,0,0" Shadows="{StaticResource NeumorphismHollow}">
<TextBox Width="200"
Height="40"
Padding="15,10,15,0"
Expand All @@ -232,8 +253,8 @@ xmlns:utu="using:Uno.Toolkit.UI"
Foreground="White"
PlaceholderForeground="LightGray"
PlaceholderText="Hollow element" />
</ui:ShadowContainer>
<ui:ShadowContainer Margin="0,15" Shadows="{StaticResource NeumorphismHollow}">
</utu:ShadowContainer>
<utu:ShadowContainer Margin="0,15" Shadows="{StaticResource NeumorphismHollow}">
<TextBox Width="200"
Height="40"
Padding="15,10,15,0"
Expand All @@ -244,51 +265,120 @@ xmlns:utu="using:Uno.Toolkit.UI"
Foreground="White"
PlaceholderForeground="LightGray"
PlaceholderText="Hollow element" />
</ui:ShadowContainer>
</utu:ShadowContainer>

<ui:ShadowContainer Margin="0,30" Shadows="{StaticResource NeumorphismBulging}">
<utu:ShadowContainer Margin="0,30" Shadows="{StaticResource NeumorphismBulging}">
<Button Width="200"
Height="40"
Background="{StaticResource UnoColor}"
BorderBrush="{StaticResource UnoColor}"
Content="Bulging element"
CornerRadius="15"
Foreground="White" />
</ui:ShadowContainer>
</utu:ShadowContainer>

<StackPanel Margin="0,30,0,0"
Padding="24"
HorizontalAlignment="Center"
Orientation="Horizontal"
Spacing="16">

<ui:ShadowContainer Shadows="{StaticResource NeumorphismRaising}">
<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}">
<Button Background="{StaticResource UnoColor}"
BorderThickness="0"
Content="Regular"
Foreground="White" />
</ui:ShadowContainer>
</utu:ShadowContainer>

<ui:ShadowContainer Shadows="{StaticResource NeumorphismRaising}">
<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}">
<Button Width="80"
Height="80"
Background="{StaticResource UnoColor}"
BorderBrush="{StaticResource UnoColor}"
Content="Circular"
CornerRadius="40"
Foreground="White" />
</ui:ShadowContainer>
</utu:ShadowContainer>

<ui:ShadowContainer Shadows="{StaticResource NeumorphismRaising}">
<utu:ShadowContainer Shadows="{StaticResource NeumorphismRaising}">
<Button Height="60"
Background="{StaticResource UnoColor}"
BorderThickness="0"
Content="Bigger"
CornerRadius="20"
Foreground="White" />
</ui:ShadowContainer>
</utu:ShadowContainer>
</StackPanel>
</StackPanel>
```

![neumorphism built with 2 shadows](../assets/shadows-neumorphism.png)

## Theme Switching support

To ensure that the Shadows feature seamlessly integrates with [Theme Switching](xref:Uno.Features.Themes), it's essential to include the shadow collection within the theme dictionary.

Here's a snippet demonstrating how to structure your theme dictionary for proper shadow support:

```xml
xmlns:utu="using:Uno.Toolkit.UI"
...

<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<Color x:Key="LightShadowColor">Pink</Color>
<Color x:Key="ShadeShadowColor">SkyBlue</Color>

<utu:ShadowCollection x:Key="ButtonShadows">
<utu:Shadow BlurRadius="10"
IsInner="True"
OffsetX="-5"
OffsetY="-5"
Opacity="1"
Spread="0"
Color="{StaticResource LightShadowColor}" />
<utu:Shadow BlurRadius="10"
IsInner="True"
OffsetX="4"
OffsetY="4"
Opacity="1"
Spread="0"
Color="{StaticResource ShadeShadowColor}" />
</utu:ShadowCollection>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<Color x:Key="LightShadowColor">Orange</Color>
<Color x:Key="ShadeShadowColor">Green</Color>

<utu:ShadowCollection x:Key="ButtonShadows">
<utu:Shadow BlurRadius="10"
IsInner="True"
OffsetX="-5"
OffsetY="-5"
Opacity="1"
Spread="0"
Color="{StaticResource LightShadowColor}" />
<utu:Shadow BlurRadius="10"
IsInner="True"
OffsetX="4"
OffsetY="4"
Opacity="1"
Spread="0"
Color="{StaticResource ShadeShadowColor}" />
</utu:ShadowCollection>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
...

<utu:ShadowContainer Shadows="{ThemeResource ButtonShadows}">
<Button Width="200"
Height="40"
Background="{StaticResource UnoColor}"
BorderBrush="{StaticResource UnoColor}"
Content="Save"
CornerRadius="15"
Foreground="White" />
</utu:ShadowContainer>
```
Loading