Skip to content

Commit 3217d31

Browse files
michael-hawkermichael-hawker
committed
Add AttachedCardShadow samples to Media Samples
Moves AttachedCardShadow doc to the Media Samples Move AttachedDropShadow samples to their own folder
1 parent 2428107 commit 3217d31

14 files changed

+117
-29
lines changed

‎components/Extensions/samples/AttachedShadows.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ icon: Assets/Shadow.png
1515
1616
There are two types of attached shadows available today, the `AttachedCardShadow` and the `AttachedDropShadow`. It is recommended to use the `AttachedCardShadow` where possible, if you don't mind the dependency on Win2D. The `AttachedCardShadow` provides an easier to use experience that is more performant and easier to apply across an entire set of elements, assuming those elements are rounded-rectangular in shape. The `AttachedDropShadow` provides masking support and can be leveraged in any UWP app without adding an extra dependency.
1717

18-
### Capability Comparison
18+
## Capability Comparison
1919

2020
The following table outlines the various capabilities of each shadow type in addition to comparing to the previous `DropShadowPanel` implementation:
2121

22-
| Capability | AttachedCardShadow | AttachedDropShadow | DropShadowPanel (deprecated) |
22+
| Capability | AttachedCardShadow | AttachedDropShadow | DropShadowPanel (deprecated/removed) |
2323
|-------------------------------|--------------------------------------------------------------------|-----------------------------------------------------------------|-----------------------------------------------------------------------------------------|
2424
| Dependency/NuGet Package | 🟡 Win2D via<br>`CommunityToolkit.WinUI.Media` | ✅ Framework Only (Composition Effect)<br>`CommunityToolkit.WinUI.Effects` | ✅ Framework Only (Composition Effect)<br>`Microsoft.Toolkit.Uwp.UI.Controls` (legacy) |
2525
| Layer | Inline Composition +<br>Win2D Clip Geometry | Composition via<br>Target Element Backdrop | Composition via<br>`ContentControl` Container |
@@ -40,7 +40,7 @@ The great benefit to the `AttachedCardShadow` is that no extra surface or elemen
4040

4141
## AttachedDropShadow (Composition)
4242

43-
The `AttachedDropShadow` provides masking support to a wide variety of elements including transparent images, shapes, and text. Masking to a custom shape that's not rectangular or rounded-rectangular is the main scenario where an `AttachedDropShadow` will be useful. Unlike it's predecessor, the [`DropShadowPanel`](../Controls/DropShadowPanel.md), the `AttachedDropShadow` doesn't need to wrap the element being shadowed; however, it does require another element to cast the shadow on to.
43+
The `AttachedDropShadow` provides masking support to a wide variety of elements including transparent images, shapes, and text. Masking to a custom shape that's not rectangular or rounded-rectangular is the main scenario where an `AttachedDropShadow` will be useful. Unlike it's predecessor, the `DropShadowPanel`, the `AttachedDropShadow` doesn't need to wrap the element being shadowed; however, it does require another element to cast the shadow on to.
4444

4545
This makes it a bit more complex to use than the `AttachedCardShadow` and the `DropShadowPanel`, but since multiple `AttachedDropShadow` elements can share the same surface, this makes it much more performant than its predecessor.
4646

‎components/Extensions/samples/AttachedDropShadowBasicSample.xaml renamed to ‎components/Extensions/samples/Shadows/AttachedDropShadowBasicSample.xaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2-
<Page x:Class="ExtensionsExperiment.Samples.AttachedDropShadowBasicSample"
2+
<Page x:Class="ExtensionsExperiment.Samples.Shadows.AttachedDropShadowBasicSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

‎components/Extensions/samples/AttachedDropShadowBasicSample.xaml.cs renamed to ‎components/Extensions/samples/Shadows/AttachedDropShadowBasicSample.xaml.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5-
namespace ExtensionsExperiment.Samples;
5+
namespace ExtensionsExperiment.Samples.Shadows;
66

77
[ToolkitSample(id: nameof(AttachedDropShadowBasicSample), "Basic Attached Drop Shadow", description: "A sample for showing how to create an AttachedDropShadow on an element.")]
88
public sealed partial class AttachedDropShadowBasicSample : Page

