diff --git a/.config/dotnet-tools.json b/.config/dotnet-tools.json
index 727dffdf..2817fea9 100644
--- a/.config/dotnet-tools.json
+++ b/.config/dotnet-tools.json
@@ -3,7 +3,7 @@
"isRoot": true,
"tools": {
"uno.check": {
- "version": "1.14.1",
+ "version": "1.20.2",
"commands": [
"uno-check"
]
@@ -15,7 +15,7 @@
]
},
"microsoft.visualstudio.slngen.tool": {
- "version": "9.5.4",
+ "version": "11.2.3",
"commands": [
"slngen"
]
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 6ef0a7e9..e50fee03 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -7,7 +7,7 @@
"args": {
// Update 'VARIANT' to pick a .NET Core version: 3.1, 5.0, 6.0
// Append -bullseye or -focal to pin to an OS version.
- "VARIANT": "7.0",
+ "VARIANT": "8.0",
// Options
"NODE_VERSION": "lts/*"
}
diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
new file mode 100644
index 00000000..c85ffbf6
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -0,0 +1,146 @@
+name: Bug report
+description: Create a report to help us fix something within the Windows Community Toolkit.
+labels: ["bug :bug:"]
+body:
+- type: markdown
+ attributes:
+ value: |
+ ## Before you begin
+ 🚨 **Please do not skip instructions**🚨
+
+ This info is essential for investigating your bug report. Issues with missing information may be closed without investigation.
+
+ If you're uncertain about a problem, find or start a [Questions & Answers](https://github.com/CommunityToolkit/Windows/discussions/categories/q-a) discussion, where you can get insight from the community regarding your issue.
+- type: textarea
+ id: description
+ validations:
+ required: true
+ attributes:
+ label: Describe the bug
+ description: A clear and concise description of what the bug is.
+- type: textarea
+ id: repro-steps
+ validations:
+ required: true
+ attributes:
+ label: Steps to reproduce
+ render: text
+ description: Provide steps to reproduce the issue, or let us know why it can't be reproduced (e.g. more complex setup, environment, dependencies, etc...)
+ placeholder: |
+ The easier we can reproduce the issue, the easier it is to understand and fix the problem.
+ Provide repro steps, code-snippets, or a standalone project to help us understand the issue you're facing.
+
+ If the problem can be reproduced in our [Sample Gallery](https://aka.ms/windowstoolkitapp), you can speed up creation of a functional repro by forking the toolkit and adding or modifying a test or sample. Link to the forked repo and branch.
+
+ Example repro steps:
+ 1. Given the following environment (Sample App w/ XAML, Project with Isolated setup, etc...)
+ 2. Go to '...'
+ 3. Click on '....'
+ 4. Scroll down to '....'
+ 5. See error
+- type: textarea
+ id: expected-behavior
+ validations:
+ required: true
+ attributes:
+ label: Expected behavior
+ description: A clear and concise description of what you expected to happen.
+- type: textarea
+ id: screenshots
+ attributes:
+ label: Screenshots
+ description: If applicable, add screenshots to help explain your problem.
+- type: checkboxes
+ id: platform
+ attributes:
+ label: Code Platform
+ description: Check the platforms where you see the issue occur.
+ options:
+ - label: UWP
+ - label: WinAppSDK / WinUI 3
+ - label: Web Assembly (WASM)
+ - label: Android
+ - label: iOS
+ - label: MacOS
+ - label: Linux / GTK
+- type: checkboxes
+ id: environment-windows-build
+ attributes:
+ label: Windows Build Number
+ description: Check one or more of the following options (if applicable)
+ options:
+ - label: Windows 10 1809 (Build 17763)
+ - label: Windows 10 1903 (Build 18362)
+ - label: Windows 10 1909 (Build 18363)
+ - label: Windows 10 2004 (Build 19041)
+ - label: Windows 10 20H2 (Build 19042)
+ - label: Windows 10 21H1 (Build 19043)
+ - label: Windows 10 21H2 (Build 19044)
+ - label: Windows 10 22H2 (Build 19045)
+ - label: Windows 11 21H2 (Build 22000)
+ - label: Other (specify)
+- type: input
+ id: environment-windows-build-other-build-number
+ attributes:
+ label: Other Windows Build number
+ description: If applicable, another Windows build number not listed (such as an Insider build)
+- type: checkboxes
+ id: environment-app-min-target-version
+ attributes:
+ label: App minimum and target SDK version
+ description: Check one or more of the following options
+ options:
+ - label: Windows 10, version 1809 (Build 17763)
+ - label: Windows 10, version 1903 (Build 18362)
+ - label: Windows 10, version 1909 (Build 18363)
+ - label: Windows 10, version 2004 (Build 19041)
+ - label: Windows 10, version 2104 (Build 20348)
+ - label: Windows 11, version 22H2 (Build 22000)
+ - label: Other (specify)
+- type: input
+ id: environment-app-min-target-other-build-number
+ attributes:
+ label: Other SDK version
+ description: If applicable, another SDK version not listed (such as an Insider SDK)
+- type: dropdown
+ id: visual-studio-version
+ attributes:
+ multiple: true
+ label: Visual Studio Version
+ description: Check one or more of the following options
+ options:
+ - 2022
+ - Preview
+- type: input
+ id: visual-studio-exact-build
+ attributes:
+ label: Visual Studio Build Number
+ description: What's the exact build number? (Found in Visual Studio under Help -> About Microsoft Visual Studio)
+- type: dropdown
+ id: form-factor
+ attributes:
+ multiple: true
+ label: Device form factor
+ description: Check one or more of the following options
+ options:
+ - Desktop
+ - Xbox
+ - Surface Hub
+ - IoT
+ - Mobile
+- type: textarea
+ id: additional-context
+ attributes:
+ label: Additional context
+ description: Add any other context about the problem here.
+- type: dropdown
+ id: contribution
+ validations:
+ required: true
+ attributes:
+ label: Help us help you
+ description: Would you like to contribute a solution to this issue?
+ options:
+ - Yes, I'd like to be assigned to work on this item.
+ - Yes, but only if others can assist.
+ - No, I'm unable to contribute a solution.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 00000000..3d4c0a45
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,23 @@
+blank_issues_enabled: false
+contact_links:
+ - name: Questions about the Toolkit?
+ url: https://github.com/CommunityToolkit/Windows/discussions/categories/q-a
+ about: I have a question about how to use something in the toolkit.
+ - name: New Idea?
+ url: https://github.com/CommunityToolkit/Labs-Windows/discussions?discussions_q=category%3AExperiments+category%3AIdeas+category%3AProposals
+ about: Labs is where we propose and experiment with new ideas. Search ongoing experiments or contribute your own!
+ - name: MVVM Toolkit, High Performance, or Diagnostic Package
+ url: https://aka.ms/toolkit/dotnet
+ about: "If you have a question on these, see the .NET Community Toolkit repo:"
+ - name: MAUI Community Toolkit
+ url: https://aka.ms/toolkit/maui
+ about: "This repository is for the Windows Community Toolkit. For MAUI, see the MAUI Community Toolkit repo:"
+ - name: WindowsAppSDK
+ url: https://aka.ms/windowsappsdk
+ about: "This repository is for the Windows Community Toolkit, for issues in the platform itself, see the WindowsAppSDK repo:"
+ - name: Cross-platform / Uno Platform
+ url: https://github.com/unoplatform/uno
+ about: "The Windows Community Toolkit uses Uno Platform for cross-platform WinUI. See the Uno Platform repo for issues specific to running on non-Windows platforms:"
+ - name: Discord
+ url: https://aka.ms/wct/discord
+ about: "Join the UWP Discord Server and talk to us in the #community-toolkit channel."
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 00000000..c4425ea6
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+
+## Fixes
+
+
+
+
+
+
+
+## PR Type
+
+What kind of change does this PR introduce?
+
+
+
+
+
+
+
+
+
+
+
+
+## What is the current behavior?
+
+
+
+## What is the new behavior?
+
+
+
+## PR Checklist
+
+Please check if your PR fulfills the following requirements:
+
+- [ ] Created a feature/dev branch in your fork (vs. submitting directly from a commit on main)
+- [ ] Based off latest main branch of toolkit
+- [ ] Tested code with current supported SDKs
+- [ ] New component
+ - [ ] Documentation has been added
+ - [ ] Sample in sample app has been added
+ - [ ] Analyzers are passing for documentation and samples
+ - [ ] Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/CommunityToolkit/WindowsCommunityToolkit-design-assets)
+- [ ] Tests for the changes have been added (if applicable)
+- [ ] Header has been added to all new source files
+- [ ] Contains **NO** breaking changes
+
+
+
+## Other information
+
+
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 3d28b9b2..46aa6698 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -17,7 +17,7 @@ on:
merge_group:
env:
- DOTNET_VERSION: ${{ '7.0.100' }}
+ DOTNET_VERSION: ${{ '8.0.201' }}
ENABLE_DIAGNOSTICS: true
MSBUILD_VERBOSITY: normal
#COREHOST_TRACE: 1
@@ -67,7 +67,7 @@ jobs:
env:
# faux-ternary expression to select which platforms to build for each platform vs. duplicating step below.
- TARGET_PLATFORMS: all
+ TARGET_PLATFORMS: ${{ matrix.platform != 'WinUI3' && 'all-wasdk' || 'all-uwp' }}
TEST_PLATFORM: ${{ matrix.platform != 'WinUI3' && 'UWP' || 'WinAppSdk' }}
VERSION_PROPERTY: ${{ github.ref == 'refs/heads/main' && format('build.{0}', github.run_number) || format('pull-{0}.{1}', github.event.number, github.run_number) }}
@@ -108,7 +108,6 @@ jobs:
- name: Restore dotnet tools
run: dotnet tool restore
- # Pinning Manifest for 1.13 version of Uno.Check at the moment to unblock build, see https://github.com/CommunityToolkit/Windows/pull/201
- name: Run Uno Check to Install Dependencies
run: >
dotnet tool run uno-check
@@ -119,10 +118,11 @@ jobs:
--skip androidemulator
--skip vswinworkloads
--verbose
- --manifest https://raw.githubusercontent.com/unoplatform/uno.check/c3b289d7bb16a2a2df7f7f7f848d76fe1e74036d/manifests/uno.ui.manifest.json
- name: Add msbuild to PATH
- uses: microsoft/setup-msbuild@v1.3.1
+ uses: microsoft/setup-msbuild@v2
+ with:
+ vs-version: '[17.9,)'
- name: Enable ${{ env.TARGET_PLATFORMS }} TargetFrameworks
working-directory: ./${{ env.MULTI_TARGET_DIRECTORY }}
@@ -175,7 +175,7 @@ jobs:
# Build All Packages
- name: pack experiments
working-directory: ./tooling/Scripts/
- run: ./PackEachExperiment.ps1 -date ${{ env.VERSION_DATE }} -postfix ${{ env.VERSION_PROPERTY }}
+ run: ./PackEachExperiment.ps1 -date ${{ env.VERSION_DATE }}${{ env.VERSION_PROPERTY != '' && format(' -postfix {0}', env.VERSION_PROPERTY) || '' }}
# Push Pull Request Packages to our DevOps Artifacts Feed (see nuget.config)
- name: Push Pull Request Packages (if not fork)
diff --git a/Directory.Build.props b/Directory.Build.props
index 044fb8d9..d0e8f102 100644
--- a/Directory.Build.props
+++ b/Directory.Build.props
@@ -1,23 +1,23 @@
8
- 0
- preview
+ 1CommunityToolkit$([MSBuild]::EnsureTrailingSlash('$(MSBuildThisFileDirectory)'))$(RepositoryDirectory)toolingtrue$(RepositoryDirectory)components\Converters\src\CommunityToolkit.WinUI.Converters.csproj
- $(RepositoryDirectory)components\Extensions\src\CommunityToolkit.WinUI.Extensions.csproj
+ $(RepositoryDirectory)components\Extensions\src\CommunityToolkit.WinUI.Extensions.csproj$(RepositoryDirectory)components\Triggers\src\CommunityToolkit.WinUI.Triggers.csproj$(RepositoryDirectory)components\SettingsControls\src\CommunityToolkit.WinUI.Controls.SettingsControls.csproj
- $(RepositoryDirectory)components\Helpers\src\CommunityToolkit.WinUI.Helpers.csproj
- $(RepositoryDirectory)components\Behaviors\src\CommunityToolkit.WinUI.Behaviors.csproj
- $(RepositoryDirectory)components\Animations\src\CommunityToolkit.WinUI.Animations.csproj
- $(RepositoryDirectory)components\Primitives\src\CommunityToolkit.WinUI.Controls.Primitives.csproj
+ $(RepositoryDirectory)components\Helpers\src\CommunityToolkit.WinUI.Helpers.csproj
+ $(RepositoryDirectory)components\Behaviors\src\CommunityToolkit.WinUI.Behaviors.csproj
+ $(RepositoryDirectory)components\Animations\src\CommunityToolkit.WinUI.Animations.csproj
+ $(RepositoryDirectory)components\Primitives\src\CommunityToolkit.WinUI.Controls.Primitives.csproj
+ $(RepositoryDirectory)components\Sizers\src\CommunityToolkit.WinUI.Controls.Sizers.csproj
diff --git a/ReadMe.md b/ReadMe.md
index b686c530..be916f68 100644
--- a/ReadMe.md
+++ b/ReadMe.md
@@ -5,15 +5,23 @@
Welcome to the home of Windows Community Toolkit. Our components are built on top of [WinUI 2](https://aka.ms/winuigithub), [WinUI 3](https://aka.ms/winui3), and [Uno Platform](https://platform.uno)!
-**Find out more and provide feedback in the [2023 Windows Community Toolkit Feedback Thread](https://github.com/CommunityToolkit/Windows/discussions/31).**
+They enable developers to build great experiences for Windows with .NET!
+
+_Building something cool? Want to engage with other developers? Want to contribute to the Toolkit? **[Engage in the discussion here!](https://github.com/CommunityToolkit/Windows/discussions)**_
## Getting Started
-### [Try out our Sample App live in your browser!](https://toolkitlabs.dev)
+### [Try out our Sample Gallery from the Microsoft Store](https://aka.ms/windowstoolkitapp)
+
+Want to see the toolkit in action before jumping into the code? Download and play with the [Windows Community Toolkit Gallery](https://www.microsoft.com/store/apps/9nblggh4tlcq) from the Store.
+
+Please read the [Getting Started with the Windows Community Toolkit](https://docs.microsoft.com/dotnet/communitytoolkit/windows/getting-started) page for more detailed information about using the toolkit.
+
+### Windows Community Toolkit Labs
-Want to see the toolkit in action before jumping into the code? Download and play with the [Windows Community Toolkit Sample App](https://www.microsoft.com/store/apps/9nblggh4tlcq) from the Store.
+Have an idea for a new feature? Want to checkout the latest things being built. _[Then head over to Windows Community Toolkit Labs](https://aka.ms/toolkit/labs/windows)_.
-Please read the [Getting Started with the Windows Community Toolkit](https://docs.microsoft.com/windows/communitytoolkit/getting-started) page for more detailed information about using the toolkit.
+You can even see the latest components [live in your browser!](https://toolkitlabs.dev)
## Clone the repository
@@ -32,17 +40,24 @@ git clone --recurse-submodules https://github.com/CommunityToolkit/Windows.git
## 🚀 Contribution
-Find out the latest info in out [discussion thread here](https://github.com/CommunityToolkit/Windows/discussions/31)
+We're always looking for a helping hand, [look for issues that we need help with here](https://github.com/CommunityToolkit/Windows/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) or head over to [Windows Community Toolkit Labs](https://aka.ms/toolkit/labs/windows) to try or build new features.
-Do you want to contribute? Check out our [Windows Community Toolkit Wiki](https://aka.ms/wct/wiki) page to learn more about contribution and guidelines in general.
+Even just improving our docs and samples for existing components here, or adding new tests can be a huge help!
+
+Check out our [Windows Community Toolkit Wiki](https://aka.ms/wct/wiki) page to learn more about contribution and guidelines in general (to be updated more soon).
## 📦 NuGet Packages
-NuGet is a standard package manager for .NET applications which is built into Visual Studio. When you open solution in Visual Studio, choose the *Tools* menu > *NuGet Package Manager* > *Manage NuGet packages for solution…* Enter one of the package names mentioned in [Windows Community Toolkit NuGet Packages](https://docs.microsoft.com/windows/communitytoolkit/nuget-packages) table to search for it online.
+NuGet is a standard package manager for .NET applications which is built into Visual Studio. When you open solution in Visual Studio, choose the *Tools* menu > *NuGet Package Manager* > *Manage NuGet packages for solution…*
+
+There are now two sets of packages for each component:
+
+- `CommunityToolkit.Uwp.*` for UWP + WinUI 2 or Uno.UI
+- `CommunityToolkit.WinUI.*` for Windows App SDK + WinUI 3 or Uno.WinUI
## 📫 Features
-The [Features list](https://github.com/MicrosoftDocs/WindowsCommunityToolkitDocs/blob/master/docs/toc.md#controls) refers to all the currently available features that can be found in the Windows Community Toolkit. Most features should work with the October 2018 Update (1809) SDK 17763 and above; however, refer to specific documentation on each feature for more information.
+Most features should work with the October 2018 Update (1809) SDK 17763 and above; however, refer to specific documentation on each feature for more information.
## 💠 Principles
diff --git a/components/Animations/samples/Animations.Samples.csproj b/components/Animations/samples/Animations.Samples.csproj
index 549f237c..89fb0d68 100644
--- a/components/Animations/samples/Animations.Samples.csproj
+++ b/components/Animations/samples/Animations.Samples.csproj
@@ -1,10 +1,17 @@
-
+
+
+
Animations
+
+
+
+
+
diff --git a/components/Animations/samples/Animations.md b/components/Animations/samples/Animations.md
index a66f6add..968408ff 100644
--- a/components/Animations/samples/Animations.md
+++ b/components/Animations/samples/Animations.md
@@ -6,15 +6,15 @@ 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
---
-The [`ImplicitAnimationSet`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.ImplicitAnimationSet) type is the equivalent of [`AnimationSet`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.AnimationSet) in the context of implicit [Composition animations](/windows/uwp/composition/composition-animation). It represents a set of implicit animations that can only run on the [Composition layer](/windows/uwp/composition/visual-layer) and that are available in three categories: show, hide, and implicit animations. `ImplicitAnimationSet` restricts the type of contained animations to objects implementing the [`IImplicitTimeline`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.IImplicitTimeline) interface to offer an additional level of build-time safety when constructing animations from XAML. Similar to the other interfaces used for explicit animations this architecture is also extensible in that users can also easily plug in their custom types implementing this interface into an `ImplicitAnimationSet` collection.
+The `ImplicitAnimationSet` type is the equivalent of `AnimationSet` in the context of implicit [Composition animations](https://learn.microsoft.com/windows/uwp/composition/composition-animation). It represents a set of implicit animations that can only run on the [Composition layer](https://learn.microsoft.com/windows/uwp/composition/visual-layer) and that are available in three categories: show, hide, and implicit animations. `ImplicitAnimationSet` restricts the type of contained animations to objects implementing the `IImplicitTimeline` interface to offer an additional level of build-time safety when constructing animations from XAML. Similar to the other interfaces used for explicit animations this architecture is also extensible in that users can also easily plug in their custom types implementing this interface into an `ImplicitAnimationSet` collection.
-> **Platform APIs:** [`ImplicitAnimationSet`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.ImplicitAnimationSet), [`AnimationSet`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.AnimationSet), [`IImplicitTimeline`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.IImplicitTimeline), [`Implicit`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.Implicit)
+> **Platform APIs:** `ImplicitAnimationSet`, `AnimationSet`, `IImplicitTimeline`, `Implicit`
## How it works
diff --git a/components/Animations/samples/ConnectedAnimations.md b/components/Animations/samples/ConnectedAnimations.md
index 47b015aa..7f8b6d20 100644
--- a/components/Animations/samples/ConnectedAnimations.md
+++ b/components/Animations/samples/ConnectedAnimations.md
@@ -6,16 +6,13 @@ 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
---
-
-# Connected Animations XAML Attached Properties
-
-[Connected animations](/windows/uwp/style/connected-animation) let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views.
+[Connected animations](https://learn.microsoft.com/windows/uwp/style/connected-animation) let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views.
The Connected Animations XAML Attached Properties enable connected animations to be defined directly in your XAML code by simply adding a Key to the element that should animate. There are also attached properties to enable coordinated animations and animations in lists and grids.
@@ -27,7 +24,7 @@ The Connected Animations XAML Attached Properties enable connected animations to
-
+
@@ -35,7 +32,7 @@ The Connected Animations XAML Attached Properties enable connected animations to
animations:Connected.ListItemKey="listItem">
-
+
@@ -46,11 +43,11 @@ The Connected Animations XAML Attached Properties enable connected animations to
### Connected.Key
-Registers element with the [ConnectedAnimationsService](/uwp/api/Windows.UI.Xaml.Media.Animation.ConnectedAnimation). For the animation to work, the same key must be registered on two different pages when navigating
+Registers element with the [ConnectedAnimationsService](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Media.Animation.ConnectedAnimation). For the animation to work, the same key must be registered on two different pages when navigating
### Connected.AnchorElement
-To enable [coordinated animations](/windows/uwp/style/connected-animation#coordinated-animation), use the AnchorElement attached property on the element that should appear alongside the connected animation element by specifying the connected animation element
+To enable [coordinated animations](https://learn.microsoft.com/windows/uwp/style/connected-animation#coordinated-animation), use the AnchorElement attached property on the element that should appear alongside the connected animation element by specifying the connected animation element
### Connected.ListItemKey
@@ -92,32 +89,21 @@ Unregisters an element (part of a DataTemplate in a list control) from the Conne
The helper uses the page navigation parameter to decide which list item will be animated during the page navigation. However, in some cases the parameter passed during page navigation is not part of the list. For example, you might be only passing the id of an item as a navigation parameter and not the item itself.
-In those cases, you can use the **SetListDataItemForNextConnectedAnnimation** extension method before page navigation to specify which item should be animated.
+In those cases, you can use the **SetListDataItemForNextConnectedAnimation** extension method before page navigation to specify which item should be animated.
```csharp
// dataItemToAnimate is an object in the ListViewBase.ItemsSource collection
- Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate);
+ Frame.SetListDataItemForNextConnectedAnimation(dataItemToAnimate);
Frame.Navigate(typeof(DetailsPage), dataItemToAnimate.Id);
```
-```vb
- ' dataItemToAnimate is an object in the ListViewBase.ItemsSource collection
- Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate)
- Frame.Navigate(GetType(DetailsPage), dataItemToAnimate.Id)
-```
-
This method is also helpful when navigating back to an item different from the item it was navigated from.
```csharp
- Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate);
+ Frame.SetListDataItemForNextConnectedAnimation(dataItemToAnimate);
Frame.GoBack();
```
-```vb
- Frame.SetListDataItemForNextConnectedAnnimation(dataItemToAnimate)
- Frame.GoBack()
-```
-
## Examples
We can create the above connected animations.
@@ -128,8 +114,7 @@ We need a set a key for the element to be connected with another element in a di
```xaml
-
```
@@ -140,14 +125,13 @@ We need to set the same key for the element to be connected with. Also, You can
```xaml
-
-
- Header
- Lorem ipsum ...
+
+
```
@@ -162,8 +146,8 @@ animations:Connected.ListItemKey="listItem">
-
-
+
+
@@ -179,16 +163,14 @@ In this page, you just need to give the same key.
-
- Lorem ipsum ...
+
+
- Lorem Ipsum ...
+
```
-
diff --git a/components/Animations/samples/ConnectedAnimationsSample.xaml b/components/Animations/samples/ConnectedAnimationsSample.xaml
index 6d2bf0a2..05e861ee 100644
--- a/components/Animations/samples/ConnectedAnimationsSample.xaml
+++ b/components/Animations/samples/ConnectedAnimationsSample.xaml
@@ -6,7 +6,7 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:AnimationsExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:ui="CommunityToolkit.WinUI"
+ xmlns:ui="using:CommunityToolkit.WinUI"
mc:Ignorable="d">
+ Content="{ui:FontIcon Glyph=,
+ FontSize=14}"
+ Visibility="Collapsed" />
+
+
+
AnimationsThis package contains Animations.
@@ -6,6 +8,7 @@
CommunityToolkit.WinUI.AnimationsRnstrue
+ ReadMe.md
@@ -19,7 +22,14 @@
-
+
+
+
+
+
+ True
+ \
+
diff --git a/components/Animations/src/Expressions/ExpressionFunctions.cs b/components/Animations/src/Expressions/ExpressionFunctions.cs
index fb940af1..b0b48182 100644
--- a/components/Animations/src/Expressions/ExpressionFunctions.cs
+++ b/components/Animations/src/Expressions/ExpressionFunctions.cs
@@ -1283,8 +1283,8 @@ public ExpressionNodeInfo(OperationType nodeOperationKind, string operationStrin
{ ExpressionNodeType.ColorHsl, new ExpressionNodeInfo(OperationType.Function, "colorhsl") },
{ ExpressionNodeType.ColorRgb, new ExpressionNodeInfo(OperationType.Function, "colorrgb") },
{ ExpressionNodeType.ColorLerp, new ExpressionNodeInfo(OperationType.Function, "colorlerp") },
- { ExpressionNodeType.ColorLerpHsl, new ExpressionNodeInfo(OperationType.Function, "colorhsllerp") },
- { ExpressionNodeType.ColorLerpRgb, new ExpressionNodeInfo(OperationType.Function, "colorrgblerp") },
+ { ExpressionNodeType.ColorLerpHsl, new ExpressionNodeInfo(OperationType.Function, "colorlerphsl") },
+ { ExpressionNodeType.ColorLerpRgb, new ExpressionNodeInfo(OperationType.Function, "colorlerprgb") },
{ ExpressionNodeType.Concatenate, new ExpressionNodeInfo(OperationType.Function, "concatenate") },
{ ExpressionNodeType.Distance, new ExpressionNodeInfo(OperationType.Function, "distance") },
{ ExpressionNodeType.DistanceSquared, new ExpressionNodeInfo(OperationType.Function, "distancesquared") },
diff --git a/components/Animations/src/Implicit.cs b/components/Animations/src/Implicit.cs
index 692daabb..8e4fc90d 100644
--- a/components/Animations/src/Implicit.cs
+++ b/components/Animations/src/Implicit.cs
@@ -129,6 +129,12 @@ public static void SetAnimations(UIElement element, ImplicitAnimationSet value)
/// The instance for the current event.
private static void OnShowAnimationsPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
+ // See https://github.com/CommunityToolkit/Windows/issues/319
+ #if HAS_UNO
+ #pragma warning disable CS0162
+ return;
+ #endif
+
static void OnAnimationsChanged(object sender, EventArgs e)
{
var collection = (ImplicitAnimationSet)sender;
@@ -160,6 +166,10 @@ static void OnAnimationsChanged(object sender, EventArgs e)
ElementCompositionPreview.SetImplicitShowAnimation(element, null);
}
}
+
+ #if HAS_UNO
+ #pragma warning restore CS0162
+ #endif
}
///
@@ -169,6 +179,12 @@ static void OnAnimationsChanged(object sender, EventArgs e)
/// The instance for the current event.
private static void OnHideAnimationsPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
+ // See https://github.com/CommunityToolkit/Windows/issues/319
+ #if HAS_UNO
+ #pragma warning disable CS0162
+ return;
+ #endif
+
static void OnAnimationsChanged(object sender, EventArgs e)
{
var collection = (ImplicitAnimationSet)sender;
@@ -200,6 +216,10 @@ static void OnAnimationsChanged(object sender, EventArgs e)
ElementCompositionPreview.SetImplicitHideAnimation(element, null);
}
}
+
+ #if HAS_UNO
+ #pragma warning restore CS0162
+ #endif
}
///
@@ -209,6 +229,12 @@ static void OnAnimationsChanged(object sender, EventArgs e)
/// The instance for the current event.
private static void OnAnimationsPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
+ // See https://github.com/CommunityToolkit/Windows/issues/319
+ #if HAS_UNO
+ #pragma warning disable CS0162
+ return;
+ #endif
+
static void OnAnimationsChanged(object sender, EventArgs e)
{
var collection = (ImplicitAnimationSet)sender;
@@ -240,5 +266,9 @@ static void OnAnimationsChanged(object sender, EventArgs e)
ElementCompositionPreview.GetElementVisual(element).ImplicitAnimations = null;
}
}
+
+ #if HAS_UNO
+ #pragma warning restore CS0162
+ #endif
}
}
diff --git a/components/Animations/src/ReadMe.md b/components/Animations/src/ReadMe.md
new file mode 100644
index 00000000..9d9c6e56
--- /dev/null
+++ b/components/Animations/src/ReadMe.md
@@ -0,0 +1,31 @@
+
+# Windows Community Toolkit - Animations
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following in the `CommunityToolkit.WinUI.Animations` namespace:
+
+- AnimationBuilder
+- AnimationSet
+- Connected Animations Helpers
+- Expressions
+- Implicit Animations
+- ScrollViewerExtensions
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Animations` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Animations` package.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/Animations/tests/Animations.Tests.projitems b/components/Animations/tests/Animations.Tests.projitems
index 32acc124..1fb5e1f4 100644
--- a/components/Animations/tests/Animations.Tests.projitems
+++ b/components/Animations/tests/Animations.Tests.projitems
@@ -10,5 +10,6 @@
+
\ No newline at end of file
diff --git a/components/Animations/tests/Test_AnimationBuilderStart.cs b/components/Animations/tests/Test_AnimationBuilderStart.cs
index a25dfa6e..7cea9d73 100644
--- a/components/Animations/tests/Test_AnimationBuilderStart.cs
+++ b/components/Animations/tests/Test_AnimationBuilderStart.cs
@@ -9,7 +9,7 @@
namespace AnimationsExperiment.Tests;
[TestClass]
-[TestCategory("Test_AnimationBuilderStart")]
+[TestCategory(nameof(Test_AnimationBuilderStart))]
public class Test_AnimationBuilderStart : VisualUITestBase
{
[TestMethod]
diff --git a/components/Animations/tests/Test_ExpressionFunctions.cs b/components/Animations/tests/Test_ExpressionFunctions.cs
new file mode 100644
index 00000000..d2856b34
--- /dev/null
+++ b/components/Animations/tests/Test_ExpressionFunctions.cs
@@ -0,0 +1,59 @@
+// 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.
+
+#if WINUI2
+using Windows.UI.Composition;
+using Windows.UI.Xaml.Hosting;
+#elif WINUI3
+using Microsoft.UI.Composition;
+using Microsoft.UI.Xaml.Hosting;
+#endif
+
+using System.Numerics;
+using CommunityToolkit.Tests;
+using CommunityToolkit.Tooling.TestGen;
+using CommunityToolkit.WinUI.Animations.Expressions;
+
+namespace AnimationsExperiment.Tests;
+
+[TestClass]
+[TestCategory(nameof(Test_ExpressionFunctions))]
+public partial class Test_ExpressionFunctions : VisualUITestBase
+{
+ [UIThreadTestMethod]
+ public void ColorLerpRgb(Grid rootGrid)
+ {
+ // See https://github.com/CommunityToolkit/Windows/issues/303
+ var compositor = ElementCompositionPreview.GetElementVisual(rootGrid).Compositor;
+ var brush = compositor.CreateColorBrush();
+ var temp = ExpressionFunctions.ColorRgb(255f, 255f, 0f, 0f);
+ var color = ExpressionFunctions.ColorLerpRgb(temp, temp, 0.5f);
+
+ brush.StartAnimation("Color", color);
+
+ var visual = compositor.CreateSpriteVisual();
+ visual.Brush = brush;
+ visual.RelativeSizeAdjustment = Vector2.One;
+
+ ElementCompositionPreview.SetElementChildVisual(rootGrid, visual);
+ }
+
+ [UIThreadTestMethod]
+ public void ColorLerpHsl(Grid rootGrid)
+ {
+ // See https://github.com/CommunityToolkit/Windows/issues/303
+ var compositor = ElementCompositionPreview.GetElementVisual(rootGrid).Compositor;
+ var brush = compositor.CreateColorBrush();
+ var temp = ExpressionFunctions.ColorHsl(255f, 255f, 0f);
+ var color = ExpressionFunctions.ColorLerpHsl(temp, temp, 0.5f);
+
+ brush.StartAnimation("Color", color);
+
+ var visual = compositor.CreateSpriteVisual();
+ visual.Brush = brush;
+ visual.RelativeSizeAdjustment = Vector2.One;
+
+ ElementCompositionPreview.SetElementChildVisual(rootGrid, visual);
+ }
+}
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..6b91520e 100644
--- a/components/Behaviors/samples/Behaviors.Animations.md
+++ b/components/Behaviors/samples/Behaviors.Animations.md
@@ -5,16 +5,16 @@ 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
---
-The [`AnimationSet`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.AnimationSet) type represents an animation schedule, effectively representing an [AnimationBuilder](/dotnet/api/microsoft.toolkit.uwp.ui.animations.AnimationBuilder) instance via XAML code. It can contain any number of animations or activities, exposes methods to start and stop an animation, and events to be notified when an animation has started or is completed. Like `AnimationBuilder`, `AnimationSet` instances can also be shared (e.g. in a [`ResourceDictionary`](/windows/uwp/design/controls-and-patterns/resourcedictionary-and-xaml-resource-references)) and then be used to start animation schedules on multiple UI elements. It can also be directly attached to a parent UI element, via the [`Explicit.Animations`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.Explicit) attached property.
+The `AnimationSet` type represents an animation schedule, effectively representing an `AnimationBuilder` instance via XAML code. It can contain any number of animations or activities, exposes methods to start and stop an animation, and events to be notified when an animation has started or is completed. Like `AnimationBuilder`, `AnimationSet` instances can also be shared (e.g. in a [`ResourceDictionary`](https://learn.microsoft.com/windows/uwp/design/controls-and-patterns/resourcedictionary-and-xaml-resource-references)) and then be used to start animation schedules on multiple UI elements. It can also be directly attached to a parent UI element, via the `Explicit.Animations` attached property.
-> **Platform APIs:** [`AnimationSet`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.AnimationSet), [AnimationBuilder](/dotnet/api/microsoft.toolkit.uwp.ui.animations.AnimationBuilder), [`Explicit`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.Explicit), [`ITimeline`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.ITimeline), [`IActivity`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.IActivity), [`AnimationScope`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.AnimationScope), [`AnimationStartedTriggerBehavior`](/dotnet/api/microsoft.toolkit.uwp.ui.behaviors.AnimationStartedTriggerBehavior), [`AnimationCompletedTriggerBehavior`](/dotnet/api/microsoft.toolkit.uwp.ui.behaviors.AnimationCompletedTriggerBehavior), [`StartAnimationAction`](/dotnet/api/microsoft.toolkit.uwp.ui.behaviors.StartAnimationAction), [`StopAnimationAction`](/dotnet/api/microsoft.toolkit.uwp.ui.behaviors.StopAnimationAction)
+> **Platform APIs:** `AnimationSet`, `AnimationBuilder`, `Explicit`, `ITimeline`, `IActivity`, `AnimationScope`, `AnimationStartedTriggerBehavior`, `AnimationCompletedTriggerBehavior`, `StartAnimationAction`, `StopAnimationAction`
## How it works
@@ -23,9 +23,9 @@ Each set can contain any number of animation scopes and individual nodes, which
- **Animation types** are a mapping in XAML for the various APIs exposed by the `AnimationBuilder` class. They are available as both "default" animations that are ready to use and "custom" animations that can be fully configured. Each animation type also supports using keyframes in addition to just defining the starting and final values.
- **Activities** on the other hand are a way to interleave an animation schedule with all sorts of custom logic, such as triggering other animations or running arbitrary code (eg. to update a visual state while an animation is running).
-These two types of animation nodes implement several interfaces (such as [`ITimeline`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.ITimeline) and [`IActivity`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.IActivity)) which make this system extremely customizable and extensible for users as well for their own scenarios.
+These two types of animation nodes implement several interfaces (such as `ITimeline` and `IActivity`) which make this system extremely customizable and extensible for users as well for their own scenarios.
-Here is how a simple animation can be declared in XAML. In this case we are using `x:Name` so that we can reference it in code behind to start it when the button is clicked. The animation is also directly attached to the [`Button`](/windows/uwp/design/controls-and-patterns/buttons), so we can start it directly by calling the `Start()` method, without the need to specify the target element to animate.
+Here is how a simple animation can be declared in XAML. In this case we are using `x:Name` so that we can reference it in code behind to start it when the button is clicked. The animation is also directly attached to the [`Button`](https://learn.microsoft.com/windows/uwp/design/controls-and-patterns/buttons), so we can start it directly by calling the `Start()` method, without the need to specify the target element to animate.
```xaml
@@ -39,7 +39,7 @@ Here is how a simple animation can be declared in XAML. In this case we are usin
```
-By default, animations target the [Composition layer](/windows/uwp/composition/visual-layer) as it provides the best performance possible. It is also possible to explicitly target the XAML layer too though, which can enable things such as animating the color of a brush used to display some text in a `Button`. Here is an example where we use this functionality, together with explicit keyframes to have more fine-grained control over the animation to run:
+By default, animations target the [Composition layer](https://learn.microsoft.com/windows/uwp/composition/visual-layer) as it provides the best performance possible. It is also possible to explicitly target the XAML layer too though, which can enable things such as animating the color of a brush used to display some text in a `Button`. Here is an example where we use this functionality, together with explicit keyframes to have more fine-grained control over the animation to run:
```xaml
@@ -60,7 +60,7 @@ By default, animations target the [Composition layer](/windows/uwp/composition/v
```
-Keyframes (both when declared in C# and in XAML) can also use an [expression animation](/uwp/api/windows.ui.composition.expressionanimation) when they are being used in an animation targeting the Composition layer. This provides additional control over the animation values and allows consumers to create dynamic animations that can adapt to the current state of the target element. Here is an example:
+Keyframes (both when declared in C# and in XAML) can also use an [expression animation](https://learn.microsoft.com/uwp/api/windows.ui.composition.expressionanimation) when they are being used in an animation targeting the Composition layer. This provides additional control over the animation values and allows consumers to create dynamic animations that can adapt to the current state of the target element. Here is an example:
```xaml
@@ -80,7 +80,7 @@ Keyframes (both when declared in C# and in XAML) can also use an [expression ani
Another feature of the `AnimationSet` type is the `IsSequential` property which configures the way top-level elements (animations, activities, and scopes) within the animation are handled.
-When this property is set to `true` each top-level node will be executed sequentially and only move to the following one when the previous completes (and the animation has not been cancelled). This can be used in conjunction with the various `IActivity` objects to create custom animation schedules that combine multiple animations running on different UI elements, with all the synchronization still done entirely from XAML. It is also helpful when combined with an [`AnimationScope`](/dotnet/api/microsoft.toolkit.uwp.ui.animations.AnimationScope) in order to more easily parse the timeline of events within an animation when creating and modifying them.
+When this property is set to `true` each top-level node will be executed sequentially and only move to the following one when the previous completes (and the animation has not been cancelled). This can be used in conjunction with the various `IActivity` objects to create custom animation schedules that combine multiple animations running on different UI elements, with all the synchronization still done entirely from XAML. It is also helpful when combined with an `AnimationScope` in order to more easily parse the timeline of events within an animation when creating and modifying them.
Here is an example that showcases both the sequential mode for animations as well as the ability to combine animations and activities in the same schedule, and how different animations (even on different UI elements) can be combined and interleaved by using the available APIs:
@@ -125,11 +125,11 @@ 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.
-- [`StopAnimationAction`](/dotnet/api/microsoft.toolkit.uwp.ui.behaviors.StopAnimationAction): an `IAction` object that can be used within behaviors to easily stop a target animation, either with an attached UI element or with an explicit target to animate.
+- `AnimationStartedTriggerBehavior` and `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`: 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.
+- `StopAnimationAction`: an `IAction` object that can be used within behaviors to easily stop a target animation, either with an attached UI element or with an explicit target to animate.
Here is an example that shows how these new APIs can be used together:
@@ -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` or from an inline graph attached to a UI element through the `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/Behaviors/samples/Behaviors.Samples.csproj b/components/Behaviors/samples/Behaviors.Samples.csproj
index 77030400..54c8f0b2 100644
--- a/components/Behaviors/samples/Behaviors.Samples.csproj
+++ b/components/Behaviors/samples/Behaviors.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
Behaviors
diff --git a/components/Behaviors/samples/Behaviors.md b/components/Behaviors/samples/Behaviors.md
index f410cb55..6e507a66 100644
--- a/components/Behaviors/samples/Behaviors.md
+++ b/components/Behaviors/samples/Behaviors.md
@@ -29,6 +29,7 @@ The AutoSelectBehavior automatically selects the entire content of its associate
> [!Sample AutoSelectBehaviorSample]
## ViewportBehavior
+
This behavior allows you to listen an element enter or exit the ScrollViewer viewport.
> [!Sample ViewportBehaviorSample]
@@ -44,6 +45,7 @@ Empty lists do not receive focus:
> [!Sample FocusBehaviorListSample]
## NavigateToUriAction
-This behavior allows you to define a Uri in XAML, similiar to a `Hyperlink` or `HyperlinkButton`. This allows you to use a `Button` and still define the Uri in XAML without wiring up the `Click` event in code-behind, or restyling a `HyperlinkButton`.
+
+This behavior allows you to define a Uri in XAML, similar to a `Hyperlink` or `HyperlinkButton`. This allows you to use a `Button` and still define the Uri in XAML without wiring up the `Click` event in code-behind, or restyling a `HyperlinkButton`.
> [!Sample NavigateToUriActionSample]
diff --git a/components/Behaviors/samples/Headers/HeaderBehaviors.md b/components/Behaviors/samples/HeaderBehaviors.md
similarity index 100%
rename from components/Behaviors/samples/Headers/HeaderBehaviors.md
rename to components/Behaviors/samples/HeaderBehaviors.md
diff --git a/components/Behaviors/samples/Headers/FadeHeaderBehaviorSample.xaml b/components/Behaviors/samples/Headers/FadeHeaderBehaviorSample.xaml
index af2f4ae8..3017c101 100644
--- a/components/Behaviors/samples/Headers/FadeHeaderBehaviorSample.xaml
+++ b/components/Behaviors/samples/Headers/FadeHeaderBehaviorSample.xaml
@@ -1,4 +1,4 @@
-
/// An empty page that can be used on its own or navigated to within a Frame.
diff --git a/components/Behaviors/samples/Headers/QuickReturnHeaderBehaviorSample.xaml b/components/Behaviors/samples/Headers/QuickReturnHeaderBehaviorSample.xaml
index 39f95e6f..36c66603 100644
--- a/components/Behaviors/samples/Headers/QuickReturnHeaderBehaviorSample.xaml
+++ b/components/Behaviors/samples/Headers/QuickReturnHeaderBehaviorSample.xaml
@@ -1,4 +1,4 @@
-
/// An empty page that can be used on its own or navigated to within a Frame.
diff --git a/components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml b/components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml
index 5528ff53..86104a96 100644
--- a/components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml
+++ b/components/Behaviors/samples/Headers/QuickReturnScrollViewerSample.xaml
@@ -1,4 +1,4 @@
-
/// An empty page that can be used on its own or navigated to within a Frame.
diff --git a/components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml b/components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml
index 61438908..160a6125 100644
--- a/components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml
+++ b/components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml
@@ -1,11 +1,11 @@
-
diff --git a/components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml.cs b/components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml.cs
index 49c1ba53..32a33631 100644
--- a/components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml.cs
+++ b/components/Behaviors/samples/Headers/StickyHeaderBehaviorSample.xaml.cs
@@ -4,7 +4,7 @@
using CommunityToolkit.WinUI.Behaviors;
-namespace BehaviorsExperiment.Samples;
+namespace BehaviorsExperiment.Samples.Headers;
///
/// An empty page that can be used on its own or navigated to within a Frame.
diff --git a/components/Behaviors/samples/Headers/StickyHeaderItemsControlSample.xaml b/components/Behaviors/samples/Headers/StickyHeaderItemsControlSample.xaml
index c594d072..9f5fcf93 100644
--- a/components/Behaviors/samples/Headers/StickyHeaderItemsControlSample.xaml
+++ b/components/Behaviors/samples/Headers/StickyHeaderItemsControlSample.xaml
@@ -1,4 +1,4 @@
-
/// An empty page that can be used on its own or navigated to within a Frame.
diff --git a/components/Behaviors/samples/StackedNotificationsBehaviorCustomSample.xaml b/components/Behaviors/samples/Notifications/StackedNotificationsBehaviorCustomSample.xaml
similarity index 92%
rename from components/Behaviors/samples/StackedNotificationsBehaviorCustomSample.xaml
rename to components/Behaviors/samples/Notifications/StackedNotificationsBehaviorCustomSample.xaml
index 1c57592f..3f93215e 100644
--- a/components/Behaviors/samples/StackedNotificationsBehaviorCustomSample.xaml
+++ b/components/Behaviors/samples/Notifications/StackedNotificationsBehaviorCustomSample.xaml
@@ -1,5 +1,5 @@
-
-
+
+
+
+
BehaviorsThis package contains Behaviors.CommunityToolkit.WinUI.BehaviorsRns
+ ReadMe.md
-
-
+
+ True
+ \
+
+
+
+
+
+
diff --git a/components/Behaviors/src/ReadMe.md b/components/Behaviors/src/ReadMe.md
new file mode 100644
index 00000000..7a6176b1
--- /dev/null
+++ b/components/Behaviors/src/ReadMe.md
@@ -0,0 +1,39 @@
+
+# Windows Community Toolkit - Behaviors
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following in the `CommunityToolkit.WinUI.Behaviors` namespace:
+
+- AnimationCompletedTriggerBehavior
+- AnimationStartedTriggerBehavior
+- AutoSelectBehavior
+- FadeHeaderBehavior
+- FocusBehavior
+- InvokeActionsActivity
+- KeyDownTriggerBehavior
+- NavigateToUriAction
+- QuickReturnHeaderBehavior
+- StartAnimationAction
+- StackedNotificationBehavior
+- StopAnimationAction
+- StickyHeaderBehavior
+- ViewportBehavior
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Behaviors` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Behaviors` package.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/Behaviors/tests/Behaviors.Tests.projitems b/components/Behaviors/tests/Behaviors.Tests.projitems
index c21c6464..f1188398 100644
--- a/components/Behaviors/tests/Behaviors.Tests.projitems
+++ b/components/Behaviors/tests/Behaviors.Tests.projitems
@@ -9,20 +9,12 @@
BehaviorsExperiment.Tests
-
-
- ExampleBehaviorsTestPage.xaml
- StackedNotificationsBehaviorsTestPage.xaml
-
- Designer
- MSBuild:Compile
- DesignerMSBuild:Compile
diff --git a/components/Behaviors/tests/ExampleBehaviorsTestClass.cs b/components/Behaviors/tests/ExampleBehaviorsTestClass.cs
deleted file mode 100644
index c22c3397..00000000
--- a/components/Behaviors/tests/ExampleBehaviorsTestClass.cs
+++ /dev/null
@@ -1,41 +0,0 @@
-// 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.
-
-using CommunityToolkit.Tests;
-using CommunityToolkit.Tests.Internal;
-using CommunityToolkit.Tooling.TestGen;
-
-namespace BehaviorsExperiment.Tests;
-
-[TestClass]
-public partial class ExampleBehaviorsTestClass : VisualUITestBase
-{
- // The UIThreadTestMethod can also easily grab a XAML Page for us by passing its type as a parameter.
- // This lets us actually test a control as it would behave within an actual application.
- // The page will already be loaded by the time your test is called.
- [UIThreadTestMethod]
- public void SimpleUIExamplePageTest(ExampleBehaviorsTestPage page)
- {
- // You can use the Toolkit Visual Tree helpers here to find the component by type or name:
- /*var component = page.FindDescendant();
-
- Assert.IsNotNull(component);
-
- var componentByName = page.FindDescendant("BehaviorsControl");
-
- Assert.IsNotNull(componentByName);*/
- }
-
- // You can still do async work with a UIThreadTestMethod as well.
- [UIThreadTestMethod]
- public async Task SimpleAsyncUIExamplePageTest(ExampleBehaviorsTestPage page)
- {
- // This helper can be used to wait for a rendering pass to complete.
- await CompositionTargetHelper.ExecuteAfterCompositionRenderingAsync(() => { });
-
- /*var component = page.FindDescendant();
-
- Assert.IsNotNull(component);*/
- }
-}
diff --git a/components/CameraPreview/samples/CameraPreview.Samples.csproj b/components/CameraPreview/samples/CameraPreview.Samples.csproj
index a59ac957..1cb955f0 100644
--- a/components/CameraPreview/samples/CameraPreview.Samples.csproj
+++ b/components/CameraPreview/samples/CameraPreview.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
CameraPreview
diff --git a/components/CameraPreview/samples/CameraPreview.md b/components/CameraPreview/samples/CameraPreview.md
index 9b863b11..9475d19b 100644
--- a/components/CameraPreview/samples/CameraPreview.md
+++ b/components/CameraPreview/samples/CameraPreview.md
@@ -6,14 +6,14 @@ keywords: CameraPreview, Control, skommireddi
dev_langs:
- csharp
category: Controls
-subcategory: Layout
+subcategory: Media
discussion-id: 0
issue-id: 0
icon: Assets/CameraPreview.png
---
> [!IMPORTANT]
-> Make sure you have the [webcam capability](/windows/uwp/packaging/app-capability-declarations#device-capabilities) enabled for your app to access the device's camera.
+> Make sure you have the [webcam capability](https://learn.microsoft.com/windows/uwp/packaging/app-capability-declarations#device-capabilities) enabled for your app to access the device's camera.
> [!Sample CameraPreviewSample]
@@ -45,7 +45,6 @@ private void CameraPreviewControl_PreviewFailed(object sender, PreviewFailedEven
> [!IMPORTANT]
> As a developer, you will need to make sure the CameraHelper resources used by the control are cleaned up when appropriate. See [CameraHelper documentation](../helpers/CameraHelper.md) for more details
-
## Examples
Demonstrates using the camera control and camera helper to preview video from a specific media frame source group.
diff --git a/components/CameraPreview/samples/CameraPreviewSample.xaml b/components/CameraPreview/samples/CameraPreviewSample.xaml
index 55dc1101..09c3bac8 100644
--- a/components/CameraPreview/samples/CameraPreviewSample.xaml
+++ b/components/CameraPreview/samples/CameraPreviewSample.xaml
@@ -1,4 +1,4 @@
-
+
+ Content="Capture"
+ Style="{StaticResource AccentButtonStyle}" />
diff --git a/components/CameraPreview/src/CommunityToolkit.WinUI.Controls.CameraPreview.csproj b/components/CameraPreview/src/CommunityToolkit.WinUI.Controls.CameraPreview.csproj
index 3ba4bffa..540d68e9 100644
--- a/components/CameraPreview/src/CommunityToolkit.WinUI.Controls.CameraPreview.csproj
+++ b/components/CameraPreview/src/CommunityToolkit.WinUI.Controls.CameraPreview.csproj
@@ -1,19 +1,29 @@
-
+
+
+
CameraPreviewThis package contains CameraPreview.CommunityToolkit.WinUI.Controls.CameraPreviewRns
+ ReadMe.md
-
+
+
+
+ True
+ \
+
+
+
$(PackageIdPrefix).$(PackageIdVariant).Controls.$(ToolkitComponentName)
diff --git a/components/CameraPreview/src/ReadMe.md b/components/CameraPreview/src/ReadMe.md
new file mode 100644
index 00000000..edad1eeb
--- /dev/null
+++ b/components/CameraPreview/src/ReadMe.md
@@ -0,0 +1,38 @@
+
+# Windows Community Toolkit - CameraPreview
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following controls in the `CommunityToolkit.WinUI.Controls` namespace:
+
+- CameraPreview
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Controls.CameraPreview` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Controls.CameraPreview` package.
+
+## WinUI Resources (UWP)
+
+For UWP projects, the WinUI 2 reference requires you include the WinUI XAML Resources in your App.xaml file:
+
+```xml
+
+
+
+```
+
+See [Getting Started in WinUI 2](https://learn.microsoft.com/windows/apps/winui/winui2/getting-started) for more information.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/Collections/samples/AdvancedCollectionView.md b/components/Collections/samples/AdvancedCollectionView.md
index dd83aae1..c2c37bd1 100644
--- a/components/Collections/samples/AdvancedCollectionView.md
+++ b/components/Collections/samples/AdvancedCollectionView.md
@@ -2,7 +2,7 @@
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
+keywords: AdvancedCollectionView, data, sorting, filtering, Collections
dev_langs:
- csharp
category: Helpers
@@ -16,10 +16,10 @@ icon: Assets/AdvancedCollectionView.png
## 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 viewmodel instead of having a public [IEnumerable](https://learn.microsoft.com/dotnet/core/api/system.collections.generic.ienumerable-1) of some sort to be bound to an eg. [Listview](https://learn.microsoft.com/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
+* filtering your list using a [Predicate](https://learn.microsoft.com/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`
@@ -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.Collections;
// Grab a sample type
public class Person
@@ -81,7 +81,7 @@ YourListView.ItemsSource = acv;
_What source can I use?_
-It's not necessary to use an eg. [ObservableCollection](/dotnet/core/api/system.collections.objectmodel.observablecollection-1) to use the AdvancedCollectionView. It works as expected even when providing a simple [List](/dotnet/core/api/system.collections.generic.list-1) in the constructor.
+It's not necessary to use an eg. [ObservableCollection](https://learn.microsoft.com/dotnet/core/api/system.collections.objectmodel.observablecollection-1) to use the AdvancedCollectionView. It works as expected even when providing a simple [List](https://learn.microsoft.com/dotnet/core/api/system.collections.generic.list-1) in the constructor.
_Any performance guidelines?_
diff --git a/components/Collections/samples/AdvancedCollectionViewSample.xaml b/components/Collections/samples/AdvancedCollectionViewSample.xaml
index 52800777..80801029 100644
--- a/components/Collections/samples/AdvancedCollectionViewSample.xaml
+++ b/components/Collections/samples/AdvancedCollectionViewSample.xaml
@@ -2,7 +2,6 @@
+
+
+
Collections
diff --git a/components/Collections/samples/IncrementalLoadingCollection.md b/components/Collections/samples/IncrementalLoadingCollection.md
index ba8d42d2..a7243639 100644
--- a/components/Collections/samples/IncrementalLoadingCollection.md
+++ b/components/Collections/samples/IncrementalLoadingCollection.md
@@ -2,7 +2,7 @@
title: IncrementalLoadingCollection
author: nmetulev
description: The IncrementalLoadingCollection helpers greatly simplify the definition and usage of collections whose items can be loaded incrementally only when needed by the view (such as a ScrollViewer).
-keywords: IncrementalLoadingCollection, Control, Data, Incremental, Loading
+keywords: IncrementalLoadingCollection, Control, Data, Incremental, Loading, Collections
dev_langs:
- csharp
category: Helpers
@@ -14,9 +14,9 @@ icon: Assets/IncrementalLoadingCollection.png
> [!Sample IncrementalLoadingCollectionSample]
-[IIncrementalSource](/dotnet/api/microsoft.toolkit.collections.iincrementalsource-1) - An interface that represents a data source whose items can be loaded incrementally.
+`IIncrementalSource` - An interface that represents a data source whose items can be loaded incrementally.
-[IncrementalLoadingCollection](/dotnet/api/microsoft.toolkit.uwp.incrementalloadingcollection-2) - An extension of [ObservableCollection](/dotnet/api/system.collections.objectmodel.observablecollection-1) such that its items are loaded only when needed.
+`IncrementalLoadingCollection` - An extension of [ObservableCollection](https://learn.microsoft.com/dotnet/api/system.collections.objectmodel.observablecollection-1) such that its items are loaded only when needed.
## Example
@@ -24,7 +24,7 @@ icon: Assets/IncrementalLoadingCollection.png
```csharp
// Be sure to include the using at the top of the file:
-//using CommunityToolkit.WinUI;
+//using CommunityToolkit.WinUI.Collections;
public class Person
{
@@ -63,7 +63,7 @@ public class PeopleSource : IIncrementalSource
The *GetPagedItemsAsync* method is invoked every time the view need to show more items.
-`IncrementalLoadingCollection` can then be bound to a [ListView](/uwp/api/Windows.UI.Xaml.Controls.ListView) or a [GridView-like](/uwp/api/Windows.UI.Xaml.Controls.GridView) control:
+`IncrementalLoadingCollection` can then be bound to a [ListView](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.ListView) or a [GridView-like](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.GridView) control:
```csharp
var collection = new IncrementalLoadingCollection();
diff --git a/components/Collections/samples/IncrementalLoadingCollectionSample.xaml b/components/Collections/samples/IncrementalLoadingCollectionSample.xaml
index d18700cd..2557ed51 100644
--- a/components/Collections/samples/IncrementalLoadingCollectionSample.xaml
+++ b/components/Collections/samples/IncrementalLoadingCollectionSample.xaml
@@ -2,7 +2,6 @@
/// A collection view implementation that supports filtering, grouping, sorting and incremental loading
diff --git a/components/Collections/src/AdvancedCollectionView/AdvancedCollectionView.Events.cs b/components/Collections/src/AdvancedCollectionView/AdvancedCollectionView.Events.cs
index e6c36111..87f35529 100644
--- a/components/Collections/src/AdvancedCollectionView/AdvancedCollectionView.Events.cs
+++ b/components/Collections/src/AdvancedCollectionView/AdvancedCollectionView.Events.cs
@@ -2,7 +2,7 @@
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
-namespace CommunityToolkit.WinUI;
+namespace CommunityToolkit.WinUI.Collections;
///
/// A collection view implementation that supports filtering, grouping, sorting and incremental loading
diff --git a/components/Collections/src/AdvancedCollectionView/AdvancedCollectionView.cs b/components/Collections/src/AdvancedCollectionView/AdvancedCollectionView.cs
index 61287617..281b25ce 100644
--- a/components/Collections/src/AdvancedCollectionView/AdvancedCollectionView.cs
+++ b/components/Collections/src/AdvancedCollectionView/AdvancedCollectionView.cs
@@ -8,7 +8,7 @@
using System.Runtime.CompilerServices;
using NotifyCollectionChangedAction = global::System.Collections.Specialized.NotifyCollectionChangedAction;
-namespace CommunityToolkit.WinUI;
+namespace CommunityToolkit.WinUI.Collections;
///
/// A collection view implementation that supports filtering, sorting and incremental loading
diff --git a/components/Collections/src/AdvancedCollectionView/IAdvancedCollectionView.cs b/components/Collections/src/AdvancedCollectionView/IAdvancedCollectionView.cs
index 35050b27..1b42069a 100644
--- a/components/Collections/src/AdvancedCollectionView/IAdvancedCollectionView.cs
+++ b/components/Collections/src/AdvancedCollectionView/IAdvancedCollectionView.cs
@@ -4,7 +4,7 @@
using System.Collections;
-namespace CommunityToolkit.WinUI;
+namespace CommunityToolkit.WinUI.Collections;
///
/// Extended ICollectionView with filtering and sorting
diff --git a/components/Collections/src/AdvancedCollectionView/SortDescription.cs b/components/Collections/src/AdvancedCollectionView/SortDescription.cs
index dc1dd167..abc6b83a 100644
--- a/components/Collections/src/AdvancedCollectionView/SortDescription.cs
+++ b/components/Collections/src/AdvancedCollectionView/SortDescription.cs
@@ -4,7 +4,7 @@
using System.Collections;
-namespace CommunityToolkit.WinUI;
+namespace CommunityToolkit.WinUI.Collections;
///
/// Sort description
diff --git a/components/Collections/src/AdvancedCollectionView/SortDirection.cs b/components/Collections/src/AdvancedCollectionView/SortDirection.cs
index 38a9d8f0..3ec6a450 100644
--- a/components/Collections/src/AdvancedCollectionView/SortDirection.cs
+++ b/components/Collections/src/AdvancedCollectionView/SortDirection.cs
@@ -2,7 +2,7 @@
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
-namespace CommunityToolkit.WinUI;
+namespace CommunityToolkit.WinUI.Collections;
///
/// Sort direction enum
diff --git a/components/Collections/src/AdvancedCollectionView/VectorChangedEventArgs.cs b/components/Collections/src/AdvancedCollectionView/VectorChangedEventArgs.cs
index 93136bd1..0e5be060 100644
--- a/components/Collections/src/AdvancedCollectionView/VectorChangedEventArgs.cs
+++ b/components/Collections/src/AdvancedCollectionView/VectorChangedEventArgs.cs
@@ -2,7 +2,7 @@
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
-namespace CommunityToolkit.WinUI;
+namespace CommunityToolkit.WinUI.Collections;
///
/// Vector changed EventArgs
diff --git a/components/Collections/src/CommunityToolkit.WinUI.Collections.csproj b/components/Collections/src/CommunityToolkit.WinUI.Collections.csproj
index 46ae012f..68138678 100644
--- a/components/Collections/src/CommunityToolkit.WinUI.Collections.csproj
+++ b/components/Collections/src/CommunityToolkit.WinUI.Collections.csproj
@@ -1,14 +1,24 @@
-
+
+
+
CollectionsThis package contains the AdvancedCollectionView and IncrementalLoadingCollection.CommunityToolkit.WinUI.CollectionsRns
+ ReadMe.md
-
+
+
+
+
+
+ True
+ \
+
diff --git a/components/Collections/src/IncrementalLoadingCollection/IIncrementalSource.cs b/components/Collections/src/IncrementalLoadingCollection/IIncrementalSource.cs
index 1a8ac411..dadf1aff 100644
--- a/components/Collections/src/IncrementalLoadingCollection/IIncrementalSource.cs
+++ b/components/Collections/src/IncrementalLoadingCollection/IIncrementalSource.cs
@@ -2,7 +2,7 @@
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
-namespace CommunityToolkit.WinUI;
+namespace CommunityToolkit.WinUI.Collections;
///
/// This interface represents a data source whose items can be loaded incrementally.
diff --git a/components/Collections/src/IncrementalLoadingCollection/IncrementalLoadingCollection.cs b/components/Collections/src/IncrementalLoadingCollection/IncrementalLoadingCollection.cs
index f87909b9..41cd4ab1 100644
--- a/components/Collections/src/IncrementalLoadingCollection/IncrementalLoadingCollection.cs
+++ b/components/Collections/src/IncrementalLoadingCollection/IncrementalLoadingCollection.cs
@@ -2,7 +2,7 @@
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
-namespace CommunityToolkit.WinUI;
+namespace CommunityToolkit.WinUI.Collections;
///
/// This class represents an whose items can be loaded incrementally.
diff --git a/components/Collections/src/ReadMe.md b/components/Collections/src/ReadMe.md
new file mode 100644
index 00000000..095d112d
--- /dev/null
+++ b/components/Collections/src/ReadMe.md
@@ -0,0 +1,27 @@
+
+# Windows Community Toolkit - Collections
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following in the `CommunityToolkit.WinUI.Collections` namespace:
+
+- AdvancedCollectionView
+- IncrementalLoadingCollection
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Collections` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Collections` package.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/Collections/tests/DataSource.cs b/components/Collections/tests/DataSource.cs
index b4846e59..61c046f4 100644
--- a/components/Collections/tests/DataSource.cs
+++ b/components/Collections/tests/DataSource.cs
@@ -4,6 +4,7 @@
namespace CollectionsExperiment.Tests;
+using CommunityToolkit.WinUI.Collections;
public class DataSource : IIncrementalSource
{
private readonly IEnumerable items;
diff --git a/components/Collections/tests/Test_AdvancedCollectionView.cs b/components/Collections/tests/Test_AdvancedCollectionView.cs
index 7d95c206..07de59de 100644
--- a/components/Collections/tests/Test_AdvancedCollectionView.cs
+++ b/components/Collections/tests/Test_AdvancedCollectionView.cs
@@ -2,6 +2,8 @@
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
+using CommunityToolkit.WinUI.Collections;
+
using System.Runtime.CompilerServices;
namespace CollectionsExperiment.Tests;
diff --git a/components/Collections/tests/Test_IncrementalLoadingCollection.cs b/components/Collections/tests/Test_IncrementalLoadingCollection.cs
index 97f38ba8..99a31555 100644
--- a/components/Collections/tests/Test_IncrementalLoadingCollection.cs
+++ b/components/Collections/tests/Test_IncrementalLoadingCollection.cs
@@ -2,6 +2,8 @@
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
+using CommunityToolkit.WinUI.Collections;
+
namespace CollectionsExperiment.Tests;
[TestClass]
diff --git a/components/Converters/samples/Converters.Samples.csproj b/components/Converters/samples/Converters.Samples.csproj
index fb54743b..92b5600f 100644
--- a/components/Converters/samples/Converters.Samples.csproj
+++ b/components/Converters/samples/Converters.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
Converters
diff --git a/components/Converters/samples/Converters.md b/components/Converters/samples/Converters.md
index 7854e707..c908a1e8 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
@@ -15,75 +15,90 @@ icon: Assets/Converters.png
Converters are an easy way to handle situations where the source and target properties are of a different type. These are often declared in the `.Resources` of your app or page and can be referenced in XAML. In some cases, default converter values can be inverted by setting `ConverterParameter=True`.
## BoolNegationConverter
+
Converts a boolean to the inverse value (True to False and vice versa)
> [!Sample BoolNegationConverterSample]
## BoolToObjectConverter
+
Converts a boolean value into an other object. Can be used to convert true/false to e.g. visibility, color, or different images.
> [!Sample BoolToObjectConverterSample]
## BoolToVisibilityConverter
+
Converts a boolean value into a `Visibility` enumeration. The `ConverterParameter` can be used to invert the logic.
> [!Sample BoolToVisibilityConverterSample]
## ColorToDisplayNameConverter
+
Converts a color to the approximated display name.
> [!Sample ColorToDisplayNameConverterSample]
## DoubleToObjectConverter
+
Converts a double value into an other object. Can be used to convert doubles to e.g. visibility, colors , or different images. If `GreaterThan` and `LessThan` are both set, the logic looks for a value between the two values. Otherwise the logic looks for the value to be `GreaterThan` or `LessThan` the specified value.
> [!Sample DoubleToObjectConverterSample]
## DoubleToVisibilityConverter
+
Converts a double value into an other object. Can be used to convert doubles to e.g. visibility, colors , or different images. If `GreaterThan` and `LessThan` are both set, the logic looks for a value between the two values. Otherwise the logic looks for the value to be `GreaterThan` or `LessThan` the specified value.
> [!Sample DoubleToVisibilityConverterSample]
## EmptyCollectionToObjectConverter & CollectionVisibilityConverter
+
Converts a collection size into an other object. Can be used to convert to bind a visibility, a color or an image to the size of the collection. The `CollectionVisibilityConverter` is derived from it and can be easily used to convert a collection into a `Visibility` enumeration (Collapsed if the given collection is empty or null).
-Note: this converter only checks the initial state of a collection and does not detect any updates. For that scenario, using a `IsNullOrEmptyStateTrigger` is more appropriate.
+Note: this converter only checks the initial state of a collection and does not detect any updates. For that scenario, using a `IsNullOrEmptyStateTrigger` is more appropriate.
> [!Sample CollectionVisibilityConverterSample]
## EmptyObjectToObjectConverter, EmptyStringToObjectConverter & StringToVisibilityConverter
+
Converts an object value into a an object (if the value is null returns the false value). Can be used to bind a visibility, a color or an image to the value of an object.
The `EmptyStringToObjectConverter` converts a string value into a an object (if the value is null or empty returns the false value). Can be used to bind a visibility, a color or an image to the value of a string.
> [!Sample EmptyStringToObjectConverterSample]
## FileSizeToFriendlyStringConverter
+
Converts a file size in bytes to a more human-readable friendly format using `ToFileSizeString(Int64)`.
> [!Sample FileSizeToFriendlyStringConverterSample]
## ResourceNameToResourceStringConverter
+
Converts a source string from the App resources and returns its value, if found.
## StringFormatConverter
-This allows you to format a string property upon binding wrapping [string.Format](/dotnet/api/system.string.format?view=netstandard-2.0).
+
+This allows you to format a string property upon binding wrapping [string.Format](https://learn.microsoft.com/dotnet/api/system.string.format?view=netstandard-2.0).
It only allows for a single input value (the binding string), but can be formatted with the regular string.Format
methods.
> [!Sample StringFormatConverterSample]
## StringVisibilityConverter
+
Converts a string value into a Visibility value (if the value is null or empty returns a collapsed value).
> [!Sample StringVisibilityConverterSample]
## TaskResultConverter
+
Converter that can be used to safely retrieve results from `Task` instances. See the [MVVM Toolkit Gallery](https://aka.ms/mvvmtoolkit/app) for an example.
## TypeToObjectConverter
+
Returns an object or another, depending on whether the type of the provided value matches another provided Type.
> [!Sample TypeToObjectConverterSample]
## VisibilityToBoolConverter
-Converts a `Visibility` enumaration to a boolean value.
+
+Converts a `Visibility` enumeration to a boolean value.
> [!Sample VisibilityToBoolConverterSample]
diff --git a/components/Converters/src/CommunityToolkit.WinUI.Converters.csproj b/components/Converters/src/CommunityToolkit.WinUI.Converters.csproj
index fbaef3e6..94383558 100644
--- a/components/Converters/src/CommunityToolkit.WinUI.Converters.csproj
+++ b/components/Converters/src/CommunityToolkit.WinUI.Converters.csproj
@@ -1,15 +1,26 @@
-
+
+
+
ConvertersThis package contains Converters.CommunityToolkit.WinUI.ConvertersRns
+ ReadMe.md
+
+
+ True
+ \
+
+
+
+
-
+
diff --git a/components/Converters/src/ReadMe.md b/components/Converters/src/ReadMe.md
new file mode 100644
index 00000000..e0a2d5ee
--- /dev/null
+++ b/components/Converters/src/ReadMe.md
@@ -0,0 +1,43 @@
+
+# Windows Community Toolkit - Converters
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following converters in the `CommunityToolkit.WinUI.Converters` namespace:
+
+- BoolNegationConverter
+- BoolToObjectConverter
+- BoolToVisibilityConverter
+- CollectionVisibilityConverter
+- ColorToDisplayNameConverter
+- DoubleToObjectConverter
+- DoubleToVisibilityConverter
+- EmptyCollectionToObjectConverter
+- EmptyObjectToObjectConverter
+- EmptyStringToObjectConverter
+- FileSizeToFriendlyStringConverter
+- IFormattableToStringConverter
+- ResourceNameToResourceStringConverter
+- StringFormatConverter
+- StringVisibilityConverter
+- TaskResultConverter
+- TypeToObjectConverter
+- VisibilityToBoolConverter
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Converters` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Converters` package.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/DeveloperTools/samples/DeveloperTools.Samples.csproj b/components/DeveloperTools/samples/DeveloperTools.Samples.csproj
index 09ea69f1..7c306a47 100644
--- a/components/DeveloperTools/samples/DeveloperTools.Samples.csproj
+++ b/components/DeveloperTools/samples/DeveloperTools.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
DeveloperTools
diff --git a/components/DeveloperTools/samples/DeveloperTools.md b/components/DeveloperTools/samples/DeveloperTools.md
index 67fbfc88..396b6a62 100644
--- a/components/DeveloperTools/samples/DeveloperTools.md
+++ b/components/DeveloperTools/samples/DeveloperTools.md
@@ -14,7 +14,7 @@ icon: Assets/DeveloperTools.png
## AlignmentGrid XAML Control
-The [AlignmentGrid Control](/dotnet/api/microsoft.toolkit.uwp.developertools.alignmentgrid) can be used to display a grid to help with aligning controls.
+The `AlignmentGrid Control` can be used to display a grid to help with aligning controls.
You can control the grid's steps with `HorizontalStep` and `VerticalStep` properties. Line color can be defined with `LineBrush` property.
@@ -22,7 +22,7 @@ You can control the grid's steps with `HorizontalStep` and `VerticalStep` proper
## FocusTracker
-The [FocusTracker Control](/dotnet/api/microsoft.toolkit.uwp.developertools.focustracker) can be used to display information about the current focused XAML element (if any).
+The `FocusTracker Control` can be used to display information about the current focused XAML element (if any).
FocusTracker will display the following information (when available) about the current focused XAML element:
diff --git a/components/DeveloperTools/src/CommunityToolkit.WinUI.DeveloperTools.csproj b/components/DeveloperTools/src/CommunityToolkit.WinUI.DeveloperTools.csproj
index 95866e1b..ab9739a7 100644
--- a/components/DeveloperTools/src/CommunityToolkit.WinUI.DeveloperTools.csproj
+++ b/components/DeveloperTools/src/CommunityToolkit.WinUI.DeveloperTools.csproj
@@ -1,12 +1,22 @@
-
+
+
+
DeveloperToolsThis package contains DeveloperTools.CommunityToolkit.WinUI.DeveloperToolsRns
+ ReadMe.md
+
+
+ True
+ \
+
+
+
diff --git a/components/DeveloperTools/src/ReadMe.md b/components/DeveloperTools/src/ReadMe.md
new file mode 100644
index 00000000..9dbbc511
--- /dev/null
+++ b/components/DeveloperTools/src/ReadMe.md
@@ -0,0 +1,39 @@
+
+# Windows Community Toolkit - DeveloperTools
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following controls in the `CommunityToolkit.WinUI.DeveloperTools` namespace:
+
+- AlignmentGrid
+- FocusTracker
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.DeveloperTools` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.DeveloperTools` package.
+
+## WinUI Resources (UWP)
+
+For UWP projects, the WinUI 2 reference requires you include the WinUI XAML Resources in your App.xaml file:
+
+```xml
+
+
+
+```
+
+See [Getting Started in WinUI 2](https://learn.microsoft.com/windows/apps/winui/winui2/getting-started) for more information.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
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/AttachedDropShadow.md b/components/Extensions/samples/AttachedDropShadow.md
index 5064ea61..412b9ca0 100644
--- a/components/Extensions/samples/AttachedDropShadow.md
+++ b/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
diff --git a/components/Extensions/samples/AttachedShadows.md b/components/Extensions/samples/AttachedShadows.md
index 1545dcd1..e11d4ef2 100644
--- a/components/Extensions/samples/AttachedShadows.md
+++ b/components/Extensions/samples/AttachedShadows.md
@@ -1,29 +1,27 @@
---
-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
+> **Platform APIs:** `AttachedCardShadow`, `AttachedDropShadow`
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
+## Capability Comparison
The following table outlines the various capabilities of each shadow type in addition to comparing to the previous `DropShadowPanel` implementation:
-| Capability | AttachedCardShadow | AttachedDropShadow | DropShadowPanel (deprecated) |
+| Capability | AttachedCardShadow | AttachedDropShadow | DropShadowPanel (deprecated/removed) |
|-------------------------------|--------------------------------------------------------------------|-----------------------------------------------------------------|-----------------------------------------------------------------------------------------|
-| Dependency/NuGet Package | 🟡 Win2D via `Microsoft.Toolkit.Uwp.UI.Media` | ✅ Framework Only (Composition Effect) `CommunityToolkit.WinUI.Effects` | ✅ Framework Only (Composition Effect) `Microsoft.Toolkit.Uwp.UI.Controls` (legacy) |
+| Dependency/NuGet Package | 🟡 Win2D via `CommunityToolkit.WinUI.Media` | ✅ Framework Only (Composition Effect) `CommunityToolkit.WinUI.Effects` | ✅ Framework Only (Composition Effect) `Microsoft.Toolkit.Uwp.UI.Controls` (legacy) |
| Layer | Inline Composition + Win2D Clip Geometry | Composition via Target Element Backdrop | Composition via `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"/>
-
-
-
-
-
-
-
-
-
-
-
-```
-
## 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.
+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.
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
-
-
-
-
-
-
-
-
-```
-
-## 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"/>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
diff --git a/components/Extensions/samples/DependencyObjectExtensions.md b/components/Extensions/samples/DependencyObjectExtensions.md
index bf82674d..801488c8 100644
--- a/components/Extensions/samples/DependencyObjectExtensions.md
+++ b/components/Extensions/samples/DependencyObjectExtensions.md
@@ -13,7 +13,7 @@ issue-id: 0
icon: Assets/Extensions.png
---
-The [`DependencyObjectExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.DependencyObjectExtensions) type provides a collection of extensions methods for [`DependencyObject`](/uwp/api/windows.ui.xaml.dependencyobject) objects. This class exposes several APIs to aid in using the [`VisualTreeHelper`](/uwp/api/Windows.UI.Xaml.Media.VisualTreeHelper) class. There are a number of reasons why walking the visual tree might be useful, which are mentioned [in the docs](/uwp/api/windows.ui.xaml.media.visualtreehelper?#traversing-a-visual-tree).
+The `DependencyObjectExtensions` type provides a collection of extensions methods for [`DependencyObject`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.dependencyobject) objects. This class exposes several APIs to aid in using the [`VisualTreeHelper`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Media.VisualTreeHelper) class. There are a number of reasons why walking the visual tree might be useful, which are mentioned [in the docs](https://learn.microsoft.com/uwp/api/windows.ui.xaml.media.visualtreehelper?#traversing-a-visual-tree).
## Syntax
diff --git a/components/Extensions/samples/DispatcherQueueExtensions.md b/components/Extensions/samples/DispatcherQueueExtensions.md
index 90aa4a83..e77ed350 100644
--- a/components/Extensions/samples/DispatcherQueueExtensions.md
+++ b/components/Extensions/samples/DispatcherQueueExtensions.md
@@ -6,13 +6,13 @@ keywords: dispatcher, dispatcherqueue, DispatcherHelper, DispatcherQueueExtensio
dev_langs:
- csharp
category: Extensions
-subcategory: None
+subcategory: Miscellaneous
discussion-id: 0
issue-id: 0
icon: Assets/Extensions.png
---
-The [`DispatcherQueueExtensions`](/dotnet/api/microsoft.toolkit.uwp.DispatcherQueueExtensions) type provides a collection of extensions methods for [`DispatcherQueue`](/uwp/api/windows.system.dispatcherqueue) objects that makes it easier to execute code on a specific UI thread. A `DispatcherQueue` instance can be retrieved and cached for later use, and then used through any of the available helper methods to dispatch a delegate invocation on it.
+The `DispatcherQueueExtensions` type provides a collection of extensions methods for [`DispatcherQueue`](https://learn.microsoft.com/uwp/api/windows.system.dispatcherqueue) objects that makes it easier to execute code on a specific UI thread. A `DispatcherQueue` instance can be retrieved and cached for later use, and then used through any of the available helper methods to dispatch a delegate invocation on it.
## Syntax
@@ -51,7 +51,7 @@ int someOtherValue = await dispatcherQueue.EnqueueAsync(async () =>
## Migrating from [`DispatcherHelper`](..\helpers\DispatcherHelper.md)
-The [`CoreDispatcher`](/uwp/api/windows.ui.core.coredispatcher) is being deprecated (and it will no longer work with XAML Islands or WinUI 3) and should no longer be used, as it had a number of limitations. Specifically, it relied on the assumption that each window had its own UI thread tied to it, which is not always the case. The new `DispatcherQueue` instead can be used going forwards, and it requires some changes in code that was previously relying on `CoreDispatcher` and `DispatcherHelper`. Specifically, a background thread can no longer retrieve the `CoreDispatcher` by just accessing the dispatcher associated to the "main window" for the application, because this concept does not apply anymore. Instead, a `DispatcherQueue` instance needs to be retrieved on the UI thread and cached for later use in a background thread.
+The [`CoreDispatcher`](https://learn.microsoft.com/uwp/api/windows.ui.core.coredispatcher) is being deprecated (and it will no longer work with XAML Islands or WinUI 3) and should no longer be used, as it had a number of limitations. Specifically, it relied on the assumption that each window had its own UI thread tied to it, which is not always the case. The new `DispatcherQueue` instead can be used going forwards, and it requires some changes in code that was previously relying on `CoreDispatcher` and `DispatcherHelper`. Specifically, a background thread can no longer retrieve the `CoreDispatcher` by just accessing the dispatcher associated to the "main window" for the application, because this concept does not apply anymore. Instead, a `DispatcherQueue` instance needs to be retrieved on the UI thread and cached for later use in a background thread.
If you were using `DispatcherHelper` on the UI thread, apply the following change (here we're using `Task.Run` to simulate some work being done in a background thread and accessing some UI component, and we're assuming for this example that there is a `TextBlock` control in our page called "MyTextBlock"):
diff --git a/components/Extensions/samples/EnumValuesExtension.md b/components/Extensions/samples/EnumValuesExtension.md
index dd9ab4d1..886b88ea 100644
--- a/components/Extensions/samples/EnumValuesExtension.md
+++ b/components/Extensions/samples/EnumValuesExtension.md
@@ -12,9 +12,9 @@ issue-id: 0
icon: Assets/Extensions.png
---
-The [`EnumValuesExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.EnumValuesExtensions) type implements a markup extension that returns a collection of values of a specific enum type. It can be useful to easily bind a collection of all possible values from a given enum type to a UI element such as a [`ComboBox`](/windows/uwp/design/controls-and-patterns/combo-box) or some other items container or selector control.
+The `EnumValuesExtensions` type implements a markup extension that returns a collection of values of a specific enum type. It can be useful to easily bind a collection of all possible values from a given enum type to a UI element such as a [`ComboBox`](https://learn.microsoft.com/windows/uwp/design/controls-and-patterns/combo-box) or some other items container or selector control.
-> **Platform APIs:** [`EnumValuesExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.EnumValuesExtensions)
+> **Platform APIs:** `EnumValuesExtensions`
## Syntax
@@ -28,7 +28,7 @@ Assuming we had an `Animal` enum type and we wanted the user to pick one of the
SelectedIndex="0"/>
```
-In this example we're just relying on the default `ComboBox` item template, that will display the name of each `Animal` value in a [`TextBlock`](/uwp/api/windows.ui.xaml.controls.textblock) control. We could of course also define a custom item template if we wanted to show additional info for each individual `Animal` value, or if we wanted to further customize how each value is presented to the user.
+In this example we're just relying on the default `ComboBox` item template, that will display the name of each `Animal` value in a [`TextBlock`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.textblock) control. We could of course also define a custom item template if we wanted to show additional info for each individual `Animal` value, or if we wanted to further customize how each value is presented to the user.
## Examples
@@ -36,7 +36,7 @@ Binding to an enum property can be accomplished like so:
```xaml
diff --git a/components/Extensions/samples/Extensions.Samples.csproj b/components/Extensions/samples/Extensions.Samples.csproj
index 33af7944..20b46d9d 100644
--- a/components/Extensions/samples/Extensions.Samples.csproj
+++ b/components/Extensions/samples/Extensions.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
Extensions
@@ -9,6 +11,7 @@
+
@@ -20,5 +23,8 @@
PreserveNewest
+
+ PreserveNewest
+
diff --git a/components/Extensions/samples/FrameworkElementExtensions.md b/components/Extensions/samples/FrameworkElementExtensions.md
index 90cfc257..1839618d 100644
--- a/components/Extensions/samples/FrameworkElementExtensions.md
+++ b/components/Extensions/samples/FrameworkElementExtensions.md
@@ -13,13 +13,13 @@ issue-id: 0
icon: Assets/Extensions.png
---
-[`FrameworkElementExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.frameworkelementextensions) provides a collection of attached dependency properties, helpers and extension methods to work with [`FrameworkElement`](/uwp/api/windows.ui.xaml.frameworkelement) objects. In particular, it also includes a series of extension methods to explore the logical tree from a given UI element and find child or parent objects.
+`FrameworkElementExtensions` provides a collection of attached dependency properties, helpers and extension methods to work with [`FrameworkElement`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.frameworkelement) objects. In particular, it also includes a series of extension methods to explore the logical tree from a given UI element and find child or parent objects.
## Logical tree extensions
The `FindChild` and `FindParent` methods (and their overloads) provide an easy way to explore the logical tree starting from a given `FrameworkElement` instance and find other controls connected to it.
-These APIs differ from the *visual tree* extensions (in the [`DependencyObjectExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.DependencyObjectExtensions) class) where extra containers and styles can wrap other elements. The logical tree instead defines how controls are directly connected through construction. These methods can also be used on controls that aren't yet connected or rendered in the visual tree.
+These APIs differ from the *visual tree* extensions (in the `DependencyObjectExtensions` class) where extra containers and styles can wrap other elements. The logical tree instead defines how controls are directly connected through construction. These methods can also be used on controls that aren't yet connected or rendered in the visual tree.
Here are some examples of how these extensions can be used:
@@ -68,7 +68,7 @@ Here is an example of how the `ActualWidth` attached property can be used in a b
## AncestorType
-The `AncestorType` attached property will walk the visual tree from the attached element for another element of the specified type. That value will be stored in the attached element's `Ancestor` property. This can then be used for binding to properties on the parent element. This is similar to the [`FindAncestor`](/dotnet/api/system.windows.data.relativesourcemode) mode to [`RelativeSource`](/dotnet/desktop/wpf/advanced/relativesource-markupextension) data binding in WPF.
+The `AncestorType` attached property will walk the visual tree from the attached element for another element of the specified type. That value will be stored in the attached element's `Ancestor` property. This can then be used for binding to properties on the parent element. This is similar to the [`FindAncestor`](https://learn.microsoft.com/dotnet/api/system.windows.data.relativesourcemode) mode to [`RelativeSource`](https://learn.microsoft.com/dotnet/desktop/wpf/advanced/relativesource-markupextension) data binding in WPF.
Here is an example of how this can be used:
@@ -78,7 +78,7 @@ While this example is trivial, it shows you how to properly setup and bind to th
## Cursor
-The `Cursor` attached property enables you to easily change the mouse cursor over specific Framework elements. Values of this property are values from the [`CoreCursorType`](/uwp/api/windows.ui.core.corecursortype) type.
+The `Cursor` attached property enables you to easily change the mouse cursor over specific Framework elements. Values of this property are values from the [`CoreCursorType`](https://learn.microsoft.com/uwp/api/windows.ui.core.corecursortype) type.
Here is how you can easily set a custom cursor type for a target `FrameworkElement` instance:
@@ -99,10 +99,10 @@ Here is how you can easily set a custom cursor type for a target `FrameworkEleme
```
> [!NOTE]
-> Even though Microsoft recommends in [UWP Design guidelines](/uwp/input-and-devices/mouse-interactions#cursors) hover effects instead of custom cursors over interactive elements, custom cursors can be useful in some specific scenarios.
+> Even though Microsoft recommends in [UWP Design guidelines](https://learn.microsoft.com/uwp/input-and-devices/mouse-interactions#cursors) hover effects instead of custom cursors over interactive elements, custom cursors can be useful in some specific scenarios.
> [!WARNING]
-> Because the UWP framework does not support metadata on attached properties, specifically the [`FrameworkPropertyMetadata.Inherits`](/dotnet/api/system.windows.frameworkpropertymetadata.-ctor#System_Windows_FrameworkPropertyMetadata__ctor_System_Object_System_Windows_FrameworkPropertyMetadataOptions_System_Windows_PropertyChangedCallback_System_Windows_CoerceValueCallback_) flag, the `Cursor` property might not work properly in some very specific XAML layout scenarios when combining nested `FrameworkElement`-s with different `CoreCursorType` values set on them.
+> Because the UWP framework does not support metadata on attached properties, specifically the [`FrameworkPropertyMetadata.Inherits`](https://learn.microsoft.com/dotnet/api/system.windows.frameworkpropertymetadata.-ctor#System_Windows_FrameworkPropertyMetadata__ctor_System_Object_System_Windows_FrameworkPropertyMetadataOptions_System_Windows_PropertyChangedCallback_System_Windows_CoerceValueCallback_) flag, the `Cursor` property might not work properly in some very specific XAML layout scenarios when combining nested `FrameworkElement`-s with different `CoreCursorType` values set on them.
## Examples
diff --git a/components/Extensions/samples/HyperlinkExtensions.md b/components/Extensions/samples/HyperlinkExtensions.md
index bdecbb3f..000871b9 100644
--- a/components/Extensions/samples/HyperlinkExtensions.md
+++ b/components/Extensions/samples/HyperlinkExtensions.md
@@ -6,13 +6,13 @@ 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
---
-The [HyperlinkExtensions](/dotnet/api/microsoft.toolkit.uwp.ui.hyperlinkextensions) class allows for a [`Hyperlink`](/uwp/api/Windows.UI.Xaml.Documents.Hyperlink) element to invoke the execute method on a bound [`ICommand`](/uwp/api/Windows.UI.Xaml.Input.ICommand) instance when clicked.
+The `HyperlinkExtensions` class allows for a [`Hyperlink`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Documents.Hyperlink) element to invoke the execute method on a bound [`ICommand`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Input.ICommand) instance when clicked.
## How it works
diff --git a/components/Extensions/samples/IconMarkupExtensions.md b/components/Extensions/samples/IconMarkupExtensions.md
index b211f8ca..63c78daa 100644
--- a/components/Extensions/samples/IconMarkupExtensions.md
+++ b/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
@@ -12,7 +12,7 @@ issue-id: 0
icon: Assets/Extensions.png
---
-The icon extensions are a group of markup extensions meant to simplify the creation of various icon types (specifically [`BitmapIcon`](/uwp/api/Windows.UI.Xaml.Controls.BitmapIcon), [`BitmapIconSource`](/uwp/api/Windows.UI.Xaml.Controls.BitmapIconSource), [`FontIcon`](/uwp/api/Windows.UI.Xaml.Controls.FontIcon), [`FontIconSource`](/uwp/api/Windows.UI.Xaml.Controls.FontIconSource), [`SymbolIcon`](/uwp/api/Windows.UI.Xaml.Controls.SymbolIcon), and [`SymbolIconSource`](/uwp/api/Windows.UI.Xaml.Controls.SymbolIconSource)) used across a variety of XAML controls. Using these extensions doesn't enable new capabilities per se, but it greatly simplifies the XAML syntax needed to create instances of these icon types.
+The icon extensions are a group of markup extensions meant to simplify the creation of various icon types (specifically [`BitmapIcon`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.BitmapIcon), [`BitmapIconSource`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.BitmapIconSource), [`FontIcon`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.FontIcon), [`FontIconSource`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.FontIconSource), [`SymbolIcon`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.SymbolIcon), and [`SymbolIconSource`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Controls.SymbolIconSource)) used across a variety of XAML controls. Using these extensions doesn't enable new capabilities per se, but it greatly simplifies the XAML syntax needed to create instances of these icon types.
## BitmapIconExtension
@@ -57,7 +57,7 @@ The `FontIconExtension` type provides the ability to create `FontIcon` instances
-
+
@@ -89,7 +89,7 @@ The `FontIconSourceExtension` class mirrors the `FontIconExtension` type, but pr
## SymbolIconExtension
-The `SymbolIconExtension` type mirrors the `FontIcon` markup extension, with the main difference being that it uses a [`Symbol`](/uwp/api/windows.ui.xaml.controls.symbol) value to specify the icon. All the other properties from `FontIconExtension` are available, with the exception of the font family, which is always set to "Segoe MDL2 Assets". Here is how it can be used:
+The `SymbolIconExtension` type mirrors the `FontIcon` markup extension, with the main difference being that it uses a [`Symbol`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.symbol) value to specify the icon. All the other properties from `FontIconExtension` are available, with the exception of the font family, which is always set to "Segoe MDL2 Assets". Here is how it can be used:
```xaml
@@ -111,7 +111,7 @@ The `SymbolIconExtension` type mirrors the `FontIcon` markup extension, with the
## SymbolIconSource
-The `SymbolIconSourceExtension` type is an alternative for `FontIconSourceExtension` that takes a `Symbol` value instead of a text, and displays the icon with the "Segoe MDL2 Assets". It's equivalent to the `SymbolIconExtension` type, except for the fact that it returns a [`FontIconSource`](/uwp/api/windows.ui.xaml.controls.fonticonsource) instance:
+The `SymbolIconSourceExtension` type is an alternative for `FontIconSourceExtension` that takes a `Symbol` value instead of a text, and displays the icon with the "Segoe MDL2 Assets". It's equivalent to the `SymbolIconExtension` type, except for the fact that it returns a [`FontIconSource`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.fonticonsource) instance:
```xaml
[!WARNING]
-> The [`ContainerContentChanging`](/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_ContainerContentChanging) event used for this extension to work, will not be raised when the [`ItemsPanel`](/uwp/api/windows.ui.xaml.controls.itemscontrol.itemspanel) is replaced with another type of panel than [`ItemsStackPanel`](/uwp/api/windows.ui.xaml.controls.itemsstackpanel) or [`ItemsWrapGrid`](/uwp/api/windows.ui.xaml.controls.itemswrapgrid).
+> The [`ContainerContentChanging`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_ContainerContentChanging) event used for this extension to work, will not be raised when the [`ItemsPanel`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.itemscontrol.itemspanel) is replaced with another type of panel than [`ItemsStackPanel`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.itemsstackpanel) or [`ItemsWrapGrid`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid).
Here is how this property can be used in XAML:
@@ -42,10 +42,10 @@ Here is how this property can be used in XAML:
## AlternateItemTemplate
-The `AlternateItemTemplate` property provides a way to assign an alternate [`DataTemplate`](/uwp/api/windows.ui.xaml.datatemplate) to every other item. It is also possible to combine with the `AlternateColor` property.
+The `AlternateItemTemplate` property provides a way to assign an alternate [`DataTemplate`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.datatemplate) to every other item. It is also possible to combine with the `AlternateColor` property.
> [!WARNING]
-> The [`ContainerContentChanging`](/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_ContainerContentChanging) event used for this extension to work, will not be raised when the [`ItemsPanel`](/uwp/api/windows.ui.xaml.controls.itemscontrol.itemspanel) is replaced with another type of panel than [`ItemsStackPanel`](/uwp/api/windows.ui.xaml.controls.itemsstackpanel) or [`ItemsWrapGrid`](/uwp/api/windows.ui.xaml.controls.itemswrapgrid).
+> The [`ContainerContentChanging`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_ContainerContentChanging) event used for this extension to work, will not be raised when the [`ItemsPanel`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.itemscontrol.itemspanel) is replaced with another type of panel than [`ItemsStackPanel`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.itemsstackpanel) or [`ItemsWrapGrid`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid).
Here is how this property can be used in XAML:
@@ -71,10 +71,10 @@ Here is how this property can be used in XAML:
## Command
-`ListViewExtensions` provides extension method that allow attaching an [`ICommand`](/uwp/api/Windows.UI.Xaml.Input.ICommand) to handle `ListViewBase` item interaction by means of [`ItemClick`](/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_ItemClick) event.
+`ListViewExtensions` provides extension method that allow attaching an [`ICommand`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Input.ICommand) to handle `ListViewBase` item interaction by means of [`ItemClick`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_ItemClick) event.
> [!IMPORTANT]
-> ListViewBase [`IsItemClickEnabled`](/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_IsItemClickEnabled) must be set to `true`.
+> ListViewBase [`IsItemClickEnabled`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_IsItemClickEnabled) must be set to `true`.
Here is how this property can be used in XAML:
@@ -94,7 +94,7 @@ Here is how this property can be used in XAML:
The `ItemContainerStretchDirection` property provides a way to stretch the `ItemContainer` in horizontal, vertical or both ways. The allowed values are items from the `ItemContainerStretchDirection` type.
> [!WARNING]
-> The [`ContainerContentChanging`](/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_ContainerContentChanging) event used for this extension to work, will not be raised when the [`ItemsPanel`](/uwp/api/windows.ui.xaml.controls.itemscontrol.itemspanel) is replaced with another type of panel than [`ItemsStackPanel`](/uwp/api/windows.ui.xaml.controls.itemsstackpanel) or [`ItemsWrapGrid`](/uwp/api/windows.ui.xaml.controls.itemswrapgrid).
+> The [`ContainerContentChanging`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.listviewbase#Windows_UI_Xaml_Controls_ListViewBase_ContainerContentChanging) event used for this extension to work, will not be raised when the [`ItemsPanel`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.itemscontrol.itemspanel) is replaced with another type of panel than [`ItemsStackPanel`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.itemsstackpanel) or [`ItemsWrapGrid`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.itemswrapgrid).
Here is how this property can be used from XAML:
@@ -111,71 +111,14 @@ Here is how this property can be used from XAML:
Use SmoothScrollIntoView helps to scroll the item into the view with animation. Specify the ItemPosition property to align the item.
-### Syntax
-
```csharp
// Scrolling with index
-await MyGridView.SmoothScrollIntoViewWithIndexAsync(index: int, itemPlacement: ItemPlacement, disableAnimation: bool, scrollIfVisibile: bool, additionalHorizontalOffset: int, additionalVerticalOffset: int);
+await MyGridView.SmoothScrollIntoViewWithIndexAsync(index: int, itemPlacement: ItemPlacement, disableAnimation: bool, scrollIfVisible: bool, additionalHorizontalOffset: int, additionalVerticalOffset: int);
// Scrolling with item
-await MyGridView.SmoothScrollIntoViewWithItemAsync(item: object, itemPlacement: ItemPlacement, disableAnimation: bool, scrollIfVisibile: bool, additionalHorizontalOffset: int, additionalVerticalOffset: int);
+await MyGridView.SmoothScrollIntoViewWithItemAsync(item: object, itemPlacement: ItemPlacement, disableAnimation: bool, scrollIfVisible: bool, additionalHorizontalOffset: int, additionalVerticalOffset: int);
```
-### 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 |
-
-### Method params
-
-| Properties | Type | Description |
-|------------|------|-------------|
-| intex | int | Intex of the item to be scrolled. Index can be negative |
-| item | int | Intex of the item to be scrolled |
-| itemPosition | ScrollItemPlacement | Specify the position of the Item after scrolling |
-| disableAnimation | bool | To disable the scrolling animation |
-| scrollIfVisibile | bool | Set `true` to scroll even if the scroll to item is visible so that the item will be aligned depend upon `itemPosition` |
-| additionalHorizontalOffset | bool | Give addition horizontal offset |
-| additionalVerticalOffset | bool | Give addition vertical offset |
-
-### ItemPosition
-
-| ScrollItemPlacement | Description |
-|--------------|-------------|
-| Default | If visible then it will not scroll, if not then item will be aligned to the nearest edge |
-| Left | Aligned left |
-| Top | Aligned top |
-| Center | Aligned center |
-| Right | Aligned right |
-| Bottom | Aligned bottom |
-
-### Examples
-
-- We can use this extension to make the selected item always centered.
-
- **Sample Code**
-
- ```xaml
-
-
-
-
-
-
-
-
-
-
-
-
- ```
-
- ```csharp
- private async void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
- {
- var listView = (sender as ListView);
- await listView.SmoothScrollIntoViewWithIndexAsync(listView.SelectedIndex, ScrollItemPlacement.Center, false, true);
- }
- ```
+We can use this extension to make the selected item always centered:
+
+> [!SAMPLE SmoothScrollIntoViewSample]
diff --git a/components/Extensions/samples/ListViewExtensions/SmoothScrollIntoViewSample.xaml b/components/Extensions/samples/ListViewExtensions/SmoothScrollIntoViewSample.xaml
new file mode 100644
index 00000000..73db0137
--- /dev/null
+++ b/components/Extensions/samples/ListViewExtensions/SmoothScrollIntoViewSample.xaml
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/components/Extensions/samples/ListViewExtensions/SmoothScrollIntoViewSample.xaml.cs b/components/Extensions/samples/ListViewExtensions/SmoothScrollIntoViewSample.xaml.cs
new file mode 100644
index 00000000..7d9be4b3
--- /dev/null
+++ b/components/Extensions/samples/ListViewExtensions/SmoothScrollIntoViewSample.xaml.cs
@@ -0,0 +1,47 @@
+// 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.
+
+using CommunityToolkit.WinUI;
+
+#if WINAPPSDK
+using ListView = Microsoft.UI.Xaml.Controls.ListView;
+#else
+using ListView = Windows.UI.Xaml.Controls.ListView;
+#endif
+
+namespace ExtensionsExperiment.Samples.ListViewExtensions;
+
+[ToolkitSample(id: nameof(SmoothScrollIntoViewSample), "SmoothScrollIntoView Extension", description: "A sample for showing how to use the SmoothScrollIntoViewWithIndexAsync API.")]
+public sealed partial class SmoothScrollIntoViewSample : Page
+{
+ public ObservableCollection Items { get; set; } = new();
+
+ public SmoothScrollIntoViewSample()
+ {
+ Items = GetOddEvenSource(201);
+
+ this.InitializeComponent();
+ }
+
+ private async void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
+ {
+ if (sender is ListView listView)
+ {
+ await listView.SmoothScrollIntoViewWithIndexAsync(listView.SelectedIndex, ScrollItemPlacement.Center, false, true);
+ }
+ }
+
+ private ObservableCollection GetOddEvenSource(int count)
+ {
+ ObservableCollection oddEvenSource = new();
+
+ for (int number = 0; number < count; number++)
+ {
+ var item = (number % 2) == 0 ? $"{number} - Even" : $"{number} - Odd";
+ oddEvenSource.Add(item);
+ }
+
+ return oddEvenSource;
+ }
+}
diff --git a/components/Extensions/samples/MatrixExtensions.md b/components/Extensions/samples/MatrixExtensions.md
index 931f7211..3b03522c 100644
--- a/components/Extensions/samples/MatrixExtensions.md
+++ b/components/Extensions/samples/MatrixExtensions.md
@@ -12,5 +12,4 @@ issue-id: 0
icon: Assets/Extensions.png
---
-The [`MatrixExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.matrixextensions) type provides methods to transform a [`Matrix`](/uwp/api/Windows.UI.Xaml.Media.Matrix) (Rotate, Scale, Translate, etc...). These are a similar subset of methods originally provided in the [System.Windows.Media.Matrix](/dotnet/api/system.windows.media.matrix) class.
-
+The `MatrixExtensions` type provides methods to transform a [`Matrix`](https://learn.microsoft.com/uwp/api/Windows.UI.Xaml.Media.Matrix) (Rotate, Scale, Translate, etc...). These are a similar subset of methods originally provided in the [System.Windows.Media.Matrix](https://learn.microsoft.com/dotnet/api/system.windows.media.matrix) class.
diff --git a/components/Extensions/samples/NullableBoolExtension.md b/components/Extensions/samples/NullableBoolExtension.md
index 0ef2e760..cdcded38 100644
--- a/components/Extensions/samples/NullableBoolExtension.md
+++ b/components/Extensions/samples/NullableBoolExtension.md
@@ -6,15 +6,15 @@ 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
---
-The [`NullableBoolExtension`](/dotnet/api/microsoft.toolkit.uwp.ui.nullableboolextension) type provides the ability to set nullable `bool` dependency properties in XAML markup. These types of properties can normally be bound to, but can't be explicitly set to a specific value. This extension provides that capability.
+The `NullableBoolExtension` type provides the ability to set nullable `bool` dependency properties in XAML markup. These types of properties can normally be bound to, but can't be explicitly set to a specific value. This extension provides that capability.
-> **Platform APIs:** [`NullableBoolExtension`](/dotnet/api/microsoft.toolkit.uwp.ui.nullableboolextension)
+> **Platform APIs:** `NullableBoolExtension`
Here is an example of how this extension could be used when binding to a `DependencyProperty`:
diff --git a/components/Extensions/samples/OnDeviceExtension.md b/components/Extensions/samples/OnDeviceExtension.md
index d5918ca2..ebc15933 100644
--- a/components/Extensions/samples/OnDeviceExtension.md
+++ b/components/Extensions/samples/OnDeviceExtension.md
@@ -12,7 +12,7 @@ issue-id: 0
icon: Assets/Extensions.png
---
-The [`OnDeviceExtension`](/dotnet/api/microsoft.toolkit.uwp.ui.ondeviceextension) type allows you to customize UI appearance on a per-DeviceFamily basis. It is inspired on the [OnPlatform](https://github.com/xamarin/Xamarin.Forms/issues/2608) markup extensions from Xamarin.Forms 3.2
+The `OnDeviceExtension` type allows you to customize UI appearance on a per-DeviceFamily basis. It is inspired on the [OnPlatform](https://github.com/xamarin/Xamarin.Forms/issues/2608) markup extensions from Xamarin.Forms 3.2
Here is how the property can be used in XAML:
diff --git a/components/Extensions/samples/ScrollViewerExtensions.md b/components/Extensions/samples/ScrollViewerExtensions.md
index f0122f89..4647c871 100644
--- a/components/Extensions/samples/ScrollViewerExtensions.md
+++ b/components/Extensions/samples/ScrollViewerExtensions.md
@@ -6,24 +6,24 @@ keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp
dev_langs:
- csharp
category: Extensions
-subcategory: Layout
+subcategory: Controls
discussion-id: 0
issue-id: 0
icon: Assets/Extensions.png
---
-The [`ScrollViewerExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.scrollviewerextensions) type provides extension methods to improve your [`ScrollViewer`](/uwp/api/windows.ui.xaml.controls.scrollviewer) implementation.
+The `ScrollViewerExtensions` type provides extension methods to improve your [`ScrollViewer`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.scrollviewer) implementation.
-> **Platform APIs:** [`ScrollViewerExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.scrollviewerextensions)
+> **Platform APIs:** `ScrollViewerExtensions`
## ScrollBarMargin
-The `ScrollBarMargin` property provides a way to assign a [`Thickness`](/dotnet/api/system.windows.thickness) to the vertical/horizontal [`ScrollBar`](/uwp/api/windows.ui.xaml.controls.primitives.scrollbar) of your container.
+The `ScrollBarMargin` property provides a way to assign a [`Thickness`](https://learn.microsoft.com/dotnet/api/system.windows.thickness) to the vertical/horizontal [`ScrollBar`](https://learn.microsoft.com/uwp/api/windows.ui.xaml.controls.primitives.scrollbar) of your container.
Here is how this property can be used in XAML:
```xaml
-
+
@@ -90,7 +90,7 @@ public class DoubleTopThicknessConverter : IValueConverter
Here is how this property can be used in XAML:
```xaml
-
+
diff --git a/components/Extensions/samples/ShadowAnimations.md b/components/Extensions/samples/ShadowAnimations.md
new file mode 100644
index 00000000..41db67cb
--- /dev/null
+++ b/components/Extensions/samples/ShadowAnimations.md
@@ -0,0 +1,57 @@
+---
+title: Shadow animations
+author: michael-hawker
+description: Animating Attached Shadows
+keywords: shadow, shadows, dropshadow, dropshadowpanel, attachedshadow, attacheddropshadow, attachedcardshadow
+dev_langs:
+ - csharp
+category: Animations
+subcategory: Shadows
+discussion-id: 0
+issue-id: 0
+icon: Assets/ShadowAnimation.png
+---
+
+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`, `ColorDropShadowAnimation`, `OffsetDropShadowAnimation`, `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.
+
+### 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`:
+
+```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"/>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/components/Extensions/samples/AttachedDropShadowBasicSample.xaml b/components/Extensions/samples/Shadows/AttachedDropShadowBasicSample.xaml
similarity index 94%
rename from components/Extensions/samples/AttachedDropShadowBasicSample.xaml
rename to components/Extensions/samples/Shadows/AttachedDropShadowBasicSample.xaml
index 4386358a..f85f1cfe 100644
--- a/components/Extensions/samples/AttachedDropShadowBasicSample.xaml
+++ b/components/Extensions/samples/Shadows/AttachedDropShadowBasicSample.xaml
@@ -1,5 +1,5 @@
-
-
- [!SAMPLE RegexSample]
## Text mask
@@ -39,119 +53,14 @@ You can escape variable by using `\` (eg. the mask `+\964` will be presented to
In case you want to add a custom variable character you can use the `CustomMask` property. You can add a character that represents certain regex as `c:[a-c]` and once you use character `c` in the mask the mask will prevent any characters but from `a` to `c` inside the `TextBox`, also you specify multiple variable characters by adding comma `,` after every character and its representation. This feature is helpful if you want to allow certain language characters (eg. French or Arabic only `TextBox`).
-### Syntax
-
-```xaml
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Sample output
-
-A `TextBox` with `Mask` set to `+1999-9999` and `MaskPlaceholder` as space (the placeholder represents the characters the user can change on runtime) will be displayed as follows:
-
-![TextBoxMask animation](../resources/images/Extensions/TextBoxMask.gif)
-
-## Text regex
-
-The `Regex` attached property allows text validation using a regular expression or using built in validation types.
-
-The developer adds a regular expression to validate the TextBox Text against the regular expression throw Regex property or from selecting ValidationType property on the TextBox.
-
-The validation has 3 modes ([`TextBoxExtensions.ValidationMode`](/dotnet/api/microsoft.toolkit.uwp.ui.TextBoxExtensions.ValidationMode)):
-
-1) `Normal` (Default): this mode will set the `IsValid` attached property to `false` or `true` whether the `TextBox` text is a valid or not against the `Regex` property.
-2) `Forced`: this mode sets the `IsValid` property and removes the `TextBox` text if not valid when the `TextBox` loses focus.
-3) `Dynamic`: this mode extends `Normal` and if is the newest input of the `TextBox` is invalid, the character which is invalid will be deleted. Note that the [`TextBoxExtensions.ValidationType`](/dotnet/api/microsoft.toolkit.uwp.ui.TextBoxExtensions.ValidationType) values `Email` and `PhoneNumber` don't support this validation mode. If you set the validation mode to `Dynamic`, `Normal` is selected automatically instead.
-
-### Syntax
-
-```xaml
-
-
-
-
-
-
-
-```
-
-### Sample output
-
-Here is a `TextBox` with `ValidationType="Email"`, with the validation occurring when `TextChanged` is raised:
-
-![TextBoxRegex animation](../resources/images/Extensions/TextBoxRegex.gif)
+> [!SAMPLE TextBoxMaskSample]
## Surface Dial support
-The `SurfaceDialOptions` property adds features from the Surface Dial control to a numeric `TextBox`. This enables you to modify the content of the `TextBox` when rotating the Surface Dial (increasing or decreasing the value) and optionally go to the next focus element by tapping the Surface Dial click button. The various options are set through the [`SurfaceDialOptions`](/dotnet/api/microsoft.toolkit.uwp.ui.SurfaceDialOptions) type, which is declared in XAML and used to set all the values to use for a given `TextBox` from a single place.
-
-### Syntax
-
-```xaml
-
-
-
-
-
-
-
-
-```
-
-### Sample output
-
+The `SurfaceDialOptions` property adds features from the Surface Dial control to a numeric `TextBox`. This enables you to modify the content of the `TextBox` when rotating the Surface Dial (increasing or decreasing the value) and optionally go to the next focus element by tapping the Surface Dial click button. The various options are set through the `SurfaceDialOptions` type, which is declared in XAML and used to set all the values to use for a given `TextBox` from a single place.
Here is an example of the visual result when scrolling on a Surface Dial over a `TextBox`:
-![SurfaceDialTextbox animation](../resources/images/Extensions/SurfaceDialTextbox.gif)
+> [!SAMPLE SurfaceDialOptionsSample]
## Examples
diff --git a/components/Extensions/samples/TextBoxExtensions/RegexSample.xaml b/components/Extensions/samples/TextBoxExtensions/RegexSample.xaml
new file mode 100644
index 00000000..09694cf3
--- /dev/null
+++ b/components/Extensions/samples/TextBoxExtensions/RegexSample.xaml
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/Extensions/samples/TextBoxExtensions/RegexSample.xaml.cs b/components/Extensions/samples/TextBoxExtensions/RegexSample.xaml.cs
new file mode 100644
index 00000000..b0b47d5c
--- /dev/null
+++ b/components/Extensions/samples/TextBoxExtensions/RegexSample.xaml.cs
@@ -0,0 +1,14 @@
+// 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.
+
+namespace ExtensionsExperiment.Samples.TextBoxExtensions;
+
+[ToolkitSample(id: nameof(RegexSample), "Regex Extension", description: "A sample for showing how to use the Regex Extension.")]
+public sealed partial class RegexSample : Page
+{
+ public RegexSample()
+ {
+ this.InitializeComponent();
+ }
+}
diff --git a/components/Extensions/samples/TextBoxExtensions/SurfaceDialOptionsSample.xaml b/components/Extensions/samples/TextBoxExtensions/SurfaceDialOptionsSample.xaml
new file mode 100644
index 00000000..9f31f71a
--- /dev/null
+++ b/components/Extensions/samples/TextBoxExtensions/SurfaceDialOptionsSample.xaml
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
diff --git a/components/Extensions/samples/TextBoxExtensions/SurfaceDialOptionsSample.xaml.cs b/components/Extensions/samples/TextBoxExtensions/SurfaceDialOptionsSample.xaml.cs
new file mode 100644
index 00000000..408a6eca
--- /dev/null
+++ b/components/Extensions/samples/TextBoxExtensions/SurfaceDialOptionsSample.xaml.cs
@@ -0,0 +1,14 @@
+// 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.
+
+namespace ExtensionsExperiment.Samples.TextBoxExtensions;
+
+[ToolkitSample(id: nameof(SurfaceDialOptionsSample), "SurfaceDialOptions Extension", description: "A sample for showing how to use the SurfaceDialOptions Extension.")]
+public sealed partial class SurfaceDialOptionsSample : Page
+{
+ public SurfaceDialOptionsSample()
+ {
+ this.InitializeComponent();
+ }
+}
diff --git a/components/Extensions/samples/TextBoxExtensions/TextBoxMaskSample.xaml b/components/Extensions/samples/TextBoxExtensions/TextBoxMaskSample.xaml
new file mode 100644
index 00000000..b80223e1
--- /dev/null
+++ b/components/Extensions/samples/TextBoxExtensions/TextBoxMaskSample.xaml
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/Extensions/samples/TextBoxExtensions/TextBoxMaskSample.xaml.cs b/components/Extensions/samples/TextBoxExtensions/TextBoxMaskSample.xaml.cs
new file mode 100644
index 00000000..8c5ff793
--- /dev/null
+++ b/components/Extensions/samples/TextBoxExtensions/TextBoxMaskSample.xaml.cs
@@ -0,0 +1,14 @@
+// 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.
+
+namespace ExtensionsExperiment.Samples.TextBoxExtensions;
+
+[ToolkitSample(id: nameof(TextBoxMaskSample), "TextBoxMask Extension", description: "A sample for showing how to use the TextBoxMask Extension.")]
+public sealed partial class TextBoxMaskSample : Page
+{
+ public TextBoxMaskSample()
+ {
+ this.InitializeComponent();
+ }
+}
diff --git a/components/Extensions/samples/TransformExtensions.md b/components/Extensions/samples/TransformExtensions.md
index 04cdcb66..0f6ec09f 100644
--- a/components/Extensions/samples/TransformExtensions.md
+++ b/components/Extensions/samples/TransformExtensions.md
@@ -6,10 +6,10 @@ keywords: Extensions, matrix, transform, rotate, skew, scale, RotateTransform, V
dev_langs:
- csharp
category: Extensions
-subcategory: Media
+subcategory: Miscellaneous
discussion-id: 0
issue-id: 0
icon: Assets/Extensions.png
---
-The Transform Extensions ([RotateTransformExtensions](/dotnet/api/microsoft.toolkit.uwp.ui.extensions.rotatetransformextensions), [ScaleTransformExtensions](/dotnet/api/microsoft.toolkit.uwp.ui.extensions.scaletransformextensions), [SkewTransformExtensions](/dotnet/api/microsoft.toolkit.uwp.ui.extensions.skewtransformextensions), and [TranslateTransformExtensions](/dotnet/api/microsoft.toolkit.uwp.ui.extensions.translatetransformextensions)) provide the ability to retrieve the Matrix of the transform. This is similar to the `Value` property on the [System.Windows.Media.Transform](/dotnet/api/system.windows.media.transform) class.
+The Transform Extensions (`RotateTransformExtensions`, `ScaleTransformExtensions`, `SkewTransformExtensions`, and `TranslateTransformExtensions`) provide the ability to retrieve the Matrix of the transform. This is similar to the `Value` property on the [System.Windows.Media.Transform](https://learn.microsoft.com/dotnet/api/system.windows.media.transform) class.
diff --git a/components/Extensions/samples/UIElementExtensions.md b/components/Extensions/samples/UIElementExtensions.md
index 111b7e70..3ea38816 100644
--- a/components/Extensions/samples/UIElementExtensions.md
+++ b/components/Extensions/samples/UIElementExtensions.md
@@ -6,7 +6,7 @@ keywords: windows 10, uwp, windows community toolkit, uwp community toolkit, uwp
dev_langs:
- csharp
category: Extensions
-subcategory: Layout
+subcategory: Controls
discussion-id: 0
issue-id: 0
icon: Assets/Extensions.png
diff --git a/components/Extensions/samples/VisualExtensions.md b/components/Extensions/samples/VisualExtensions.md
index b56ba1fc..0c03ffbd 100644
--- a/components/Extensions/samples/VisualExtensions.md
+++ b/components/Extensions/samples/VisualExtensions.md
@@ -12,7 +12,7 @@ issue-id: 0
icon: Assets/Extensions.png
---
-The [`VisualExtensions`](/dotnet/api/microsoft.toolkit.uwp.ui.VisualExtensions) type allows developers to modify common properties of the [`Visual`](/uwp/api/Windows.UI.Composition.Visual) object of an element directly in XAML.
+The `VisualExtensions` type allows developers to modify common properties of the [`Visual`](https://learn.microsoft.com/uwp/api/Windows.UI.Composition.Visual) object of an element directly in XAML.
## Syntax
@@ -34,7 +34,7 @@ Here is an example of how the `VisualExtensions` type can be used to directly se
```
> [!NOTE]
-> The `NormalizedCenterPoint` will also use a [Composition Expression animation](/uwp/api/windows.ui.composition.expressionanimation) behind the scenes to ensure the center point value being set is kept in sync with the size of the associated `Visual` object. As with all composition animations, this animation runs on the compositor thread and doesn't add any load to the UI thread of the application.
+> The `NormalizedCenterPoint` will also use a [Composition Expression animation](https://learn.microsoft.com/uwp/api/windows.ui.composition.expressionanimation) behind the scenes to ensure the center point value being set is kept in sync with the size of the associated `Visual` object. As with all composition animations, this animation runs on the compositor thread and doesn't add any load to the UI thread of the application.
## Examples
diff --git a/components/Extensions/src/CommunityToolkit.WinUI.Extensions.csproj b/components/Extensions/src/CommunityToolkit.WinUI.Extensions.csproj
index 9891b024..896c4820 100644
--- a/components/Extensions/src/CommunityToolkit.WinUI.Extensions.csproj
+++ b/components/Extensions/src/CommunityToolkit.WinUI.Extensions.csproj
@@ -1,4 +1,6 @@
-
+
+
+
ExtensionsThis package contains Extensions.
@@ -6,13 +8,21 @@
CommunityToolkit.WinUI.ExtensionsRnstrue
+ ReadMe.md
-
+
+ True
+ \
+
+
+
+
+ all
diff --git a/components/Extensions/src/ListViewBase/ListViewExtensions.SmoothScrollIntoView.cs b/components/Extensions/src/ListViewBase/ListViewExtensions.SmoothScrollIntoView.cs
index a9d5df0e..8e529f50 100644
--- a/components/Extensions/src/ListViewBase/ListViewExtensions.SmoothScrollIntoView.cs
+++ b/components/Extensions/src/ListViewBase/ListViewExtensions.SmoothScrollIntoView.cs
@@ -180,13 +180,13 @@ public static async Task SmoothScrollIntoViewWithIndexAsync(this ListViewBase li
/// The data item to bring into view
/// Set the item placement after scrolling
/// Set true to disable animation
- /// Set true to disable scrolling when the corresponding item is in view
+ /// Set true to disable scrolling when the corresponding item is in view
/// Adds additional horizontal offset
/// Adds additional vertical offset
/// Returns that completes after scrolling
- public static async Task SmoothScrollIntoViewWithItemAsync(this ListViewBase listViewBase, object item, ScrollItemPlacement itemPlacement = ScrollItemPlacement.Default, bool disableAnimation = false, bool scrollIfVisibile = true, int additionalHorizontalOffset = 0, int additionalVerticalOffset = 0)
+ public static async Task SmoothScrollIntoViewWithItemAsync(this ListViewBase listViewBase, object item, ScrollItemPlacement itemPlacement = ScrollItemPlacement.Default, bool disableAnimation = false, bool scrollIfVisible = true, int additionalHorizontalOffset = 0, int additionalVerticalOffset = 0)
{
- await SmoothScrollIntoViewWithIndexAsync(listViewBase, listViewBase.Items.IndexOf(item), itemPlacement, disableAnimation, scrollIfVisibile, additionalHorizontalOffset, additionalVerticalOffset);
+ await SmoothScrollIntoViewWithIndexAsync(listViewBase, listViewBase.Items.IndexOf(item), itemPlacement, disableAnimation, scrollIfVisible, additionalHorizontalOffset, additionalVerticalOffset);
}
///
diff --git a/components/Extensions/src/ReadMe.md b/components/Extensions/src/ReadMe.md
new file mode 100644
index 00000000..9e629c24
--- /dev/null
+++ b/components/Extensions/src/ReadMe.md
@@ -0,0 +1,55 @@
+
+# Windows Community Toolkit - Extensions
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following in the `CommunityToolkit.WinUI` namespace:
+
+- AttachedDropShadow
+- AttachedShadowBase
+- BitmapIconExtension
+- BitmapIconSourceExtension
+- DependencyObjectExtensions
+- DispatcherQueueExtensions
+- DispatcherQueueTimerExtensions
+- EnumValuesExtension
+- FontIconExtension
+- FontIconSourceExtension
+- FrameworkElementExtensions
+- HyperlinkExtensions
+- ListViewExtensions
+- MatrixExtensions
+- NullableBoolExtension
+- OnDeviceExtension
+- PointExtensions
+- RectExtensions
+- RotateTransformExtensions
+- ScaleTransformExtensions
+- ScrollViewerExtensions
+- SizeExtensions
+- SkewTransformExtensions
+- StringExtensions
+- SurfaceDialOptions
+- TextBoxExtensions
+- TranslateTransformExtensions
+- TypedEventHandlerExtensions
+- UIElementExtensions
+- VisualExtensions
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Extensions` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Extensions` package.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/HeaderedControls/samples/HeaderedContentControlComplexSample.xaml b/components/HeaderedControls/samples/HeaderedContentControlComplexSample.xaml
index 0168b9e5..1e9f7505 100644
--- a/components/HeaderedControls/samples/HeaderedContentControlComplexSample.xaml
+++ b/components/HeaderedControls/samples/HeaderedContentControlComplexSample.xaml
@@ -1,5 +1,5 @@
-
diff --git a/components/HeaderedControls/samples/HeaderedContentControlComplexSample.xaml.cs b/components/HeaderedControls/samples/HeaderedContentControlComplexSample.xaml.cs
index 288c6424..c7582a84 100644
--- a/components/HeaderedControls/samples/HeaderedContentControlComplexSample.xaml.cs
+++ b/components/HeaderedControls/samples/HeaderedContentControlComplexSample.xaml.cs
@@ -4,7 +4,7 @@
using CommunityToolkit.WinUI.Controls;
-namespace HeaderedContentControlExperiment.Samples;
+namespace HeaderedControlsExperiment.Samples;
[ToolkitSample(id: nameof(HeaderedContentControlComplexSample), "HeaderedContentControl Complex Sample", description: $"A sample for showing how to create and use a {nameof(HeaderedContentControl)} control with complex content.")]
public sealed partial class HeaderedContentControlComplexSample : Page
diff --git a/components/HeaderedControls/samples/HeaderedContentControlImageSample.xaml b/components/HeaderedControls/samples/HeaderedContentControlImageSample.xaml
index 6754cbd5..5a70df43 100644
--- a/components/HeaderedControls/samples/HeaderedContentControlImageSample.xaml
+++ b/components/HeaderedControls/samples/HeaderedContentControlImageSample.xaml
@@ -1,5 +1,5 @@
-
diff --git a/components/HeaderedControls/samples/HeaderedContentControlImageSample.xaml.cs b/components/HeaderedControls/samples/HeaderedContentControlImageSample.xaml.cs
index 049c59cb..bdd20584 100644
--- a/components/HeaderedControls/samples/HeaderedContentControlImageSample.xaml.cs
+++ b/components/HeaderedControls/samples/HeaderedContentControlImageSample.xaml.cs
@@ -4,7 +4,7 @@
using CommunityToolkit.WinUI.Controls;
-namespace HeaderedContentControlExperiment.Samples;
+namespace HeaderedControlsExperiment.Samples;
[ToolkitSample(id: nameof(HeaderedContentControlImageSample), "HeaderedContentControl Image Sample", description: $"A sample for showing how to create and use a {nameof(HeaderedContentControl)} control with image content.")]
public sealed partial class HeaderedContentControlImageSample : Page
diff --git a/components/HeaderedControls/samples/HeaderedContentControlSample.xaml b/components/HeaderedControls/samples/HeaderedContentControlSample.xaml
index 7c5dc54a..93a5001a 100644
--- a/components/HeaderedControls/samples/HeaderedContentControlSample.xaml
+++ b/components/HeaderedControls/samples/HeaderedContentControlSample.xaml
@@ -1,5 +1,5 @@
-
diff --git a/components/HeaderedControls/samples/HeaderedContentControlSample.xaml.cs b/components/HeaderedControls/samples/HeaderedContentControlSample.xaml.cs
index e38abd03..7e3be4c1 100644
--- a/components/HeaderedControls/samples/HeaderedContentControlSample.xaml.cs
+++ b/components/HeaderedControls/samples/HeaderedContentControlSample.xaml.cs
@@ -4,7 +4,7 @@
using CommunityToolkit.WinUI.Controls;
-namespace HeaderedContentControlExperiment.Samples;
+namespace HeaderedControlsExperiment.Samples;
[ToolkitSample(id: nameof(HeaderedContentControlSample), "HeaderedContentControl", description: $"A sample for showing how to create and use a {nameof(HeaderedContentControl)} control.")]
public sealed partial class HeaderedContentControlSample : Page
diff --git a/components/HeaderedControls/samples/HeaderedContentControlTextSample.xaml b/components/HeaderedControls/samples/HeaderedContentControlTextSample.xaml
index 6cb5d85e..d551d010 100644
--- a/components/HeaderedControls/samples/HeaderedContentControlTextSample.xaml
+++ b/components/HeaderedControls/samples/HeaderedContentControlTextSample.xaml
@@ -1,5 +1,5 @@
-
diff --git a/components/HeaderedControls/samples/HeaderedContentControlTextSample.xaml.cs b/components/HeaderedControls/samples/HeaderedContentControlTextSample.xaml.cs
index b5218250..b4540c06 100644
--- a/components/HeaderedControls/samples/HeaderedContentControlTextSample.xaml.cs
+++ b/components/HeaderedControls/samples/HeaderedContentControlTextSample.xaml.cs
@@ -4,7 +4,7 @@
using CommunityToolkit.WinUI.Controls;
-namespace HeaderedContentControlExperiment.Samples;
+namespace HeaderedControlsExperiment.Samples;
[ToolkitSample(id: nameof(HeaderedContentControlTextSample), "HeaderedContentControl Text Sample", description: $"A sample for showing how to create and use a {nameof(HeaderedContentControl)} control with text content.")]
public sealed partial class HeaderedContentControlTextSample : Page
diff --git a/components/HeaderedControls/samples/HeaderedControls.Samples.csproj b/components/HeaderedControls/samples/HeaderedControls.Samples.csproj
index b433cdf3..445cc82d 100644
--- a/components/HeaderedControls/samples/HeaderedControls.Samples.csproj
+++ b/components/HeaderedControls/samples/HeaderedControls.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
HeaderedControls
diff --git a/components/HeaderedControls/samples/HeaderedItemsControl.md b/components/HeaderedControls/samples/HeaderedItemsControl.md
index 00a769b1..1ebcc1fe 100644
--- a/components/HeaderedControls/samples/HeaderedItemsControl.md
+++ b/components/HeaderedControls/samples/HeaderedItemsControl.md
@@ -11,20 +11,10 @@ discussion-id: 0
issue-id: 0
icon: Assets/HeaderedItemsControl.png
---
-The `Header` property can be any object and you can use the `HeaderTemplate` to specify a custom look to the header. Similiar objects can be set for the `Footer` and `FooterTemplate`.
+
+The `Header` property can be any object and you can use the `HeaderTemplate` to specify a custom look to the header. Similar objects can be set for the `Footer` and `FooterTemplate`.
> [!NOTE]
> Setting the `Background`, `BorderBrush` and `BorderThickness` properties will not have any effect on the HeaderedItemsControl. This is to maintain the same functionality as the ItemsControl.
> [!Sample HeaderedItemsControlSample]
-
-## Syntax
-
-```xaml
-
-
-
-
-
-```
\ No newline at end of file
diff --git a/components/HeaderedControls/samples/HeaderedItemsControlSample.xaml b/components/HeaderedControls/samples/HeaderedItemsControlSample.xaml
index 5d32d394..449d34bf 100644
--- a/components/HeaderedControls/samples/HeaderedItemsControlSample.xaml
+++ b/components/HeaderedControls/samples/HeaderedItemsControlSample.xaml
@@ -1,10 +1,10 @@
-
diff --git a/components/HeaderedControls/samples/HeaderedItemsControlSample.xaml.cs b/components/HeaderedControls/samples/HeaderedItemsControlSample.xaml.cs
index 86e2cefa..f3d038bb 100644
--- a/components/HeaderedControls/samples/HeaderedItemsControlSample.xaml.cs
+++ b/components/HeaderedControls/samples/HeaderedItemsControlSample.xaml.cs
@@ -4,7 +4,7 @@
using CommunityToolkit.WinUI.Controls;
-namespace HeaderedItemsControlExperiment.Samples;
+namespace HeaderedControlsExperiment.Samples;
[ToolkitSample(id: nameof(HeaderedItemsControlSample), "HeaderedItemsControl", description: $"A sample for showing how to create and use a {nameof(HeaderedItemsControl)} control.")]
public sealed partial class HeaderedItemsControlSample : Page
diff --git a/components/HeaderedControls/samples/HeaderedTreeView.md b/components/HeaderedControls/samples/HeaderedTreeView.md
index d610bf79..7d87b4a3 100644
--- a/components/HeaderedControls/samples/HeaderedTreeView.md
+++ b/components/HeaderedControls/samples/HeaderedTreeView.md
@@ -1,6 +1,6 @@
---
title: HeaderedTreeView
-author: michaelhawker
+author: michael-hawker
description: The HeaderedTreeView allows a treeview to be displayed with a specified header.
keywords: HeaderedTreeView, Control, Layout, treeview
dev_langs:
@@ -11,18 +11,7 @@ discussion-id: 0
issue-id: 0
icon: Assets/HeaderedTreeView.png
---
-The `Header` property can be any object and you can use the `HeaderTemplate` to specify a custom look to the header. Similiar objects can be set for the `Footer` and `FooterTemplate`.
+The `Header` property can be any object and you can use the `HeaderTemplate` to specify a custom look to the header. Similar objects can be set for the `Footer` and `FooterTemplate`.
> [!Sample HeaderedTreeViewSample]
-
-## Syntax
-
-```xaml
-
-
-
-
-
-```
\ No newline at end of file
diff --git a/components/HeaderedControls/samples/HeaderedTreeViewSample.xaml b/components/HeaderedControls/samples/HeaderedTreeViewSample.xaml
index 15b3aec8..a1b1dae0 100644
--- a/components/HeaderedControls/samples/HeaderedTreeViewSample.xaml
+++ b/components/HeaderedControls/samples/HeaderedTreeViewSample.xaml
@@ -1,10 +1,10 @@
-
diff --git a/components/HeaderedControls/samples/HeaderedTreeViewSample.xaml.cs b/components/HeaderedControls/samples/HeaderedTreeViewSample.xaml.cs
index 9098ed18..572e1da7 100644
--- a/components/HeaderedControls/samples/HeaderedTreeViewSample.xaml.cs
+++ b/components/HeaderedControls/samples/HeaderedTreeViewSample.xaml.cs
@@ -4,7 +4,7 @@
using CommunityToolkit.WinUI.Controls;
-namespace HeaderedItemsControlExperiment.Samples;
+namespace HeaderedControlsExperiment.Samples;
[ToolkitSample(id: nameof(HeaderedTreeViewSample), "HeaderedTreeView", description: $"A sample for showing how to create and use a {nameof(HeaderedTreeView)} control.")]
public sealed partial class HeaderedTreeViewSample : Page
diff --git a/components/HeaderedControls/src/CommunityToolkit.WinUI.Controls.HeaderedControls.csproj b/components/HeaderedControls/src/CommunityToolkit.WinUI.Controls.HeaderedControls.csproj
index dd63e8ce..376b6116 100644
--- a/components/HeaderedControls/src/CommunityToolkit.WinUI.Controls.HeaderedControls.csproj
+++ b/components/HeaderedControls/src/CommunityToolkit.WinUI.Controls.HeaderedControls.csproj
@@ -1,15 +1,25 @@
-
+
+
+
HeaderedControlsThis package contains HeaderedControls.CommunityToolkit.WinUI.Controls.HeaderedControlsRns
+ ReadMe.md
+
+
+ True
+ \
+
+
+
$(PackageIdPrefix).$(PackageIdVariant).Controls.$(ToolkitComponentName)
diff --git a/components/HeaderedControls/src/ReadMe.md b/components/HeaderedControls/src/ReadMe.md
new file mode 100644
index 00000000..499ce8b1
--- /dev/null
+++ b/components/HeaderedControls/src/ReadMe.md
@@ -0,0 +1,40 @@
+
+# Windows Community Toolkit - HeaderedControls
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following controls in the `CommunityToolkit.WinUI.Controls` namespace:
+
+- HeaderedContentControl
+- HeaderedItemsControl
+- HeaderedTreeView
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Controls.HeaderedControls` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Controls.HeaderedControls` package.
+
+## WinUI Resources (UWP)
+
+For UWP projects, the WinUI 2 reference requires you include the WinUI XAML Resources in your App.xaml file:
+
+```xml
+
+
+
+```
+
+See [Getting Started in WinUI 2](https://learn.microsoft.com/windows/apps/winui/winui2/getting-started) for more information.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/HeaderedControls/tests/HeaderedContentControlTestClass.cs b/components/HeaderedControls/tests/HeaderedContentControlTestClass.cs
index 56329212..2f2468c4 100644
--- a/components/HeaderedControls/tests/HeaderedContentControlTestClass.cs
+++ b/components/HeaderedControls/tests/HeaderedContentControlTestClass.cs
@@ -10,95 +10,13 @@ namespace HeaderedControls.Tests;
[TestClass]
public partial class HeaderedContentControlTestClass : VisualUITestBase
{
- // If you don't need access to UI objects directly or async code, use this pattern.
- [TestMethod]
- public void SimpleSynchronousExampleTest()
- {
- var assembly = typeof(HeaderedContentControl).Assembly;
- var type = assembly.GetType(typeof(HeaderedContentControl).FullName ?? string.Empty);
-
- Assert.IsNotNull(type, "Could not find HeaderedContentControl type.");
- Assert.AreEqual(typeof(HeaderedContentControl), type, "Type of HeaderedContentControl does not match expected type.");
- }
-
// The UIThreadTestMethod can also easily grab a XAML Page for us by passing its type as a parameter.
// This lets us actually test a control as it would behave within an actual application.
// The page will already be loaded by the time your test is called.
[UIThreadTestMethod]
public void SimpleUIExamplePageTest(HeaderedContentControlTestPage page)
{
- // You can use the Toolkit Visual Tree helpers here to find the component by type or name:
- var component = page.FindDescendant();
-
- Assert.IsNotNull(component);
-
- var componentByName = page.FindDescendant("HeaderedContentControl");
-
- Assert.IsNotNull(componentByName);
- }
-
- // You can still do async work with a UIThreadTestMethod as well.
- [UIThreadTestMethod]
- public async Task SimpleAsyncUIExamplePageTest(HeaderedContentControlTestPage page)
- {
- // This helper can be used to wait for a rendering pass to complete.
- await CompositionTargetHelper.ExecuteAfterCompositionRenderingAsync(() => { });
-
var component = page.FindDescendant();
-
Assert.IsNotNull(component);
}
-
- //// ----------------------------- ADVANCED TEST SCENARIOS -----------------------------
-
- // If you need to use DataRow, you can use this pattern with the UI dispatch still.
- // Otherwise, checkout the UIThreadTestMethod attribute above.
- // See https://github.com/CommunityToolkit/Labs-Windows/issues/186
- [TestMethod]
- public async Task ComplexAsyncUIExampleTest()
- {
- await EnqueueAsync(() =>
- {
- var component = new HeaderedContentControl();
- Assert.IsNotNull(component);
- });
- }
-
- // If you want to load other content not within a XAML page using the UIThreadTestMethod above.
- // Then you can do that using the Load/UnloadTestContentAsync methods.
- [TestMethod]
- public async Task ComplexAsyncLoadUIExampleTest()
- {
- await EnqueueAsync(async () =>
- {
- var component = new HeaderedContentControl();
- Assert.IsNotNull(component);
- Assert.IsFalse(component.IsLoaded);
-
- await LoadTestContentAsync(component);
-
- Assert.IsTrue(component.IsLoaded);
-
- await UnloadTestContentAsync(component);
-
- Assert.IsFalse(component.IsLoaded);
- });
- }
-
- // You can still use the UIThreadTestMethod to remove the extra layer for the dispatcher as well:
- [UIThreadTestMethod]
- public async Task ComplexAsyncLoadUIExampleWithoutDispatcherTest()
- {
- var component = new HeaderedContentControl();
- Assert.IsNotNull(component);
- Assert.IsFalse(component.IsLoaded);
-
- await LoadTestContentAsync(component);
-
- Assert.IsTrue(component.IsLoaded);
-
- await UnloadTestContentAsync(component);
-
- Assert.IsFalse(component.IsLoaded);
- }
}
diff --git a/components/HeaderedControls/tests/HeaderedItemsControlTestClass.cs b/components/HeaderedControls/tests/HeaderedItemsControlTestClass.cs
index d7213490..2d101db9 100644
--- a/components/HeaderedControls/tests/HeaderedItemsControlTestClass.cs
+++ b/components/HeaderedControls/tests/HeaderedItemsControlTestClass.cs
@@ -10,103 +10,10 @@ namespace HeaderedControls.Tests;
[TestClass]
public partial class HeaderedItemsControlTestClass : VisualUITestBase
{
- // If you don't need access to UI objects directly or async code, use this pattern.
- [TestMethod]
- public void SimpleSynchronousExampleTest()
- {
- var assembly = typeof(HeaderedItemsControl).Assembly;
- var type = assembly.GetType(typeof(HeaderedItemsControl).FullName ?? string.Empty);
-
- Assert.IsNotNull(type, "Could not find HeaderedItemsControl type.");
- Assert.AreEqual(typeof(HeaderedItemsControl), type, "Type of HeaderedItemsControl does not match expected type.");
- }
-
- // The UIThreadTestMethod automatically dispatches to the UI for us to work with UI objects.
- [UIThreadTestMethod]
- public void SimpleUIAttributeExampleTest()
- {
- var component = new HeaderedItemsControl();
- Assert.IsNotNull(component);
- }
-
- // The UIThreadTestMethod can also easily grab a XAML Page for us by passing its type as a parameter.
- // This lets us actually test a control as it would behave within an actual application.
- // The page will already be loaded by the time your test is called.
[UIThreadTestMethod]
public void SimpleUIExamplePageTest(HeaderedItemsControlTestPage page)
{
- // You can use the Toolkit Visual Tree helpers here to find the component by type or name:
- var component = page.FindDescendant();
-
- Assert.IsNotNull(component);
-
- var componentByName = page.FindDescendant("HeaderedItemsControl");
-
- Assert.IsNotNull(componentByName);
- }
-
- // You can still do async work with a UIThreadTestMethod as well.
- [UIThreadTestMethod]
- public async Task SimpleAsyncUIExamplePageTest(HeaderedItemsControlTestPage page)
- {
- // This helper can be used to wait for a rendering pass to complete.
- await CompositionTargetHelper.ExecuteAfterCompositionRenderingAsync(() => { });
-
var component = page.FindDescendant();
-
Assert.IsNotNull(component);
}
-
- //// ----------------------------- ADVANCED TEST SCENARIOS -----------------------------
-
- // If you need to use DataRow, you can use this pattern with the UI dispatch still.
- // Otherwise, checkout the UIThreadTestMethod attribute above.
- // See https://github.com/CommunityToolkit/Labs-Windows/issues/186
- [TestMethod]
- public async Task ComplexAsyncUIExampleTest()
- {
- await EnqueueAsync(() =>
- {
- var component = new HeaderedItemsControl();
- Assert.IsNotNull(component);
- });
- }
-
- // If you want to load other content not within a XAML page using the UIThreadTestMethod above.
- // Then you can do that using the Load/UnloadTestContentAsync methods.
- [TestMethod]
- public async Task ComplexAsyncLoadUIExampleTest()
- {
- await EnqueueAsync(async () =>
- {
- var component = new HeaderedItemsControl();
- Assert.IsNotNull(component);
- Assert.IsFalse(component.IsLoaded);
-
- await LoadTestContentAsync(component);
-
- Assert.IsTrue(component.IsLoaded);
-
- await UnloadTestContentAsync(component);
-
- Assert.IsFalse(component.IsLoaded);
- });
- }
-
- // You can still use the UIThreadTestMethod to remove the extra layer for the dispatcher as well:
- [UIThreadTestMethod]
- public async Task ComplexAsyncLoadUIExampleWithoutDispatcherTest()
- {
- var component = new HeaderedItemsControl();
- Assert.IsNotNull(component);
- Assert.IsFalse(component.IsLoaded);
-
- await LoadTestContentAsync(component);
-
- Assert.IsTrue(component.IsLoaded);
-
- await UnloadTestContentAsync(component);
-
- Assert.IsFalse(component.IsLoaded);
- }
}
diff --git a/components/HeaderedControls/tests/HeaderedTreeViewTestClass.cs b/components/HeaderedControls/tests/HeaderedTreeViewTestClass.cs
index 61caf983..2fb2b2ba 100644
--- a/components/HeaderedControls/tests/HeaderedTreeViewTestClass.cs
+++ b/components/HeaderedControls/tests/HeaderedTreeViewTestClass.cs
@@ -10,103 +10,10 @@ namespace HeaderedControls.Tests;
[TestClass]
public partial class HeaderedTreeViewTestClass : VisualUITestBase
{
- // If you don't need access to UI objects directly or async code, use this pattern.
- [TestMethod]
- public void SimpleSynchronousExampleTest()
- {
- var assembly = typeof(HeaderedTreeView).Assembly;
- var type = assembly.GetType(typeof(HeaderedTreeView).FullName ?? string.Empty);
-
- Assert.IsNotNull(type, "Could not find HeaderedTreeView type.");
- Assert.AreEqual(typeof(HeaderedTreeView), type, "Type of HeaderedTreeView does not match expected type.");
- }
-
- // The UIThreadTestMethod automatically dispatches to the UI for us to work with UI objects.
- [UIThreadTestMethod]
- public void SimpleUIAttributeExampleTest()
- {
- var component = new HeaderedTreeView();
- Assert.IsNotNull(component);
- }
-
- // The UIThreadTestMethod can also easily grab a XAML Page for us by passing its type as a parameter.
- // This lets us actually test a control as it would behave within an actual application.
- // The page will already be loaded by the time your test is called.
[UIThreadTestMethod]
public void SimpleUIExamplePageTest(HeaderedTreeViewTestPage page)
{
- // You can use the Toolkit Visual Tree helpers here to find the component by type or name:
- var component = page.FindDescendant();
-
- Assert.IsNotNull(component);
-
- var componentByName = page.FindDescendant("HeaderedTreeView");
-
- Assert.IsNotNull(componentByName);
- }
-
- // You can still do async work with a UIThreadTestMethod as well.
- [UIThreadTestMethod]
- public async Task SimpleAsyncUIExamplePageTest(HeaderedTreeViewTestPage page)
- {
- // This helper can be used to wait for a rendering pass to complete.
- await CompositionTargetHelper.ExecuteAfterCompositionRenderingAsync(() => { });
-
var component = page.FindDescendant();
-
Assert.IsNotNull(component);
}
-
- //// ----------------------------- ADVANCED TEST SCENARIOS -----------------------------
-
- // If you need to use DataRow, you can use this pattern with the UI dispatch still.
- // Otherwise, checkout the UIThreadTestMethod attribute above.
- // See https://github.com/CommunityToolkit/Labs-Windows/issues/186
- [TestMethod]
- public async Task ComplexAsyncUIExampleTest()
- {
- await EnqueueAsync(() =>
- {
- var component = new HeaderedTreeView();
- Assert.IsNotNull(component);
- });
- }
-
- // If you want to load other content not within a XAML page using the UIThreadTestMethod above.
- // Then you can do that using the Load/UnloadTestContentAsync methods.
- [TestMethod]
- public async Task ComplexAsyncLoadUIExampleTest()
- {
- await EnqueueAsync(async () =>
- {
- var component = new HeaderedTreeView();
- Assert.IsNotNull(component);
- Assert.IsFalse(component.IsLoaded);
-
- await LoadTestContentAsync(component);
-
- Assert.IsTrue(component.IsLoaded);
-
- await UnloadTestContentAsync(component);
-
- Assert.IsFalse(component.IsLoaded);
- });
- }
-
- // You can still use the UIThreadTestMethod to remove the extra layer for the dispatcher as well:
- [UIThreadTestMethod]
- public async Task ComplexAsyncLoadUIExampleWithoutDispatcherTest()
- {
- var component = new HeaderedTreeView();
- Assert.IsNotNull(component);
- Assert.IsFalse(component.IsLoaded);
-
- await LoadTestContentAsync(component);
-
- Assert.IsTrue(component.IsLoaded);
-
- await UnloadTestContentAsync(component);
-
- Assert.IsFalse(component.IsLoaded);
- }
}
diff --git a/components/Helpers/samples/CameraHelper.md b/components/Helpers/samples/CameraHelper.md
index 9cbff3dd..1e046276 100644
--- a/components/Helpers/samples/CameraHelper.md
+++ b/components/Helpers/samples/CameraHelper.md
@@ -15,7 +15,7 @@ icon: Assets/CameraHelper.png
The helper currently shows camera frame sources that support color video preview or video record streams.
> [!IMPORTANT]
-> Make sure you have the [webcam capability](/windows/uwp/packaging/app-capability-declarations#device-capabilities) enabled for your app to access the device's camera.
+> Make sure you have the [webcam capability](https://learn.microsoft.com/windows/uwp/packaging/app-capability-declarations#device-capabilities) enabled for your app to access the device's camera.
> [!Sample CameraHelperSample]
@@ -50,12 +50,11 @@ private void CameraHelper_FrameArrived(object sender, FrameEventArgs e)
}
```
-
## Cleaning up resources
As a developer, you will need to make sure the CameraHelper resources are cleaned up when appropriate. For example, if the CameraHelper is only used on one page, make sure to clean up the CameraHelper when navigating away from the page.
-Likewise, make sure to handle app [suspending](/windows/uwp/launch-resume/suspend-an-app) and [resuming](/windows/uwp/launch-resume/resume-an-app) - CameraHelper should be cleaned up when suspending and re-initialized when resuming.
+Likewise, make sure to handle app [suspending](https://learn.microsoft.com/windows/uwp/launch-resume/suspend-an-app) and [resuming](https://learn.microsoft.com/windows/uwp/launch-resume/resume-an-app) - CameraHelper should be cleaned up when suspending and re-initialized when resuming.
Call `CameraHelper.CleanupAsync()` to clean up all internal resources. See the [CameraHelper sample page in the sample app](https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/rel/7.1.0/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/CameraHelper) for full example.
@@ -65,7 +64,7 @@ Demonstrates using Camera Helper to get video frames from a specific media frame
```csharp
-using Microsoft.Toolkit.Uwp.Helpers.CameraHelper;
+using CommunityToolkit.WinUI.Helpers.CameraHelper;
var availableFrameSourceGroups = await CameraHelper.GetFrameSourceGroupsAsync();
if(availableFrameSourceGroups != null)
diff --git a/components/Helpers/samples/CameraHelperSample.xaml b/components/Helpers/samples/CameraHelperSample.xaml
index 435c5684..52d47005 100644
--- a/components/Helpers/samples/CameraHelperSample.xaml
+++ b/components/Helpers/samples/CameraHelperSample.xaml
@@ -1,4 +1,4 @@
-
+
+ Content="Capture video frame"
+ Style="{StaticResource AccentButtonStyle}" />
diff --git a/components/Helpers/samples/ColorHelper.md b/components/Helpers/samples/ColorHelper.md
index 2e3d3de3..52207fab 100644
--- a/components/Helpers/samples/ColorHelper.md
+++ b/components/Helpers/samples/ColorHelper.md
@@ -2,11 +2,11 @@
title: ColorHelper
author:
description: Convert colors from text names, HTML hex, HSV, or HSL to Windows UI Colors (and back again).
-keywords: Helpers, Theming, theme listerner, themes, screenunithelper, colorhelper
+keywords: Helpers, Theming, theme listener, themes, screenunithelper, colorhelper
dev_langs:
- csharp
category: Helpers
-subcategory: Developer
+subcategory: Converters
discussion-id: 0
issue-id: 0
icon: Assets/ColorHelper.png
diff --git a/components/Helpers/samples/DesignTimeHelper.md b/components/Helpers/samples/DesignTimeHelper.md
index 51fcfefe..c592c41e 100644
--- a/components/Helpers/samples/DesignTimeHelper.md
+++ b/components/Helpers/samples/DesignTimeHelper.md
@@ -12,7 +12,7 @@ issue-id: 0
icon: Assets/ColorHelper.png
---
-The [DesignTimeHelpers](/dotnet/api/microsoft.toolkit.uwp.ui.designtimehelpers) helps to detect if your code is running in execution or designtime mode.
+The `DesignTimeHelpers` helps to detect if your code is running in execution or designtime mode.
```csharp
if (DesignTimeHelpers.IsRunningInLegacyDesignerMode || DesignTimeHelpers.IsRunningInEnhancedDesignerMode)
diff --git a/components/Helpers/samples/Helpers.Samples.csproj b/components/Helpers/samples/Helpers.Samples.csproj
index 00dbe847..114df9cb 100644
--- a/components/Helpers/samples/Helpers.Samples.csproj
+++ b/components/Helpers/samples/Helpers.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
Helpers
diff --git a/components/Helpers/samples/NetworkHelper.md b/components/Helpers/samples/NetworkHelper.md
index 70fbbf77..7b3c8966 100644
--- a/components/Helpers/samples/NetworkHelper.md
+++ b/components/Helpers/samples/NetworkHelper.md
@@ -12,7 +12,7 @@ issue-id: 0
icon: Assets/NetworkHelper.png
---
-It exposes network information though a property called ConnectionInformation. The [ConnectionInformation](/dotnet/api/microsoft.toolkit.uwp.connectivity.connectioninformation) holds information about ConnectionType, ConnectivityLevel, ConnectionCost, SignalStrength, Internet Connectivity and more.
+It exposes network information though a property called ConnectionInformation. The `ConnectionInformation` holds information about ConnectionType, ConnectivityLevel, ConnectionCost, SignalStrength, Internet Connectivity and more.
**_What is a metered connection?_**
A metered connection is an Internet connection that has a data limit or cost associated with it. Cellular data connections are set as metered by default. Wi-Fi network connections can be set to metered, but aren't by default. Application developers should take metered nature of connection into account and reduce data usage.
diff --git a/components/Helpers/samples/ScreenUnitHelper.md b/components/Helpers/samples/ScreenUnitHelper.md
index 58d71439..1089c839 100644
--- a/components/Helpers/samples/ScreenUnitHelper.md
+++ b/components/Helpers/samples/ScreenUnitHelper.md
@@ -6,13 +6,13 @@ keywords: Helpers, screenunithelper,
dev_langs:
- csharp
category: Helpers
-subcategory: System
+subcategory: Converters
discussion-id: 0
issue-id: 0
icon: Assets/ScreenUnitHelper.png
---
-The [ScreenUnitHelper](/dotnet/api/microsoft.toolkit.uwp.helpers.screenunithelper) helps to convert a screen unit to another screen unit (ex: 1cm => 39.7953px).
+The `ScreenUnitHelper` helps to convert a screen unit to another screen unit (ex: 1cm => 39.7953px).
```csharp
float result = ScreenUnitHelper.Convert(ScreenUnit.Inch, ScreenUnit.Pixel, 1); // 96
diff --git a/components/Helpers/samples/ThemeListener.md b/components/Helpers/samples/ThemeListener.md
index f3468003..100353bb 100644
--- a/components/Helpers/samples/ThemeListener.md
+++ b/components/Helpers/samples/ThemeListener.md
@@ -2,7 +2,7 @@
title: Theme Listener
author: williamabradley
description: The ThemeListener allows you to keep track of changes to the current Application Them, and when it is changed via System Theme changes.
-keywords: Helpers, Theming, theme listerner, themes
+keywords: Helpers, Theming, theme listener, themes
dev_langs:
- csharp
category: Helpers
diff --git a/components/Helpers/samples/WeakEventListener.md b/components/Helpers/samples/WeakEventListener.md
index c455517b..448f6d8c 100644
--- a/components/Helpers/samples/WeakEventListener.md
+++ b/components/Helpers/samples/WeakEventListener.md
@@ -6,7 +6,7 @@ keywords: Helpers, WeakEventListener
dev_langs:
- csharp
category: Helpers
-subcategory: Layout
+subcategory: Miscellaneous
discussion-id: 0
issue-id: 0
icon: Assets/WeakEventListener.png
diff --git a/components/Helpers/src/CommunityToolkit.WinUI.Helpers.csproj b/components/Helpers/src/CommunityToolkit.WinUI.Helpers.csproj
index 53916c9e..ec6e70a1 100644
--- a/components/Helpers/src/CommunityToolkit.WinUI.Helpers.csproj
+++ b/components/Helpers/src/CommunityToolkit.WinUI.Helpers.csproj
@@ -1,14 +1,24 @@
-
+
+
+
HelpersThis package contains Helpers.CommunityToolkit.WinUI.HelpersRns
+ ReadMe.md
-
+
+
+
+
+
+ True
+ \
+
diff --git a/components/Helpers/src/ReadMe.md b/components/Helpers/src/ReadMe.md
new file mode 100644
index 00000000..241f010e
--- /dev/null
+++ b/components/Helpers/src/ReadMe.md
@@ -0,0 +1,31 @@
+
+# Windows Community Toolkit - Helpers
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following controls in the `CommunityToolkit.WinUI.Helpers` namespace:
+
+- CameraHelper
+- ColorHelper
+- CompositionTargetHelper
+- NetworkHelper
+- ScreenUnitHelper
+- WeakEventListener
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Helpers` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Helpers` package.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/ImageCropper/samples/ImageCropper.Samples.csproj b/components/ImageCropper/samples/ImageCropper.Samples.csproj
index 69eac018..1e460dd7 100644
--- a/components/ImageCropper/samples/ImageCropper.Samples.csproj
+++ b/components/ImageCropper/samples/ImageCropper.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
ImageCropper
diff --git a/components/ImageCropper/samples/ImageCropper.md b/components/ImageCropper/samples/ImageCropper.md
index 64324945..c7d210e4 100644
--- a/components/ImageCropper/samples/ImageCropper.md
+++ b/components/ImageCropper/samples/ImageCropper.md
@@ -6,15 +6,13 @@ keywords: ImageCropper, Control, Layout
dev_langs:
- csharp
category: Controls
-subcategory: Input
+subcategory: Media
discussion-id: 0
issue-id: 0
icon: Assets/ImageCropper.png
---
-# ImageCropper
-
-The [ImageCropper Control](/dotnet/api/microsoft.toolkit.uwp.ui.controls.imagecropper) allows user to freely crop an image.
+The `ImageCropper Control` allows user to freely crop an image.
> [!Sample ImageCropperSample]
@@ -47,7 +45,6 @@ using (var fileStream = await someFile.OpenAsync(FileAccessMode.ReadWrite, Stora
}
```
-
### Use Circular ImageCropper
You can set `CropShape` property to use the circular ImageCropper.
@@ -56,7 +53,6 @@ You can set `CropShape` property to use the circular ImageCropper.
ImageCropper.CropShape = CropShape.Circular;
```
-
### Change Aspect Ratio
You can set `AspectRatio` property to change the aspect ratio of the cropped image.
@@ -65,7 +61,6 @@ You can set `AspectRatio` property to change the aspect ratio of the cropped ima
ImageCropper.AspectRatio = 16d / 9d;
```
-
Or you can crop image without aspect ratio.
```csharp
diff --git a/components/ImageCropper/src/CommunityToolkit.WinUI.Controls.ImageCropper.csproj b/components/ImageCropper/src/CommunityToolkit.WinUI.Controls.ImageCropper.csproj
index f85e9ca4..5e376053 100644
--- a/components/ImageCropper/src/CommunityToolkit.WinUI.Controls.ImageCropper.csproj
+++ b/components/ImageCropper/src/CommunityToolkit.WinUI.Controls.ImageCropper.csproj
@@ -1,19 +1,29 @@
-
+
+
+
ImageCropperThis package contains ImageCropper.CommunityToolkit.WinUI.Controls.ImageCropperRns
+ ReadMe.md
-
+
+
+
+ True
+ \
+
+
+
$(PackageIdPrefix).$(PackageIdVariant).Controls.$(ToolkitComponentName)
diff --git a/components/ImageCropper/src/ReadMe.md b/components/ImageCropper/src/ReadMe.md
new file mode 100644
index 00000000..07942198
--- /dev/null
+++ b/components/ImageCropper/src/ReadMe.md
@@ -0,0 +1,38 @@
+
+# Windows Community Toolkit - ImageCropper
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following controls in the `CommunityToolkit.WinUI.Controls` namespace:
+
+- ImageCropper
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Controls.ImageCropper` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Controls.ImageCropper` package.
+
+## WinUI Resources (UWP)
+
+For UWP projects, the WinUI 2 reference requires you include the WinUI XAML Resources in your App.xaml file:
+
+```xml
+
+
+
+```
+
+See [Getting Started in WinUI 2](https://learn.microsoft.com/windows/apps/winui/winui2/getting-started) for more information.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/LayoutTransformControl/samples/LayoutTransformControl.Samples.csproj b/components/LayoutTransformControl/samples/LayoutTransformControl.Samples.csproj
index 691bd859..7fa43122 100644
--- a/components/LayoutTransformControl/samples/LayoutTransformControl.Samples.csproj
+++ b/components/LayoutTransformControl/samples/LayoutTransformControl.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
LayoutTransformControl
diff --git a/components/LayoutTransformControl/samples/LayoutTransformControl.md b/components/LayoutTransformControl/samples/LayoutTransformControl.md
index 4238071b..7c1fd74e 100644
--- a/components/LayoutTransformControl/samples/LayoutTransformControl.md
+++ b/components/LayoutTransformControl/samples/LayoutTransformControl.md
@@ -12,15 +12,15 @@ issue-id: 0
icon: Assets/LayoutTransformControl.png
---
-The [LayoutTransformControl](/dotnet/api/microsoft.toolkit.uwp.ui.controls.layouttransformcontrol) is a control that applies Matrix transformations on any `FrameworkElement` of your application.
+The `LayoutTransformControl` is a control that applies Matrix transformations on any `FrameworkElement` of your application.
The transformations that can be applied are one of the following:
-* [RotateTransform](/uwp/api/windows.ui.xaml.media.rotatetransform)
-* [ScaleTransform](/uwp/api/windows.ui.xaml.media.scaletransform)
-* [SkewTransform](/uwp/api/windows.ui.xaml.media.skewtransform)
-* [MatrixTransform](/uwp/api/windows.ui.xaml.media.matrixtransform)
-* [TransformGroup](/uwp/api/windows.ui.xaml.media.transformgroup)
+* [RotateTransform](https://learn.microsoft.com/uwp/api/windows.ui.xaml.media.rotatetransform)
+* [ScaleTransform](https://learn.microsoft.com/uwp/api/windows.ui.xaml.media.scaletransform)
+* [SkewTransform](https://learn.microsoft.com/uwp/api/windows.ui.xaml.media.skewtransform)
+* [MatrixTransform](https://learn.microsoft.com/uwp/api/windows.ui.xaml.media.matrixtransform)
+* [TransformGroup](https://learn.microsoft.com/uwp/api/windows.ui.xaml.media.transformgroup)
> [!Sample LayoutTransformControlSample]
diff --git a/components/LayoutTransformControl/src/CommunityToolkit.WinUI.Controls.LayoutTransformControl.csproj b/components/LayoutTransformControl/src/CommunityToolkit.WinUI.Controls.LayoutTransformControl.csproj
index 5277f8ee..bb5ceefe 100644
--- a/components/LayoutTransformControl/src/CommunityToolkit.WinUI.Controls.LayoutTransformControl.csproj
+++ b/components/LayoutTransformControl/src/CommunityToolkit.WinUI.Controls.LayoutTransformControl.csproj
@@ -1,19 +1,29 @@
-
+
+
+
LayoutTransformControlThis package contains LayoutTransformControl.CommunityToolkit.WinUI.Controls.LayoutTransformControlRns
+ ReadMe.md
-
+
+
+
+ True
+ \
+
+
+
$(PackageIdPrefix).$(PackageIdVariant).Controls.$(ToolkitComponentName)
diff --git a/components/LayoutTransformControl/src/ReadMe.md b/components/LayoutTransformControl/src/ReadMe.md
new file mode 100644
index 00000000..b766ca90
--- /dev/null
+++ b/components/LayoutTransformControl/src/ReadMe.md
@@ -0,0 +1,38 @@
+
+# Windows Community Toolkit - LayoutTransformControl
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following controls in the `CommunityToolkit.WinUI.Controls` namespace:
+
+- LayoutTransformControl
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Controls.LayoutTransformControl` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Controls.LayoutTransformControl` package.
+
+## WinUI Resources (UWP)
+
+For UWP projects, the WinUI 2 reference requires you include the WinUI XAML Resources in your App.xaml file:
+
+```xml
+
+
+
+```
+
+See [Getting Started in WinUI 2](https://learn.microsoft.com/windows/apps/winui/winui2/getting-started) for more information.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/Media/samples/Assets/OwlShadow.jpg b/components/Media/samples/Assets/OwlShadow.jpg
new file mode 100644
index 00000000..1c8f39f7
Binary files /dev/null and b/components/Media/samples/Assets/OwlShadow.jpg differ
diff --git a/components/Media/samples/AttachedCardShadow.md b/components/Media/samples/AttachedCardShadow.md
new file mode 100644
index 00000000..58420d95
--- /dev/null
+++ b/components/Media/samples/AttachedCardShadow.md
@@ -0,0 +1,29 @@
+---
+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:
+
+> [!SAMPLE AttachedCardShadowBasicSample]
+
+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.
+
+## Layer Ordering
+
+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:
+
+> [!SAMPLE AttachedCardShadowUntemplatedSample]
diff --git a/components/Media/samples/Dependencies.props b/components/Media/samples/Dependencies.props
index 3e39d81b..60efe9dc 100644
--- a/components/Media/samples/Dependencies.props
+++ b/components/Media/samples/Dependencies.props
@@ -11,21 +11,17 @@
-
-
-
-
diff --git a/components/Media/samples/EffectAnimations.md b/components/Media/samples/EffectAnimations.md
index 57595c53..5c956193 100644
--- a/components/Media/samples/EffectAnimations.md
+++ b/components/Media/samples/EffectAnimations.md
@@ -24,7 +24,7 @@ Apply and animate a Win2D BlurEffect
## ColorEffectAnimation
-Animate an overlayed color with a Win2D ColorEffect.
+Animate an overlaid color with a Win2D ColorEffect.
> [!SAMPLE ColorEffectAnimationSample]
@@ -42,7 +42,7 @@ Animate the exposure with a Win2D ExposureEffect.
## HueRotationEffectAnimation
-Animate Hue to a specific angle using a Win2D HueRotationEffect.
+Animate Hue to a specific angle using a Win2D HueRotationEffect.
> [!SAMPLE HueRotationEffectAnimationSample]
diff --git a/components/Media/samples/Media.Samples.csproj b/components/Media/samples/Media.Samples.csproj
index 2130c054..c69d83b1 100644
--- a/components/Media/samples/Media.Samples.csproj
+++ b/components/Media/samples/Media.Samples.csproj
@@ -1,14 +1,21 @@
-
+
+
+
Media
+
+
+
+
+ PreserveNewest
@@ -16,5 +23,8 @@
PreserveNewest
+
+ PreserveNewest
+
diff --git a/components/Media/samples/Shadows/AttachedCardShadowBasicSample.xaml b/components/Media/samples/Shadows/AttachedCardShadowBasicSample.xaml
new file mode 100644
index 00000000..4f9da577
--- /dev/null
+++ b/components/Media/samples/Shadows/AttachedCardShadowBasicSample.xaml
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/Media/samples/Shadows/AttachedCardShadowBasicSample.xaml.cs b/components/Media/samples/Shadows/AttachedCardShadowBasicSample.xaml.cs
new file mode 100644
index 00000000..ec1a06c0
--- /dev/null
+++ b/components/Media/samples/Shadows/AttachedCardShadowBasicSample.xaml.cs
@@ -0,0 +1,16 @@
+// 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.
+
+using CommunityToolkit.WinUI.Media;
+
+namespace MediaExperiment.Samples.Shadows;
+
+[ToolkitSample(id: nameof(AttachedCardShadowBasicSample), "Basic Attached Card Shadow", description: $"A sample for showing how to create an {nameof(AttachedCardShadow)} on an element.")]
+public sealed partial class AttachedCardShadowBasicSample : Page
+{
+ public AttachedCardShadowBasicSample()
+ {
+ this.InitializeComponent();
+ }
+}
diff --git a/components/Media/samples/Shadows/AttachedCardShadowUntemplatedSample.xaml b/components/Media/samples/Shadows/AttachedCardShadowUntemplatedSample.xaml
new file mode 100644
index 00000000..47479342
--- /dev/null
+++ b/components/Media/samples/Shadows/AttachedCardShadowUntemplatedSample.xaml
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/Media/samples/Shadows/AttachedCardShadowUntemplatedSample.xaml.cs b/components/Media/samples/Shadows/AttachedCardShadowUntemplatedSample.xaml.cs
new file mode 100644
index 00000000..ab9a5114
--- /dev/null
+++ b/components/Media/samples/Shadows/AttachedCardShadowUntemplatedSample.xaml.cs
@@ -0,0 +1,16 @@
+// 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.
+
+using CommunityToolkit.WinUI.Media;
+
+namespace MediaExperiment.Samples.Shadows;
+
+[ToolkitSample(id: nameof(AttachedCardShadowUntemplatedSample), "Untemplated Attached Card Shadow", description: $"A sample for showing how to create an {nameof(AttachedCardShadow)} on an untemplated element.")]
+public sealed partial class AttachedCardShadowUntemplatedSample : Page
+{
+ public AttachedCardShadowUntemplatedSample()
+ {
+ this.InitializeComponent();
+ }
+}
diff --git a/components/Media/src/Brushes/BackdropGammaTransferBrush.cs b/components/Media/src/Brushes/BackdropGammaTransferBrush.cs
index 1b7de60b..c0129f64 100644
--- a/components/Media/src/Brushes/BackdropGammaTransferBrush.cs
+++ b/components/Media/src/Brushes/BackdropGammaTransferBrush.cs
@@ -345,7 +345,14 @@ protected override void OnConnected()
return;
}
- var backdrop = Window.Current.Compositor.CreateBackdropBrush();
+
+#if WINUI2
+ var compositor = Window.Current.Compositor;
+#elif WINUI3
+ var compositor = CompositionTarget.GetCompositorForCurrentThread();
+#endif
+
+ var backdrop = compositor.CreateBackdropBrush();
// Use a Win2D blur affect applied to a CompositionBackdropBrush.
var graphicsEffect = new GammaTransferEffect
@@ -370,7 +377,7 @@ protected override void OnConnected()
Source = new CompositionEffectSourceParameter("backdrop")
};
- var effectFactory = Window.Current.Compositor.CreateEffectFactory(graphicsEffect, new[]
+ var effectFactory = compositor.CreateEffectFactory(graphicsEffect, new[]
{
"GammaTransfer.AlphaAmplitude",
"GammaTransfer.AlphaExponent",
diff --git a/components/Media/src/Brushes/CanvasBrushBase.cs b/components/Media/src/Brushes/CanvasBrushBase.cs
index 55cd1be0..b841dd95 100644
--- a/components/Media/src/Brushes/CanvasBrushBase.cs
+++ b/components/Media/src/Brushes/CanvasBrushBase.cs
@@ -66,7 +66,13 @@ protected override void OnConnected()
_graphics.RenderingDeviceReplaced -= CanvasDevice_RenderingDeviceReplaced;
}
- _graphics = CanvasComposition.CreateCompositionGraphicsDevice(Window.Current.Compositor, _device);
+#if WINUI2
+ var compositor = Window.Current.Compositor;
+#elif WINUI3
+ var compositor = CompositionTarget.GetCompositorForCurrentThread();
+#endif
+
+ _graphics = CanvasComposition.CreateCompositionGraphicsDevice(compositor, _device);
_graphics.RenderingDeviceReplaced += CanvasDevice_RenderingDeviceReplaced;
// Delay creating composition resources until they're required.
@@ -95,7 +101,7 @@ protected override void OnConnected()
}
}
- _surfaceBrush = Window.Current.Compositor.CreateSurfaceBrush(surface);
+ _surfaceBrush = compositor.CreateSurfaceBrush(surface);
_surfaceBrush.Stretch = CompositionStretch.Fill;
CompositionBrush = _surfaceBrush;
diff --git a/components/Media/src/Brushes/ImageBlendBrush.cs b/components/Media/src/Brushes/ImageBlendBrush.cs
index 4f5123ba..8f541a46 100644
--- a/components/Media/src/Brushes/ImageBlendBrush.cs
+++ b/components/Media/src/Brushes/ImageBlendBrush.cs
@@ -126,6 +126,12 @@ private static void OnModeChanged(DependencyObject d, DependencyPropertyChangedE
///
protected override void OnConnected()
{
+#if WINUI2
+ var compositor = Window.Current.Compositor;
+#elif WINUI3
+ var compositor = CompositionTarget.GetCompositorForCurrentThread();
+#endif
+
// Delay creating composition resources until they're required.
if (CompositionBrush == null && Source != null && Source is BitmapImage bitmap)
{
@@ -133,8 +139,9 @@ protected override void OnConnected()
// If UriSource is invalid, StartLoadFromUri will return a blank texture.
_surface = LoadedImageSurface.StartLoadFromUri(bitmap.UriSource);
+
// Load Surface onto SurfaceBrush
- _surfaceBrush = Window.Current.Compositor.CreateSurfaceBrush(_surface);
+ _surfaceBrush = compositor.CreateSurfaceBrush(_surface);
_surfaceBrush.Stretch = CompositionStretchFromStretch(Stretch);
#if WINUI2
@@ -150,7 +157,7 @@ protected override void OnConnected()
return;
}
- var backdrop = Window.Current.Compositor.CreateBackdropBrush();
+ var backdrop = compositor.CreateBackdropBrush();
// Use a Win2D invert affect applied to a CompositionBackdropBrush.
var graphicsEffect = new CanvasBlendEffect
@@ -161,7 +168,7 @@ protected override void OnConnected()
Foreground = new CompositionEffectSourceParameter("image")
};
- var effectFactory = Window.Current.Compositor.CreateEffectFactory(graphicsEffect);
+ var effectFactory = compositor.CreateEffectFactory(graphicsEffect);
var effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("backdrop", backdrop);
diff --git a/components/Media/src/CommunityToolkit.WinUI.Media.csproj b/components/Media/src/CommunityToolkit.WinUI.Media.csproj
index ac0892cf..9a9712b6 100644
--- a/components/Media/src/CommunityToolkit.WinUI.Media.csproj
+++ b/components/Media/src/CommunityToolkit.WinUI.Media.csproj
@@ -1,17 +1,27 @@
-
+
+
+
MediaThis package contains Media.CommunityToolkit.WinUI.MediaRns
+ ReadMe.md
-
+
+ True
+ \
+
+
+
+
+
diff --git a/components/Media/src/Dependencies.props b/components/Media/src/Dependencies.props
index 07187681..da3896da 100644
--- a/components/Media/src/Dependencies.props
+++ b/components/Media/src/Dependencies.props
@@ -17,6 +17,6 @@
-
+
diff --git a/components/Media/src/Helpers/SurfaceLoader.Instance.cs b/components/Media/src/Helpers/SurfaceLoader.Instance.cs
index 013e4aad..97245ece 100644
--- a/components/Media/src/Helpers/SurfaceLoader.Instance.cs
+++ b/components/Media/src/Helpers/SurfaceLoader.Instance.cs
@@ -43,7 +43,12 @@ public sealed partial class SurfaceLoader : IDisposable
/// A instance to use in the current window
public static SurfaceLoader GetInstance()
{
- return GetInstance(Window.Current.Compositor);
+#if WINUI2
+ var compositor = Window.Current.Compositor;
+#elif WINUI3
+ var compositor = CompositionTarget.GetCompositorForCurrentThread();
+#endif
+ return GetInstance(compositor);
}
///
diff --git a/components/Media/src/Helpers/SurfaceLoader.cs b/components/Media/src/Helpers/SurfaceLoader.cs
index ea40b913..813e65b8 100644
--- a/components/Media/src/Helpers/SurfaceLoader.cs
+++ b/components/Media/src/Helpers/SurfaceLoader.cs
@@ -44,7 +44,11 @@ public sealed partial class SurfaceLoader
/// A that returns the loaded instance
public static async Task LoadImageAsync(Uri uri, DpiMode dpiMode, CacheMode cacheMode = CacheMode.Default)
{
+#if WINUI2
var compositor = Window.Current.Compositor;
+#elif WINUI3
+ var compositor = CompositionTarget.GetCompositorForCurrentThread();
+#endif
// Lock and check the cache first
using (await Win2DMutex.LockAsync())
diff --git a/components/Media/src/Pipelines/PipelineBuilder.Initialization.cs b/components/Media/src/Pipelines/PipelineBuilder.Initialization.cs
index 8997d397..12aa971a 100644
--- a/components/Media/src/Pipelines/PipelineBuilder.Initialization.cs
+++ b/components/Media/src/Pipelines/PipelineBuilder.Initialization.cs
@@ -46,7 +46,12 @@ public static PipelineBuilder FromBackdrop()
{
ValueTask Factory()
{
- var brush = BackdropBrushCache.GetValue(Window.Current.Compositor, c => c.CreateBackdropBrush());
+#if WINUI2
+ var compositor = Window.Current.Compositor;
+#elif WINUI3
+ var compositor = CompositionTarget.GetCompositorForCurrentThread();
+#endif
+ var brush = BackdropBrushCache.GetValue(compositor, c => c.CreateBackdropBrush());
return new ValueTask(brush);
}
diff --git a/components/Media/src/Pipelines/PipelineBuilder.cs b/components/Media/src/Pipelines/PipelineBuilder.cs
index 4057c7ea..ff5db887 100644
--- a/components/Media/src/Pipelines/PipelineBuilder.cs
+++ b/components/Media/src/Pipelines/PipelineBuilder.cs
@@ -160,6 +160,12 @@ private PipelineBuilder(
[Pure]
public async Task BuildAsync()
{
+#if WINUI2
+ var compositor = Window.Current.Compositor;
+#elif WINUI3
+ var compositor = CompositionTarget.GetCompositorForCurrentThread();
+#endif
+
var effect = await this.sourceProducer() as IGraphicsEffect;
// Validate the pipeline
@@ -170,8 +176,8 @@ public async Task BuildAsync()
// Build the effects factory
var factory = this.animationProperties.Count > 0
- ? Window.Current.Compositor.CreateEffectFactory(effect, this.animationProperties)
- : Window.Current.Compositor.CreateEffectFactory(effect);
+ ? compositor.CreateEffectFactory(effect, this.animationProperties)
+ : compositor.CreateEffectFactory(effect);
// Create the effect factory and apply the final effect
var effectBrush = factory.CreateBrush();
@@ -191,7 +197,13 @@ public async Task BuildAsync()
/// A that returns the final instance to use
public async Task AttachAsync(UIElement target, UIElement? reference = null)
{
- SpriteVisual visual = Window.Current.Compositor.CreateSpriteVisual();
+#if WINUI2
+ var compositor = Window.Current.Compositor;
+#elif WINUI3
+ var compositor = CompositionTarget.GetCompositorForCurrentThread();
+#endif
+
+ SpriteVisual visual = compositor.CreateSpriteVisual();
visual.Brush = await BuildAsync();
diff --git a/components/Media/src/ReadMe.md b/components/Media/src/ReadMe.md
new file mode 100644
index 00000000..ffda77d2
--- /dev/null
+++ b/components/Media/src/ReadMe.md
@@ -0,0 +1,61 @@
+
+# Windows Community Toolkit - Media
+
+This package is part of the [Windows Community Toolkit](https://aka.ms/toolkit/windows) from the [.NET Foundation](https://dotnetfoundation.org).
+
+## Package Contents
+
+This package contains the following in the `CommunityToolkit.WinUI.Media` namespace:
+
+- AcrylicBrush
+- AttachedCardShadow
+- BackdropBlurBrush
+- BackdropGammaTransferBrush
+- BackdropInvertBrush
+- BackdropSaturationBrush
+- BackdropSepiaBrush
+- BlendEffect
+- BlurEffect
+- BlurEffectAnimation
+- CanvasBlurBrush
+- ColorEffectAnimation
+- CrossFadeEffect
+- CrossFadeEffectAnimation
+- ExposureEffect
+- ExposureEffectAnimation
+- GrayscaleEffect
+- HueRotationEffect
+- HueRotationEffectAnimation
+- ImageBlendBrush
+- InvertEffect
+- LuminanceToAlphaEffect
+- OpacityEffect
+- OpacityEffectAnimation
+- PipelineBuilder
+- PipelineVisualFactory
+- SaturationEffect
+- SaturationEffectAnimation
+- SepiaEffect
+- SepiaEffectAnimation
+- ShadeEffect
+- SurfaceLoader
+- TemperatureAndTintEffect
+- TilesBrush
+- TintEffect
+- XamlCompositionBrush
+
+## Which Package is for me?
+
+If you're developing with _UWP/WinUI 2 or Uno.UI_ you should be using the `CommunityToolkit.Uwp.Media` package.
+
+If you're developing with _WindowsAppSDK/WinUI 3 or Uno.WinUI_ you should be using the `CommunityToolkit.WinUI.Media` package.
+
+## Documentation
+
+Further documentation about these components can be found at: https://aka.ms/windowstoolkitdocs
+
+## License
+
+MIT
+
+See License.md in package for more details.
diff --git a/components/Media/src/Shadows/AttachedCardShadow.cs b/components/Media/src/Shadows/AttachedCardShadow.cs
new file mode 100644
index 00000000..223ce515
--- /dev/null
+++ b/components/Media/src/Shadows/AttachedCardShadow.cs
@@ -0,0 +1,372 @@
+// 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.
+
+using System.Numerics;
+using Microsoft.Graphics.Canvas.Geometry;
+
+#if WINUI2
+using Windows.UI;
+using Windows.UI.Composition;
+using Windows.UI.Xaml.Hosting;
+#elif WINUI3
+using Microsoft.UI;
+using Microsoft.UI.Composition;
+using Microsoft.UI.Xaml.Hosting;
+#endif
+
+namespace CommunityToolkit.WinUI.Media;
+
+///
+/// A performant rectangular which can be attached to any . It uses Win2D to create a clipped area of the outline of the element such that transparent elements don't see the shadow below them, and the shadow can be attached without having to project to another surface. It is animatable, can be shared via a resource, and used in a .
+///
+///
+/// This shadow will not work on which is directly clipping to its bounds (e.g. a using a ). An extra can instead be applied around the clipped border with the Shadow to create the desired effect. Most existing controls due to how they're templated will not encounter this behavior or require this workaround.
+///
+public sealed class AttachedCardShadow : AttachedShadowBase
+{
+ private const float MaxBlurRadius = 72;
+
+ private static readonly TypedResourceKey ClipResourceKey = "Clip";
+ private static readonly TypedResourceKey PathGeometryResourceKey = "PathGeometry";
+ private static readonly TypedResourceKey OpacityMaskBrushResourceKey = "OpacityMask";
+ private static readonly TypedResourceKey OpacityMaskShapeVisualResourceKey = "OpacityMaskShapeVisual";
+ private static readonly TypedResourceKey OpacityMaskGeometryResourceKey = "OpacityMaskGeometry";
+ private static readonly TypedResourceKey OpacityMaskSpriteShapeResourceKey = "OpacityMaskSpriteShape";
+ private static readonly TypedResourceKey OpacityMaskShapeVisualSurfaceResourceKey = "OpacityMaskShapeVisualSurface";
+ private static readonly TypedResourceKey OpacityMaskShapeVisualSurfaceBrushResourceKey = "OpacityMaskShapeVisualSurfaceBrush";
+ private static readonly TypedResourceKey OpacityMaskVisualSurfaceResourceKey = "OpacityMaskVisualSurface";
+ private static readonly TypedResourceKey OpacityMaskSurfaceBrushResourceKey = "OpacityMaskSurfaceBrush";
+ private static readonly TypedResourceKey OpacityMaskVisualResourceKey = "OpacityMaskVisual";
+ private static readonly TypedResourceKey RoundedRectangleGeometryResourceKey = "RoundedGeometry";
+ private static readonly TypedResourceKey ShapeResourceKey = "Shape";
+ private static readonly TypedResourceKey ShapeVisualResourceKey = "ShapeVisual";
+ private static readonly TypedResourceKey SurfaceBrushResourceKey = "SurfaceBrush";
+ private static readonly TypedResourceKey VisualSurfaceResourceKey = "VisualSurface";
+
+ ///
+ /// The for
+ ///
+ public static readonly DependencyProperty CornerRadiusProperty =
+ DependencyProperty.Register(
+ nameof(CornerRadius),
+ typeof(double),
+ typeof(AttachedCardShadow),
+ new PropertyMetadata(4d, OnDependencyPropertyChanged)); // Default WinUI ControlCornerRadius is 4
+
+ ///
+ /// The for .
+ ///
+ public static readonly DependencyProperty InnerContentClipModeProperty =
+ DependencyProperty.Register(
+ nameof(InnerContentClipMode),
+ typeof(InnerContentClipMode),
+ typeof(AttachedCardShadow),
+ new PropertyMetadata(InnerContentClipMode.CompositionGeometricClip, OnDependencyPropertyChanged));
+
+ ///
+ /// Gets or sets the roundness of the shadow's corners.
+ ///
+ public double CornerRadius
+ {
+ get => (double)GetValue(CornerRadiusProperty);
+ set => SetValue(CornerRadiusProperty, value);
+ }
+
+ ///
+ /// Gets or sets the mode use to clip inner content from the shadow.
+ ///
+ public InnerContentClipMode InnerContentClipMode
+ {
+ get => (InnerContentClipMode)GetValue(InnerContentClipModeProperty);
+ set => SetValue(InnerContentClipModeProperty, value);
+ }
+
+#if !WINAPPSDK
+ ///
+ protected override bool IsSupported => SupportsCompositionVisualSurface;
+#endif
+
+ ///
+ protected internal override bool SupportsOnSizeChangedEvent => true;
+
+ ///
+ protected internal override void OnElementContextInitialized(AttachedShadowElementContext context)
+ {
+ UpdateVisualOpacityMask(context);
+ base.OnElementContextInitialized(context);
+ }
+
+ ///
+ protected override void OnPropertyChanged(AttachedShadowElementContext context, DependencyProperty property, object oldValue, object newValue)
+ {
+ if (property == CornerRadiusProperty)
+ {
+ UpdateShadowClip(context);
+ UpdateVisualOpacityMask(context);
+
+ var geometry = context.GetResource(RoundedRectangleGeometryResourceKey);
+ if (geometry != null)
+ {
+ geometry.CornerRadius = new Vector2((float)(double)newValue);
+ }
+ }
+ else if (property == InnerContentClipModeProperty)
+ {
+ UpdateShadowClip(context);
+ UpdateVisualOpacityMask(context);
+ SetElementChildVisual(context);
+ }
+ else
+ {
+ base.OnPropertyChanged(context, property, oldValue, newValue);
+ }
+ }
+
+ ///
+ protected override CompositionBrush? GetShadowMask(AttachedShadowElementContext context)
+ {
+ if (context.Compositor == null
+#if !WINAPPSDK
+ || !SupportsCompositionVisualSurface
+#endif
+ )
+ {
+ return null;
+ }
+
+ // Create rounded rectangle geometry and add it to a shape
+ var geometry = context.GetResource(RoundedRectangleGeometryResourceKey) ?? context.AddResource(
+ RoundedRectangleGeometryResourceKey,
+ context.Compositor.CreateRoundedRectangleGeometry());
+ geometry.CornerRadius = new Vector2((float)CornerRadius);
+
+ var shape = context.GetResource(ShapeResourceKey) ?? context.AddResource(ShapeResourceKey, context.Compositor.CreateSpriteShape(geometry));
+ shape.FillBrush = context.Compositor.CreateColorBrush(Colors.Black);
+
+ // Create a ShapeVisual so that our geometry can be rendered to a visual
+ var shapeVisual = context.GetResource(ShapeVisualResourceKey) ??
+ context.AddResource(ShapeVisualResourceKey, context.Compositor.CreateShapeVisual());
+ shapeVisual.Shapes.Add(shape);
+
+ // Create a CompositionVisualSurface, which renders our ShapeVisual to a texture
+ var visualSurface = context.GetResource(VisualSurfaceResourceKey) ??
+ context.AddResource(VisualSurfaceResourceKey, context.Compositor.CreateVisualSurface());
+ visualSurface.SourceVisual = shapeVisual;
+
+ // Create a CompositionSurfaceBrush to render our CompositionVisualSurface to a brush.
+ // Now we have a rounded rectangle brush that can be used on as the mask for our shadow.
+ var surfaceBrush = context.GetResource(SurfaceBrushResourceKey) ?? context.AddResource(
+ SurfaceBrushResourceKey,
+ context.Compositor.CreateSurfaceBrush(visualSurface));
+
+ geometry.Size = visualSurface.SourceSize = shapeVisual.Size = context.Element.RenderSize.ToVector2();
+
+ return surfaceBrush;
+ }
+
+ ///
+ protected override CompositionClip? GetShadowClip(AttachedShadowElementContext context)
+ {
+ if (InnerContentClipMode != InnerContentClipMode.CompositionGeometricClip
+ || context.Compositor == null)
+ {
+ context.RemoveAndDisposeResource(PathGeometryResourceKey);
+ context.RemoveAndDisposeResource(ClipResourceKey);
+
+ return null;
+ }
+
+ // The way this shadow works without the need to project on another element is because
+ // we're clipping the inner part of the shadow which would be cast on the element
+ // itself away. This method is creating an outline so that we are only showing the
+ // parts of the shadow that are outside the element's context.
+ // Note: This does cause an issue if the element does clip itself to its bounds, as then
+ // the shadowed area is clipped as well.
+ var pathGeom = context.GetResource(PathGeometryResourceKey) ??
+ context.AddResource(PathGeometryResourceKey, context.Compositor.CreatePathGeometry());
+ var clip = context.GetResource(ClipResourceKey) ?? context.AddResource(ClipResourceKey, context.Compositor.CreateGeometricClip(pathGeom));
+
+ // Create rounded rectangle geometry at a larger size that compensates for the size of the stroke,
+ // as we want the inside edge of the stroke to match the edges of the element.
+ // Additionally, the inside edge of the stroke will have a smaller radius than the radius we specified.
+ // Using "(StrokeThickness / 2) + Radius" as our rectangle's radius will give us an inside stroke radius that matches the radius we want.
+ var canvasRectangle = CanvasGeometry.CreateRoundedRectangle(
+ null,
+ -MaxBlurRadius / 2,
+ -MaxBlurRadius / 2,
+ (float)context.Element.ActualWidth + MaxBlurRadius,
+ (float)context.Element.ActualHeight + MaxBlurRadius,
+ (MaxBlurRadius / 2) + (float)CornerRadius,
+ (MaxBlurRadius / 2) + (float)CornerRadius);
+
+ var canvasStroke = canvasRectangle.Stroke(MaxBlurRadius);
+
+ pathGeom.Path = new CompositionPath(canvasStroke);
+
+ return clip;
+ }
+
+ ///
+ /// Updates the used to mask .SpriteVisual.
+ ///
+ /// The whose will be masked.
+ private void UpdateVisualOpacityMask(AttachedShadowElementContext context)
+ {
+ if (InnerContentClipMode != InnerContentClipMode.CompositionMaskBrush
+ || context.Compositor == null)
+ {
+ context.RemoveAndDisposeResource(OpacityMaskShapeVisualResourceKey);
+ context.RemoveAndDisposeResource(OpacityMaskGeometryResourceKey);
+ context.RemoveAndDisposeResource(OpacityMaskSpriteShapeResourceKey);
+ context.RemoveAndDisposeResource(OpacityMaskShapeVisualSurfaceResourceKey);
+ context.RemoveAndDisposeResource(OpacityMaskShapeVisualSurfaceBrushResourceKey);
+
+ return;
+ }
+
+ // Create ShapeVisual, and CompositionSpriteShape with geometry, these will provide the visuals for the opacity mask.
+ ShapeVisual shapeVisual = context.GetResource(OpacityMaskShapeVisualResourceKey) ??
+ context.AddResource(OpacityMaskShapeVisualResourceKey, context.Compositor.CreateShapeVisual());
+
+ CompositionRoundedRectangleGeometry geometry = context.GetResource(OpacityMaskGeometryResourceKey) ??
+ context.AddResource(OpacityMaskGeometryResourceKey, context.Compositor.CreateRoundedRectangleGeometry());
+ CompositionSpriteShape shape = context.GetResource(OpacityMaskSpriteShapeResourceKey) ??
+ context.AddResource(OpacityMaskSpriteShapeResourceKey, context.Compositor.CreateSpriteShape(geometry));
+
+ // Set the attributes of the geometry, and add the CompositionSpriteShape to the ShapeVisual.
+ // The geometry will have a thick outline and no fill, meaning that when used as a mask,
+ // the shadow will only be rendered on the outer area covered by the outline, clipping out its inner portion.
+ geometry.Offset = new Vector2(MaxBlurRadius / 2);
+ geometry.CornerRadius = new Vector2((MaxBlurRadius / 2) + (float)CornerRadius);
+ shape.StrokeThickness = MaxBlurRadius;
+ shape.StrokeBrush = shape.StrokeBrush ?? context.Compositor.CreateColorBrush(Colors.Black);
+
+ if (!shapeVisual.Shapes.Contains(shape))
+ {
+ shapeVisual.Shapes.Add(shape);
+ }
+
+ // Create CompositionVisualSurface using the ShapeVisual as the source visual.
+ CompositionVisualSurface visualSurface = context.GetResource(OpacityMaskShapeVisualSurfaceResourceKey) ??
+ context.AddResource(OpacityMaskShapeVisualSurfaceResourceKey, context.Compositor.CreateVisualSurface());
+ visualSurface.SourceVisual = shapeVisual;
+
+ geometry.Size = new Vector2((float)context.Element.ActualWidth, (float)context.Element.ActualHeight) + new Vector2(MaxBlurRadius);
+ shapeVisual.Size = visualSurface.SourceSize = new Vector2((float)context.Element.ActualWidth, (float)context.Element.ActualHeight) + new Vector2(MaxBlurRadius * 2);
+
+ // Create a CompositionSurfaceBrush using the CompositionVisualSurface as the source, this essentially converts the ShapeVisual into a brush.
+ // This brush can then be used as a mask.
+ CompositionSurfaceBrush opacityMask = context.GetResource(OpacityMaskShapeVisualSurfaceBrushResourceKey) ??
+ context.AddResource(OpacityMaskShapeVisualSurfaceBrushResourceKey, context.Compositor.CreateSurfaceBrush());
+ opacityMask.Surface = visualSurface;
+ }
+
+ ///
+ protected override void SetElementChildVisual(AttachedShadowElementContext context)
+ {
+ if (context.TryGetResource(OpacityMaskShapeVisualSurfaceBrushResourceKey, out CompositionSurfaceBrush? opacityMask)
+ && context.Compositor != null)
+ {
+ // If the resource for OpacityMaskShapeVisualSurfaceBrushResourceKey exists it means this.InnerContentClipMode == CompositionVisualSurface,
+ // which means we need to take some steps to set up an opacity mask.
+
+ // Create a CompositionVisualSurface, and use the SpriteVisual containing the shadow as the source.
+ CompositionVisualSurface shadowVisualSurface = context.GetResource(OpacityMaskVisualSurfaceResourceKey) ??
+ context.AddResource(OpacityMaskVisualSurfaceResourceKey, context.Compositor.CreateVisualSurface());
+ shadowVisualSurface.SourceVisual = context.SpriteVisual;
+
+ if (context.SpriteVisual != null)
+ {
+ context.SpriteVisual.RelativeSizeAdjustment = Vector2.Zero;
+ context.SpriteVisual.Size = new Vector2((float)context.Element.ActualWidth, (float)context.Element.ActualHeight);
+ }
+
+ // Adjust the offset and size of the CompositionVisualSurface to accommodate the thick outline of the shape created in UpdateVisualOpacityMask().
+ shadowVisualSurface.SourceOffset = new Vector2(-MaxBlurRadius);
+ shadowVisualSurface.SourceSize = new Vector2((float)context.Element.ActualWidth, (float)context.Element.ActualHeight) + new Vector2(MaxBlurRadius * 2);
+
+ // Create a CompositionSurfaceBrush from the CompositionVisualSurface. This allows us to render the shadow in a brush.
+ CompositionSurfaceBrush shadowSurfaceBrush = context.GetResource(OpacityMaskSurfaceBrushResourceKey) ??
+ context.AddResource(OpacityMaskSurfaceBrushResourceKey, context.Compositor.CreateSurfaceBrush());
+ shadowSurfaceBrush.Surface = shadowVisualSurface;
+ shadowSurfaceBrush.Stretch = CompositionStretch.None;
+
+ // Create a CompositionMaskBrush, using the CompositionSurfaceBrush of the shadow as the source,
+ // and the CompositionSurfaceBrush created in UpdateVisualOpacityMask() as the mask.
+ // This creates a brush that renders the shadow with its inner portion clipped out.
+ CompositionMaskBrush maskBrush = context.GetResource(OpacityMaskBrushResourceKey) ??
+ context.AddResource(OpacityMaskBrushResourceKey, context.Compositor.CreateMaskBrush());
+ maskBrush.Source = shadowSurfaceBrush;
+ maskBrush.Mask = opacityMask;
+
+ // Create a SpriteVisual and set its brush to the CompositionMaskBrush created in the previous step,
+ // then set it as the child of the element in the context.
+ SpriteVisual visual = context.GetResource(OpacityMaskVisualResourceKey) ??
+ context.AddResource(OpacityMaskVisualResourceKey, context.Compositor.CreateSpriteVisual());
+ visual.RelativeSizeAdjustment = Vector2.One;
+ visual.Offset = new Vector3(-MaxBlurRadius, -MaxBlurRadius, 0);
+ visual.Size = new Vector2(MaxBlurRadius * 2);
+ visual.Brush = maskBrush;
+ ElementCompositionPreview.SetElementChildVisual(context.Element, visual);
+ }
+ else
+ {
+ base.SetElementChildVisual(context);
+
+ // Reset context.SpriteVisual.Size and RelativeSizeAdjustment to default values
+ // as they may be changed in the block above.
+ if (context.SpriteVisual != null)
+ {
+ context.SpriteVisual.Size = Vector2.Zero;
+ context.SpriteVisual.RelativeSizeAdjustment = Vector2.One;
+ }
+
+ context.RemoveAndDisposeResource(OpacityMaskVisualSurfaceResourceKey);
+ context.RemoveAndDisposeResource(OpacityMaskSurfaceBrushResourceKey);
+ context.RemoveAndDisposeResource(OpacityMaskVisualResourceKey);
+ context.RemoveAndDisposeResource(OpacityMaskBrushResourceKey);
+ }
+ }
+
+ ///
+ protected internal override void OnSizeChanged(AttachedShadowElementContext context, Size newSize, Size previousSize)
+ {
+ Vector2 sizeAsVec2 = newSize.ToVector2();
+
+ if (context.TryGetResource(RoundedRectangleGeometryResourceKey, out CompositionRoundedRectangleGeometry? geometry)
+ && geometry != null)
+ {
+ geometry.Size = sizeAsVec2;
+ }
+
+ if (context.TryGetResource(VisualSurfaceResourceKey, out CompositionVisualSurface? visualSurface)
+ && visualSurface != null)
+ {
+ visualSurface.SourceSize = sizeAsVec2;
+ }
+
+ if (context.TryGetResource(ShapeVisualResourceKey, out ShapeVisual? shapeVisual)
+ && shapeVisual != null)
+ {
+ shapeVisual.Size = sizeAsVec2;
+ }
+
+ if (context.TryGetResource(OpacityMaskVisualSurfaceResourceKey, out CompositionVisualSurface? opacityMaskVisualSurface)
+ && opacityMaskVisualSurface != null)
+ {
+ opacityMaskVisualSurface.SourceSize = sizeAsVec2 + new Vector2(MaxBlurRadius * 2);
+ }
+
+ if (context.SpriteVisual != null
+ && InnerContentClipMode is InnerContentClipMode.CompositionMaskBrush)
+ {
+ context.SpriteVisual.Size = sizeAsVec2;
+ }
+
+ UpdateShadowClip(context);
+ UpdateVisualOpacityMask(context);
+
+ base.OnSizeChanged(context, newSize, previousSize);
+ }
+}
diff --git a/components/MetadataControl/samples/MetadataControl.Samples.csproj b/components/MetadataControl/samples/MetadataControl.Samples.csproj
index 204bc9c3..80131e54 100644
--- a/components/MetadataControl/samples/MetadataControl.Samples.csproj
+++ b/components/MetadataControl/samples/MetadataControl.Samples.csproj
@@ -1,4 +1,6 @@
-
+
+
+
MetadataControl
diff --git a/components/MetadataControl/samples/MetadataControl.md b/components/MetadataControl/samples/MetadataControl.md
index f857951c..b3f32b71 100644
--- a/components/MetadataControl/samples/MetadataControl.md
+++ b/components/MetadataControl/samples/MetadataControl.md
@@ -6,7 +6,7 @@ keywords: MetadataControl, Control, metadata
dev_langs:
- csharp
category: Controls
-subcategory: Layout
+subcategory: StatusAndInfo
discussion-id: 0
issue-id: 0
icon: Assets/MetadataControl.png
diff --git a/components/MetadataControl/samples/MetadataControlSample.xaml.cs b/components/MetadataControl/samples/MetadataControlSample.xaml.cs
index 32bb9c5e..7ce72542 100644
--- a/components/MetadataControl/samples/MetadataControlSample.xaml.cs
+++ b/components/MetadataControl/samples/MetadataControlSample.xaml.cs
@@ -26,7 +26,11 @@ public MetadataControlSample()
{
this.InitializeComponent();
_random = new Random();
- _units = new ObservableCollection();
+ _units = new ObservableCollection
+ {
+ new MetadataItem { Label = GetRandomLabel() },
+ new MetadataItem { Label = GetRandomLabel() }
+ };
_command = new DelegateCommand