Updates for docs from WCT 8.2 Release

docs/windows/Animations/ConnectedAnimations.md

@@ -114,7 +114,7 @@ We can create the above connected animations.
 
 ### In first page
 
-We need a set a key for the element to be connected with another element in a different page.
+We need to set a key for the element to be connected with another element in a different page.
 
 ```xaml
 <Grid>

docs/windows/Collections/AdvancedCollectionView.md

@@ -1,8 +1,8 @@
 ---
 title: AdvancedCollectionView
 author: nmetulev
-description: The AdvancedCollectionView is a collection view implementation that support filtering, sorting and incremental loading. It's meant to be used in a viewmodel.
-keywords: AdvancedCollectionView, data, sorting, filtering, Collections
+description: The AdvancedCollectionView is a collection view implementation that support filtering, sorting and incremental loading. It's meant to be used in a view or viewmodel.
+keywords: AdvancedCollectionView, CollectionViewSource, data, sorting, filtering, Collections
 dev_langs:
   - csharp
 category: Helpers
@@ -14,72 +14,25 @@ icon: Assets/AdvancedCollectionView.png
 
 # AdvancedCollectionView
 
-:::code language="xaml" source="~/../code-windows/components/Collections/samples/AdvancedCollectionViewSample.xaml":::
-
-:::code language="csharp" source="~/../code-windows/components/Collections/samples/AdvancedCollectionViewSample.xaml.cs":::
-
 ## Usage
 
-In your viewmodel instead of having a public [IEnumerable](/dotnet/core/api/system.collections.generic.ienumerable-1) of some sort to be bound to an eg. [Listview](/uwp/api/Windows.UI.Xaml.Controls.ListView), create a public AdvancedCollectionView and pass your list in the constructor to it. If you've done that you can use the many useful features it provides:
+In your view or viewmodel instead of having a public [IEnumerable](/dotnet/core/api/system.collections.generic.ienumerable-1) of some sort to be bound to an eg. [Listview](/uwp/api/Windows.UI.Xaml.Controls.ListView), create a public AdvancedCollectionView and pass your list in the constructor to it. If you've done that you can use the many useful features it provides:
 
 * sorting your list using the `SortDirection` helper: specify any number of property names to sort on with the direction desired
 * filtering your list using a [Predicate](/dotnet/core/api/system.predicate-1): this will automatically filter your list only to the items that pass the check by the predicate provided
 * deferring notifications using the `NotificationDeferrer` helper: with a convenient _using_ pattern you can increase performance while doing large-scale modifications in your list by waiting with updates until you've completed your work
 * incremental loading: if your source collection supports the feature then AdvancedCollectionView will do as well (it simply forwards the calls)
 * live shaping: when constructing the `AdvancedCollectionView` you may specify that the collection use live shaping. This means that the collection will re-filter or re-sort if there are changes to the sort properties or filter properties that are specified using `ObserveFilterProperty`
 
+The `AdvancedCollectionView` is a good replacement for WPF's `CollectionViewSource`.
+
 ## Example
 
-```csharp
-using CommunityToolkit.WinUI.Collections;
+The following is a complete example of how to perform ...
 
-// Grab a sample type
-public class Person
-{
-    public string Name { get; set; }
-}
+:::code language="xaml" source="~/../code-windows/components/Collections/samples/AdvancedCollectionViewSample.xaml":::
 
