Shadow container

build/workflow/scripts/wasm-uitest-run.sh

@@ -15,8 +15,8 @@ fi
 
 cd $BUILD_SOURCESDIRECTORY/build/$SAMPLEAPP_ARTIFACT_NAME
 
-npm i chromedriver@86.0.0
-npm i puppeteer@5.3.1
+npm i chromedriver@102.0.0
+npm i puppeteer@14.1.0
 
 # install dotnet serve / Remove as needed
 dotnet tool uninstall dotnet-serve -g || true
@@ -27,7 +27,7 @@ export PATH="$PATH:$BUILD_SOURCESDIRECTORY/build/tools"
 export BASE_ARTIFACTS_PATH=$BUILD_ARTIFACTSTAGINGDIRECTORY/wasm/$XAML_FLAVOR_BUILD/$UITEST_TEST_MODE_NAME
 export UNO_UITEST_TARGETURI=http://localhost:5000
 export UNO_UITEST_DRIVERPATH_CHROME=$BUILD_SOURCESDIRECTORY/build/$SAMPLEAPP_ARTIFACT_NAME/node_modules/chromedriver/lib/chromedriver
-export UNO_UITEST_CHROME_BINARY_PATH=$BUILD_SOURCESDIRECTORY/build/$SAMPLEAPP_ARTIFACT_NAME/node_modules/puppeteer/.local-chromium/linux-800071/chrome-linux/chrome
+export UNO_UITEST_CHROME_BINARY_PATH=$BUILD_SOURCESDIRECTORY/build/$SAMPLEAPP_ARTIFACT_NAME/node_modules/puppeteer/.local-chromium/linux-991974/chrome-linux/chrome
 export UNO_UITEST_SCREENSHOT_PATH=$BASE_ARTIFACTS_PATH/screenshots
 export UNO_UITEST_PLATFORM=Browser
 export UNO_UITEST_CHROME_CONTAINER_MODE=true

build/workflow/stage-uitests-android.yml

@@ -120,7 +120,7 @@
   - task: DownloadBuildArtifacts@0
     displayName: 'Download UITest Binaries'
     inputs:
-        artifactName: toolkit-uitest-binaries
+        artifactName: toolkit-uitest-binaries-$(XAML_FLAVOR_BUILD)
         downloadPath: '$(build.sourcesdirectory)/build'
 
   - template: templates/dotnet-workload-install-mac.yml

build/workflow/stage-uitests-build.yml

@@ -2,6 +2,14 @@ jobs:
 - job: Toolkit_UITests_Build
   displayName: 'Build Toolkit UI Tests'
 
+  strategy:
+    maxParallel: 2
+    matrix:
+      UWP:
+        XAML_FLAVOR_BUILD: UWP
+      WinUI:
+        XAML_FLAVOR_BUILD: WinUI
+
   variables:
     CI_Build: true
 
@@ -18,7 +26,7 @@ jobs:
     displayName: 'Build UI Tests'
     inputs:
       solution: src/Uno.Toolkit.UITest/Uno.Toolkit.UITest.csproj
-      msbuildArguments: /r /m /p:Configuration=Release /detailedsummary /m /bl:$(build.artifactstagingdirectory)\build.binlog
+      msbuildArguments: /r /m /p:Configuration=Release /p:FrameworkLineage=$(XAML_FLAVOR_BUILD) /detailedsummary /m /bl:$(build.artifactstagingdirectory)\build.binlog
 
   - task: CopyFiles@2
     displayName: 'Publish UITest binaries'
@@ -34,5 +42,5 @@ jobs:
     retryCountOnTaskFailure: 3
     inputs:
       PathtoPublish: $(build.artifactstagingdirectory)
-      ArtifactName: toolkit-uitest-binaries
+      ArtifactName: toolkit-uitest-binaries-$(XAML_FLAVOR_BUILD)
       ArtifactType: Container

build/workflow/stage-uitests-ios.yml

@@ -125,7 +125,7 @@
   - task: DownloadBuildArtifacts@0
     displayName: 'Download UITest Binaries'
     inputs:
