-
Notifications
You must be signed in to change notification settings - Fork 27
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
[Specs] ShadowContainer #470
Comments
Is it ok that these two share the same TYPE value? (NonDEV asking)
` |
@NVLudwig yes to all questions except for light source. |
Regarding a Skia-based backend, we'd likely need to have some sort of |
Support of colored shadows in native platformsAndroid
MAUI implementation: Hardware acceleration is possible: iOS
MAUI implementation: For good rendering perf, you need to set the shadowPath property on the CALayer, or else you will have a context switch between onscreen and offscreen rendering. Inner shadow references:
WinUI
MAUI implementation: Other implementations:
SkiaSharp
|
Thoughts on simplifying the name? If not, I'd be ok on agreeing on a suffix, just need to discuss if it's Panel/Control/View. And then if we have Shadow, could we have ShadowItem like there is SwipeItem? |
@francoistanguay 2 cents: |
We can have attached properties for the shadows, sort of like there is with <utu:DropShadowsPanel>
<Image Width="120"
Margin="-20,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{images:ImageResource nyan_cat.png}">
<utu:DropShadowsPanel.Shadows>
<utu:Shadow BlurRadius="10"
Opacity="0.5"
Offset="8,8"
Color="Yellow" />
<utu:Shadow BlurRadius="10"
Opacity="0.5"
Offset="-8,-6"
Color="Violet" />
</utu:DropShadowsPanel.Shadows>
</Image>
</utu:DropShadowsPanel> or <utu:DropShadowsPanel>
<Image Width="120"
Margin="-20,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{images:ImageResource nyan_cat.png}"
utu:DropShadowsPanel.Shadows="{StaticResource DarkNeumorphism}" />
</utu:DropShadowsPanel> And perhaps we can allow for inividual Shadow component properties as attached properties as well and infer a default SingleShadow with those property values. Something like: <utu:DropShadowsPanel>
<Image Width="120"
Margin="-20,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{images:ImageResource nyan_cat.png}"
utu:DropShadowsPanel.BlurRadius="10"
utu:DropShadowPanel.Offset="-10, 0"
utu:DropShadowPanel.Color="Violet" />
</utu:DropShadowsPanel> could result in a And so would we need to define a separate <utu:DropShadowsPanel Grid.Row="1"
Grid.Column="1"
Margin="0,10,0,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Content="TopArea with Shadow">
<utu:DropShadowsPanel.Shadows>
<utu:Shadow BlurRadius="10"
Opacity="0.5"
Offset="8,8"
Color="Yellow" />
</utu:DropShadowsPanel.Shadows>
</Button>
<Button Grid.Row="1"
VerticalAlignment="Center"
Content="MiddleArea without Shadow" />
<Button Grid.Row="2"
Content="BottomArea with Shadow">
<utu:DropShadowsPanel.Shadows>
<utu:Shadow BlurRadius="10"
Opacity="0.5"
Offset="8,8"
Color="Pink" />
</utu:DropShadowsPanel.Shadows>
</Button>
</Grid>
</utu:DropShadowsPanel> |
As for naming, So then the child attached properties could be Or perhaps |
For naming, with XF Shadows I named For the xaml part, my preference leans toward sticking to simplicity and simply have a list of <tk:ShadowContainer Shadows={StaticResource CardShadow}> .... |
Would this means that, toolkit will have an additional package dependency for non-skia targets? |
Re-Open for backport PRs (can be closed accordingly when merged) |
Related Epic issue: unoplatform/uno#6183 |
Closing the issue as related PRs are now backported |
Shadows for Uno specs
Name of the component:
ShadowContainer
Type:
ContentControl
Properties
ShadowCollection
UIElement
Shadow
Type:
DependencyObject
double
double
Color
double
double
bool
Implementation
Generic.xaml:
Shadows drawing would occurs thanks to
SkiaSharp
:Remarks
If the child is an image or text, we need to get the alpha mask or clipping path.
If the child is
Border
orControl
, we can just apply the corner radius to the shadows.In v1, I suggest we stick to simple child with corner radius.
Usage
Declare shadows in dictionary
Use shadows with resources
Use shadows directly
Questions
SKCanvasView
exist for UNO?GetAlphaMask
or aGetClippingPath
for v2?The text was updated successfully, but these errors were encountered: