Merge pull request #5940 from MicrosoftDocs/main

Auto Publish – main to live - 2025-11-01 05:04 UTC

Author: learn-build-service-prod[bot]

hub/apps/design/controls/scroll-controls.md

@@ -4,7 +4,7 @@ title: Scroll viewer controls
 ms.assetid: 1BFF0E81-BF9C-43F7-95F6-EFC6BDD5EC31
 label: Scrollbars
 template: detail.hbs
-ms.date: 02/26/2025
+ms.date: 10/31/2025
 ms.topic: how-to
 doc-status: Published
 ms.localizationpriority: medium
@@ -28,6 +28,8 @@ Depending on the situation, the scroll viewer's scrollbar uses two different vis
 
 > [!IMPORTANT]
 > WinUI 3 has two different scroll viewer controls available: [ScrollViewer](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.scrollviewer) and [ScrollView](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.scrollview). Whenever we speak generically about _scroll viewer_ controls, the information applies to both controls.
+>
+> The `ScrollView` control is similar in behavior and usage to the `ScrollViewer` control, but is based on [InteractionTracker](/windows/windows-app-sdk/api/winrt/microsoft.ui.composition.interactions.interactiontracker), has new features such as animation-driven view changes, and is designed to ensure full functionality with [ItemsRepeater](items-repeater.md).
 
 ## Scrolling, panning, and zooming
 
@@ -41,8 +43,8 @@ Use a scroll viewer control to allow _scrolling_, _panning_, and _zooming_ of yo
 
 The scrollbar is conscious of the user's input method and uses it to determine which visualization to display.
 
-* When the region is scrolled without manipulating the scrollbar directly, for example, by touch, the panning indicator appears, displaying the current scroll position.
-* When the mouse or pen cursor moves over the panning indicator, it morphs into the traditional scrollbar.  Dragging the scrollbar thumb manipulates the scrolling region.
+- When the region is scrolled without manipulating the scrollbar directly, for example, by touch, the panning indicator appears, displaying the current scroll position.
+- When the mouse or pen cursor moves over the panning indicator, it morphs into the traditional scrollbar.  Dragging the scrollbar thumb manipulates the scrolling region.
 
 :::image type="content" source="images/conscious-scroll.gif" alt-text="An animation that shows the scroll bar transform from the narrow panning indicator to the traditional thumb when the cursor moves over it.":::
 

hub/apps/design/motion/connected-animation.md

@@ -3,7 +3,7 @@ title: Motion in practice - animation in Windows apps
 description: Learn how Fluent motion fundamentals like timing, easing, directionality, and gravity come together in your app.
 label: Motion in practice
 template: detail.hbs
-ms.date: 09/18/2024
+ms.date: 10/29/2025
 ms.topic: how-to
 doc-status: Published
 ms.localizationpriority: medium
@@ -56,39 +56,41 @@ Grow: 150ms; Easing: Default Accelerate
     :::column-end:::
 :::row-end:::
 