‎components/Extensions/samples/AttachedDropShadowResourceSample.xaml renamed to ‎components/Extensions/samples/Shadows/AttachedDropShadowResourceSample.xaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2-
<Page x:Class="ExtensionsExperiment.Samples.AttachedDropShadowResourceSample"
2+
<Page x:Class="ExtensionsExperiment.Samples.Shadows.AttachedDropShadowResourceSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

‎components/Extensions/samples/AttachedDropShadowResourceSample.xaml.cs renamed to ‎components/Extensions/samples/Shadows/AttachedDropShadowResourceSample.xaml.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5-
namespace ExtensionsExperiment.Samples;
5+
namespace ExtensionsExperiment.Samples.Shadows;
66

77
[ToolkitSample(id: nameof(AttachedDropShadowResourceSample), "Attached Drop Shadow as Resource", description: "A sample for showing how to create an AttachedDropShadow on an element when defined as a resource.")]
88
public sealed partial class AttachedDropShadowResourceSample : Page

‎components/Extensions/samples/AttachedDropShadowStyleSample.xaml renamed to ‎components/Extensions/samples/Shadows/AttachedDropShadowStyleSample.xaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2-
<Page x:Class="ExtensionsExperiment.Samples.AttachedDropShadowStyleSample"
2+
<Page x:Class="ExtensionsExperiment.Samples.Shadows.AttachedDropShadowStyleSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

‎components/Extensions/samples/AttachedDropShadowStyleSample.xaml.cs renamed to ‎components/Extensions/samples/Shadows/AttachedDropShadowStyleSample.xaml.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5-
namespace ExtensionsExperiment.Samples;
5+
namespace ExtensionsExperiment.Samples.Shadows;
66

77
[ToolkitSample(id: nameof(AttachedDropShadowStyleSample), "Attached Drop Shadow as Style", description: "A sample for showing how to create an AttachedDropShadow when used in a Style.")]
88
public sealed partial class AttachedDropShadowStyleSample : Page

‎components/Media/samples/Assets/OwlShadow.jpg

60.2 KB
Loading

‎components/Extensions/samples/AttachedCardShadow.md renamed to ‎components/Media/samples/AttachedCardShadow.md

+9-20
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,12 @@ The great benefit to the `AttachedCardShadow` is that no extra surface or elemen
1818

1919
The example shows how easy it is to not only apply an `AttachedCardShadow` to an element, but use it in a style to apply to multiple elements as well:
2020

21-
```xaml
22-
xmlns:ui="using:CommunityToolkit.WinUI"
23-
xmlns:media="using:CommunityToolkit.WinUI.Media"/>
24-
25-
<Page.Resources>
26-
<media:AttachedCardShadow x:Key="CommonShadow" Offset="4"/>
27-
28-
<Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
29-
<Setter Property="ui:Effects.Shadow" Value="{StaticResource CommonShadow}"/>
30-
<Setter Property="HorizontalAlignment" Value="Center"/>
31-
</Style>
32-
</Page.Resources>
33-
34-
<StackPanel Spacing="32" VerticalAlignment="Center">
35-
<Button Content="I Have a Shadow!"/>
36-
<Image ui:Effects.Shadow="{StaticResource CommonShadow}"
37-
Height="100" Width="100"
38-
Source="ms-appx:///Assets/Photos/Owl.jpg"/>
39-
</StackPanel>
40-
```
21+
> [!SAMPLE AttachedCardShadowBasicSample]
22+
23+
You can see the `AttachedCardShadow` defined as a resource so it can be shared across multiple components. It also supports binding/animations to update at runtime.
24+
25+
## Layer Ordering
26+
27+
There can be cases, especially direct usage on untemplated elements, where the AttachedCardShadow may require a parent element to create the desired effect, as seen in this example:
28+
29+
> [!SAMPLE AttachedCardShadowUntemplatedSample]

‎components/Media/samples/Media.Samples.csproj

+4
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,16 @@
99
<ItemGroup>
1010
<None Remove="Assets\Bloom.jpg" />
1111
<None Remove="Assets\EffectAnimations.png" />
12+
<None Remove="Assets\OwlShadow.jpg" />
1213