-// Set up the original list with a few sample items
-var oc = new ObservableCollection<Person>
-{
-    new Person { Name = "Staff" },
-    new Person { Name = "42" },
-    new Person { Name = "Swan" },
-    new Person { Name = "Orchid" },
-    new Person { Name = "15" },
-    new Person { Name = "Flame" },
-    new Person { Name = "16" },
-    new Person { Name = "Arrow" },
-    new Person { Name = "Tempest" },
-    new Person { Name = "23" },
-    new Person { Name = "Pearl" },
-    new Person { Name = "Hydra" },
-    new Person { Name = "Lamp Post" },
-    new Person { Name = "4" },
-    new Person { Name = "Looking Glass" },
-    new Person { Name = "8" },
-};
-
-// Set up the AdvancedCollectionView with live shaping enabled to filter and sort the original list
-var acv = new AdvancedCollectionView(oc, true);
-
-// Let's filter out the integers
-int nul;
-acv.Filter = x => !int.TryParse(((Person)x).Name, out nul);
-
-// And sort ascending by the property "Name"
-acv.SortDescriptions.Add(new SortDescription("Name", SortDirection.Ascending));
-
-// Let's add a Person to the observable collection
-var person = new Person { Name = "Aardvark" };
-oc.Add(person);
-
-// Our added person is now at the top of the list, but if we rename this person, we can trigger a re-sort
-person.Name = "Zaphod"; // Now a re-sort is triggered and person will be last in the list
-
-// AdvancedCollectionView can be bound to anything that uses collections. 
-YourListView.ItemsSource = acv;
-```
+:::code language="csharp" source="~/../code-windows/components/Collections/samples/AdvancedCollectionViewSample.xaml.cs":::
 
 ## Remarks
 

docs/windows/Extensions/DispatcherQueueTimerExtensions.md

@@ -0,0 +1,49 @@
+---
+title: DispatcherQueueTimerExtensions
+author: michael-hawker
+description: Helpers for executing code at specific times on a UI thread through a DispatcherQueue instance with a DispatcherQueueTimer.
+keywords: dispatcher, dispatcherqueue, DispatcherHelper, DispatcherQueueExtensions, DispatcherQueueTimer, DispatcherQueueTimerExtensions
+dev_langs:
+  - csharp
+category: Extensions
+subcategory: Miscellaneous
+discussion-id: 0
+issue-id: 0
+icon: Assets/Extensions.png
+---
+
+# DispatcherQueueTimerExtensions
+
+The `DispatcherQueueTimerExtensions` static class provides an extension method for [`DispatcherQueueTimer`](/windows/windows-app-sdk/api/winrt/microsoft.ui.dispatching.dispatcherqueue) objects that make it easier to execute code on a specific UI thread at a specific time.
+
+The `DispatcherQueueTimerExtensions` provides a single extension method, `Debounce`. This is a standard technique used to rate-limit input from a user to not overload requests on an underlying service or query elsewhere.
+
+> [!WARNING]
+> You should exclusively use the `DispatcherQueueTimer` instance calling `Debounce` for the purposes of Debouncing one specific action/scenario only and not configure it for other additional uses.
+
+For each scenario that you want to Debounce, you'll want to create a separate `DispatcherQueueTimer` instance to track that specific scenario. For instance, if the below samples were both within your application. You'd need two separate timers to track debouncing both scenarios. One for the keyboard input, and a different one for the mouse input.
+
+> [!NOTE]
+> Using the `Debounce` method will set `DispatcherQueueTimer.IsRepeating` to `false` to ensure proper operation. Do not change this value.
+
+> [!NOTE]
+> If additionally registering to the `DispatcherQueueTimer.Tick` event (uncommon), it will be raised in one of two ways: 1. For a trailing debounce, it will be raised alongside the requested Action passed to the Debounce method. 2. For a leading debounce, it will be raised when the cooldown has expired and another call to Debounce would result in running the action.
+
+## Syntax
+
+It can be used in a number of ways, but most simply like so as a keyboard limiter:
+
+:::code language="xaml" source="~/../code-windows/components/Extensions/samples/Dispatcher/KeyboardDebounceSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Extensions/samples/Dispatcher/KeyboardDebounceSample.xaml.cs":::
+
+Or for preventing multiple inputs from occuring accidentally (e.g. ignoring a double/multi-click):
+
+:::code language="xaml" source="~/../code-windows/components/Extensions/samples/Dispatcher/MouseDebounceSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Extensions/samples/Dispatcher/MouseDebounceSample.xaml.cs":::
+
+## Examples
+
+You can find more examples in the [unit tests](https://github.com/CommunityToolkit/Windows/blob/rel/8.1.240916/components/Extensions/tests/DispatcherQueueTimerExtensionTests.cs).
+

docs/windows/Extensions/ListViewExtensions.md

@@ -33,14 +33,9 @@ The `AlternateColor` property provides a way to assign a background color to eve
 
 Here is how this property can be used in XAML:
 
-```xaml
-<Page ...
-     xmlns:ui="using:CommunityToolkit.WinUI">
+:::code language="xaml" source="~/../code-windows/components/Extensions/samples/ListViewExtensionsAlternateColorSample.xaml":::
 