-### Examples
+## Implicit Animations
+
+Implicit animations are a simple way to achieve Fluent motion by automatically interpolating between the old and new values during a parameter change.
+
+> [!div class="checklist"]
+>
+> - **Important APIs:** [Windows.UI.Xaml.Media.Animation Namespace](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation), [Windows.UI.Xaml.Controls namespace](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls)
 
 > [!div class="nextstepaction"]
 > [Open the WinUI 3 Gallery app and see Implicit Transitions in action](winui3gallery://item/ImplicitTransition)
 
 [!INCLUDE [winui-3-gallery](../../../includes/winui-3-gallery.md)]
 
-## Implicit Animations
-
-Implicit animations are a simple way to achieve Fluent motion by automatically interpolating between the old and new values during a parameter change.
-
 You can implicitly animate changes to the following properties:
 
-- [UIElement](/uwp/api/windows.ui.xaml.uielement)
+- [UIElement](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement)
   - **Opacity**
   - **Rotation**
   - **Scale**
   - **Translation**
 
-- [Border](/uwp/api/windows.ui.xaml.controls.border), [ContentPresenter](/uwp/api/windows.ui.xaml.controls.contentpresenter), or [Panel](/uwp/api/windows.ui.xaml.controls.panel)
+- [Border](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.border), [ContentPresenter](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.contentpresenter), or [Panel](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.panel)
   - **Background**
 
 Each property that can have changes implicitly animated has a corresponding _transition_ property. To animate the property, you assign a transition type to the corresponding _transition_ property. This table shows the _transition_ properties and the transition type to use for each one.
 
 | Animated property | Transition property | Implicit transition type |
 | -- | -- | -- |
-| [UIElement.Opacity](/uwp/api/windows.ui.xaml.uielement.opacity) | [OpacityTransition](/uwp/api/windows.ui.xaml.uielement.opacitytransition) | [ScalarTransition](/uwp/api/windows.ui.xaml.scalartransition) |
-| [UIElement.Rotation](/uwp/api/windows.ui.xaml.uielement.rotation) | [RotationTransition](/uwp/api/windows.ui.xaml.uielement.rotationtransition) | [ScalarTransition](/uwp/api/windows.ui.xaml.scalartransition) |
-| [UIElement.Scale](/uwp/api/windows.ui.xaml.uielement.scale) | [ScaleTransition](/uwp/api/windows.ui.xaml.uielement.scaletransition) | [Vector3Transition](/uwp/api/windows.ui.xaml.vector3transition) |
-| [UIElement.Translation](/uwp/api/windows.ui.xaml.uielement.translation) | [TranslationTransition](/uwp/api/windows.ui.xaml.uielement.translationtransition) | [Vector3Transition](/uwp/api/windows.ui.xaml.vector3transition) |
-| [Border.Background](/uwp/api/windows.ui.xaml.controls.border.background) | [BackgroundTransition](/uwp/api/windows.ui.xaml.controls.border.backgroundtransition) | [BrushTransition](/uwp/api/windows.ui.xaml.brushtransition) |
-| [ContentPresenter.Background](/uwp/api/windows.ui.xaml.controls.contentpresenter.background) | [BackgroundTransition](/uwp/api/windows.ui.xaml.controls.contentpresenter.backgroundtransition) | [BrushTransition](/uwp/api/windows.ui.xaml.brushtransition) |
-| [Panel.Background](/uwp/api/windows.ui.xaml.controls.panel.background) | [BackgroundTransition](/uwp/api/windows.ui.xaml.controls.panel.backgroundtransition)  | [BrushTransition](/uwp/api/windows.ui.xaml.brushtransition) |
+| [UIElement.Opacity](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.opacity) | [OpacityTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.opacitytransition) | [ScalarTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.scalartransition) |
+| [UIElement.Rotation](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.rotation) | [RotationTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.rotationtransition) | [ScalarTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.scalartransition) |
+| [UIElement.Scale](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.scale) | [ScaleTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.scaletransition) | [Vector3Transition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.vector3transition) |
+| [UIElement.Translation](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.translation) | [TranslationTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.uielement.translationtransition) | [Vector3Transition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.vector3transition) |
+| [Border.Background](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.border.background) | [BackgroundTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.border.backgroundtransition) | [BrushTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.brushtransition) |
+| [ContentPresenter.Background](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.contentpresenter.background) | [BackgroundTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.contentpresenter.backgroundtransition) | [BrushTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.brushtransition) |
+| [Panel.Background](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.panel.background) | [BackgroundTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.panel.backgroundtransition)  | [BrushTransition](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.brushtransition) |
 
 This example shows how to use the Opacity property and transition to make a button fade in when the control is enabled and fade out when it's disabled.
 
@@ -115,7 +117,7 @@ public double OpaqueIfEnabled(bool IsEnabled)
 
 > [!div class="checklist"]
 >
-> - **UWP APIs:** [Windows.UI.Xaml.Media.Animation Namespace](/uwp/api/windows.ui.xaml.media.animation), [Windows.UI.Xaml.Controls namespace](/uwp/api/windows.ui.xaml.controls.ratingcontrol)
+> - **UWP APIs:** [Windows.UI.Xaml.Media.Animation Namespace](/uwp/api/windows.ui.xaml.media.animation), [Windows.UI.Xaml.Controls namespace](/uwp/api/windows.ui.xaml.controls)
 > - **WinUI 2 Apis:** [Microsoft.UI.Xaml.Controls namespace](/windows/winui/api/microsoft.ui.xaml.controls)
 > - [Open the WinUI 2 Gallery app and see Implicit Transitions in action](winui2gallery://item/ImplicitTransition). [!INCLUDE [winui-2-gallery](../../../includes/winui-2-gallery.md)]
 

hub/apps/design/motion/key-frame-and-easing-function-animations.md

@@ -2,34 +2,25 @@
 title: Page transitions
 description: Learn how to use Universal Windows Platform (UWP) page transitions to give users feedback about the relationship between pages in your app.
 template: detail.hbs
-ms.date: 09/24/2020
+ms.date: 10/29/2025
 ms.topic: how-to
-keywords: windows 10, uwp
-pm-contact: stmoy
 ms.localizationpriority: medium
 ms.custom: RS5
 ---
 # Page transitions
 
 Page transitions navigate users between pages in an app, providing feedback as the relationship between pages. Page transitions help users understand if they are at the top of a navigation hierarchy, moving between sibling pages, or navigating deeper into the page hierarchy.
 
-Two different animations are provided for navigation between pages in an app, *Page refresh* and *Drill*, and are represented by subclasses of [**NavigationTransitionInfo**](/uwp/api/windows.ui.xaml.media.animation.navigationtransitioninfo).
+Two different animations are provided for navigation between pages in an app, *Page refresh* and *Drill*, and are represented by subclasses of [**NavigationTransitionInfo**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.navigationtransitioninfo).
 
-## Examples
+> [!div class="checklist"]
+>
+> - **Important APIs**: [NavigationTransitionInfo class](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.navigationtransitioninfo), [EntranceNavigationTransitionInfo class](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.entrancenavigationtransitioninfo), [DrillInNavigationTransitionInfo class](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.drillinnavigationtransitioninfo), [SuppressNavigationTransitionInfo class](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.suppressnavigationtransitioninfo)
 
-<table>
-<th align="left">WinUI 2 Gallery<th>
-<tr>
-<td><img src="images/xaml-controls-gallery-app-icon.png" alt="WinUI Gallery" width="168"></img></td>
-<td>
-    <p>If you have the <strong>WinUI 2 Gallery</strong> app installed, click here to <a href="winui2gallery:/item/PageTransition">open the app and see Page Transitions in action</a>.</p>
-    <ul>
-    <li><a href="https://apps.microsoft.com/detail/9MSVH128X2ZT">Get the WinUI 2 Gallery app (Microsoft Store)</a></li>
-    <li><a href="https://github.com/Microsoft/WinUI-Gallery">Get the source code (GitHub)</a></li>
-    </ul>
-</td>
-</tr>
-</table>
+> [!div class="nextstepaction"]
+> [Open the WinUI 3 Gallery app and see Implicit Transitions in action](winui3gallery://item/PageTransition)
+
+[!INCLUDE [winui-3-gallery](../../../includes/winui-3-gallery.md)]
 
 ## Page refresh
 
@@ -39,15 +30,16 @@ The desired feeling is that the user has started over.
 
 ![page refresh animation](images/page-refresh.gif)
 
-The page refresh animation is represented by the [**EntranceNavigationTransitionInfoClass**](/uwp/api/windows.ui.xaml.media.animation.entrancenavigationtransitioninfo).
+The page refresh animation is represented by the [**EntranceNavigationTransitionInfo**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.entrancenavigationtransitioninfo) class.
 
 ```csharp
-// Explicitly play the page refresh animation
+// Explicitly play the page refresh animation.
 myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());
 
 ```
 
-**Note**: A [**Frame**](/uwp/api/windows.ui.xaml.controls.frame) automatically uses [**NavigationThemeTransition**](/uwp/api/windows.ui.xaml.media.animation.navigationthemetransition) to animate navigation between two pages. By default, the animation is page refresh.
+> [!NOTE]
+> A [**Frame**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.frame) automatically uses [**NavigationThemeTransition**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.navigationthemetransition) to animate navigation between two pages. By default, the animation is page refresh.
 
 ## Drill
 
@@ -57,10 +49,10 @@ The desired feeling is that the user has gone deeper into the app.
 
 ![drill animation](images/drill.gif)
 
-The drill animation is represented by the [**DrillInNavigationTransitionInfo**](/uwp/api/windows.ui.xaml.media.animation.drillinnavigationtransitioninfo) class.
+The drill animation is represented by the [**DrillInNavigationTransitionInfo**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.drillinnavigationtransitioninfo) class.
 
 ```csharp
-// Play the drill in animation
+// Play the drill in animation.
 myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());
 ```
 
@@ -71,19 +63,19 @@ Use horizontal slide to show that sibling pages appear next to each other. The [
 The desired feeling is that the user is navigating between pages that are next to each other. 
 
 ```csharp
-// Navigate to the right, ie. from LeftPage to RightPage
+// Navigate to the right, ie. from LeftPage to RightPage.
 myFrame.Navigate(typeof(RightPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight } );
 
-// Navigate to the left, ie. from RightPage to LeftPage
+// Navigate to the left, ie. from RightPage to LeftPage.
 myFrame.Navigate(typeof(LeftPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft } );
 ```
 
 ## Suppress
 
-To avoid playing any animation during navigation, use [**SuppressNavigationTransitionInfo**](/uwp/api/windows.ui.xaml.media.animation.suppressnavigationtransitioninfo) in the place of other **NavigationTransitionInfo** subtypes.
+To avoid playing any animation during navigation, use [**SuppressNavigationTransitionInfo**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.media.animation.suppressnavigationtransitioninfo) in the place of other **NavigationTransitionInfo** subtypes.
 
 ```csharp
-// Suppress the default animation
+// Suppress the default animation.
 myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());
 ```
 
@@ -98,4 +90,4 @@ This can be useful when you modify navigation behavior dynamically based on scre
 ## Related topics
 
 - [Navigate between two pages](../basics/navigate-between-two-pages.md)
-- [Motion in UWP apps](index.md)
+- [Motion in Windows](index.md)