-
Notifications
You must be signed in to change notification settings - Fork 28
Shadow container #638
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.
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
Merged
Merged
Shadow container #638
Changes from all commits
Commits
Show all changes
34 commits
Select commit
Hold shift + click to select a range
615614e
feat(ShadowContainer): added shadow container component with sample a…
roubachof 2f9323b
docs: added remarks for shadows
roubachof 98dbdd8
fix: style cleanup after pr review
roubachof e9f5da5
fix(ShadowContainer): fixes the weird compilation issue asking to ref…
roubachof 5d6fff1
feat(ShadowContainer): inner shadows implementation
roubachof c18a3b2
style: ShadowContainer.xaml wasn't in mixed mode (tabs + spaces)
roubachof 91ad1b4
style: fixes after pr review
roubachof f29a5ac
chore: update SkiaSharp packages to 2.88.3
c5c0c14
build: fix winui packages errors
Xiaoy312 159d055
ci: Forcing IsUiAutomationMappingEnabled to true on wasm
294df6a
ci: Attempt to build with Skia preview.84
a8f2318
chore: SkiaSharp.Views on 2.88.3
7b07285
ci: Update chrome driver
jeromelaban d149267
chore: Solving comments after review
fa8f428
chore: Solving comments after review
c04a3f9
chore: SkiaSharp Bump to 2.88.4-preview.84
29456e4
chore: Inverting logic for SizeChanged
7dcf507
fix: dispatch measure invalidation
kazo0 7926622
fix: allow empty shadow list when resizing canvas
kazo0 9ac07b2
fix: update shadow subscription logic
kazo0 905831c
fix: add corner radius subscription
kazo0 eed6b71
chore: add tests
kazo0 44bdea0
fix: remove IsNegative call
kazo0 586a733
feat: add new Toolkit.Skia packages
kazo0 d44ac1b
ci: update to 7.0.302
kazo0 b30e3e0
ci: update uno.check
kazo0 b35c472
build: remove uwp skia package
kazo0 79676e4
ci: uno-check version
kazo0 713d775
fix(WinUI): Lambda func method call to avoid cast exception
0d943a0
docs: Adjusting Shadows docs after review
d8d9b93
ci: revert unocheck version
kazo0 ee5bf38
chore: remove winui specific files from uwp
Xiaoy312 ca3b4e0
build: fix csproj
kazo0 6a1bff6
Merge branch 'main' into dev/jmaf/shadow-container
kazo0 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,288 @@ | ||
| --- | ||
| uid: Toolkit.Controls.ShadowContainer | ||
| --- | ||
|
|
||
| ## Summary | ||
| The `ShadowContainer` provides the possibility to add many-colored shadows to its content. | ||
|
|
||
| ## 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. | ||
|
|
||
| ### XAML | ||
| ```xml | ||
| xmlns:utu="using:Uno.Toolkit.UI" | ||
| ... | ||
|
|
||
| <utu:ShadowContainer> | ||
| <utu:ShadowContainer.Shadows> | ||
| <utu:ShadowCollection> | ||
| <utu:Shadow ... /> | ||
| <utu:Shadow ... /> | ||
| </utu:ShadowCollection> | ||
| </utu:ShadowContainer.Shadows> | ||
|
|
||
| <SomeControl /> | ||
|
|
||
| </utu:ShadowContainer> | ||
| ``` | ||
|
|
||
| ### Inheritance | ||
| Object → DependencyObject → UIElement → FrameworkElement → Control → ContentControl > ShadowContainer | ||
|
|
||
| ### Properties | ||
| | Property | Type | Description | | ||
| | -------- | ---------------- | ----------- | | ||
| Shadows | ShadowCollection | The collection of shadows that will be displayed under your control. A `ShadowCollection` can be stored in a resource dictionary to have a consistent style throughout your app. The `ShadowCollection` implements `INotifyCollectionChanged`. | ||
|
|
||
| ## Shadow | ||
|
|
||
| Dependency object representing a single shadow. | ||
|
|
||
| ### Shadow Properties | ||
| | Property | Type | Description | | ||
| | -------- | ---- | ----------- | | ||
| IsInner | bool | True if this shadow is an inner shadow (similar to `inset` of `box-shadow` in CSS). | ||
| OffsetX | double | The X offset of the shadow. | ||
| OffsetY | double | The Y offset of the shadow. | ||
| Color | Color | The color of the shadow. It will be multiplied by the `Opacity` property before rendering. | ||
| 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. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```xml | ||
| xmlns:utu="using:Uno.Toolkit.UI" | ||
| ... | ||
|
|
||
| <Page.Resources> | ||
| <Color x:Key="UnoColor">#7a67f8</Color> | ||
| <Color x:Key="UnoPink">#f85977</Color> | ||
|
|
||
| <!-- You can define your shadows in the resource dictionary --> | ||
| <ui:ShadowCollection x:Name="ButtonShadows"> | ||
| <ui:Shadow BlurRadius="15" | ||
| OffsetY="8" | ||
| Opacity="0.5" | ||
| Color="{StaticResource UnoColor}" /> | ||
| </ui:ShadowCollection> | ||
| </Page.Resources> | ||
|
|
||
| <ui:ShadowContainer> | ||
| <ui:ShadowContainer.Shadows> | ||
| <!-- You can define your shadows directly --> | ||
| <ui:ShadowCollection x:Name="Shadows"> | ||
| <ui:Shadow BlurRadius="20" | ||
| OffsetX="10" | ||
| OffsetY="10" | ||
| Opacity="0.5" | ||
| Spread="-5" | ||
| Color="{StaticResource UnoColor}" /> | ||
| <ui:Shadow BlurRadius="20" | ||
| OffsetX="-10" | ||
| OffsetY="-10" | ||
| Opacity="0.5" | ||
| Spread="-5" | ||
| Color="{StaticResource UnoPink}" /> | ||
| </ui:ShadowCollection> | ||
| </ui:ShadowContainer.Shadows> | ||
| <StackPanel Width="300" | ||
| Padding="16" | ||
| Background="White" | ||
| BorderThickness="1" | ||
| CornerRadius="20" | ||
| Spacing="16"> | ||
|
|
||
| <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Add many shadows" /> | ||
| <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="You can either declare shadows directly, or put your ShadowCollection in a resource dictionary." /> | ||
|
|
||
| <StackPanel Margin="0,16,0,0" | ||
| HorizontalAlignment="Center" | ||
| Orientation="Horizontal" | ||
| Spacing="16"> | ||
|
|
||
| <!-- Reference to the dictionary button shadows --> | ||
| <ui:ShadowContainer Shadows="{StaticResource ButtonShadows}"> | ||
| <Button Background="{StaticResource UnoColor}" | ||
| BorderThickness="1" | ||
| Content="Add Shadow" | ||
| Foreground="White" /> | ||
| </ui:ShadowContainer> | ||
|
|
||
| <!-- Reference to the dictionary button shadows --> | ||
| <ui:ShadowContainer Shadows="{StaticResource ButtonShadows}"> | ||
| <Button Background="{StaticResource UnoColor}" | ||
| BorderThickness="1" | ||
| Content="Remove Shadow" | ||
| Foreground="White" /> | ||
| </ui:ShadowContainer> | ||
| </StackPanel> | ||
| </StackPanel> | ||
| </ui:ShadowContainer> | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| ### Neumorphism | ||
|
|
||
| [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`. The shadow will then be displayed *inside* the element instead of behind. | ||
| This is equivalent to the `inset` property of the CSS `box-shadow`. | ||
|
|
||
| ```xml | ||
| xmlns:utu="using:Uno.Toolkit.UI" | ||
| ... | ||
|
|
||
| <Page.Resources> | ||
| <Color x:Key="UnoColor">#7a67f8</Color> | ||
|
|
||
| <ui:ShadowCollection x:Key="NeumorphismRaising"> | ||
| <!-- Bottom right darker violet --> | ||
| <ui:Shadow BlurRadius="30" | ||
| OffsetX="10" | ||
| OffsetY="10" | ||
| Opacity="1" | ||
| Spread="-5" | ||
| Color="#6858d3" /> | ||
| <!-- Top left lighter violet --> | ||
| <ui:Shadow BlurRadius="30" | ||
| OffsetX="-10" | ||
| OffsetY="-10" | ||
| Opacity="1" | ||
| Spread="-5" | ||
| Color="#8c76ff" /> | ||
| </ui:ShadowCollection> | ||
|
|
||
| <ui:ShadowCollection x:Key="NeumorphismHollow"> | ||
| <!-- Inner top and left shadow --> | ||
| <ui:Shadow BlurRadius="10" | ||
| IsInner="True" | ||
| OffsetX="5" | ||
| OffsetY="5" | ||
| Opacity="1" | ||
| Spread="0" | ||
| Color="#6858d3" /> | ||
| <!-- Inner bottom and right shadow --> | ||
| <ui:Shadow BlurRadius="10" | ||
| IsInner="True" | ||
| OffsetX="-4" | ||
| OffsetY="-4" | ||
| Opacity="1" | ||
| Spread="0" | ||
| Color="#8c76ff" /> | ||
| </ui:ShadowCollection> | ||
|
|
||
| <ui:ShadowCollection x:Key="NeumorphismBulging"> | ||
| <ui:Shadow BlurRadius="10" | ||
| IsInner="True" | ||
| OffsetX="-5" | ||
| OffsetY="-5" | ||
| Opacity="1" | ||
| Spread="0" | ||
| Color="#6858d3" /> | ||
| <ui:Shadow BlurRadius="10" | ||
| IsInner="True" | ||
| OffsetX="4" | ||
| OffsetY="4" | ||
| Opacity="1" | ||
| Spread="0" | ||
| Color="#8c76ff" /> | ||
| </ui:ShadowCollection> | ||
| </Page.Resources> | ||
|
|
||
| <StackPanel Width="400" | ||
| Margin="0,32" | ||
| Padding="32" | ||
| Background="{StaticResource UnoColor}" | ||
| CornerRadius="30"> | ||
| <ui:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"> | ||
| <Grid Width="300" | ||
| Padding="20" | ||
| Background="{StaticResource UnoColor}" | ||
| CornerRadius="20"> | ||
| <Grid.RowDefinitions> | ||
| <RowDefinition Height="20" /> | ||
| <RowDefinition Height="20" /> | ||
| </Grid.RowDefinitions> | ||
|
|
||
| <TextBlock FontSize="15" | ||
| Foreground="White" | ||
| Text="Neumorphism" /> | ||
| <TextBlock Grid.Row="1" | ||
| FontSize="12" | ||
| Foreground="White" | ||
| Text="Raising element" /> | ||
| </Grid> | ||
| </ui:ShadowContainer> | ||
|
|
||
| <ui:ShadowContainer Margin="0,60,0,0" Shadows="{StaticResource NeumorphismHollow}"> | ||
| <TextBox Width="200" | ||
| Height="40" | ||
| Padding="15,10,15,0" | ||
| VerticalAlignment="Center" | ||
| Background="{StaticResource UnoColor}" | ||
| BorderThickness="0" | ||
| CornerRadius="20" | ||
| Foreground="White" | ||
| PlaceholderForeground="LightGray" | ||
| PlaceholderText="Hollow element" /> | ||
| </ui:ShadowContainer> | ||
| <ui:ShadowContainer Margin="0,15" Shadows="{StaticResource NeumorphismHollow}"> | ||
| <TextBox Width="200" | ||
| Height="40" | ||
| Padding="15,10,15,0" | ||
| VerticalContentAlignment="Center" | ||
| Background="{StaticResource UnoColor}" | ||
| BorderThickness="0" | ||
| CornerRadius="20" | ||
| Foreground="White" | ||
| PlaceholderForeground="LightGray" | ||
| PlaceholderText="Hollow element" /> | ||
| </ui:ShadowContainer> | ||
|
|
||
| <ui: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> | ||
|
|
||
| <StackPanel Margin="0,30,0,0" | ||
| Padding="24" | ||
| HorizontalAlignment="Center" | ||
| Orientation="Horizontal" | ||
| Spacing="16"> | ||
|
|
||
| <ui:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"> | ||
| <Button Background="{StaticResource UnoColor}" | ||
| BorderThickness="0" | ||
| Content="Regular" | ||
| Foreground="White" /> | ||
| </ui:ShadowContainer> | ||
|
|
||
| <ui:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"> | ||
| <Button Width="80" | ||
| Height="80" | ||
| Background="{StaticResource UnoColor}" | ||
| BorderBrush="{StaticResource UnoColor}" | ||
| Content="Circular" | ||
| CornerRadius="40" | ||
| Foreground="White" /> | ||
| </ui:ShadowContainer> | ||
|
|
||
| <ui:ShadowContainer Shadows="{StaticResource NeumorphismRaising}"> | ||
| <Button Height="60" | ||
| Background="{StaticResource UnoColor}" | ||
| BorderThickness="0" | ||
| Content="Bigger" | ||
| CornerRadius="20" | ||
| Foreground="White" /> | ||
| </ui:ShadowContainer> | ||
| </StackPanel> | ||
| </StackPanel> | ||
| ``` | ||
|
|
||
|  | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.