Niels9001/recategorization

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

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

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:
 

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

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

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

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"/>
+
+    <Page.Resources>
+        <media:AttachedCardShadow x:Key="CommonShadow" Offset="4"/>
+
+        <Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
+            <Setter Property="ui:Effects.Shadow" Value="{StaticResource CommonShadow}"/>
+            <Setter Property="HorizontalAlignment" Value="Center"/>
+        </Style>
+    </Page.Resources>
+
+    <StackPanel Spacing="32" VerticalAlignment="Center">
+        <Button Content="I Have a Shadow!"/>
+        <Image ui:Effects.Shadow="{StaticResource CommonShadow}"
+               Height="100" Width="100"
+               Source="ms-appx:///Assets/Photos/Owl.jpg"/>
+    </StackPanel>
+```

components/Extensions/samples/AttachedDropShadow.md

@@ -2,11 +2,11 @@
 title: Attached Drop Shadow
 author: michael-hawker
 description: Allows many elements to share a common backdrop for casting shadows.
-keywords: Effects, Control, Layout
+keywords: shadow, shadows, dropshadow, dropshadowpanel, attachedshadow, attacheddropshadow, attachedcardshadow
 dev_langs:
   - csharp
 category: Extensions
-subcategory: Media
+subcategory: Shadows
 discussion-id: 0
 issue-id: 0
 icon: Assets/Shadow.png

components/Extensions/samples/AttachedShadows.md

@@ -1,20 +1,18 @@
 ---
-title: Attached Shadows
+title: Shadows overview
 author: michael-hawker
 description: Attached Shadows allow you to easily create shadow effects on elements.
 keywords: shadow, shadows, dropshadow, dropshadowpanel, attachedshadow, attacheddropshadow, attachedcardshadow
 dev_langs:
   - csharp
 category: Extensions
-subcategory: Media
+subcategory: Shadows
 discussion-id: 0
 issue-id: 0
 icon: Assets/Shadow.png
 ---
 > **Platform APIs:** [`AttachedCardShadow`](/dotnet/api/microsoft.toolkit.uwp.ui.media.attachedcardshadow), [`AttachedDropShadow`](/dotnet/api/microsoft.toolkit.uwp.ui.attacheddropshadow)
 
-## Introduction
-
 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.
 
 ### Capability Comparison
@@ -23,7 +21,7 @@ The following table outlines the various capabilities of each shadow type in add
 
 | Capability                    | AttachedCardShadow                                                 | AttachedDropShadow                                              | DropShadowPanel (deprecated)                                                              |
 |-------------------------------|--------------------------------------------------------------------|-----------------------------------------------------------------|-----------------------------------------------------------------------------------------|
-| Dependency/NuGet Package      | 🟡 Win2D via<br>`Microsoft.Toolkit.Uwp.UI.Media`                       | ✅ Framework Only (Composition Effect)<br>`CommunityToolkit.WinUI.Effects`  | ✅ Framework Only (Composition Effect)<br>`Microsoft.Toolkit.Uwp.UI.Controls` (legacy)                              |
+| 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)                              |
 | Layer                         | Inline Composition +<br>Win2D Clip Geometry                           | Composition via<br>Target Element Backdrop                         | Composition via<br>`ContentControl` Container                                                |
 | Modify Visual Tree            | ✅ No                                                              | 🟡 Usually requires single target element, even for multiple shadows    | ❌ Individually wrap each element needing shadow                                         |
 | Extra Visual Tree Depth       | ✅ 0                                                               | 🟡 1 per sibling element to cast one or more shadows to          | ❌ _**4** per Shadowed Element_                                                                |
@@ -40,105 +38,12 @@ The `AttachedCardShadow` is the easiest to use and most performant shadow. It is
 
 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!
 
-### Example
-
-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"/>
-
-    <Page.Resources>
-        <media:AttachedCardShadow x:Key="CommonShadow" Offset="4"/>
-
-        <Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
-            <Setter Property="ui:Effects.Shadow" Value="{StaticResource CommonShadow}"/>
-            <Setter Property="HorizontalAlignment" Value="Center"/>
-        </Style>
-    </Page.Resources>
-
-    <StackPanel Spacing="32" VerticalAlignment="Center">
-        <Button Content="I Have a Shadow!"/>
-        <Image ui:Effects.Shadow="{StaticResource CommonShadow}"
-               Height="100" Width="100"
-               Source="ms-appx:///Assets/Photos/Owl.jpg"/>
-    </StackPanel>
-```
-
 ## AttachedDropShadow (Composition)
 
 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.
 
 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.
 
