diff --git a/components/Animations/samples/Animations.md b/components/Animations/samples/Animations.md index a66f6add..29a653d0 100644 --- a/components/Animations/samples/Animations.md +++ b/components/Animations/samples/Animations.md @@ -6,7 +6,7 @@ keywords: Animations, Effects, Layout, Composition, animationset dev_langs: - csharp category: Animations -subcategory: Layout +subcategory: Effects discussion-id: 0 issue-id: 0 icon: Assets/ImplicitAnimations.png diff --git a/components/Animations/samples/ConnectedAnimations.md b/components/Animations/samples/ConnectedAnimations.md index 47b015aa..f78b1d7d 100644 --- a/components/Animations/samples/ConnectedAnimations.md +++ b/components/Animations/samples/ConnectedAnimations.md @@ -6,7 +6,7 @@ keywords: Animations, Effects, Layout, Composition, animationset, animation, coo dev_langs: - csharp category: Animations -subcategory: Layout +subcategory: Effects discussion-id: 0 issue-id: 0 icon: Assets/ConnectedAnimations.png diff --git a/components/Behaviors/samples/Assets/AnimationSet.png b/components/Behaviors/samples/Assets/AnimationSet.png index 4e8f924f..d12f585d 100644 Binary files a/components/Behaviors/samples/Assets/AnimationSet.png and b/components/Behaviors/samples/Assets/AnimationSet.png differ diff --git a/components/Behaviors/samples/Behaviors.Animations.md b/components/Behaviors/samples/Behaviors.Animations.md index 67c2d8a1..c7687c67 100644 --- a/components/Behaviors/samples/Behaviors.Animations.md +++ b/components/Behaviors/samples/Behaviors.Animations.md @@ -5,8 +5,8 @@ description: A collection of animations that can be grouped together. keywords: Behaviors, animations, animationset, xaml, visual, composition dev_langs: - csharp -category: Xaml -subcategory: Behaviors +category: Animations +subcategory: Miscellaneous discussion-id: 0 issue-id: 0 icon: Assets/AnimationSet.png @@ -125,7 +125,7 @@ Here's an example of how all these various explicit animations can be combined t ## Behaviors -If you are also referencing the `Microsoft.Toolkit.Uwp.UI.Behaviors` package, it will be possible to also use behaviors and actions to better support the new APIs, such as by automatically triggering an animation when a given event is raised, entirely from XAML. There are four main types being introduced in this package that interoperate with the Animation APIs: +If you are also referencing the `Behaviors` package, it will be possible to also use behaviors and actions to better support the new APIs, such as by automatically triggering an animation when a given event is raised, entirely from XAML. There are four main types being introduced in this package that interoperate with the Animation APIs: - [`AnimationStartedTriggerBehavior`](/dotnet/api/microsoft.toolkit.uwp.ui.behaviors.AnimationStartedTriggerBehavior) and [`AnimationCompletedTriggerBehavior`](/dotnet/api/microsoft.toolkit.uwp.ui.behaviors.AnimationCompletedTriggerBehavior): these are custom triggers that can be used to execute `IAction`-s when an `AnimationSet` starts or completes. All the built-in `IAction` objects can be used from the Behaviors package, as well as custom ones as well. - [`StartAnimationAction`](/dotnet/api/microsoft.toolkit.uwp.ui.behaviors.StartAnimationAction): an `IAction` object that can be used within behaviors to easily start a target animation, either with an attached UI element or with an explicit target to animate. @@ -164,7 +164,7 @@ This makes it possible to also not having to name the target UI element, to regi ## Effect animations -Lastly, the `AnimationSet` class can also directly animate Composition/Win2D effects. To gain access to this feature, you will need to also reference the `Microsoft.Toolkit.Uwp.UI.Media`. This package includes some special animation types that can be plugged in into an `AnimationSet` instance and used to animate individual effects within a custom effects graph. This can then be used either from a [PipelineBrush](/dotnet/api/microsoft.toolkit.uwp.ui.media.pipelinebrush) or from an inline graph attached to a UI element through the [`PipelineVisualFactory`](/dotnet/api/microsoft.toolkit.uwp.ui.media.PipelineVisualFactory) type. All these effect animations are powered by the same `AnimationBuilder` type behind the scenes, and can facilitate creating complex animations on specific effects within a graph. +Lastly, the `AnimationSet` class can also directly animate Composition/Win2D effects. To gain access to this feature, you will need to also reference the `CommunityToolkit.WinUI.Media`. This package includes some special animation types that can be plugged in into an `AnimationSet` instance and used to animate individual effects within a custom effects graph. This can then be used either from a [PipelineBrush](/dotnet/api/microsoft.toolkit.uwp.ui.media.pipelinebrush) or from an inline graph attached to a UI element through the [`PipelineVisualFactory`](/dotnet/api/microsoft.toolkit.uwp.ui.media.PipelineVisualFactory) type. All these effect animations are powered by the same `AnimationBuilder` type behind the scenes, and can facilitate creating complex animations on specific effects within a graph. Here is an example of how the new `PipelineVisualFactory` type can be combined with these effect animations: diff --git a/components/CameraPreview/samples/CameraPreview.md b/components/CameraPreview/samples/CameraPreview.md index 9b863b11..bc047d9e 100644 --- a/components/CameraPreview/samples/CameraPreview.md +++ b/components/CameraPreview/samples/CameraPreview.md @@ -6,7 +6,7 @@ keywords: CameraPreview, Control, skommireddi dev_langs: - csharp category: Controls -subcategory: Layout +subcategory: Media discussion-id: 0 issue-id: 0 icon: Assets/CameraPreview.png diff --git a/components/Collections/samples/AdvancedCollectionView.md b/components/Collections/samples/AdvancedCollectionView.md index dd83aae1..bace1cc8 100644 --- a/components/Collections/samples/AdvancedCollectionView.md +++ b/components/Collections/samples/AdvancedCollectionView.md @@ -27,7 +27,7 @@ In your viewmodel instead of having a public [IEnumerable](/dotnet/core/api/syst ## Example ```csharp -using Microsoft.Toolkit.Uwp.UI; +using CommunityToolkit.WinUI; // Grab a sample type public class Person diff --git a/components/Converters/samples/Converters.md b/components/Converters/samples/Converters.md index 7854e707..90ec6f37 100644 --- a/components/Converters/samples/Converters.md +++ b/components/Converters/samples/Converters.md @@ -6,7 +6,7 @@ keywords: Converters, Control, Layout dev_langs: - csharp category: Xaml -subcategory: None +subcategory: Miscellaneous discussion-id: 0 issue-id: 0 icon: Assets/Converters.png diff --git a/components/Extensions/samples/Assets/ShadowAnimation.png b/components/Extensions/samples/Assets/ShadowAnimation.png new file mode 100644 index 00000000..7a34b77c Binary files /dev/null and b/components/Extensions/samples/Assets/ShadowAnimation.png differ diff --git a/components/Extensions/samples/AttachedCardShadow.md b/components/Extensions/samples/AttachedCardShadow.md new file mode 100644 index 00000000..8ac08e22 --- /dev/null +++ b/components/Extensions/samples/AttachedCardShadow.md @@ -0,0 +1,40 @@ +--- +title: Attached Card Shadow +author: michael-hawker +description: Attach performant and easy to use shadows powered by Win2D. +keywords: shadow, shadows, dropshadow, dropshadowpanel, attachedshadow, attacheddropshadow, attachedcardshadow +dev_langs: + - csharp +category: Extensions +subcategory: Shadows +discussion-id: 0 +issue-id: 0 +icon: Assets/Shadow.png +--- + +The `AttachedCardShadow` is the easiest to use and most performant shadow. It is recommended to use it where possible, if taking a Win2D dependency is not a concern. It's only drawbacks are the extra dependency required and that it only supports rectangular and rounded-rectangular geometries (as described in the table above). + +The great benefit to the `AttachedCardShadow` is that no extra surface or element is required to add the shadow. This reduces the complexity required in development and allows shadows to easily be added at any point in the development process. It also supports transparent elements, without displaying the shadow behind them! + +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: + +```xaml + xmlns:ui="using:CommunityToolkit.WinUI" + xmlns:media="using:CommunityToolkit.WinUI.Media"/> + + + + + + + + +