-<ListView
-    ui:ListViewExtensions.AlternateColor="Silver"
-    ItemsSource="{x:Bind MainViewModel.Items, Mode=OneWay}" />
-```
+:::code language="csharp" source="~/../code-windows/components/Extensions/samples/ListViewExtensionsAlternateColorSample.xaml.cs":::
 
 ## AlternateItemTemplate
 

docs/windows/Media/AttachedCardShadow.md

@@ -14,7 +14,7 @@ icon: Assets/Shadow.png
 
 # Attached Card Shadow
 
-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 `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. Its 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!
 

docs/windows/Media/Brushes.md

@@ -0,0 +1,90 @@
+---
+title: Brushes
+author: erinwoo  
+description: Brush effects that can be applied to images and backgrounds.
+keywords: brush, acrylic, acrylicbrush, backdrop, blur, gamma, transfer, invert, saturation, sepia, tiles, tile, image, blend, brushes
+dev_langs:
+  - csharp
+category: Xaml
+subcategory: Effects
+discussion-id: 0
+issue-id: 0
+icon: Assets/MediaBrushes.png
+---
+
+# Brushes
+
+A brush object is used to paint graphical objects in XAML and can be layered with other visual elements such as images and backgrounds. For examples and further explanation of drawing concepts represented by Brush, see [Use brushes](/en-us/windows/uwp/graphics/using-brushes).
+
+## AcrylicBrush
+
+Acrylic is a type of Brush that creates a translucent texture. You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy.
+To learn more about the acrylic material in Windows: [link](/en-us/windows/apps/design/style/acrylic)
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/AcrylicBrushSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/AcrylicBrushSample.xaml.cs":::
+
+#### *UWP only:*
+There are two modes for setting the BackgroundSource property when using an `AcrylicBrush`.
+Setting it to `Backdrop` results in the acrylic effect being applied to whatever is *behind the brush* in the application.
+
+Setting BackgroundSource to `HostBackdrop` results in the acrylic effect being applied *behind the current application*.
+
+## BackdropBlurBrush
+
+A brush that blurs the background in the application.
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/BackdropBlurBrushSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/BackdropBlurBrushSample.xaml.cs":::
+
+## BackdropGammaTransferBrush
+
+A brush which modifies the color values of the brush's background in the application. Map the color intensities of an image using a gamma function created using an amplitude, exponent, and offset you provide for each channel.
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/BackdropGammaTransferBrushSample.xaml.cs":::
+
+## BackdropInvertBrush
+
+A brush that inverts the colors of the brush's background in the application.
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/BackdropInvertBrushSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/BackdropInvertBrushSample.xaml.cs":::
+
+## BackdropSaturationBrush
+
+A brush that can increase or decrease the saturation of the brush's background in the application. The `Saturation` property specifies a double value for the amount of Saturation to apply from 0.0 - 1.0. Zero being monochrome, and one being fully saturated. The default is 0.5.
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/BackdropSaturationBrushSample.xaml.cs":::
+
+## BackdropSepiaBrush
+
+A brush that applies the sepia effect to the brush's background. The `Intensity` property specifies a double value for the amount of Sepia to apply from 0.0 - 1.0. Zero being none, and one being full Sepia effect. The default is 0.5.
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/BackdropSepiaBrushSample.xaml.cs":::
+
+## ImageBlendBrush
+
+A brush that blends the provided image with whatever is behind it in the application with the provided blend mode. The ImageBlendMode property specifies how the image should be blended with the backdrop. More info about the effect modes can be found [here](https://microsoft.github.io/Win2D/WinUI2/html/T_Microsoft_Graphics_Canvas_Effects_BlendEffectMode.htm).
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/ImageBlendBrushSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/ImageBlendBrushSample.xaml.cs":::
+
+## TilesBrush
+
+A brush can be used to display a tiled image as a background.
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/TilesBrushSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/TilesBrushSample.xaml.cs":::
+
+

docs/windows/Media/EffectAnimations.md

@@ -16,43 +16,60 @@ icon: Assets/EffectAnimations.png
 
 EffectAnimations are used to animate the Win2D effects in `CommunityToolkit.WinUI.Media.Effects` without code-behind. Combined with an `AnimationSet`, you can string together complex animated effects that run sequentially or simultaneously.
 
-> [!SAMPLE EffectAnimationsSample]
+:::code language="xaml" source="~/../code-windows/components/Media/samples/EffectAnimationsSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/EffectAnimationsSample.xaml.cs":::
 
 ## BlurEffectAnimation
 
 Apply and animate a Win2D BlurEffect
 
-> [!SAMPLE BlurEffectAnimationSample]
+:::code language="xaml" source="~/../code-windows/components/Media/samples/BlurEffectAnimationSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/BlurEffectAnimationSample.xaml.cs":::
 
 ## ColorEffectAnimation
 
 Animate an overlaid color with a Win2D ColorEffect.
 
-> [!SAMPLE ColorEffectAnimationSample]
+:::code language="xaml" source="~/../code-windows/components/Media/samples/ColorEffectAnimationSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/ColorEffectAnimationSample.xaml.cs":::
 
 ## CrossFadeEffectAnimation
 
 Blends and animates any PipelineBuilder source with any Win2D effect. This sample blends an image with a `BlurEffect` and effect from `CommunityToolkit.WinUI.Media.Effects`.
 
-> [!SAMPLE CrossFadeEffectAnimationSample]
+:::code language="xaml" source="~/../code-windows/components/Media/samples/CrossFadeEffectAnimationSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/CrossFadeEffectAnimationSample.xaml.cs":::
 
 ## ExposureEffectAnimation
 
 Animate the exposure with a Win2D ExposureEffect.
 
-> [!SAMPLE ExposureEffectAnimationSample]
+:::code language="xaml" source="~/../code-windows/components/Media/samples/ExposureEffectAnimationSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/ExposureEffectAnimationSample.xaml.cs":::
 
 ## HueRotationEffectAnimation
 
 Animate Hue to a specific angle using a Win2D HueRotationEffect.
 
-> [!SAMPLE HueRotationEffectAnimationSample]
+:::code language="xaml" source="~/../code-windows/components/Media/samples/HueRotationEffectAnimationSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/HueRotationEffectAnimationSample.xaml.cs":::
 
 ## SaturationEffectAnimation
 
-> [!SAMPLE SaturationEffectAnimationSample]
+:::code language="xaml" source="~/../code-windows/components/Media/samples/SaturationEffectAnimationSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/SaturationEffectAnimationSample.xaml.cs":::
 
 ## SepiaEffectAnimation
 
-> [!SAMPLE SepiaEffectAnimationSample]
+:::code language="xaml" source="~/../code-windows/components/Media/samples/SepiaEffectAnimationSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/SepiaEffectAnimationSample.xaml.cs":::
+
 

docs/windows/Media/PipelineBrush.md

@@ -0,0 +1,24 @@
+---
+title: PipelineBrush
+author: erinwoo  
+description: A brush that renders a customizable Composition/Win2D effects pipeline. This allows for applying multiple effects into a single effect chain.
+keywords: brush, pipeline, pipe
+dev_langs:
+  - csharp
+category: Xaml
+subcategory: Effects
+discussion-id: 0
+issue-id: 0
+icon: Assets/EffectAnimations.png
+---
+
+# PipelineBrush
+
+`Source` gets or sets the source for the current pipeline (defaults to a `BackdropSourceExtension` with `Microsoft.UI.Xaml.Media.AcrylicBackgroundSource.Backdrop` source).
+Multiple effects can be nested within the `PipelineBrush` component. 
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/PipelineBrushSample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/PipelineBrushSample.xaml.cs":::
+
+

docs/windows/Media/PipelineVisualFactory.md

@@ -0,0 +1,23 @@
+---
+title: PipelineVisualFactory
+author: erinwoo  
+description: A helper type that can be used to create sprite visuals with custom Win2D/Composition effects chains and attach them to UI elements. 
+keywords: pipeline, visual, factory, pipe
+dev_langs:
+  - csharp
+category: Xaml
+subcategory: Effects
+discussion-id: 0
+issue-id: 0
+icon: Assets/EffectAnimations.png
+---
+
+# PipelineVisualFactory
+
+PipelineVisualFactory can create the same visual brushes as the PipelineBrush type, but it can attach them directly on the underlying Visual instance backing a UI element. This can make the XAML code less verbose and more efficient, as there is no need to insert additional elements just so that a brush can be applied to them.
+
+:::code language="xaml" source="~/../code-windows/components/Media/samples/Brushes/PipelineVisualFactorySample.xaml":::
+
+:::code language="csharp" source="~/../code-windows/components/Media/samples/Brushes/PipelineVisualFactorySample.xaml.cs":::
+
+