-> [!SAMPLE AttachedDropShadowBasicSample]
-
 ### Remarks
 
 While `DropShadowPanel` encapsulated the complexities of adding a shadow, it added a lot of depth and complexity to the visual tree. `AttachedDropShadow` instead requires that you provide the surface where the shadows should be cast, such as a common backdrop element. This means that each shadow can use the same shared surface rather than creating its own backdrop element for each shadow (like `DropShadowPanel` did). This slight trade-off for ease-of-use is a gain in performance. However, it does mean it may not be as flexible for certain use cases with manipulation of an element. In those cases we recommend to try and use `AttachedCardShadow` instead or wrapping an element and its backdrop in a custom control.
-
-### Example
-
-The following example shows how to use an `AttachedDropShadow` as a resource with a `TextBlock` to mask the shadow of some text:
-
-```xaml
-    <Page.Resources>
-        <ui:AttachedDropShadow x:Key="CommonShadow" Offset="4" CastTo="{x:Bind ShadowTarget}"/>
-    </Page.Resources>
-
-    <Grid>
-        <Border x:Name="ShadowTarget"/>
-        <TextBlock ui:Effects.Shadow="{StaticResource CommonShadow}"
-                   Text="This is some text with a Shadow!"
-                   HorizontalAlignment="Center"/>
-    </Grid>
-```
-
-## Animation
-
-Either type of Attached Shadow can be easily animated using the Toolkit's [`AnimationSet`](../animations/AnimationSet.md) api. These provide an easy XAML based way to animate a wide variety of elements, including a variety of shadow properties. They can also be animated with any other composition animation technique in code-behind as well using either the [`AnimationBuilder`](../animations/AnimationBuilder.md) or built-in composition animations.
-
-> **Platform APIs:** [`BlurRadiusDropShadowAnimation`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.blurradiusdropshadowanimation), [`ColorDropShadowAnimation`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.colordropshadowanimation), [`OffsetDropShadowAnimation`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.offsetdropshadowanimation), [`OpacityDropShadowAnimation`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.opacitydropshadowanimation)
-
-> [!NOTE]
-> `AttachedCardShadow` has better support for animations which involve translation of the element along with the shadow. If animating an `AttachedDropShadow` it is best to only animate the shadow itself vs. moving the element it is attached to. This can cause the shadow and element to be desynchronized.
-
-> [!div class="nextstepaction"]
-> [Try it in the sample app](uwpct://animations?sample=shadow%20animations)
-
-### Example
-
-The following example uses a combination of behaviors and animations apis to create an animated shadow effect when hovering over an image with an [`OffsetDropShadowAnimation`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.offsetdropshadowanimation):
-
-```xaml
-    xmlns:ui="using:CommunityToolkit.WinUI"
-    xmlns:media="using:CommunityToolkit.WinUI.Media"
-    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
-    xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
-    xmlns:ani="using:CommunityToolkit.WinUI.Animations"
-    xmlns:behaviors="using:CommunityToolkit.WinUI.Behaviors"/>
-
-    <Image Height="100" Width="100"
-           Source="ms-appx:///Assets/Photos/Owl.jpg">
-        <ui:Effects.Shadow>
-            <media:AttachedCardShadow Offset="4" CornerRadius="0"/>
-        </ui:Effects.Shadow>
-        <ani:Explicit.Animations>
-            <ani:AnimationSet x:Name="ShadowEnterAnimation">
-                <ani:OffsetDropShadowAnimation To="12"/>
-            </ani:AnimationSet>
-
-            <ani:AnimationSet x:Name="ShadowExitAnimation">
-                <ani:OffsetDropShadowAnimation To="4"/>
-            </ani:AnimationSet>
-        </ani:Explicit.Animations>
-        <interactivity:Interaction.Behaviors>
-            <interactions:EventTriggerBehavior EventName="PointerEntered">
-                <behaviors:StartAnimationAction Animation="{x:Bind ShadowEnterAnimation}"/>
-            </interactions:EventTriggerBehavior>
-            <interactions:EventTriggerBehavior EventName="PointerExited">
-                <behaviors:StartAnimationAction Animation="{x:Bind ShadowExitAnimation}"/>
-            </interactions:EventTriggerBehavior>
-        </interactivity:Interaction.Behaviors>
-    </Image>
-```

components/Extensions/samples/DispatcherQueueExtensions.md

@@ -6,7 +6,7 @@ keywords: dispatcher, dispatcherqueue, DispatcherHelper, DispatcherQueueExtensio
 dev_langs:
   - csharp
 category: Extensions
-subcategory: None
+subcategory: Miscellaneous
 discussion-id: 0
 issue-id: 0
 icon: Assets/Extensions.png

components/Extensions/samples/EnumValuesExtension.md

@@ -36,7 +36,7 @@ Binding to an enum property can be accomplished like so:
 
 ```xaml
 <ComboBox
-    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
+    xmlns:ui="using:CommunityToolkit.WinUI"
     xmlns:enums="using:MyApplication.Enums"
     ItemsSource="{ui:EnumValues Type=enums:Animal}"
     SelectedItem="{x:Bind SelectedAnimal, Mode=OneWay}" />

components/Extensions/samples/Extensions.Samples.csproj

@@ -9,6 +9,7 @@
     <None Remove="Assets\Extensions.png" />
     <None Remove="Assets\Llama.jpg" />
     <None Remove="Assets\Shadow.png" />
+    <None Remove="Assets\ShadowAnimation.png" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="Assets\Extensions.png">
@@ -20,5 +21,8 @@
     <Content Include="Assets\Shadow.png">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
+    <Content Include="Assets\ShadowAnimation.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
   </ItemGroup>
 </Project>

components/Extensions/samples/HyperlinkExtensions.md

@@ -6,7 +6,7 @@ keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp
 dev_langs:
   - csharp
 category: Extensions
-subcategory: Input
+subcategory: Controls
 discussion-id: 0
 issue-id: 0
 icon: Assets/Extensions.png

components/Extensions/samples/IconMarkupExtensions.md

@@ -1,5 +1,5 @@
 ---
-title: Icon markup extensions
+title: Icon extensions
 author: sergio0694
 description: The FontIcon, FontIconSource and BitmapIcon markup extensions allow developers to easily declare these types of icons directly from XAML in a compact manner.
 keywords: markup extension, XAML, markup, fonticon, fonticonsource, bitmapicon

components/Extensions/samples/ListViewExtensions.md

@@ -6,7 +6,7 @@ keywords: ListViewBase, extensions
 dev_langs:
   - csharp
 category: Extensions
-subcategory: Layout
+subcategory: Controls
 discussion-id: 0
 issue-id: 0
 icon: Assets/Extensions.png
@@ -124,7 +124,7 @@ await MyGridView.SmoothScrollIntoViewWithItemAsync(item: object, itemPlacement:
 ### Methods
 
 | Methods | Return Type | Description |
-| -- | -- | -- |
+|---------|-------------|-------------|
 | SmoothScrollIntoViewWithIndexAsync(int, ScrollItemPlacement, bool, bool, int, int) | Task | Smooth scroll item into view With index number |
 | SmoothScrollIntoViewWithItemAsync(object, ScrollItemPlacement, bool, bool, int, int) | Task | Smooth scroll item into view With item object |
 

components/Extensions/samples/NullableBoolExtension.md

@@ -6,7 +6,7 @@ keywords: nullable bool, dependency property, markup extension, XAML, markup
 dev_langs:
   - csharp
 category: Extensions
-subcategory: Media
+subcategory: Miscellaneous
 discussion-id: 0
 issue-id: 0
 icon: Assets/Extensions.png