-        artifactName: toolkit-uitest-binaries
+        artifactName: toolkit-uitest-binaries-$(XAML_FLAVOR_BUILD)
         downloadPath: '$(build.sourcesdirectory)/build'
 
   - template: templates/dotnet-workload-install-mac.yml

build/workflow/stage-uitests-wasm.yml

@@ -104,7 +104,7 @@
   - task: DownloadBuildArtifacts@0
     displayName: 'Download UITest Binaries'
     inputs:
-        artifactName: toolkit-uitest-binaries
+        artifactName: toolkit-uitest-binaries-$(XAML_FLAVOR_BUILD)
         downloadPath: '$(build.sourcesdirectory)/build'
 
   - task: UseDotNet@2

build/workflow/templates/dotnet-workload-install-mac.yml

@@ -1,7 +1,7 @@
 parameters:
-  DotNetVersion: '7.0.102'
-  UnoCheck_Version: '1.11.0-dev.2'
-  UnoCheck_Manifest: 'https://raw.githubusercontent.com/unoplatform/uno.check/146b0b4b23d866bef455494a12ad7ffd2f6f2d20/manifests/uno.ui.manifest.json'
+  DotNetVersion: '7.0.302'
+  UnoCheck_Version: '1.13.0'
+  UnoCheck_Manifest: 'https://raw.githubusercontent.com/unoplatform/uno.check/c3b289d7bb16a2a2df7f7f7f848d76fe1e74036d/manifests/uno.ui.manifest.json'
   Dotnet_Root: '/usr/local/share/dotnet/'
   Dotnet_Tools: '~/.dotnet/tools'
 

build/workflow/templates/dotnet-workload-install-windows.yml

@@ -1,7 +1,7 @@
 parameters:
-  DotNetVersion: '7.0.102'
-  UnoCheck_Version: '1.11.0-dev.2'
-  UnoCheck_Manifest: 'https://raw.githubusercontent.com/unoplatform/uno.check/146b0b4b23d866bef455494a12ad7ffd2f6f2d20/manifests/uno.ui.manifest.json'
+  DotNetVersion: '7.0.302'
+  UnoCheck_Version: '1.13.0'
+  UnoCheck_Manifest: 'https://raw.githubusercontent.com/unoplatform/uno.check/c3b289d7bb16a2a2df7f7f7f848d76fe1e74036d/manifests/uno.ui.manifest.json'
 
 steps:
 

doc/controls-styles.md

@@ -10,8 +10,9 @@ The `Uno.Toolkit.UI` library adds the following controls:
 - [`DrawerControl`](controls/DrawerControl.md): A container to display additional content, in a hidden pane that can be revealed using a swipe gesture, like a drawer.
 - [`DrawerFlyoutPresenter`](controls/DrawerFlyoutPresenter.md): A specialized `ContentPresenter` to be used in the template of a `FlyoutPresenter` to enable gesture support.
 - [`LoadingView`](controls/LoadingView.md): A control that indicates that the UI is waiting on a task to complete.
-- [`TabBar` and `TabBarItem`](controls/TabBarAndTabBarItem.md): A list of selectable items that can be used to facilitate lateral navigation within an application.
 - [`NavigationBar`](controls/NavigationBar.md): A custom control that helps implement navigation logic for your application.
+- [`ShadowContainer`](controls/ShadowContainer.md): A content control allowing you to add multiple shadows to your content.
+- [`TabBar` and `TabBarItem`](controls/TabBarAndTabBarItem.md): A list of selectable items that can be used to facilitate lateral navigation within an application.
 
 ## Helpers
 The `Uno.Toolkit.UI` library adds the following helper classes:

doc/controls/ShadowContainer.md

@@ -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 &#8594; DependencyObject &#8594; UIElement &#8594; FrameworkElement &#8594; Control &#8594; 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>
+```
+
+![2 colored shadows with 2 buttons with single shadows](../assets/shadows-colors.png)
+
+### 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>
+```
+
+![neumorphism built with 2 shadows](../assets/shadows-neumorphism.png)