1314
<Content Include="Assets\Bloom.jpg">
1415
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
1516
</Content>
1617
<Content Include="Assets\EffectAnimations.png">
1718
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
1819
</Content>
20+
<Content Include="Assets\OwlShadow.jpg">
21+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
22+
</Content>
1923
</ItemGroup>
2024
</Project>

‎components/Media/samples/Shadows/AttachedCardShadowBasicSample.xaml

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<Page x:Class="MediaExperiment.Samples.Shadows.AttachedCardShadowBasicSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:media="using:CommunityToolkit.WinUI.Media"
7+
xmlns:ui="using:CommunityToolkit.WinUI"
8+
mc:Ignorable="d">
9+
10+
<Page.Resources>
11+
<media:AttachedCardShadow x:Key="CommonShadow"
12+
Offset="4" />
13+
14+
<Style BasedOn="{StaticResource DefaultButtonStyle}"
15+
TargetType="Button">
16+
<Setter Property="ui:Effects.Shadow" Value="{StaticResource CommonShadow}" />
17+
<Setter Property="HorizontalAlignment" Value="Center" />
18+
</Style>
19+
</Page.Resources>
20+
21+
<StackPanel VerticalAlignment="Center"
22+
Spacing="32">
23+
<Button Content="I Have a Shadow!" />
24+
<Image Width="100"
25+
Height="100"
26+
ui:Effects.Shadow="{StaticResource CommonShadow}"
27+
Source="ms-appx:///Assets/OwlShadow.jpg" />
28+
</StackPanel>
29+
</Page>

‎components/Media/samples/Shadows/AttachedCardShadowBasicSample.xaml.cs

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.WinUI.Media;
6+
7+
namespace MediaExperiment.Samples.Shadows;
8+
9+
[ToolkitSample(id: nameof(AttachedCardShadowBasicSample), "Basic Attached Card Shadow", description: $"A sample for showing how to create an {nameof(AttachedCardShadow)} on an element.")]
10+
public sealed partial class AttachedCardShadowBasicSample : Page
11+
{
12+
public AttachedCardShadowBasicSample()
13+
{
14+
this.InitializeComponent();
15+
}
16+
}

‎components/Media/samples/Shadows/AttachedCardShadowUntemplatedSample.xaml

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<Page x:Class="MediaExperiment.Samples.Shadows.AttachedCardShadowUntemplatedSample"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:media="using:CommunityToolkit.WinUI.Media"
7+
xmlns:ui="using:CommunityToolkit.WinUI"
8+
mc:Ignorable="d">
9+
10+
<!--
11+
If you want to apply a shadow directly in your visual tree to an untemplated element
12+
You need to at least have a layer of depth as seen in this next example.
13+
-->
14+
<Border Width="100"
15+
Height="100">
16+
<Border BorderBrush="White"
17+
BorderThickness="1"
18+
CornerRadius="32">
19+
<Border.Background>
20+
<ImageBrush ImageSource="ms-appx:///Assets/OwlShadow.jpg" />
21+
</Border.Background>
22+
</Border>
23+
<!--
24+
We need to put the Shadow on a parent element here as otherwise the
25+
rounding of the border of the image above clips the shadow itself.
26+
This is easier to perform with the Composition only based shadow as the
27+
Shadow is projected to another element.
28+
-->
29+
<ui:Effects.Shadow>
30+
<media:AttachedCardShadow CornerRadius="32"
31+
Offset="4,4" />
32+
</ui:Effects.Shadow>
33+
</Border>
34+
</Page>

‎components/Media/samples/Shadows/AttachedCardShadowUntemplatedSample.xaml.cs

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.WinUI.Media;
6+
7+
namespace MediaExperiment.Samples.Shadows;
8+
9+
[ToolkitSample(id: nameof(AttachedCardShadowUntemplatedSample), "Untemplated Attached Card Shadow", description: $"A sample for showing how to create an {nameof(AttachedCardShadow)} on an untemplated element.")]
10+
public sealed partial class AttachedCardShadowUntemplatedSample : Page
11+
{
12+
public AttachedCardShadowUntemplatedSample()
13+
{
14+
this.InitializeComponent();
15+
}
16+
}

0 commit comments

Comments
 (0)